/* ==========================================================================
   GTC CrossFit — hoja de estilos del tema
   Paleta y jerarquía tomadas del Manual de Marca GTC 2024.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía de marca — Blauer Nue, de Webhance Studio.
   Licencia comercial de Envato Elements, código AKEFV79MDH, tomada a nombre
   del proyecto GTC CrossFit. El certificado vive en gtc-insumos/, fuera del
   webroot. Detalle y alcance en assets/fonts/LICENCIA.txt.

   El manual reserva Hanson Bold para las frases de impacto de marketing y esa
   fuente todavía no está licenciada; hasta entonces ese rol lo cubre Blauer
   Nue Heavy, el peso más contundente de la misma familia.

   Los rangos de peso son a propósito y cubren un tramo continuo: así el
   navegador nunca fabrica una negrita falsa. Un font-weight: 700 heredado de
   cualquier regla aterriza en SemiBold, que es un archivo real.

   Los archivos llevan un ?v= porque el hosting los sirve con max-age de 4h y
   Cloudflare los cachea: sin eso, un cambio en la fuente tarda horas en verse.
   Subir el número cada vez que se regeneren los .woff2.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Blauer Nue";
	src: url("../fonts/blauer-nue-300.woff2?v=2") format("woff2");
	font-weight: 100 300;    /* Light — cuerpo de texto */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Blauer Nue";
	src: url("../fonts/blauer-nue-500.woff2?v=2") format("woff2");
	font-weight: 301 500;    /* Medium — subtítulos y rótulos en mayúsculas */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Blauer Nue";
	src: url("../fonts/blauer-nue-600.woff2?v=2") format("woff2");
	font-weight: 501 800;    /* SemiBold — títulos, botones y precios */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Blauer Nue";
	src: url("../fonts/blauer-nue-900.woff2?v=2") format("woff2");
	font-weight: 801 1000;   /* Heavy — frases de impacto */
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colores de marca — hex exactos del manual */
	--naranja:      #EC6431;  /* Deep Carrot Orange, color principal */
	--naranja-hover:#CE632A;  /* Vivid Orange */
	--negro:        #000000;
	--eerie:        #1E1E1E;  /* Eerie Black */
	--olive:        #3A3837;  /* Black Olive */
	--silver:       #77726D;  /* Dark Silver */
	--cultured:     #F7F7F7;  /* Cultured */
	--antiflash:    #F2F1F4;  /* Anti-Flash White */
	--blanco:       #FFFFFF;

	/* Superficies */
	--fondo-claro:  var(--cultured);
	--fondo-oscuro: var(--eerie);
	--linea-clara:  #E2DFDB;
	--linea-oscura: #333130;

	/* Texto */
	--texto:        var(--eerie);
	--texto-suave:  #57534E;
	--texto-tenue:  var(--silver);

	/* Tipografía. Blauer Nue cubre toda la página; las tres variables se
	   mantienen porque marcan roles distintos del manual, no familias
	   distintas. Cuando el box licencie Hanson Bold entra sólo en
	   --fuente-titulo y el resto de la hoja no se toca. */
	--fuente-titulo: "Blauer Nue", ui-sans-serif, system-ui, sans-serif;
	--fuente-texto:  "Blauer Nue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fuente-dato:   "Blauer Nue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Medidas */
	--ancho: 1220px;
	--radio: 2px;
	--gutter: clamp(18px, 4vw, 40px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--fondo-claro);
	color: var(--texto);
	font-family: var(--fuente-texto);
	font-size: 17px;
	font-weight: 300;   /* Light: el peso que el manual asigna al cuerpo */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
	outline: 3px solid var(--naranja);
	outline-offset: 2px;
}

