/*
Theme Name: Syner
Theme URI: https://syner.es
Author: Dimetrics
Description: Tema custom de Syner Electronics — distribución de sistemas de energía fotovoltaica. Sistema de diseño congelado 2026-06: Roboto, dark navy + petrol + ámbar, grid 12 col.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: syner
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ====== Tokens del sistema de diseño (CONGELADO — no tocar sin aprobación) ====== */
:root {
	--s-dark:   #0F2A3F;
	--s-petrol: #155E80;
	--s-blue:   #8BC8E8;
	--s-amber:  #F5A800;
	--s-bg:     #F8FAFB;
	--s-gray:   #E8EDF0;
	--s-muted:  #5A7080;

	--s-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	--s-nav-h: 64px;
	--s-nav-h-compact: 52px;
	--s-container: 1280px;
	--s-radius: 8px;
	--s-shadow: 0 2px 12px rgba(15, 42, 63, .08);
	--s-shadow-hover: 0 6px 24px rgba(15, 42, 63, .14);
	--s-transition: .25s ease;
}

/* ====== Reset mínimo ====== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
	margin: 0;
	padding: 0;
}
ul[class], ol[class] { list-style: none; }
img, picture, video, canvas { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; }
a { color: var(--s-petrol); text-decoration: none; }

body {
	font-family: var(--s-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--s-dark);
	background: var(--s-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; line-height: 1.15; }
h4, h5, h6 { font-weight: 500; line-height: 1.3; }

/* ====== Contenedor ====== */
.container {
	max-width: var(--s-container);
	margin-inline: auto;
	padding-inline: 24px;
}

/* ====== Grid de 12 columnas ====== */
.grid-12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
}
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ====== Botones ====== */
.btn-primary,
.btn-secondary,
.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--s-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	padding: 14px 26px;
	border-radius: var(--s-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var(--s-transition), color var(--s-transition),
	            border-color var(--s-transition), transform var(--s-transition);
}
.btn-primary {
	background: var(--s-amber);
	color: var(--s-dark);
}
.btn-primary:hover {
	background: #ffb91f;
	color: var(--s-dark);
	transform: translateY(-1px);
}
.btn-secondary {
	background: var(--s-petrol);
	color: #fff;
}
.btn-secondary:hover { background: #1a729b; color: #fff; }
.btn-outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .8);
}
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* ====== Utilidades ====== */
.text-center { text-align: center; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* ====== Breakpoints de referencia ======
   móvil  <768px · tablet 768–1024px · desktop >1024px */
@media (max-width: 1024px) {
	.grid-12 { gap: 16px; }
}
@media (max-width: 767px) {
	.container { padding-inline: 16px; }
	:root { --s-nav-h: 56px; }
	/* En móvil el grid de 12 colapsa a bloques completos salvo .col-m-6 */
	.grid-12 > [class^="col-"] { grid-column: span 12; }
	.grid-12 > .col-m-6 { grid-column: span 6; }
}