/* ============================================================
   BASE.CSS
   Reset, tipografía global y utilidades compartidas en todo el sitio.
   ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* "clip" corta el desborde horizontal SIN crear un contenedor de
	   scroll, por lo que position: sticky sigue funcionando (con
	   overflow-x: hidden el header dejaba de ser sticky en móvil). */
	overflow-x: clip;
	max-width: 100%;
}

body { overflow-x: clip; }

/* Fallback para navegadores antiguos que no soportan "clip" */
@supports not (overflow-x: clip) {
	html { overflow-x: hidden; }
}

body {
	margin: 0;
	font-family: var(--gb-font-body);
	color: var(--gb-tinta);
	background: var(--gb-fondo);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	position: relative;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gb-font-display);
	margin: 0;
	color: var(--gb-tinta);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 4.4vw, 4.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

/* Respeta la preferencia de movimiento reducido en todo el sitio */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Foco visible consistente para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--gb-primario);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Texto solo para lectores de pantalla */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--gb-tinta);
	color: #fff;
	z-index: 100000;
	clip: auto;
	border-radius: var(--gb-radio-sm);
}

/* Íconos SVG inline: heredan tamaño de fuente por defecto */
svg { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

/* Contenedor central estándar */
.gb-container {
	max-width: var(--gb-ancho-maximo);
	margin: 0 auto;
	padding: 0 40px;
}
@media (max-width: 768px) {
	.gb-container { padding: 0 22px; }
}

/* Eyebrow / etiqueta pequeña tipo ficha técnica */
.gb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--gb-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gb-primario);
}
.gb-eyebrow::before {
	content: '';
	width: 20px;
	height: 1px;
	background: var(--gb-primario);
}

/* Botones: radios generosos, elevación premium */
.gb-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: 100px;
	font-family: var(--gb-font-body);
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: -0.01em;
	border: 1.5px solid transparent;
	transition: transform var(--gb-transicion), box-shadow var(--gb-transicion), background var(--gb-transicion), border-color var(--gb-transicion), color var(--gb-transicion);
	white-space: nowrap;
	position: relative;
}
.gb-btn svg { transition: transform var(--gb-transicion); }
.gb-btn:hover svg { transform: translateX(3px); }

.gb-btn-primario {
	background: var(--gb-degradado-acento);
	color: #fff;
	box-shadow: 0 8px 20px rgba(14, 143, 143, 0.28);
}
.gb-btn-primario:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(14, 143, 143, 0.36);
}
.gb-btn-primario:active { transform: translateY(0); }

.gb-btn-secundario {
	background: var(--gb-superficie);
	color: var(--gb-tinta);
	border-color: var(--gb-borde-fuerte);
}
.gb-btn-secundario:hover {
	border-color: var(--gb-primario);
	color: var(--gb-primario-oscuro);
	background: var(--gb-primario-tenue);
	transform: translateY(-2px);
}

.gb-btn-secundario--claro {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border-color: rgba(255,255,255,0.35);
}
.gb-btn-secundario--claro:hover {
	background: rgba(255,255,255,0.16);
	border-color: #fff;
	color: #fff;
}

.gb-btn-sm { padding: 11px 22px; font-size: 13.5px; }

.gb-eyebrow--claro { color: #7FE0D8; }
.gb-eyebrow--claro::before { background: #7FE0D8; }

/* Skip-link para accesibilidad de teclado */
.gb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}

/* ============================================================
   SCROLL REVEAL
   Estado inicial (oculto/desplazado) y estado visible, activados
   por theme.js vía IntersectionObserver. Si JS no carga por
   alguna razón, el contenido queda visible igual (ver más abajo).
   ============================================================ */
[data-gb-reveal].gb-reveal-init {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--gb-ease), transform 0.6s var(--gb-ease);
}
[data-gb-reveal].gb-reveal-visible {
	opacity: 1;
	transform: translateY(0);
}
/* Sin JS: el navegador nunca añade .gb-reveal-init, así que el
   contenido es visible por defecto — no hay riesgo de que quede
   oculto si algo falla al cargar el script. */