.contenedor {
	max-width: var(--ancho);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.solo-lectores {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Tipografía de marca
   -------------------------------------------------------------------------- */

/* Títulos: SemiBold, que es lo que fija la jerarquía del manual (título 70pt
   SemiBold). El nombre de plan va acá porque es texto de producto, y ahí el
   manual limita los pesos a Light, Regular, SemiBold y Bold. */
.titulo-seccion,
.plan__nombre {
	font-family: var(--fuente-titulo);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.02;
	text-wrap: balance;
}

/* Frases de impacto y cifras destacadas. El manual las reserva a Hanson Bold,
   siempre en mayúsculas; hasta tener esa licencia las sostiene Blauer Nue
   Heavy. Cuando llegue Hanson, basta agregar su @font-face y anteponerla en
   --fuente-titulo. */
.hero__titulo,
.banda__titulo,
.cifra__numero {
	font-family: var(--fuente-titulo);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.02;
	text-wrap: balance;
}

.titulo-seccion {
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	margin: 0 0 14px;
}

.epigrafe {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .74rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--naranja);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.epigrafe::before {
	content: "";
	width: 30px; height: 2px;
	background: var(--naranja);
	flex: none;
}

.bajada {
	margin: 0;
	font-weight: 500;   /* Medium: el peso de subtítulo en la jerarquía */
	max-width: 62ch;
	color: var(--texto-suave);
	font-size: 1.05rem;
}

.encabezado { margin-bottom: 44px; }

/* --------------------------------------------------------------------------
   Botones
   Texto NEGRO sobre naranja: 6,43:1 de contraste, frente a 3,26:1 del blanco,
   que no alcanza el mínimo AA. El manual de GTC exige AAA.
   -------------------------------------------------------------------------- */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border: 2px solid transparent;
	border-radius: var(--radio);
	font-family: var(--fuente-texto);
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.boton--principal {
	background: var(--naranja);
	color: var(--negro);
}
.boton--principal:hover,
.boton--principal:focus-visible {
	background: var(--naranja-hover);
	color: var(--negro);
}

.boton--contorno {
	background: transparent;
	border-color: currentColor;
	color: var(--blanco);
}
.boton--contorno:hover,
.boton--contorno:focus-visible {
	background: var(--blanco);
	color: var(--eerie);
}

.boton--contorno-oscuro {
	background: transparent;
	border-color: var(--eerie);
	color: var(--eerie);
}
.boton--contorno-oscuro:hover,
.boton--contorno-oscuro:focus-visible {
	background: var(--eerie);
	color: var(--blanco);
}

.boton--chico { padding: 11px 18px; font-size: .82rem; }
.boton--ancho { width: 100%; }

.icono-wa { width: 19px; height: 19px; flex: none; }

/* --------------------------------------------------------------------------
   Barra de anuncio
   -------------------------------------------------------------------------- */

.barra-anuncio {
	background: var(--naranja);
	color: var(--negro);
	padding: 9px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: .88rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.barra-anuncio__boton {
	background: var(--negro);
	color: var(--blanco);
	padding: 7px 14px;
	font-size: .74rem;
}
.barra-anuncio:hover .barra-anuncio__boton { background: var(--eerie); }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--eerie);
	color: var(--blanco);
	border-bottom: 1px solid var(--linea-oscura);
}

.cabecera__interior {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 74px;
}

.marca {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--naranja);
	flex: none;
}

.marca svg { width: 74px; height: auto; }

.marca__texto {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .58rem;
	line-height: 1.35;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	border-left: 1px solid var(--linea-oscura);
	padding-left: 12px;
}

.navegacion { margin-left: auto; }

.menu {
	display: flex;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu a {
	text-decoration: none;
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--blanco);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: border-color .18s ease, color .18s ease;
}
.menu a:hover, .menu a:focus-visible {
	color: var(--naranja);
	border-bottom-color: var(--naranja);
}

.cabecera .boton--principal { flex: none; }

