@charset "UTF-8";
/* ==========================================================================
   Loubet 2026 — sistema de diseño
   Paleta extraída del logotipo contando píxeles: azul petróleo #10596E (57 %)
   y arena #D4C3A4 (35 %). Todo lo demás se deriva de esos dos y está
   verificado contra WCAG AA. Ver docs/02-DISENO.md para la tabla completa.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
	/* Tintas del logotipo */
	--petroleo:        #10596E;   /* 7.85:1 sobre blanco  */
	--petroleo-medio:  #0B4356;   /* 10.76:1 sobre blanco */
	--petroleo-hondo:  #062B37;
	--arena:           #D4C3A4;   /* 10.67:1 sobre tinta  */
	--arena-clara:     #E4D6BC;
	--arena-tinta:     #8C7247;   /* 4.55:1 sobre blanco — único arena válido para texto chico */

	/* Derivados de frío */
	--hielo:           #17A2C4;   /* solo grande o gráfico sobre claro */
	--hielo-claro:     #4FD3EC;
	--hielo-tinta:     #0E7F9B;   /* 4.64:1 sobre blanco — enlaces */

	/* Neutros */
	--tinta:           #05161C;
	--tinta-suave:     #123240;
	--gris:            #4E6672;
	--gris-claro:      #7C929C;
	--linea:           #DFE6E9;
	--linea-oscura:    rgba(212, 195, 164, .22);
	--crema:           #FBF7F0;
	--crema-honda:     #F3ECE0;
	--blanco:          #FFFFFF;

	/* Papeles */
	--papel:           var(--blanco);
	--papel-alt:       var(--crema);
	--papel-noche:     var(--petroleo-hondo);

	/* Texto */
	--texto:           var(--tinta);
	--texto-suave:     var(--gris);
	--texto-noche:     #EAF2F5;
	--texto-noche-suave: rgba(234, 242, 245, .74);

	/* Tipografía */
	--tipo-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--tipo-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Escala fluida */
	--t-xs:   clamp(.75rem,  .72rem + .12vw, .8125rem);
	--t-sm:   clamp(.875rem, .85rem + .12vw, .9375rem);
	--t-base: clamp(1rem,    .96rem + .2vw,  1.0625rem);
	--t-md:   clamp(1.125rem, 1.06rem + .32vw, 1.3125rem);
	--t-lg:   clamp(1.375rem, 1.2rem + .78vw, 1.875rem);
	--t-xl:   clamp(1.75rem, 1.42rem + 1.6vw, 2.75rem);
	--t-2xl:  clamp(2.25rem, 1.6rem + 3.1vw, 4rem);
	--t-3xl:  clamp(2.4rem, 1.5rem + 3.9vw, 4.6rem);

	/* Ritmo */
	--e1: .5rem;  --e2: 1rem;   --e3: 1.5rem;  --e4: 2rem;
	--e5: 3rem;   --e6: 4rem;   --e7: 6rem;    --e8: 8rem;
	--seccion: clamp(3.5rem, 2rem + 6vw, 7rem);
	--ancho: 76rem;
	--ancho-angosto: 46rem;
	--radio: 14px;
	--radio-sm: 9px;
	--radio-lg: 26px;

	/* Sombras: azuladas, no grises */
	--sombra-1: 0 1px 2px rgba(6, 43, 55, .06), 0 2px 8px rgba(6, 43, 55, .05);
	--sombra-2: 0 2px 6px rgba(6, 43, 55, .07), 0 12px 32px rgba(6, 43, 55, .09);
	--sombra-3: 0 8px 20px rgba(6, 43, 55, .10), 0 30px 60px rgba(6, 43, 55, .16);

	/* Movimiento */
	--curva: cubic-bezier(.22, 1, .36, 1);
	--curva-suave: cubic-bezier(.4, 0, .2, 1);
	--rapido: .22s;
	--medio: .45s;
	--lento: .9s;
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }   /* gana a cualquier display propio */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--texto);
	font-family: var(--tipo-texto);
	font-size: var(--t-base);
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
	font-family: var(--tipo-titulo);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.028em;
	margin: 0 0 var(--e2);
	text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); letter-spacing: -.018em; }
p  { margin: 0 0 var(--e2); text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--hielo-tinta); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--petroleo); }

:focus-visible {
	outline: 3px solid var(--hielo);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--arena); color: var(--tinta); }

.saltar {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--petroleo); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }

.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;
}