.abrir-menu {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--linea-oscura);
	color: var(--blanco);
	padding: 9px 12px;
	border-radius: var(--radio);
	cursor: pointer;
	font-size: .8rem;
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--negro);
	color: var(--blanco);
	padding: clamp(70px, 12vw, 140px) 0 clamp(60px, 9vw, 110px);
	overflow: hidden;
}

.hero__fondo {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%; height: 100%;
	opacity: .38;
}

.hero__interior { position: relative; }

.hero__titulo {
	font-size: clamp(3rem, 12vw, 7.5rem);
	margin: 0 0 26px;
}

.hero__titulo span { color: var(--naranja); }

.hero__bajada {
	max-width: 46ch;
	font-size: clamp(1rem, 2vw, 1.15rem);
	color: var(--antiflash);
	margin: 0 0 32px;
}

.hero__acciones {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.hero__microcopy {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .76rem;
	letter-spacing: .08em;
	color: var(--texto-tenue);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Franja de foto + cifras
   -------------------------------------------------------------------------- */

.franja { position: relative; background: var(--negro); }

.franja__imagen {
	width: 100%;
	max-height: 620px;
	object-fit: cover;
}

.franja__epigrafe {
	position: absolute;
	left: var(--gutter);
	bottom: 18px;
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blanco);
	text-shadow: 0 1px 6px rgba(0,0,0,.85);
	margin: 0;
}

.cifras {
	background: var(--eerie);
	color: var(--blanco);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.cifra {
	padding: 34px 20px;
	text-align: center;
	border-left: 1px solid var(--linea-oscura);
}
.cifra:first-child { border-left: 0; }

.cifra__numero {
	display: block;
	font-size: clamp(2rem, 4.6vw, 3rem);
	color: var(--naranja);
	font-variant-numeric: tabular-nums;
}

.cifra__texto {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin-top: 6px;
	display: block;
}

/* --------------------------------------------------------------------------
   Bloques genéricos
   -------------------------------------------------------------------------- */

.bloque { padding: clamp(56px, 9vw, 104px) 0; }
.bloque--claro  { background: var(--fondo-claro); }
.bloque--blanco { background: var(--blanco); }
.bloque--oscuro { background: var(--eerie); color: var(--blanco); }

.bloque--oscuro .bajada { color: var(--antiflash); }

.grilla {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tarjeta {
	background: var(--blanco);
	border: 1px solid var(--linea-clara);
	border-radius: var(--radio);
	padding: 26px;
}

/* --------------------------------------------------------------------------
   Principios
   -------------------------------------------------------------------------- */

.principio__icono { color: var(--naranja); margin-bottom: 16px; }
.icono-principio { width: 30px; height: 30px; }

.principio__titulo {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.principio__texto { margin: 0; color: var(--texto-suave); font-size: .96rem; }

/* --------------------------------------------------------------------------
   Planes
   -------------------------------------------------------------------------- */

.selector {
	display: inline-flex;
	background: var(--eerie);
	border-radius: var(--radio);
	padding: 4px;
	margin-bottom: 18px;
	flex-wrap: wrap;
	gap: 2px;
}

.selector__opcion {
	background: transparent;
	border: 2px solid transparent;
	color: var(--blanco);
	padding: 10px 20px;
	border-radius: var(--radio);
	cursor: pointer;
	font-family: var(--fuente-texto);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.3;
	text-align: center;
}

.selector__opcion small {
	display: block;
	font-family: var(--fuente-dato);
	font-size: .62rem;
	letter-spacing: .08em;
	font-weight: 400;
	text-transform: none;
	color: var(--texto-tenue);
	margin-top: 2px;
}

.selector__opcion[aria-selected="true"] {
	background: var(--naranja);
	color: var(--negro);
	border-color: var(--negro);
}
.selector__opcion[aria-selected="true"] small { color: rgba(0,0,0,.72); }

.planes__nota {
	margin: 0 0 30px;
	color: var(--texto-suave);
	font-size: .95rem;
}
.planes__nota strong { color: var(--texto); }

.planes__grilla {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	align-items: stretch;
}

/* Columna flexible para que el botón quede al pie aunque las listas de
   "incluye" tengan distinto largo: si no, los botones bailan de altura y la
   grilla de precios se lee mal. */
.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--blanco);
	border: 1px solid var(--linea-clara);
	border-radius: var(--radio);
	padding: 26px 22px;
	height: 100%;
}

.plan__accion { margin-top: auto; padding-top: 22px; }

/* En Fidelidad las cajas son chicas y no necesitan empujar nada. */
.fidelidad__caja .plan__accion { margin-top: 14px; padding-top: 0; }

.plan--destacado { border-color: var(--naranja); }

.plan__etiqueta {
	position: absolute;
	top: -11px;
	left: 20px;
	background: var(--naranja);
	color: var(--negro);
	font-family: var(--fuente-dato);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: var(--radio);
}

.plan__nombre { font-size: 1.5rem; margin: 0 0 16px; }

.plan__precio {
	font-family: var(--fuente-dato);
	font-size: 1.65rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--texto);
	display: block;
	line-height: 1.15;
}
.plan__precio .moneda { font-size: .78rem; color: var(--texto-tenue); margin-right: 4px; }
.plan__precio .periodo { font-size: .72rem; color: var(--texto-tenue); font-weight: 400; }

.plan__antes {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .82rem;
	color: var(--texto-tenue);
	text-decoration: line-through;
	display: block;
	margin-bottom: 2px;
}

.plan__ahorro {
	background: #FBE9E2;
	color: #8A3A1E;
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .72rem;
	line-height: 1.4;
	padding: 7px 10px;
	border-radius: var(--radio);
	margin: 12px 0 0;
}

.plan__nota { font-size: .86rem; color: var(--texto-suave); margin: 10px 0 0; }

.plan__incluye {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.plan__incluye li {
	position: relative;
	padding-left: 24px;
	font-size: .9rem;
	color: var(--texto-suave);
}

.plan__incluye li::before {
	content: "";
	position: absolute;
	left: 2px; top: .42em;
	width: 11px; height: 6px;
	border-left: 2px solid var(--naranja);
	border-bottom: 2px solid var(--naranja);
	transform: rotate(-45deg);
}

/* Sin modalidad disponible para ese plan */
.plan__sin-precio { color: var(--texto-tenue); font-size: .9rem; }

/* --------------------------------------------------------------------------
   Plan Fidelidad
   -------------------------------------------------------------------------- */

.fidelidad {
	background: var(--eerie);
	color: var(--blanco);
	border-radius: var(--radio);
	padding: clamp(28px, 5vw, 52px);
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.1fr);
	align-items: center;
}

.fidelidad .titulo-seccion { color: var(--blanco); }
.fidelidad .bajada { color: var(--antiflash); }

.fidelidad__precios {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.fidelidad__caja {
	background: var(--negro);
	border: 1px solid var(--linea-oscura);
	border-radius: var(--radio);
	padding: 18px;
}

.fidelidad__nombre {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--naranja);
	margin: 0 0 8px;
}

.fidelidad__monto {
	font-family: var(--fuente-dato);
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: 0;
	line-height: 1.15;
}
.fidelidad__monto .moneda { font-size: .72rem; color: var(--texto-tenue); }
.fidelidad__periodo { font-size: .7rem; color: var(--texto-tenue); display: block; margin-top: 4px; }

/* --------------------------------------------------------------------------
   Banda de llamada a la acción
   -------------------------------------------------------------------------- */

.banda {
	background: var(--negro);
	color: var(--blanco);
	padding: 34px 0;
}

.banda__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
}

.banda__titulo { font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0 0 4px; }
.banda__texto { margin: 0; color: var(--antiflash); font-size: .96rem; }

/* --------------------------------------------------------------------------
   Sedes
   -------------------------------------------------------------------------- */

.sedes__grilla {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.sede {
	background: var(--blanco);
	border: 1px solid var(--linea-clara);
	border-radius: var(--radio);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sede__cabecera {
	position: relative;
	background: var(--eerie);
	color: var(--blanco);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-left: 4px solid var(--naranja);
	min-height: 62px;
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 9px,
		rgba(255,255,255,.035) 9px 18px
	);
}

.sede__numero {
	font-family: var(--fuente-titulo);
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sede__zona {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .62rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	text-align: right;
	line-height: 1.4;
}

.sede__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.sede__cuerpo { padding: 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.sede__nombre { font-size: 1.2rem; font-weight: 700; margin: 0; }
.sede__subtitulo { font-size: .88rem; color: var(--texto-tenue); margin: 0; }
.sede__direccion { font-size: .88rem; color: var(--texto-suave); margin: 6px 0 0; }

.sede__acciones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
}

.sede__acciones .boton { width: 100%; }
.sede__acciones .boton:only-child { grid-column: 1 / -1; }

.icono-pin { width: 15px; height: 15px; flex: none; }

/* --------------------------------------------------------------------------
   Reseñas
   -------------------------------------------------------------------------- */

.resena__estrellas {
	color: var(--naranja);
	letter-spacing: .18em;
	font-size: .9rem;
	margin: 0 0 12px;
}

.resena__texto {
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 600;
}

.resena__origen {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .64rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Beneficios
   -------------------------------------------------------------------------- */

.beneficio { display: flex; gap: 16px; align-items: flex-start; }

.beneficio__iniciales {
	flex: none;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--eerie);
	color: var(--naranja);
	display: grid;
	place-items: center;
	font-family: var(--fuente-dato);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.beneficio__tipo {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .62rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--naranja);
	margin: 0 0 3px;
}

.beneficio__nombre { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.beneficio__texto { margin: 0 0 12px; font-size: .93rem; color: var(--texto-suave); }

.marca-estado {
	display: inline-block;
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--radio);
	background: #E4EDE6;
	color: #2F5638;
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq { max-width: 860px; }

.faq__item {
	background: var(--blanco);
	border: 1px solid var(--linea-clara);
	border-radius: var(--radio);
	margin-bottom: 10px;
}

.faq__pregunta {
	cursor: pointer;
	list-style: none;
	padding: 18px 22px;
	font-weight: 700;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta::after {
	content: "+";
	color: var(--naranja);
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 400;
	flex: none;
}

.faq__item[open] .faq__pregunta::after { content: "–"; }

.faq__respuesta {
	padding: 0 22px 20px;
	color: var(--texto-suave);
	font-size: .96rem;
}
.faq__respuesta p:first-child { margin-top: 0; }
.faq__respuesta p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Pasos
   -------------------------------------------------------------------------- */

.pasos { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.paso__numero {
	font-family: var(--fuente-dato);
	font-size: .78rem;
	color: var(--naranja);
	font-weight: 700;
	letter-spacing: .1em;
	margin: 0 0 8px;
}

.paso__titulo { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; }
.paso__texto { margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contacto {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(280px, 1fr) minmax(300px, .9fr);
	align-items: center;
}

.contacto .titulo-seccion { color: var(--blanco); }

.formulario {
	background: var(--negro);
	border: 1px solid var(--linea-oscura);
	border-radius: var(--radio);
	padding: clamp(22px, 4vw, 34px);
	display: grid;
	gap: 18px;
}

.campo { display: grid; gap: 7px; }

.campo label {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.campo select {
	appearance: none;
	background: var(--eerie);
	border: 1px solid var(--linea-oscura);
	border-radius: var(--radio);
	color: var(--blanco);
	padding: 14px 16px;
	font-family: var(--fuente-texto);
	font-size: .98rem;
	width: 100%;
	background-image: linear-gradient(45deg, transparent 50%, var(--naranja) 50%),
	                  linear-gradient(135deg, var(--naranja) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.aviso-sin-whatsapp {
	background: #FBE9E2;
	border-left: 3px solid var(--naranja);
	color: #8A3A1E;
	padding: 14px 16px;
	border-radius: var(--radio);
	font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie {
	background: var(--negro);
	color: var(--blanco);
	padding: clamp(44px, 7vw, 76px) 0 34px;
}

.pie__interior {
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
}

.pie__marca svg { width: 92px; color: var(--naranja); margin-bottom: 16px; }
.pie__texto { color: var(--texto-tenue); font-size: .92rem; margin: 0; max-width: 42ch; }

.pie__titulo {
	font-family: var(--fuente-dato);
	font-weight: 500;
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin: 0 0 14px;
}

.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pie__lista a { text-decoration: none; font-size: .93rem; color: var(--antiflash); }
.pie__lista a:hover, .pie__lista a:focus-visible { color: var(--naranja); }

.pie__legal {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--linea-oscura);
	font-size: .8rem;
	color: var(--texto-tenue);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.pie__legal p { margin: 0; }

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */

.flotante {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 60;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;   /* glifo blanco sobre verde: es el botón oficial de WhatsApp */
	display: grid;
	place-items: center;
	box-shadow: 0 6px 20px rgba(0,0,0,.3);
	text-decoration: none;
	transition: transform .18s ease;
}
.flotante:hover, .flotante:focus-visible { transform: scale(1.06); }
.flotante .icono-wa { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   Adaptación a pantallas chicas
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.fidelidad, .contacto { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.navegacion {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--eerie);
		border-bottom: 1px solid var(--linea-oscura);
		padding: 18px var(--gutter) 24px;
	}
	.navegacion.abierta { display: block; }
	.menu { flex-direction: column; gap: 4px; }
	.menu a { display: block; padding: 11px 0; }
	.abrir-menu { display: block; }
	.cabecera .boton--principal { display: none; }
	.cabecera__interior { position: relative; }
	.marca__texto { display: none; }
}

/* El pie tiene una primera columna ancha y el resto automáticas. En pantallas
   angostas la suma de mínimos supera el ancho disponible y la última columna se
   sale de la pantalla: por eso pasa a una sola columna antes de que eso ocurra. */
@media (max-width: 860px) {
	.pie__interior { grid-template-columns: 1fr; gap: 30px; }
	.pie__texto { max-width: none; }
}

@media (max-width: 620px) {
	body { font-size: 16px; }
	.cifras { grid-template-columns: 1fr; }
	.cifra { border-left: 0; border-top: 1px solid var(--linea-oscura); }
	.cifra:first-child { border-top: 0; }
	.sede__acciones { grid-template-columns: 1fr; }
	.hero__acciones .boton { width: 100%; }
	.banda__interior { flex-direction: column; align-items: flex-start; }

	/* Barra de anuncio: en el celular ocupaba tres líneas (texto + botón en
	   bloque aparte). Se oculta el botón y la barra entera queda tocable. */
	.barra-anuncio {
		padding: 8px 16px;
		font-size: .78rem;
		line-height: 1.35;
		gap: 0;
	}
	.barra-anuncio__boton { display: none; }

	/* Selector de modalidad: al envolverse quedaban dos opciones sueltas,
	   sin caja y descentradas. En vertical cada una ocupa el ancho completo. */
	.selector {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		gap: 4px;
	}
	.selector__opcion { width: 100%; padding: 12px 14px; }

	/* El botón flotante tapaba la línea legal del pie. */
	.pie__legal { padding-bottom: 68px; }
	.flotante { right: 14px; bottom: 14px; width: 52px; height: 52px; }
	.flotante .icono-wa { width: 26px; height: 26px; }
}

@media print {
	.cabecera, .barra-anuncio, .flotante, .banda { display: none; }
}