/* --- 3. Utilidades ------------------------------------------------------ */
.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.envoltura--angosta { width: min(100% - 2.5rem, var(--ancho-angosto)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.seccion--alt { background: var(--papel-alt); }
.seccion--noche { background: var(--papel-noche); color: var(--texto-noche); }
.seccion--noche h1, .seccion--noche h2, .seccion--noche h3 { color: #fff; }
.seccion--noche p { color: var(--texto-noche-suave); }

.centrado { text-align: center; }
.medida { max-width: 62ch; }
.medida-centro { max-width: 62ch; margin-inline: auto; }

/* Antetítulo con guion y punto de hielo */
.antetitulo {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--tipo-texto);
	font-size: var(--t-xs); font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--arena-tinta);
	margin-bottom: var(--e2);
}
.antetitulo::before {
	content: ""; width: 26px; height: 2px; background: var(--arena); border-radius: 2px;
}
.seccion--noche .antetitulo { color: var(--arena); }
.seccion--noche .antetitulo::before { background: var(--hielo); }

/* Palabra destacada con degradado. El degradado se declara SIEMPRE en el
   propio elemento: un hijo con transform no hereda background-clip del padre. */
.destello {
	font-style: normal;
	background: linear-gradient(96deg, var(--hielo-claro) 0%, var(--arena) 55%, var(--hielo-claro) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.destello--claro {
	font-style: normal;      /* va sobre un <em>, que de fábrica es cursiva */
	background: linear-gradient(96deg, var(--petroleo) 0%, var(--hielo-tinta) 50%, var(--arena-tinta) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
/* Al partir un titular en palabras, el <em> padre pintaría su degradado como
   caja detrás de los hijos inline-block. Esta clase se lo quita. */
.destello--vaciado { background: none !important; }

/* --- 4. Botones --------------------------------------------------------- */
.boton {
	--fondo: var(--petroleo);
	--tinta-boton: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	font-family: var(--tipo-texto);
	font-size: var(--t-sm); font-weight: 650; letter-spacing: .005em;
	padding: .95rem 1.6rem;
	border: 0; border-radius: 999px;
	background: var(--fondo); color: var(--tinta-boton);
	text-decoration: none; cursor: pointer;
	position: relative; overflow: hidden; isolation: isolate;
	transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background var(--rapido) var(--curva-suave);
	box-shadow: var(--sombra-1);
}
.boton::after {                       /* barrido de luz al pasar el puntero */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 46%, transparent 68%);
	transform: translateX(-120%);
	transition: transform .62s var(--curva);
}
.boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); color: var(--tinta-boton); }
.boton:hover::after { transform: translateX(120%); }
.boton:active { transform: translateY(0); }

.boton--arena  { --fondo: var(--arena); --tinta-boton: var(--tinta); }   /* 10.67:1 */
.boton--hielo  { --fondo: var(--hielo-tinta); --tinta-boton: #fff; }
.boton--claro  { --fondo: #fff; --tinta-boton: var(--petroleo); }
.boton--linea {
	--fondo: transparent; --tinta-boton: var(--petroleo);
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.boton--linea:hover { background: var(--petroleo); --tinta-boton: #fff; box-shadow: var(--sombra-2); }
.boton--linea-clara {
	--fondo: transparent; --tinta-boton: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.boton--linea-clara:hover { background: #fff; --tinta-boton: var(--petroleo); }
.boton--grande { padding: 1.1rem 2rem; font-size: var(--t-base); }
.boton--bloque { width: 100%; }

/* Enlace con flecha que avanza */
.enlace-flecha {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 600; font-size: var(--t-sm);
	color: var(--petroleo); text-decoration: none;
}
.enlace-flecha svg { transition: transform var(--rapido) var(--curva); }
.enlace-flecha:hover svg { transform: translateX(5px); }
.seccion--noche .enlace-flecha { color: var(--arena); }

/* --- 5. Encabezado ------------------------------------------------------ */
.cabecera {
	position: fixed; inset: 0 0 auto; z-index: 100;
	transition: background var(--medio) var(--curva-suave), box-shadow var(--medio) var(--curva-suave), transform var(--medio) var(--curva);
}
.cabecera__barra {
	display: flex; align-items: center; gap: var(--e3);
	padding-block: 1rem;
}
.cabecera__logo { display: flex; align-items: center; flex-shrink: 0; }
.cabecera__logo img { width: clamp(110px, 12vw, 152px); }
.cabecera__logo .logo--oscuro { display: block; }
.cabecera__logo .logo--claro  { display: none; }

/* Estado sólido: al bajar, o en páginas sin hero */
.cabecera.es-solida,
.cabecera.es-fija {
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 var(--linea), 0 8px 28px rgba(6, 43, 55, .07);
}
.cabecera.es-solida .logo--oscuro,
.cabecera.es-fija   .logo--oscuro { display: none; }
.cabecera.es-solida .logo--claro,
.cabecera.es-fija   .logo--claro  { display: block; }
.cabecera.es-oculta { transform: translateY(-102%); }

.menu { display: flex; align-items: center; gap: .35rem; margin-left: auto; list-style: none; padding: 0; }
.menu > li { position: relative; }
.menu a {
	display: block; padding: .55rem .82rem;
	font-size: var(--t-sm); font-weight: 550;
	color: #fff; text-decoration: none; border-radius: 8px;
	transition: color var(--rapido), background var(--rapido);
	text-shadow: 0 1px 12px rgba(6, 43, 55, .45);
}
.cabecera.es-solida .menu a,
.cabecera.es-fija   .menu a { color: var(--tinta-suave); text-shadow: none; }
.menu a:hover { background: rgba(255,255,255,.16); }
.cabecera.es-solida .menu a:hover,
.cabecera.es-fija   .menu a:hover { background: var(--crema-honda); color: var(--petroleo); }
.menu .actual > a { color: var(--arena); }
.cabecera.es-solida .menu .actual > a,
.cabecera.es-fija   .menu .actual > a { color: var(--petroleo); background: var(--crema-honda); }

/* Submenú */
.menu .tiene-hijos > a::after {
	content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .45rem;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--rapido) var(--curva);
}
.menu .tiene-hijos:hover > a::after,
.menu .tiene-hijos:focus-within > a::after { transform: translateY(1px) rotate(225deg); }

.submenu {
	position: absolute; top: calc(100% + .5rem); left: 50%;
	min-width: 20rem; padding: .55rem; margin: 0; list-style: none;
	background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-3);
	opacity: 0; visibility: hidden;
	transform: translateX(-50%) translateY(-8px) scale(.97);
	transform-origin: top center;
	transition: opacity var(--rapido) var(--curva-suave), transform var(--medio) var(--curva), visibility var(--rapido);
}
.menu li:hover > .submenu,
.menu li:focus-within > .submenu {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1);
}
.submenu a {
	color: var(--tinta-suave) !important; text-shadow: none;
	padding: .6rem .8rem; border-radius: 9px; font-weight: 500;
}
.submenu a:hover { background: var(--crema-honda) !important; color: var(--petroleo) !important; }
.submenu .submenu__nota { display: block; font-size: var(--t-xs); color: var(--gris-claro); font-weight: 400; margin-top: .1rem; }

.cabecera__acciones { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.cabecera__tel {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: var(--t-sm); font-weight: 650; color: #fff; text-decoration: none;
	text-shadow: 0 1px 12px rgba(6, 43, 55, .45);
}
.cabecera.es-solida .cabecera__tel,
.cabecera.es-fija   .cabecera__tel { color: var(--petroleo); text-shadow: none; }

/* Botón hamburguesa */
.hamburguesa {
	display: none; width: 46px; height: 46px; padding: 0;
	background: transparent; border: 0; cursor: pointer; border-radius: 10px;
}
.hamburguesa span {
	display: block; width: 22px; height: 2px; margin: 5px auto;
	background: #fff; border-radius: 2px;
	transition: transform var(--medio) var(--curva), opacity var(--rapido);
}
.cabecera.es-solida .hamburguesa span,
.cabecera.es-fija   .hamburguesa span,
.menu-abierto .hamburguesa span { background: var(--petroleo); }
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 6. Hero panorámico 3D ---------------------------------------------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	isolation: isolate;
	background: var(--petroleo-hondo);
	overflow: hidden;
	/* La perspectiva vive aquí: es lo que da profundidad real a las capas */
	perspective: 1400px;
	perspective-origin: 50% 45%;
}

.hero__escena {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	z-index: 0;
}

.hero__lamina {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.05s var(--curva-suave), visibility 1.05s;
}
.hero__lamina.es-activa { opacity: 1; visibility: visible; }

/* La foto es más ancha que la pantalla: eso es lo panorámico. Se mueve en Z y
   en X, así que al cambiar de diapositiva el ojo cruza el plano de la imagen.

   El sobredimensionado no es decorativo. Al empujar la foto hacia el fondo
   (translateZ negativo), la perspectiva la ENCOGE en pantalla: con 128 % de
   ancho quedaba una franja del fondo descubierta en el borde derecho. Con
   148 % de ancho y 132 % de alto sigue cubriendo incluso con el paralaje del
   puntero al máximo. */
.hero__foto {
	position: absolute;
	top: -16%; left: -24%;
	width: 148%; height: 132%;
	/* Sin esto no sirve de nada pedir 148 %: la regla base
	   `img { max-width: 100%; height: auto }` la recorta al ancho del padre y
	   le tira el alto. Fue justo lo que dejaba una franja de fondo a la
	   derecha del hero. */
	max-width: none;
	object-fit: cover;
	transform: translate3d(0, 0, -230px) scale(1.2);
	transform-origin: 50% 50%;
	transition: transform 1.4s var(--curva), filter 1.4s var(--curva-suave);
	filter: saturate(.86) contrast(1.05) brightness(.88);
	will-change: transform;
}
.hero__lamina.es-activa .hero__foto {
	transform: translate3d(0, 0, -140px) scale(1.06);
}
/* Deriva panorámica lenta mientras la diapositiva está al frente */
.hero__lamina.es-activa .hero__foto { animation: derivaPanoramica 17s var(--curva-suave) forwards; }
@keyframes derivaPanoramica {
	from { transform: translate3d(-2.2%, 0, -150px) scale(1.10); }
	to   { transform: translate3d( 2.2%, .8%, -110px) scale(1.16); }
}
/* Entrando desde el fondo / saliendo hacia el frente */
.hero__lamina.va-saliendo .hero__foto { transform: translate3d(0, 0, 190px) scale(1.34); }

/* Velos. Son tres capas y cada una hace un trabajo distinto:
   1) el tinte de hielo arriba a la derecha, que da el color de marca
   2) un velo lateral que oscurece justo donde va el texto, porque la foto de
      cada diapositiva es distinta y no se puede confiar en que sea oscura
   3) el degradado vertical que asienta la composición y funde con la sección
      siguiente. Sin la capa 2 el titular blanco se perdía sobre las fotos
      claras, que fue exactamente lo que pasó con la del almacén refrigerado. */
/* Los velos NO viven dentro de .hero__escena.
   Estuvieron ahí y el resultado fue que el navegador los pintaba por detrás de
   la fotografía: dentro de un contexto 3D el orden de pintado lo decide la
   profundidad de cada capa, y ahí entran en juego la opacidad en transición y
   el `will-change` de la foto. Fuera de la escena son dos capas 2D normales
   apiladas con z-index, que es determinista y no cuesta nada. */
.hero__velo {
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(120% 85% at 84% 4%, rgba(23, 162, 196, .26) 0%, transparent 54%),
		linear-gradient(100deg, rgba(4, 32, 41, .88) 0%, rgba(4, 32, 41, .74) 30%, rgba(4, 32, 41, .38) 56%, rgba(4, 32, 41, .12) 78%, rgba(4, 32, 41, .30) 100%),
		linear-gradient(180deg, rgba(6, 43, 55, .48) 0%, rgba(6, 43, 55, .08) 28%, rgba(6, 43, 55, .16) 60%, rgba(6, 43, 55, .78) 100%);
}
@media (max-width: 62rem) {
	/* En vertical el texto ocupa todo el ancho: el velo se aplana. */
	.hero__velo {
		background:
			radial-gradient(120% 70% at 80% 4%, rgba(23, 162, 196, .24) 0%, transparent 58%),
			linear-gradient(180deg, rgba(4, 32, 41, .82) 0%, rgba(4, 32, 41, .62) 40%, rgba(4, 32, 41, .70) 70%, rgba(4, 32, 41, .92) 100%);
	}
}
.hero__rejilla {
	position: absolute; inset: 0; z-index: 2;
	opacity: .16;
	background-image:
		linear-gradient(var(--arena) 1px, transparent 1px),
		linear-gradient(90deg, var(--arena) 1px, transparent 1px);
	background-size: 84px 84px;
	-webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 12%, transparent 76%);
	mask-image: radial-gradient(72% 62% at 50% 42%, #000 12%, transparent 76%);
}

/* Contenido: vive por delante del plano de la imagen */
.hero__contenido {
	position: relative; z-index: 3;
	align-self: center;
	width: min(100% - 2.5rem, var(--ancho));
	margin-inline: auto;
	padding-block: clamp(7rem, 14vh, 11rem) clamp(8rem, 18vh, 12rem);
	transform-style: preserve-3d;
}
.hero__texto { max-width: min(46rem, 92%); }
/* Los paneles inactivos se sacan del flujo y se anclan ARRIBA. Sin `top: 0`
   toman su posición estática, que es debajo del panel activo: durante el cruce
   de opacidad el panel que salía aparecía abajo, encima de los controles. */
.hero__panel {
	opacity: 0; visibility: hidden; position: absolute; inset-inline: 0; top: 0;
	transition: opacity .5s var(--curva-suave), visibility .5s;
}
.hero__panel.es-activo { opacity: 1; visibility: visible; position: relative; }

.hero__etiqueta {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .42rem .95rem .42rem .7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(212, 195, 164, .35);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	color: var(--arena);
	font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	margin-bottom: var(--e3);
}
.hero__etiqueta::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--hielo-claro);
	box-shadow: 0 0 0 0 rgba(79, 211, 236, .6);
	animation: latido 2.6s var(--curva-suave) infinite;
}
@keyframes latido {
	0%   { box-shadow: 0 0 0 0 rgba(79, 211, 236, .55); }
	70%  { box-shadow: 0 0 0 11px rgba(79, 211, 236, 0); }
	100% { box-shadow: 0 0 0 0 rgba(79, 211, 236, 0); }
}

.hero__titulo {
	font-size: var(--t-3xl);
	color: #fff;
	line-height: .98;
	letter-spacing: -.035em;
	margin-bottom: var(--e3);
	text-shadow: 0 2px 40px rgba(6, 43, 55, .5);
}
.hero__entrada {
	font-size: var(--t-md);
	color: rgba(255, 255, 255, .88);
	max-width: 46ch;
	margin-bottom: var(--e4);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Palabras del titular: cada una sube desde su propia rendija.
   `white-space: nowrap` es indispensable: una palabra puede contener un <em>
   de varias palabras (el destello viaja entero para no romper su degradado), y
   si se partiera por dentro, el `overflow: hidden` de la rendija recortaría el
   segundo renglón. */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; }
.palabra > span {
	display: inline-block;
	transform: translateY(105%) rotate(3deg);
	opacity: 0;
	transition: transform .82s var(--curva), opacity .5s var(--curva-suave);
	transition-delay: var(--retraso, 0ms);
}
.es-activo .palabra > span,
.se-ve .palabra > span { transform: translateY(0) rotate(0); opacity: 1; }

/* Escalonado del resto del panel */
.hero__panel .hero__etiqueta,
.hero__panel .hero__entrada,
.hero__panel .hero__acciones {
	opacity: 0; transform: translateY(22px);
	transition: opacity .6s var(--curva-suave), transform .8s var(--curva);
}
.hero__panel.es-activo .hero__etiqueta { opacity: 1; transform: none; transition-delay: .08s; }
.hero__panel.es-activo .hero__entrada  { opacity: 1; transform: none; transition-delay: .42s; }
.hero__panel.es-activo .hero__acciones { opacity: 1; transform: none; transition-delay: .54s; }

/* Controles del hero */
.hero__controles {
	position: absolute; z-index: 4;
	left: 0; right: 0; bottom: clamp(1.6rem, 4vh, 2.8rem);
	width: min(100% - 2.5rem, var(--ancho));
	margin-inline: auto;
	display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3);
	flex-wrap: wrap;
}
.hero__pasos { display: flex; gap: .7rem; flex: 1 1 20rem; max-width: 34rem; }
.paso {
	flex: 1; min-width: 0; padding: 0; background: transparent;
	border: 0; cursor: pointer; text-align: left; color: rgba(255,255,255,.62);
	font-family: var(--tipo-texto); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	transition: color var(--rapido);
}
.paso:hover { color: #fff; }
.paso__riel {
	display: block; height: 3px; border-radius: 3px; margin-bottom: .55rem;
	background: rgba(255, 255, 255, .22); overflow: hidden;
}
.paso__avance {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--hielo-claro), var(--arena));
	border-radius: 3px;
}
.paso.es-activo { color: #fff; }
.paso.es-activo .paso__avance { animation: avanzar var(--duracion, 7s) linear forwards; }
.paso.es-vista .paso__avance { width: 100%; }
@keyframes avanzar { from { width: 0; } to { width: 100%; } }
.hero.esta-en-pausa .paso.es-activo .paso__avance { animation-play-state: paused; }

.hero__flechas { display: flex; gap: .55rem; }
.flecha {
	width: 48px; height: 48px; display: grid; place-items: center;
	border-radius: 50%; cursor: pointer; color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .26);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background var(--rapido), transform var(--rapido) var(--curva), border-color var(--rapido);
}
.flecha:hover { background: rgba(255,255,255,.22); transform: scale(1.07); border-color: var(--arena); }


/* --- 7. Tarjetas -------------------------------------------------------- */
.rejilla { display: grid; gap: var(--e3); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* Para conjuntos de seis: con la rejilla de 17rem caben cuatro columnas y
   quedaba una segunda fila de dos, que se lee como si faltara algo. */
.rejilla--tercios { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.tarjeta {
	position: relative;
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	overflow: hidden;
	text-decoration: none; color: inherit;
	transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva), border-color var(--medio);
}
a.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-3); border-color: transparent; }
.tarjeta__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--crema-honda); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
a.tarjeta:hover .tarjeta__foto img { transform: scale(1.07); }
.tarjeta__foto::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(170deg, rgba(6,43,55,0) 42%, rgba(6,43,55,.62) 100%);
}
.tarjeta__cuerpo { padding: var(--e3); display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.tarjeta__cuerpo h3 { font-size: var(--t-md); margin: 0; }
.tarjeta__cuerpo p { color: var(--texto-suave); font-size: var(--t-sm); margin: 0; }
.tarjeta__pie { margin-top: auto; padding-top: var(--e2); }

/* Contador esquinado sobre la foto */
.tarjeta__indice {
	position: absolute; z-index: 2; left: var(--e2); top: var(--e2);
	font-family: var(--tipo-titulo); font-size: var(--t-xs); font-weight: 700;
	color: var(--tinta); background: var(--arena);
	padding: .25rem .6rem; border-radius: 999px; letter-spacing: .06em;
}

/* Tarjeta de diferenciador, sin foto */
.baza {
	position: relative;
	padding: var(--e4) var(--e3) var(--e3);
	background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
	transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.baza:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.baza__icono {
	width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: 12px; margin-bottom: var(--e2);
	background: linear-gradient(140deg, var(--petroleo), var(--hielo-tinta));
	color: #fff;
}
.baza h3 { font-size: var(--t-base); font-weight: 700; letter-spacing: -.01em; margin-bottom: .4rem; }
.baza p  { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.seccion--noche .baza {
	background: rgba(255,255,255,.045); border-color: var(--linea-oscura);
}
.seccion--noche .baza h3 { color: #fff; }
.seccion--noche .baza p  { color: var(--texto-noche-suave); }
.seccion--noche .baza__icono { background: linear-gradient(140deg, var(--hielo), var(--arena)); color: var(--tinta); }

/* --- 8. Cifras ---------------------------------------------------------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--e3); }
.cifra { text-align: center; padding: var(--e2); }
.cifra__dato {
	display: block;
	font-family: var(--tipo-titulo); font-weight: 800;
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
	line-height: 1; letter-spacing: -.04em;
	background: linear-gradient(120deg, var(--arena) 0%, var(--hielo-claro) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
	margin-bottom: .5rem;
}
.cifra__texto { font-size: var(--t-sm); color: var(--texto-noche-suave); margin: 0; }

/* --- 9. Bloque de dos columnas ------------------------------------------ */
.dupla {
	display: grid; gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: center;
}
.dupla--invertida > *:first-child { order: 2; }
@media (max-width: 60rem) { .dupla--invertida > *:first-child { order: 0; } }

.marco {
	position: relative; border-radius: var(--radio-lg); overflow: hidden;
	box-shadow: var(--sombra-3);
	transform: perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
	transition: transform var(--lento) var(--curva);
}
.marco:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); }
.marco--derecha { transform: perspective(1200px) rotateY(4deg) rotateX(1.5deg); }
.marco img { width: 100%; }
.marco::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(150deg, rgba(23,162,196,.14), transparent 55%);
	pointer-events: none;
}
/* Sello sobre la imagen */
.marco__sello {
	position: absolute; z-index: 2; right: var(--e3); bottom: var(--e3);
	background: rgba(6, 43, 55, .82);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	color: #fff; padding: .9rem 1.2rem; border-radius: 12px;
	border: 1px solid rgba(212,195,164,.3);
	font-size: var(--t-xs); line-height: 1.4; max-width: 15rem;
}
.marco__sello strong { display: block; font-family: var(--tipo-titulo); font-size: var(--t-md); color: var(--arena); }

/* Lista con palomita */
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.lista-check li { position: relative; padding-left: 2rem; font-size: var(--t-sm); }
.lista-check li::before {
	content: ""; position: absolute; left: 0; top: .38em;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--arena);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lista-check li::after {
	content: ""; position: absolute; left: 6px; top: .72em;
	width: 6px; height: 3px;
	border-left: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
	transform: rotate(-45deg);
}
.seccion--noche .lista-check li { color: var(--texto-noche-suave); }

/* --- 10. Marcas --------------------------------------------------------- */
/* Las celdas vacías de la última fila se veían como un bloque gris, porque el
   truco de «hueco de 1px sobre un contenedor de color» pinta el fondo del
   contenedor allí donde no hay celda. Con el fondo blanco y la línea dibujada
   como sombra de cada celda, lo que sobra queda en blanco. */
.marcas {
	display: grid; gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
	background: #fff; border: 1px solid var(--linea);
	border-radius: var(--radio); overflow: hidden;
}
.marca {
	background: #fff; box-shadow: 0 0 0 1px var(--linea);
	padding: var(--e3) var(--e2) var(--e2);
	display: grid; place-items: center; gap: .5rem; text-align: center;
	transition: background var(--rapido), transform var(--rapido) var(--curva);
}
.marca:hover { background: var(--crema); transform: scale(1.03); z-index: 1; box-shadow: var(--sombra-2); }

/* Los logotipos llegan de 19 fabricantes distintos: colores que chocan entre
   sí y con la paleta. En reposo van en escala de grises y algo apagados, que
   es lo que los hace leerse como un conjunto; al pasar el puntero recupera su
   color el que se está mirando. */
.marca__logo {
	width: 100%; max-width: 190px; height: auto;
	filter: grayscale(1) contrast(.85) opacity(.62);
	transition: filter var(--medio) var(--curva-suave), transform var(--medio) var(--curva);
}
.marca:hover .marca__logo { filter: none; transform: scale(1.04); }

/* Respaldo para las marcas cuyo archivo todavía no llega: mismo peso visual
   que un logotipo, para que la rejilla no se vea incompleta. */
/* Pesa lo mismo que un logotipo en escala de grises: si se deja más oscuro,
   los respaldos gritan más que las marcas de verdad. */
.marca__palabra {
	display: grid; place-items: center;
	width: 100%; max-width: 190px; min-height: 62px;
	font-family: var(--tipo-titulo); font-weight: 800;
	font-size: var(--t-sm); letter-spacing: .06em;
	color: var(--gris-claro); opacity: .72;
	transition: color var(--medio), opacity var(--medio);
}
.marca:hover .marca__palabra { color: var(--petroleo); opacity: 1; }

.marca__linea { font-size: var(--t-xs); color: var(--gris-claro); }

/* Cinta de marcas en movimiento, sobre fondo oscuro */
.cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta__pista { display: flex; align-items: center; gap: var(--e5); width: max-content; animation: correrCinta 58s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__marca { display: grid; place-items: center; height: 46px; }
/* Sobre el azul petróleo los logotipos van en blanco: `brightness(0) invert(1)`
   aplana cualquier logotipo a negro y luego lo invierte a blanco puro, sin
   importar de qué color venga. */
.marca__logo--cinta {
	width: auto; max-width: none; height: 46px;
	filter: brightness(0) invert(1) opacity(.55);
	transition: filter var(--medio) var(--curva-suave);
}
.cinta__marca:hover .marca__logo--cinta { filter: brightness(0) invert(1) opacity(1); }
.cinta__pista .marca__palabra {
	min-height: 0; width: auto; max-width: none;
	color: rgba(212, 195, 164, .62); opacity: 1;
	white-space: nowrap; font-size: var(--t-md);
}
@keyframes correrCinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- 11. Acordeón (FAQ) ------------------------------------------------- */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__boton {
	width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e2);
	padding: 1.4rem 0; background: transparent; border: 0; cursor: pointer;
	font-family: var(--tipo-titulo); font-size: var(--t-md); font-weight: 700;
	letter-spacing: -.015em; color: var(--texto); text-align: left; line-height: 1.3;
}
.acordeon__signo {
	flex-shrink: 0; width: 30px; height: 30px; position: relative; margin-top: .15rem;
	border-radius: 50%; background: var(--crema-honda);
	transition: background var(--rapido), transform var(--medio) var(--curva);
}
.acordeon__signo::before, .acordeon__signo::after {
	content: ""; position: absolute; left: 50%; top: 50%; background: var(--petroleo);
	transform: translate(-50%, -50%); transition: transform var(--medio) var(--curva), opacity var(--rapido);
}
.acordeon__signo::before { width: 12px; height: 2px; }
.acordeon__signo::after  { width: 2px; height: 12px; }
.acordeon__boton[aria-expanded="true"] .acordeon__signo { background: var(--petroleo); transform: rotate(180deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::before { background: #fff; }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { opacity: 0; }
.acordeon__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--medio) var(--curva); }
.acordeon__panel[data-abierto="1"] { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p { padding-bottom: 1.4rem; color: var(--texto-suave); max-width: 68ch; }

/* --- 12. Formulario ----------------------------------------------------- */
.formulario { display: grid; gap: var(--e2); }
.campo { display: grid; gap: .4rem; }
.campo--doble { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--e2); }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo .pista { font-size: var(--t-xs); color: var(--gris-claro); font-weight: 400; }
.campo input, .campo select, .campo textarea {
	width: 100%; font-family: inherit; font-size: var(--t-base); color: var(--texto);
	padding: .85rem 1rem;
	background: #fff;
	border: 1.5px solid var(--linea); border-radius: var(--radio-sm);
	transition: border-color var(--rapido), box-shadow var(--rapido);
}
.campo textarea { min-height: 8.5rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
	outline: none; border-color: var(--petroleo);
	box-shadow: 0 0 0 4px rgba(23, 162, 196, .18);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"], .campo select[aria-invalid="true"] {
	border-color: #B3261E; box-shadow: 0 0 0 4px rgba(179, 38, 30, .12);
}
.campo__error { font-size: var(--t-xs); color: #B3261E; font-weight: 600; }
.campo--acepto { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.campo--acepto input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--petroleo); }
.campo--acepto label { font-weight: 400; font-size: var(--t-sm); color: var(--texto-suave); }
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.aviso {
	padding: 1rem 1.2rem; border-radius: var(--radio-sm);
	font-size: var(--t-sm); font-weight: 550;
	border-left: 4px solid;
}
.aviso--bien  { background: #E8F5EE; border-color: #1E7A46; color: #14512F; }
.aviso--error { background: #FDECEA; border-color: #B3261E; color: #7A1A15; }

/* --- 13. Pie ------------------------------------------------------------ */
.pie { background: var(--petroleo-hondo); color: var(--texto-noche-suave); padding-top: var(--e7); }
.pie a { color: var(--texto-noche-suave); text-decoration: none; transition: color var(--rapido); }
.pie a:hover { color: var(--arena); }
.pie__rejilla {
	display: grid; gap: var(--e4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	padding-bottom: var(--e5);
}
.pie__marca { grid-column: span 2; max-width: 24rem; }
@media (max-width: 60rem) { .pie__marca { grid-column: span 1; } }
.pie__marca img { width: 160px; margin-bottom: var(--e2); }
.pie h4 {
	font-family: var(--tipo-texto); font-size: var(--t-xs); font-weight: 700;
	letter-spacing: .15em; text-transform: uppercase; color: var(--arena);
	margin-bottom: var(--e2);
}
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: var(--t-sm); }
.pie__redes { display: flex; gap: .6rem; margin-top: var(--e2); }
.pie__redes a {
	width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
	background: rgba(255,255,255,.07); border: 1px solid var(--linea-oscura);
	transition: background var(--rapido), transform var(--rapido) var(--curva);
}
.pie__redes a:hover { background: var(--arena); color: var(--tinta); transform: translateY(-3px); }
.pie__legal {
	border-top: 1px solid var(--linea-oscura);
	padding-block: var(--e3);
	display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
	align-items: center; justify-content: space-between;
	font-size: var(--t-xs);
}
.pie__legal nav { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Franja de sucursales en el pie */
.pie__sucursales { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); padding-bottom: var(--e5); }
.pie__sucursal { font-size: var(--t-sm); }
.pie__sucursal strong { display: block; color: var(--arena); font-family: var(--tipo-titulo); margin-bottom: .3rem; }

/* --- 14. Llamada final -------------------------------------------------- */
.llamada {
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: var(--radio-lg);
	padding: clamp(2.5rem, 5vw, 4.5rem);
	background: linear-gradient(135deg, var(--petroleo) 0%, var(--petroleo-hondo) 62%, #0A3A4A 100%);
	color: #fff;
}
.llamada::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(80% 120% at 88% 4%, rgba(79, 211, 236, .3), transparent 60%);
}
.llamada__oso {
	position: absolute; right: -3%; bottom: -14%; width: min(46%, 30rem);
	opacity: .12; z-index: -1; pointer-events: none;
	filter: brightness(0) invert(1);
}
.llamada h2 { color: #fff; max-width: 20ch; }
.llamada p { color: rgba(255,255,255,.84); max-width: 52ch; }
.llamada__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--e3); }

/* --- 15. Encabezado de página interior ---------------------------------- */
.portada {
	position: relative; isolation: isolate;
	padding-block: clamp(9rem, 18vh, 13rem) clamp(3.5rem, 8vh, 6rem);
	background: var(--petroleo-hondo); color: #fff;
	overflow: hidden;
}
.portada__foto {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	filter: saturate(.8) brightness(.5);
	transform: scale(1.06);
	animation: portadaAcerca 22s var(--curva-suave) forwards;
}
@keyframes portadaAcerca { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.portada::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(100% 90% at 80% 0%, rgba(23,162,196,.3), transparent 58%),
		linear-gradient(180deg, rgba(6,43,55,.9) 0%, rgba(6,43,55,.55) 45%, rgba(6,43,55,.92) 100%);
}
.portada h1 { color: #fff; max-width: 18ch; }
.portada p { color: rgba(255,255,255,.86); max-width: 56ch; font-size: var(--t-md); }

/* Miga de pan */
.miga { font-size: var(--t-xs); color: rgba(255,255,255,.66); margin-bottom: var(--e2); }
.miga ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.miga li:not(:last-child)::after { content: "/"; margin-left: .45rem; opacity: .5; }
.miga a { color: var(--arena); text-decoration: none; }

/* --- 16. Blog ----------------------------------------------------------- */
.entradas { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.entrada__meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: var(--t-xs); color: var(--gris-claro); }
.etiqueta-tema {
	display: inline-block; padding: .22rem .7rem; border-radius: 999px;
	background: var(--crema-honda); color: var(--arena-tinta);
	font-size: var(--t-xs); font-weight: 650; letter-spacing: .04em;
}

/* La medida del artículo va en rem, NO en ch.
   La unidad ch es relativa a la fuente del PROPIO elemento: con `68ch` los
   párrafos quedaban en columna pero los h2, al ser el doble de grandes,
   calculaban una medida mayor que el contenedor y se iban a todo lo ancho.
   El resultado era un artículo con los títulos desalineados del texto. */
.articulo { font-size: var(--t-md); line-height: 1.75; --medida: 44rem; }
.articulo > * { max-width: var(--medida); margin-inline: auto; }
/* Lo que sí puede respirar más que el texto */
.articulo > img,
.articulo > picture,
.articulo > blockquote,
.articulo > .tabla-scroll { max-width: 52rem; }
.articulo h2 { font-size: var(--t-xl); margin-top: var(--e5); }
.articulo h3 { font-size: var(--t-lg); margin-top: var(--e4); }
.articulo ul, .articulo ol { padding-left: 1.3rem; display: grid; gap: .5rem; margin-bottom: var(--e2); }
.articulo img { border-radius: var(--radio); margin-block: var(--e4); max-width: 100%; }
.articulo blockquote {
	margin: var(--e4) auto; padding: var(--e3);
	border-left: 4px solid var(--arena); background: var(--crema);
	border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
	font-size: var(--t-md); color: var(--tinta-suave);
}
.articulo table { width: 100%; border-collapse: collapse; margin-block: var(--e3); font-size: var(--t-sm); }
.articulo th, .articulo td { padding: .7rem .9rem; border-bottom: 1px solid var(--linea); text-align: left; }
.articulo th { background: var(--crema); font-weight: 700; }
.tabla-scroll { overflow-x: auto; max-width: 100%; }

/* --- 17. Revelado al hacer scroll --------------------------------------- */
.revela { opacity: 0; transform: translateY(28px); }
.revela.se-ve {
	opacity: 1; transform: none;
	transition: opacity .75s var(--curva-suave), transform .95s var(--curva);
	transition-delay: var(--retraso, 0ms);
}

/* --- 18. Botón flotante de WhatsApp ------------------------------------- */
.wasap {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
	width: 56px; height: 56px; display: grid; place-items: center;
	border-radius: 50%; background: #1FA855; color: #fff;
	box-shadow: 0 8px 26px rgba(31, 168, 85, .38);
	transition: transform var(--rapido) var(--curva);
}
.wasap:hover { transform: scale(1.08); color: #fff; }

/* --- 19. Adaptación a pantallas chicas ---------------------------------- */
@media (max-width: 62rem) {
	.hamburguesa { display: block; }
	.cabecera__tel span { display: none; }

	.menu {
		position: fixed; inset: 0 0 0 auto; width: min(88vw, 22rem);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 6rem 1.2rem 2rem;
		background: #fff; box-shadow: var(--sombra-3);
		transform: translateX(101%);
		transition: transform var(--medio) var(--curva);
		overflow-y: auto;
	}
	.menu-abierto .menu { transform: translateX(0); }
	.menu a { color: var(--tinta-suave) !important; text-shadow: none; padding: .85rem .6rem; }
	.menu > li + li { border-top: 1px solid var(--linea); }
	.menu .tiene-hijos > a::after { float: right; }
	.submenu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; min-width: 0; padding: 0 0 .5rem .8rem;
		display: none;
	}
	.menu .tiene-hijos.esta-abierto > .submenu { display: block; }
	.menu .tiene-hijos.esta-abierto > a::after { transform: translateY(1px) rotate(225deg); }

	.telon {
		position: fixed; inset: 0; z-index: 99;
		background: rgba(6, 43, 55, .5);
		-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
		opacity: 0; visibility: hidden; transition: opacity var(--medio), visibility var(--medio);
	}
	.menu-abierto .telon { opacity: 1; visibility: visible; }
	.menu-abierto { overflow: hidden; }

	/* En vertical los controles dejan de flotar sobre el texto y pasan a ir
	   debajo, en el flujo. Además hay que resetear `flex` de .hero__pasos: al
	   girar el eje de la fila a columna, su `flex-basis: 20rem` dejaba de ser
	   ancho y pasaba a ser ALTO, y el bloque de controles medía 392 px
	   atravesando los botones del hero. */
	.hero { display: flex; flex-direction: column; justify-content: center; }
	.hero__contenido { padding-block: 7rem 1.5rem; }
	.hero__controles {
		position: static; margin-top: auto; padding-bottom: 1.6rem;
		flex-direction: column; align-items: stretch;
	}
	.hero__pasos { flex: 0 0 auto; max-width: none; }
	/* A la izquierda: el botón flotante de WhatsApp vive en la esquina
	   derecha y tapaba la flecha de «siguiente». */
	.hero__flechas { justify-content: flex-start; }
	.marco, .marco--derecha { transform: none; }
}

@media (max-width: 40rem) {
	.hero__pasos { gap: .4rem; }
	.paso { font-size: 0; }        /* en móvil solo quedan las barras */
	.paso__riel { margin-bottom: 0; }
	.llamada { border-radius: var(--radio); }

	/* El botón «Cotizar» de la barra estorba junto al teléfono y a la
	   hamburguesa, y la llamada a la acción ya está en el hero, en cada
	   sección y en el botón flotante. */
	.cabecera__acciones > .boton { display: none; }

	/* Botones del hero a todo lo ancho: dos cajas apiladas se leen mejor que
	   dos pastillas de anchos distintos. */
	.hero__acciones { flex-direction: column; align-items: stretch; }
	.hero__acciones .boton { width: 100%; }
}

/* --- 20. Preferencias del usuario --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.revela, .palabra > span, .hero__panel .hero__etiqueta,
	.hero__panel .hero__entrada, .hero__panel .hero__acciones {
		opacity: 1 !important; transform: none !important;
	}
	.hero__foto { animation: none !important; }
	.marco, .marco--derecha { transform: none !important; }
}

@media print {
	.cabecera, .hero__controles, .wasap, .pie__redes, .telon { display: none !important; }
	body { color: #000; }
	.hero { min-height: auto; }
}