/* ==========================================================================
   Domos Sup3r López — Sistema de diseño v2 «Bosque eléctrico»
   Display: Hell Print (del cliente) · Cuerpo: Manrope
   Un solo archivo, sin dependencias. Mobile-first. Ver marca.md
   ========================================================================== */

/* ---------- 0. Fuente del cliente ---------- */
@font-face {
  font-family: "Hell Print";
  src: url("../fuentes/hell-print.woff2") format("woff2"),
       url("../fuentes/hell-print.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* color */
  --cian-el: #00C2FF;
  --cian: #0E9CCF;
  --cian-osc: #0A7BA4;
  --cian-hondo: #08607F;
  --cian-claro: #E6F5FB;
  --turquesa: #0AA8B8;
  --verde: #0B7A5A;
  --verde-osc: #1F5E48;
  --verde-claro: #E9F3EE;
  --ambar: #FFB33D;
  --ambar-osc: #C4761A;
  --brasa: #F5762B;
  --ambar-claro: #FDF3E3;

  --fondo: #F7F5F1;
  --superficie: #FFFFFF;
  --noche: #08161C;
  --noche-2: #102730;
  --noche-3: #17323D;

  --texto: #16242C;
  --texto-suave: #5A6A73;
  --borde: #E2DDD5;
  --borde-fuerte: #CFC7BB;

  /* degradados */
  --g-marca: linear-gradient(135deg, #00C2FF 0%, #0AA8B8 50%, #0B7A5A 100%);
  --g-marca-inv: linear-gradient(135deg, #0B7A5A 0%, #0AA8B8 50%, #00C2FF 100%);
  --g-fuego: linear-gradient(135deg, #FFC24D 0%, #F5762B 100%);
  --g-noche: linear-gradient(160deg, #0C1E26 0%, #08161C 55%, #061218 100%);
  --g-texto: linear-gradient(100deg, #0E9CCF 0%, #0AA8B8 45%, #1F5E48 100%);
  /* Sobre oscuro todos los pasos son de luminancia alta: el degradado no puede
     terminar en un tono medio o el texto pierde contraste sobre las zonas claras
     de la foto. */
  --g-texto-claro: linear-gradient(100deg, #9BEDFF 0%, #5FE8D6 45%, #FFD98A 100%);

  /* tipografía */
  --display: "Hell Print", "Archivo Black", Impact, "Haettenschweiler", sans-serif;
  --cuerpo: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs: clamp(.75rem, .72rem + .15vw, .8125rem);
  --t-sm: clamp(.875rem, .85rem + .15vw, .9375rem);
  --t-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --t-md: clamp(1.125rem, 1.06rem + .3vw, 1.25rem);
  --t-lg: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --t-xl: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --t-2xl: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --t-3xl: clamp(3rem, 2rem + 5.5vw, 7rem);

  /* espacio */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;
  --seccion: clamp(4rem, 2.5rem + 7vw, 8rem);

  /* forma */
  --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-full: 999px;

  /* sombras: de color, no grises */
  --sombra-sm: 0 1px 2px rgba(8,22,28,.06), 0 3px 10px rgba(8,22,28,.06);
  --sombra-md: 0 6px 16px rgba(8,22,28,.09), 0 18px 44px rgba(8,22,28,.09);
  --sombra-lg: 0 12px 28px rgba(8,22,28,.12), 0 36px 80px rgba(8,22,28,.14);
  --glow-cian: 0 12px 40px -12px rgba(0,164,220,.62);
  --glow-cian-fuerte: 0 18px 54px -12px rgba(0,194,255,.75);
  --glow-fuego: 0 12px 40px -12px rgba(245,118,43,.6);
  --glow-verde: 0 12px 40px -14px rgba(11,122,90,.6);

  --ancho: 1280px;
  --ancho-texto: 68ch;
  --tr: 240ms cubic-bezier(.4, 0, .2, 1);
  --tr-lento: 620ms cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .012em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
/* Los cuatro niveles de titular usan la fuente de marca. Antes h4 iba en
   Manrope y rompía la coherencia en el calendario y en el pie. */
h4 {
  font-family: var(--display); font-weight: 400; font-size: var(--t-md);
  line-height: 1.15; margin: 0 0 var(--e-3); letter-spacing: .012em;
}
p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--cian-osc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--verde); }

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

/* <picture> es solo un envoltorio: si no se estira, el height:100% de la <img>
   se calcula contra una altura automática y la foto no llena su marco,
   dejando una banda vacía. Esto afecta a todo contenedor con aspect-ratio. */
.hero-media picture, .diapo-media picture, .tarjeta-media picture, .galeria picture {
  display: block; width: 100%; height: 100%;
}
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
li { margin-bottom: var(--e-2); }
strong, b { font-weight: 700; }
small { font-size: var(--t-sm); }

:focus-visible {
  outline: 3px solid var(--cian-el);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--noche); color: #fff; padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 700;
}
.salta-al-contenido:focus { left: 0; color: #fff; }

.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. Layout ---------- */
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.contenedor-ancho { width: min(100% - 2rem, 1500px); margin-inline: auto; }
.contenedor-estrecho { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

.seccion { padding-block: var(--seccion); position: relative; }

.seccion-oscura {
  background: var(--g-noche);
  color: #DCE6EA;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.seccion-oscura h1, .seccion-oscura h2, .seccion-oscura h3, .seccion-oscura h4 { color: #FFFDF9; }
.seccion-oscura a { color: #7FE4FF; }
.seccion-oscura .texto-suave { color: #9FB2BA; }
.seccion-verde { background: var(--verde-claro); }
.seccion-crema { background: var(--superficie); }

/* Aurora: manchas de luz que respiran tras las secciones oscuras */
.seccion-oscura::before {
  content: "";
  position: absolute; inset: -30%;
  z-index: -2;
  background:
    radial-gradient(42% 50% at 14% 18%, rgba(0,194,255,.62), transparent 68%),
    radial-gradient(40% 46% at 88% 78%, rgba(11,180,130,.58), transparent 68%),
    radial-gradient(30% 34% at 66% 8%, rgba(255,179,61,.30), transparent 70%),
    radial-gradient(34% 40% at 40% 96%, rgba(0,140,200,.34), transparent 70%);
  filter: blur(16px);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

/* Grano: evita que los degradados se vean digitales y planos.
   Va en ::after porque ::before ya lo ocupa la aurora. Un elemento solo tiene
   un ::before y un ::after, así que la trama geodésica se apila aquí como
   una capa más de background en vez de reclamar su propio pseudo-elemento. */
.seccion-oscura::after, .hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .40;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Trama geodésica, guiño a la cúpula: se suma al grano en la misma capa */
.seccion-oscura.trama-geo::after {
  opacity: 1;
  background-image:
    linear-gradient(60deg, transparent 49.6%, rgba(255,255,255,.075) 49.6%, rgba(255,255,255,.075) 50.4%, transparent 50.4%),
    linear-gradient(-60deg, transparent 49.6%, rgba(255,255,255,.075) 49.6%, rgba(255,255,255,.075) 50.4%, transparent 50.4%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  background-size: 92px 160px, 92px 160px, 140px 140px;
}

.rejilla { display: grid; gap: var(--e-5); }
.rejilla > *, .dos-columnas > * { min-width: 0; }
@media (min-width: 640px) { .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }

.dos-columnas { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }

/* ---------- 4. Tipografía de apoyo ---------- */
.antetitulo {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--cuerpo);
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cian-osc);
  margin-bottom: var(--e-4);
}
.antetitulo::before {
  content: ""; width: 34px; height: 3px; border-radius: 3px;
  background: var(--g-marca);
}
.seccion-oscura .antetitulo, .hero .antetitulo { color: var(--ambar); }
.seccion-oscura .antetitulo::before, .hero .antetitulo::before { background: var(--g-fuego); }

/* Texto con degradado — SOLO en tamaños de display (AA a 3:1) */
.degradado {
  background: var(--g-texto);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* si el navegador no soporta background-clip, se ve el color de respaldo */
  -webkit-text-fill-color: transparent;
}
.seccion-oscura .degradado, .hero .degradado { background: var(--g-texto-claro); -webkit-background-clip: text; background-clip: text; }
@supports not (background-clip: text) {
  .degradado { color: var(--cian-osc); -webkit-text-fill-color: currentColor; }
}

.entradilla {
  font-size: var(--t-md); color: var(--texto-suave); max-width: var(--ancho-texto);
  line-height: 1.6;
}
.seccion-oscura .entradilla, .hero .entradilla { color: #B9C9D0; }
.texto-suave { color: var(--texto-suave); }
.centrado { text-align: center; }
.centrado .antetitulo { justify-content: center; }
.centrado .entradilla { margin-inline: auto; }
.encabezado-seccion { margin-bottom: var(--e-8); }

/* ---------- 5. Botones ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: .95rem 1.75rem;
  min-height: 52px;
  font-family: var(--cuerpo); font-size: var(--t-base); font-weight: 700;
  line-height: 1.2; letter-spacing: .01em;
  border: 2px solid transparent; border-radius: var(--r-full);
  cursor: pointer; text-decoration: none;
  transition: transform var(--tr), box-shadow var(--tr), background-color var(--tr),
              color var(--tr), border-color var(--tr), filter var(--tr);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

/* barrido de brillo al pasar el cursor */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 720ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }

.btn-principal {
  background: var(--g-marca);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: var(--glow-cian);
}
.btn-principal:hover {
  color: #fff;
  background-position: 100% 0;
  box-shadow: var(--glow-cian-fuerte);
  filter: saturate(1.12);
}

.btn-fuego { background: var(--g-fuego); color: #2A1503; box-shadow: var(--glow-fuego); }
.btn-fuego:hover { color: #2A1503; filter: saturate(1.12) brightness(1.05); }

.btn-secundario { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
.btn-secundario:hover { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.seccion-oscura .btn-secundario, .hero .btn-secundario, .slider .btn-secundario {
  color: #FFFDF9; border-color: rgba(255,255,255,.42);
  backdrop-filter: blur(8px); background: rgba(255,255,255,.07);
}
.seccion-oscura .btn-secundario:hover, .hero .btn-secundario:hover, .slider .btn-secundario:hover {
  background: #FFFDF9; color: var(--noche); border-color: #FFFDF9;
}

.btn-wa { background: #128C4A; color: #fff; box-shadow: 0 12px 34px -14px rgba(18,140,74,.85); }
.btn-wa:hover { background: #0E7A40; color: #fff; }

.btn-ancho { width: 100%; }
.btn-grande { padding: 1.15rem 2.25rem; font-size: var(--t-md); min-height: 60px; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- 6. Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,245,241,.82);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(226,221,213,.9);
  transition: box-shadow var(--tr), background-color var(--tr);
}
.cabecera.desplazada { box-shadow: 0 6px 28px -12px rgba(8,22,28,.30); background: rgba(247,245,241,.94); }
.cabecera-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); min-height: 78px;
}
.logo { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--texto); flex-shrink: 0; }
.logo img { width: 46px; height: 46px; border-radius: var(--r-sm); }
.logo-texto { display: flex; flex-direction: column; line-height: 1.02; }
.logo-texto b {
  font-family: var(--display); font-size: 1.22rem; font-weight: 400; letter-spacing: .02em;
}
.logo-texto span {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700; margin-top: 2px;
}

.nav-principal ul { display: flex; gap: var(--e-5); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-principal li { margin: 0; }
.nav-principal a {
  color: var(--texto); text-decoration: none; font-weight: 600; font-size: var(--t-sm);
  padding: .5rem 0; position: relative;
}
.nav-principal a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px;
  border-radius: 3px; background: var(--g-marca); transition: right var(--tr);
}
.nav-principal a:hover::after, .nav-principal a[aria-current="page"]::after { right: 0; }

.acciones-cabecera { display: flex; align-items: center; gap: var(--e-3); }

.menu-boton {
  display: grid; place-items: center;
  width: 50px; height: 50px; padding: 0;
  background: transparent; border: 2px solid var(--borde-fuerte); border-radius: var(--r-full);
  cursor: pointer; color: var(--texto); transition: border-color var(--tr), background var(--tr);
}
.menu-boton:hover { border-color: var(--cian); }
.menu-boton svg { width: 22px; height: 22px; }
.menu-boton .icono-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }

@media (max-width: 1059px) {
  .nav-principal {
    position: fixed; inset: 78px 0 auto 0;
    background: rgba(247,245,241,.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--borde);
    padding: var(--e-5) 1.25rem var(--e-6);
    max-height: calc(100dvh - 78px); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity var(--tr), transform var(--tr);
  }
  .nav-principal.abierto { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-principal ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principal li + li { border-top: 1px solid var(--borde); }
  .nav-principal a {
    display: block; padding: var(--e-4) 0;
    font-family: var(--display); font-size: 1.5rem; letter-spacing: .02em;
  }
  .nav-principal a::after { display: none; }
  .cta-cabecera { display: none; }
}
@media (min-width: 1060px) { .menu-boton { display: none; } }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: min(86svh, 780px);
  display: grid; align-items: end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
/* Fotos apiladas en fundido cruzado. Solo la activa está visible.
   Se escalan un pelo de más para que el barrido no descubra los bordes. */
.hero-foto {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1600ms cubic-bezier(.4,0,.2,1);
}
.hero-foto.activa { opacity: 1; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  transform: scale(1.06);
}
/* El jacuzzi es un primer plano interior: al 62% solo se veía el ventanal,
   que además está quemado. Bajando el recorte entra la bañera. */
.foto-jacuzzi { object-position: center 82% !important; }
/* Cada foto se mueve distinto: alternar el recorrido evita que el efecto
   se note repetitivo cuando el hero rota. */
.hero-foto.activa img { animation: barrer-a 11s ease-out forwards; }
.hero-foto:nth-child(2n).activa img { animation-name: barrer-b; }
.hero-foto:nth-child(3n).activa img { animation-name: barrer-c; }

@keyframes barrer-a {
  from { transform: scale(1.14) translate3d(1.5%, 1%, 0); }
  to   { transform: scale(1.04) translate3d(0, 0, 0); }
}
@keyframes barrer-b {
  from { transform: scale(1.04) translate3d(-1.5%, 0, 0); }
  to   { transform: scale(1.15) translate3d(1%, -1.5%, 0); }
}
@keyframes barrer-c {
  from { transform: scale(1.12) translate3d(-1%, -1%, 0); }
  to   { transform: scale(1.05) translate3d(1.5%, 1%, 0); }
}

/* --- controles del hero --- */
.hero-controles {
  position: absolute; right: var(--e-6); bottom: calc(var(--e-5) + 82px); z-index: 3;
  display: flex; align-items: center; gap: var(--e-3);
}
.hero-flecha {
  width: 50px; height: 50px; border-radius: var(--r-full);
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(10px); color: #fff;
  transition: background var(--tr), transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.hero-flecha:hover {
  background: var(--g-marca); border-color: transparent;
  transform: translateY(-3px); box-shadow: var(--glow-cian);
}
.hero-flecha svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.hero-puntos { display: flex; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.hero-puntos li { margin: 0; }
.hero-punto {
  width: 30px; height: 5px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  background: rgba(255,255,255,.32);
  transition: background var(--tr), width var(--tr);
}
.hero-punto[aria-current="true"] { background: var(--g-marca); width: 46px; }
.hero-punto:hover { background: rgba(255,255,255,.62); }

@media (max-width: 900px) {
  .hero-controles {
    right: auto; left: 1.25rem; bottom: var(--e-5);
  }
  .hero-flecha { width: 44px; height: 44px; }
}
@media (max-width: 640px) { .hero-media img { object-position: center 70%; } }
@keyframes respirar { from { transform: scale(1); } to { transform: scale(1.075); } }

/* velo en dos capas: garantiza AA sobre cualquier foto, incluida la espuma blanca */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,14,18,.62) 0%, rgba(6,14,18,.24) 26%, rgba(6,14,18,.78) 62%, rgba(6,14,18,.95) 100%),
    linear-gradient(96deg, rgba(6,14,18,.80) 0%, rgba(6,14,18,.52) 46%, rgba(6,14,18,.18) 78%, rgba(0,110,150,.20) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 40% at 12% 84%, rgba(0,194,255,.30), transparent 70%),
    radial-gradient(46% 38% at 88% 20%, rgba(255,179,61,.18), transparent 70%);
  mix-blend-mode: screen;
}

.hero-contenido { position: relative; z-index: 1; padding-block: var(--e-8) var(--e-7); }
/* Titular contenido: a 7rem se comía la pantalla y tapaba la foto. */
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
  max-width: 19ch;
  margin-bottom: var(--e-4); line-height: .98;
  text-shadow: 0 4px 40px rgba(0,0,0,.45);
}
.hero .entradilla { color: #DDE8ED; max-width: 46ch; font-size: var(--t-base); }
.hero .grupo-botones { margin-top: var(--e-6); }

.hero-sellos {
  display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5);
  list-style: none; padding: 0;
}
.hero-sellos li {
  margin: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  padding: .4rem .85rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; color: #EAF3F6;
}
.hero-sellos svg { width: 15px; height: 15px; stroke: var(--cian-el); fill: none; stroke-width: 2; }

/* indicador de scroll */
/* A la derecha y por encima del botón flotante de WhatsApp: centrada chocaba
   con los botones del hero, y abajo del todo chocaba con el de WhatsApp. */
.baja {
  position: absolute; right: var(--e-6); bottom: calc(var(--e-5) + 84px); z-index: 2;
  display: grid; justify-items: center; gap: var(--e-2);
  color: rgba(255,255,255,.72); font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  text-decoration: none;
}
.baja:hover { color: #fff; }
.baja span {
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.45);
  border-radius: var(--r-full); position: relative;
}
.baja span::after {
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; border-radius: 2px; background: var(--cian-el);
  transform: translateX(-50%);
  animation: rueda 1.9s ease-in-out infinite;
}
@keyframes rueda {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}
@media (max-width: 1100px) { .baja { display: none; } }

.hero-interior { min-height: min(66svh, 620px); }
.hero-interior h1 { font-size: var(--t-2xl); max-width: 19ch; }

/* ---------- 8. Barra de autoridad ---------- */
.barra-datos {
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--borde);
  border-block: 1px solid var(--borde);
}
@media (min-width: 768px) { .barra-datos { grid-template-columns: repeat(4, 1fr); } }
.dato {
  background: var(--fondo); padding: var(--e-6) var(--e-4); text-align: center;
  transition: background var(--tr);
}
.dato:hover { background: var(--superficie); }
.dato b {
  display: block; font-family: var(--display); font-size: var(--t-xl);
  font-weight: 400; line-height: 1; letter-spacing: .02em;
  background: var(--g-texto);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.dato span {
  display: block; font-size: var(--t-xs); color: var(--texto-suave); margin-top: var(--e-3);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}

/* ---------- 9. SLIDER de alojamientos ---------- */
.slider {
  position: relative;
  background: var(--noche);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.slider-pista {
  display: grid;
  grid-template-areas: "diapo";
}
.diapo {
  grid-area: diapo;
  position: relative;
  min-height: min(90svh, 860px);
  display: grid; align-items: end;
  opacity: 0; visibility: hidden;
  transition: opacity var(--tr-lento), visibility var(--tr-lento);
}
.diapo.activa { opacity: 1; visibility: visible; }

.diapo-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.diapo-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
  transition: transform 7000ms cubic-bezier(.22,1,.36,1);
}
.diapo.activa .diapo-media img { transform: scale(1); }
.diapo-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,14,18,.52) 0%, rgba(6,14,18,.22) 24%, rgba(6,14,18,.82) 66%, rgba(6,14,18,.97) 100%),
    linear-gradient(92deg, rgba(6,14,18,.86) 0%, rgba(6,14,18,.60) 40%, rgba(6,14,18,.16) 74%, transparent 100%);
}

/* Mantiene el ancho del contenedor (para que alinee con el resto del sitio)
   y limita solo el ancho de lectura de cada bloque. */
.diapo-contenido {
  position: relative; z-index: 1;
  padding-block: var(--e-8) calc(var(--e-9) + 2rem);
}
.diapo-contenido > * { max-width: 620px; }
.diapo .antetitulo { color: var(--ambar); }
.diapo .antetitulo::before { background: var(--g-fuego); }
.diapo-contenido > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 640ms ease, transform 640ms cubic-bezier(.22,1,.36,1);
}
.diapo.activa .diapo-contenido > * { opacity: 1; transform: none; }
.diapo.activa .diapo-contenido > *:nth-child(1) { transition-delay: 120ms; }
.diapo.activa .diapo-contenido > *:nth-child(2) { transition-delay: 200ms; }
.diapo.activa .diapo-contenido > *:nth-child(3) { transition-delay: 280ms; }
.diapo.activa .diapo-contenido > *:nth-child(4) { transition-delay: 360ms; }
.diapo.activa .diapo-contenido > *:nth-child(5) { transition-delay: 440ms; }
.diapo.activa .diapo-contenido > *:nth-child(6) { transition-delay: 520ms; }

.diapo h3 {
  font-size: var(--t-2xl); color: #fff; line-height: .98;
  margin-bottom: var(--e-4); text-shadow: 0 4px 34px rgba(0,0,0,.4);
}
.diapo .entradilla { color: #CDDCE2; max-width: 46ch; }

.diapo-precio {
  display: inline-flex; align-items: baseline; gap: var(--e-2);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  padding: .6rem 1.2rem; border-radius: var(--r-full);
  margin-bottom: var(--e-5);
}
.diapo-precio b {
  font-family: var(--display); font-size: 1.75rem; font-weight: 400; letter-spacing: .02em;
  background: var(--g-texto-claro);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.diapo-precio span { font-size: var(--t-sm); color: #C3D3DA; font-weight: 600; }

.diapo-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0 0 var(--e-6); }
.diapo-chips li {
  margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  padding: .38rem .9rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  color: #E4EEF2;
}
.diapo-chips li.destaca {
  background: var(--g-marca); border-color: transparent; color: #fff;
  box-shadow: var(--glow-cian);
}

/* --- controles --- */
.slider-barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(6,14,18,0), rgba(6,14,18,.5));
  backdrop-filter: blur(6px);
}
.slider-barra-interior {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding-block: var(--e-4);
}

.slider-tabs { display: flex; gap: var(--e-2); list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.slider-tabs li { margin: 0; flex: 1; min-width: 0; }
.slider-tab {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: var(--e-3) 0 0;
  color: rgba(255,255,255,.62);
  font-family: var(--cuerpo); font-size: var(--t-sm); font-weight: 700;
  display: grid; gap: .35rem;
  border-top: 3px solid rgba(255,255,255,.16);
  transition: color var(--tr), border-color var(--tr);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slider-tab:hover { color: #fff; }
.slider-tab[aria-selected="true"] { color: #fff; border-top-color: transparent; }
.slider-tab .num {
  font-family: var(--display); font-size: .95rem; letter-spacing: .06em;
  color: var(--ambar);
}
/* barra de progreso del autoplay sobre la pestaña activa */
.slider-tab::before {
  content: ""; position: absolute; height: 3px; border-radius: 3px;
  background: var(--g-marca); top: 0; left: 0; width: 0;
}
.slider-tabs li { position: relative; }
.slider-tab[aria-selected="true"]::before { width: var(--avance, 0%); transition: width 120ms linear; }

.slider-flechas { display: flex; gap: var(--e-2); flex-shrink: 0; }
.slider-flecha {
  width: 52px; height: 52px; border-radius: var(--r-full);
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  transition: background var(--tr), transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.slider-flecha:hover {
  background: var(--g-marca); border-color: transparent;
  transform: translateY(-3px); box-shadow: var(--glow-cian);
}
.slider-flecha svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; }

@media (max-width: 860px) {
  /* En pantalla estrecha el velo lateral cubre todo el ancho y la foto
     desaparece. Ahí manda el velo vertical y el lateral casi se retira. */
  .diapo-media::after {
    background:
      linear-gradient(180deg, rgba(6,14,18,.42) 0%, rgba(6,14,18,.30) 26%, rgba(6,14,18,.86) 62%, rgba(6,14,18,.97) 100%),
      linear-gradient(92deg, rgba(6,14,18,.42) 0%, rgba(6,14,18,.16) 60%, transparent 100%);
  }
  .diapo { min-height: min(88svh, 720px); }
  .diapo-contenido { padding-bottom: calc(var(--e-9) + 4.5rem); max-width: none; }
  .slider-barra-interior { flex-direction: column-reverse; align-items: stretch; gap: var(--e-3); }
  .slider-tabs { gap: var(--e-1); }
  .slider-tab { font-size: 0; gap: 0; padding-top: var(--e-2); }
  .slider-tab .num { font-size: var(--t-sm); }
  .slider-flechas { justify-content: center; }
}

/* ---------- 10. Tarjetas ---------- */
.tarjeta {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-lg);
  border-color: transparent;
}
/* borde con degradado al pasar el cursor */
.tarjeta::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background: var(--g-marca);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--tr);
}
.tarjeta:hover::before { opacity: 1; }

.tarjeta-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--noche-2); }
.tarjeta-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 720ms cubic-bezier(.22,1,.36,1); }
.tarjeta:hover .tarjeta-media img { transform: scale(1.08); }
.tarjeta-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,14,18,.5));
  opacity: 0; transition: opacity var(--tr);
}
.tarjeta:hover .tarjeta-media::after { opacity: 1; }

.tarjeta-cuerpo { padding: var(--e-5); display: flex; flex-direction: column; flex: 1; gap: var(--e-3); }
.tarjeta-cuerpo h2, .tarjeta-cuerpo h3 { margin: 0; font-size: var(--t-lg); }
.tarjeta-cuerpo > .btn { margin-top: auto; }

.etiqueta {
  position: absolute; top: var(--e-4); left: var(--e-4); z-index: 1;
  background: var(--g-fuego); color: #2A1503;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: var(--r-full);
  box-shadow: var(--glow-fuego);
}
.etiqueta-jacuzzi { background: var(--g-marca); color: #fff; box-shadow: var(--glow-cian); }

.precio { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.precio b {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 400; letter-spacing: .02em;
  background: var(--g-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.precio span { font-size: var(--t-sm); color: var(--texto-suave); font-weight: 600; }
.precio-grande { font-size: var(--t-xl); margin-bottom: var(--e-5); }
.precio-grande b { font-size: var(--t-xl); }

/* ---------- 11. Listas con check ---------- */
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.lista-check li { margin: 0; padding-left: 2rem; position: relative; font-size: var(--t-sm); }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 1.3rem; height: 1.3rem; border-radius: var(--r-full);
  background: var(--g-marca);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lista-check li::after {
  content: ""; position: absolute; left: .3rem; top: .58em;
  width: .7rem; height: .38rem;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: rotate(-45deg);
}
@media (min-width: 640px) { .lista-check-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lista-check-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 12. Amenidades ---------- */
.amenidades { display: grid; gap: var(--e-4); grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .amenidades { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .amenidades { grid-template-columns: repeat(5, 1fr); } }
.amenidad {
  margin: 0; text-align: center;
  padding: var(--e-6) var(--e-3);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.amenidad:hover { border-color: var(--cian); transform: translateY(-5px); box-shadow: var(--glow-cian); }
.amenidad svg {
  width: 34px; height: 34px; stroke: var(--verde); stroke-width: 1.7; fill: none;
  margin-inline: auto; margin-bottom: var(--e-3); transition: stroke var(--tr), transform var(--tr);
}
.amenidad:hover svg { stroke: var(--cian-osc); transform: scale(1.12); }
.amenidad b { display: block; font-size: var(--t-sm); font-weight: 700; }
.amenidad small { color: var(--texto-suave); font-size: var(--t-xs); }
.seccion-oscura .amenidad {
  background: linear-gradient(165deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.seccion-oscura .amenidad:hover {
  border-color: var(--cian-el);
  background: linear-gradient(165deg, rgba(0,194,255,.20), rgba(255,255,255,.05));
  box-shadow: var(--glow-cian-fuerte);
}
.seccion-oscura .amenidad svg { stroke: var(--ambar); }
.seccion-oscura .amenidad:hover svg { stroke: var(--cian-el); }
.seccion-oscura .amenidad b { color: #FFFDF9; }
.seccion-oscura .amenidad small { color: #9FB2BA; }

/* ---------- 13. Motor de reservas ---------- */
.motor {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
  padding: var(--e-6);
  isolation: isolate;
}
.motor::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 2px;
  background: var(--g-marca);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55;
}
@media (min-width: 768px) { .motor { padding: var(--e-7); } }
/* El motor es el elemento de conversión de la página: cuando va solo se lleva
   todo el ancho para que quepan los dos meses del calendario. */
.motor-ancho { max-width: 1000px; margin-inline: auto; }
.lista-ventajas { max-width: 1100px; margin-inline: auto; }

/* --- Reserva a dos columnas: foto + motor --- */
/* overflow-x: clip y no hidden: recorta el halo desenfocado de la foto, que si
   no se salía del viewport en móvil, pero sin crear contenedor de scroll, que
   rompería el position: sticky de la foto. */
#reservar, .seccion-reserva { overflow-x: clip; }
.reserva-doble { display: grid; gap: var(--e-6); align-items: start; }
@media (min-width: 1024px) {
  .reserva-doble { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: var(--e-7); }
}

.reserva-foto {
  position: relative; margin: 0;
  border-radius: var(--r-xl); overflow: visible;
  isolation: isolate;
}
/* halo de color detrás de la foto */
.reserva-foto::before {
  content: ""; position: absolute; inset: -12% -8% -6% -8%; z-index: -1;
  background: radial-gradient(48% 44% at 28% 24%, rgba(0,194,255,.42), transparent 70%),
              radial-gradient(46% 42% at 76% 82%, rgba(11,122,90,.40), transparent 70%);
  filter: blur(38px);
}
.reserva-foto picture {
  display: block; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sombra-lg);
}
.reserva-foto img {
  width: 100%; height: auto; display: block;
  transition: transform var(--tr-lento);
}
.reserva-foto:hover img { transform: scale(1.035); }
/* El formulario es mucho más alto que la foto: en escritorio la foto se queda
   pegada y acompaña al usuario mientras rellena, en vez de dejar un hueco. */
@media (min-width: 1024px) {
  .reserva-foto { position: sticky; top: calc(78px + var(--e-5)); }
}

/* pie sobre la foto */
.reserva-cita {
  position: absolute; left: var(--e-5); right: var(--e-5); bottom: var(--e-5); z-index: 2;
  padding: var(--e-4) var(--e-5);
  background: rgba(8,22,28,.62);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  color: #fff;
}
.reserva-cita-eyebrow {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ambar);
  margin-bottom: .35rem;
}
.reserva-cita strong {
  font-family: var(--display); font-weight: 400; font-size: 1.45rem;
  letter-spacing: .02em; line-height: 1.1; display: block;
}

/* chapa de precio flotante */
.reserva-chip {
  position: absolute; top: var(--e-5); right: calc(var(--e-5) * -1); z-index: 2;
  display: grid; justify-items: center; gap: 1px;
  padding: var(--e-4) var(--e-5);
  background: var(--g-marca); color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--glow-cian-fuerte);
  animation: flotar-chip 6s ease-in-out infinite alternate;
}
.reserva-chip span { font-size: var(--t-xs); font-weight: 700; opacity: .9; }
.reserva-chip b {
  font-family: var(--display); font-size: 1.7rem; font-weight: 400; letter-spacing: .02em;
  line-height: 1;
}
@keyframes flotar-chip { from { transform: translateY(0) rotate(2.5deg); } to { transform: translateY(-9px) rotate(2.5deg); } }
@media (max-width: 520px) { .reserva-chip { right: var(--e-3); padding: var(--e-3) var(--e-4); } }

/* cuando la sección de reserva va sin foto, el motor se centra */
.reserva-solo { grid-template-columns: 1fr !important; max-width: 1000px; margin-inline: auto; }

/* --- Destacado de la botella de vino --- */
.destacado-vino {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-5);
  background: linear-gradient(135deg, rgba(245,118,43,.12), rgba(255,179,61,.10));
  border: 1px solid rgba(196,118,26,.28);
  border-radius: var(--r-lg);
  font-size: var(--t-base);
}
.destacado-vino-icono {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--g-fuego); color: #2A1503;
  box-shadow: var(--glow-fuego);
}
.destacado-vino-icono svg { width: 26px; height: 26px; }
.seccion-oscura .destacado-vino {
  background: rgba(255,179,61,.12); border-color: rgba(255,179,61,.3); color: #F2E7D6;
}

.motor-titulo { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-5); }
.motor-titulo h2, .motor-titulo h3 { margin: 0; font-size: var(--t-lg); }

.motor-campos { display: grid; gap: var(--e-4); }
@media (min-width: 768px) { .motor-campos { grid-template-columns: repeat(2, 1fr); } }
.campo-ancho { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo label { font-size: var(--t-sm); font-weight: 700; }
.campo .ayuda { font-size: var(--t-xs); color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  font-family: var(--cuerpo); font-size: var(--t-base); font-weight: 500; color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde); border-radius: var(--r-md);
  padding: .85rem 1rem; min-height: 52px;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
  width: 100%;
}
.campo input:hover, .campo select:hover { border-color: var(--borde-fuerte); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--cian); background: var(--superficie);
  box-shadow: 0 0 0 4px rgba(14,156,207,.16);
}
.campo input[aria-invalid="true"] { border-color: #C4574C; }
.campo input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(196,87,76,.16); }
.campo .obligatorio { color: #C4574C; font-weight: 700; }

/* ---------- 13b. Calendario de disponibilidad ---------- */
.cal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-4);
}
.cal-cabecera h4 { margin: 0; font-size: var(--t-base); }
.cal-navegacion { display: flex; gap: var(--e-2); }
.cal-nav {
  width: 42px; height: 42px; border-radius: var(--r-full);
  display: grid; place-items: center; cursor: pointer;
  background: var(--fondo); border: 2px solid var(--borde); color: var(--texto);
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
}
.cal-nav:hover:not(:disabled) { border-color: var(--cian); transform: translateY(-2px); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.cal-nav svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; }

.cal-meses { display: grid; gap: var(--e-5); }
@media (min-width: 700px) { .cal-meses { grid-template-columns: repeat(2, 1fr); } }

.cal-titulo {
  font-family: var(--display); font-size: 1.15rem; letter-spacing: .02em;
  text-align: center; margin: 0 0 var(--e-3); text-transform: capitalize;
}
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dia-semana {
  text-align: center; font-size: var(--t-xs); font-weight: 800;
  color: var(--texto-suave); padding-bottom: var(--e-2);
}

.cal-dia {
  aspect-ratio: 1; min-height: 44px;
  /* min-width:0 es imprescindible: sin él, aspect-ratio 1 + min-height 44px
     obliga a cada casilla a medir 44px de ancho, y siete casillas más los
     huecos no caben en una pantalla de 360 px. */
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 2px;
  background: var(--fondo); border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; font-family: var(--cuerpo); color: var(--texto);
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
}
.cal-num { font-size: var(--t-sm); font-weight: 700; line-height: 1; }
.cal-precio { font-size: .62rem; font-weight: 700; color: var(--texto-suave); line-height: 1; }
.cal-dia:hover:not(:disabled) { background: var(--cian-claro); border-color: var(--cian); transform: translateY(-2px); }
.cal-dia.es-finde .cal-precio { color: var(--ambar-osc); }

.cal-dia:disabled { cursor: not-allowed; }
.cal-dia.pasado { opacity: .3; background: transparent; }
.cal-dia.ocupado {
  background: repeating-linear-gradient(-45deg, #F3E6E4 0 5px, #FBF2F1 5px 10px);
  color: #A9645C; text-decoration: line-through;
}
.cal-dia.en-rango { background: var(--cian-claro); border-radius: 0; }
.cal-dia.sel-inicio, .cal-dia.sel-fin {
  background: var(--g-marca); color: #fff; border-color: transparent;
  box-shadow: var(--glow-cian);
}
.cal-dia.sel-inicio .cal-precio, .cal-dia.sel-fin .cal-precio { color: rgba(255,255,255,.85); }
.cal-dia.sel-inicio { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal-dia.sel-fin { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* En pantallas estrechas el motor recorta su relleno y el calendario aprieta
   los huecos, para que las siete casillas quepan sin encogerse de más. */
@media (max-width: 520px) {
  .motor { padding: var(--e-4); border-radius: var(--r-lg); }
  .cal-rejilla { gap: 2px; }
  .cal-dia { min-height: 40px; }
  .cal-num { font-size: .8125rem; }
  .cal-precio { font-size: .56rem; }
  .cal-cabecera { flex-wrap: wrap; }
  .cal-nav { width: 38px; height: 38px; }
  .motor-titulo h2, .motor-titulo h3 { font-size: var(--t-md); }
}

.cal-resumen-fechas {
  margin-top: var(--e-4); padding: var(--e-3) var(--e-4);
  background: var(--fondo); border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 600; text-align: center;
}
.cal-leyenda {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  margin-top: var(--e-3); font-size: var(--t-xs); color: var(--texto-suave);
}
.cal-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.cal-leyenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-leyenda .i-libre { background: var(--fondo); border: 1px solid var(--borde-fuerte); }
.cal-leyenda .i-sel { background: var(--g-marca); }
.cal-leyenda .i-ocu { background: repeating-linear-gradient(-45deg, #F3E6E4 0 4px, #FBF2F1 4px 8px); }

.motor-resumen { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 2px dashed var(--borde); }
.linea-resumen {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4);
  padding: var(--e-2) 0; font-size: var(--t-sm);
}
.linea-resumen span:last-child { font-weight: 700; white-space: nowrap; }
.linea-total {
  border-top: 1px solid var(--borde); margin-top: var(--e-2); padding-top: var(--e-4);
  font-size: var(--t-md);
}
.linea-total span:first-child { font-weight: 700; }
.linea-total span:last-child {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 400; letter-spacing: .02em;
  background: var(--g-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.linea-desglose { color: var(--texto-suave); }

.motor-aviso {
  margin-top: var(--e-4); padding: var(--e-4);
  background: var(--ambar-claro); border-left: 4px solid var(--ambar); border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.motor-aviso[hidden] { display: none; }
.motor-aviso.aviso-error { background: #FDECEA; border-left-color: #B3261E; }
.motor-aviso.aviso-ok { background: var(--verde-claro); border-left-color: var(--verde); }
.nota-motor, .nota-fuente {
  margin-top: var(--e-4); font-size: var(--t-xs); color: var(--texto-suave); line-height: 1.5;
}
.nota-fuente { max-width: var(--ancho-texto); }

/* ---------- 14. Tablas ---------- */
.tabla-envoltorio {
  overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); box-shadow: var(--sombra-sm);
}
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 560px; }
caption { text-align: left; padding: var(--e-5) var(--e-5) 0; font-size: var(--t-sm); color: var(--texto-suave); }
th, td { padding: var(--e-4) var(--e-5); text-align: left; border-bottom: 1px solid var(--borde); }
thead th {
  background: var(--fondo); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
tbody tr { transition: background var(--tr); }
tbody tr:hover { background: var(--cian-claro); }
td b {
  font-family: var(--display); font-size: var(--t-md); font-weight: 400; letter-spacing: .02em;
  background: var(--g-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- 15. Galería ---------- */
.galeria { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .galeria { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); } }
.galeria figure {
  margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--noche-2);
  transition: transform var(--tr), box-shadow var(--tr);
}
.galeria figure:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.galeria img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 720ms cubic-bezier(.22,1,.36,1); }
.galeria figure:hover img { transform: scale(1.07); }
.galeria .ancha { grid-column: span 2; }
.galeria .ancha img { aspect-ratio: 2 / 1; }

/* ---------- 16. Bloque de respuesta directa (AEO) ---------- */
.respuesta-directa {
  position: relative;
  background: linear-gradient(135deg, rgba(0,194,255,.09), rgba(11,122,90,.07));
  border-radius: var(--r-lg);
  padding: var(--e-6);
  margin-block: var(--e-6);
  overflow: hidden;
}
.respuesta-directa::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--g-marca);
}
.respuesta-directa p:first-child { font-weight: 600; font-size: var(--t-md); }
.respuesta-directa p:last-child { margin-bottom: 0; }
.seccion-oscura .respuesta-directa {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}

/* ---------- 17. FAQ ---------- */
.faq { display: grid; gap: var(--e-3); }
.faq details {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.faq details:hover { border-color: var(--borde-fuerte); }
.faq details[open] { border-color: var(--cian); box-shadow: var(--glow-cian); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--e-5); padding-right: 3.5rem;
  font-weight: 700; font-size: var(--t-base); position: relative;
  min-height: 56px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--e-5); top: 50%;
  width: 12px; height: 12px; margin-top: -7px;
  border-right: 2.5px solid var(--cian-osc); border-bottom: 2.5px solid var(--cian-osc);
  transform: rotate(45deg); transition: transform var(--tr);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .respuesta { padding: 0 var(--e-5) var(--e-5); color: var(--texto-suave); }
.faq .respuesta > :first-child { margin-top: 0; }

/* ---------- 18. Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; gap: var(--e-6); }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li { margin: 0; counter-increment: paso; }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block; font-family: var(--display); font-size: var(--t-xl); font-weight: 400;
  line-height: 1; margin-bottom: var(--e-3); letter-spacing: .03em;
  background: var(--g-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.pasos h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }

/* ---------- 19. Videos ---------- */
.videos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.video-marco {
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--noche-2); border: 1px solid var(--borde);
  transition: transform var(--tr), box-shadow var(--tr);
}
.video-marco:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); }
.video-marco iframe { width: 100%; height: 100%; border: 0; }

/* Carrusel de vídeos: 21 iframes en rejilla hundirían la página, así que van
   en una tira horizontal y solo se cargan los que entran en pantalla. */
.carrusel { position: relative; }
.carrusel-pista {
  display: flex; gap: var(--e-4);
  list-style: none; margin: 0;
  padding: var(--e-2) max(1.25rem, calc(50vw - var(--ancho) / 2)) var(--e-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.carrusel-pista::-webkit-scrollbar { height: 8px; }
.carrusel-pista::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 4px; }
.carrusel-pista .video-marco {
  flex: 0 0 auto; width: 248px; scroll-snap-align: start; margin: 0;
}
.carrusel-controles {
  display: flex; align-items: center; justify-content: center; gap: var(--e-4);
}
.carrusel-controles .slider-flecha {
  background: var(--superficie); border-color: var(--borde-fuerte); color: var(--texto);
}
.carrusel-controles .slider-flecha:hover { color: #fff; }
.carrusel-controles .slider-flecha:disabled {
  opacity: .35; cursor: not-allowed; transform: none;
  background: var(--superficie); border-color: var(--borde); color: var(--texto);
  box-shadow: none;
}
.carrusel-nota {
  margin: 0; font-size: var(--t-xs); color: var(--texto-suave);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}

/* ---------- 19b. Prueba social: reseñas y perfiles ---------- */
.resenas { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .resenas { grid-template-columns: auto 1fr; gap: var(--e-8); } }

.resenas-nota {
  text-align: center; padding: var(--e-6) var(--e-7);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-xl);
  backdrop-filter: blur(10px);
}
.resenas-nota b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(3.2rem, 2rem + 4vw, 5rem); line-height: 1; letter-spacing: .02em;
  background: var(--g-texto-claro);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.resenas-estrellas {
  display: flex; gap: 3px; justify-content: center; margin: var(--e-3) 0 var(--e-2);
}
.resenas-estrellas svg { width: 22px; height: 22px; fill: var(--ambar); }
.resenas-nota small {
  display: block; color: #A9BAC2; font-size: var(--t-sm); font-weight: 600;
}

.perfiles { display: grid; gap: var(--e-3); }
@media (min-width: 560px) { .perfiles { grid-template-columns: repeat(2, 1fr); } }
.perfil {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md);
  text-decoration: none; color: #DCE6EA;
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.perfil:hover {
  background: rgba(255,255,255,.11); border-color: var(--cian-el);
  transform: translateY(-3px); color: #fff;
}
.perfil-icono {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
}
.perfil-icono svg { width: 22px; height: 22px; fill: currentColor; }
.perfil b { display: block; font-size: var(--t-sm); color: #FFFDF9; }
.perfil small { color: #9FB2BA; font-size: var(--t-xs); }

/* ---------- 20. Migas de pan ---------- */
.migas {
  font-size: var(--t-sm);
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
}
.migas ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1);
  list-style: none; margin: 0; padding: 0;
}
.migas li { margin: 0; display: flex; align-items: center; }
.migas li + li::before {
  content: ""; flex-shrink: 0;
  width: 16px; height: 16px; margin-inline: var(--e-1);
  background: var(--borde-fuerte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.migas a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .8rem; border-radius: var(--r-full);
  color: var(--texto-suave); text-decoration: none; font-weight: 600;
  transition: background var(--tr), color var(--tr);
}
.migas a:hover { background: var(--cian-claro); color: var(--cian-osc); }
/* icono de casa solo en el primer enlace */
.migas li:first-child a::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.migas [aria-current="page"] {
  padding: .38rem .8rem; border-radius: var(--r-full);
  background: var(--g-marca); color: #fff; font-weight: 700;
  box-shadow: var(--glow-cian);
}

/* ---------- 21. CTA final ---------- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: var(--t-2xl); max-width: 17ch; margin-inline: auto; }
.cta-final .entradilla { margin-inline: auto; margin-bottom: var(--e-7); }
.cta-final .grupo-botones { justify-content: center; }

/* ---------- 22. Pie ---------- */
.pie {
  background: var(--g-noche); color: #A9BAC2; padding-block: var(--e-9) var(--e-5);
  font-size: var(--t-sm); position: relative; overflow: hidden; isolation: isolate;
}
.pie::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 70%; z-index: -1;
  background: radial-gradient(50% 60% at 30% 40%, rgba(0,194,255,.16), transparent 70%);
  filter: blur(30px);
}
.pie-rejilla { display: grid; gap: var(--e-6); margin-bottom: var(--e-8); }
@media (min-width: 768px) { .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--e-6); } }
.pie h3 {
  color: #FFFDF9; font-size: 1.22rem; font-family: var(--display); font-weight: 400;
  letter-spacing: .03em; margin-bottom: var(--e-4);
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: var(--e-3); }
.pie a { color: #A9BAC2; text-decoration: none; transition: color var(--tr); }
.pie a:hover { color: var(--cian-el); }
.pie-legal {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--e-5);
  display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between;
  font-size: var(--t-xs); color: #8496A0;
}
.pie-logo { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.pie-logo img { width: 52px; height: 52px; border-radius: var(--r-sm); background: #fff; }
.pie-marca { color: #FFFDF9; font-family: var(--display); font-size: 1.2rem; font-weight: 400; letter-spacing: .02em; }
.redes { display: flex; gap: var(--e-3); margin-top: var(--e-5); }
.redes a {
  width: 46px; height: 46px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: background var(--tr), border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.redes a:hover {
  background: var(--g-marca); border-color: transparent; color: #fff;
  transform: translateY(-3px); box-shadow: var(--glow-cian);
}
.redes svg { width: 21px; height: 21px; fill: currentColor; }

/* ---------- 23. Barra móvil y WhatsApp ---------- */
.barra-movil {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--borde);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px -12px rgba(8,22,28,.4);
}
.barra-movil a {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 60px; padding: var(--e-3);
  background: var(--superficie); color: var(--texto);
  font-weight: 700; font-size: var(--t-sm); text-decoration: none;
}
.barra-movil a.destacado { background: #128C4A; color: #fff; }
.barra-movil svg { width: 20px; height: 20px; }
@media (min-width: 1060px) { .barra-movil { display: none; } }
@media (max-width: 1059px) { body { padding-bottom: 60px; } }

.wa-flotante {
  position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 90;
  width: 62px; height: 62px; border-radius: var(--r-full);
  background: #128C4A; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 40px -12px rgba(18,140,74,.9);
  transition: transform var(--tr);
}
.wa-flotante::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid rgba(18,140,74,.5);
  animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
.wa-flotante:hover { transform: scale(1.09); color: #fff; }
.wa-flotante svg { width: 31px; height: 31px; fill: currentColor; }
@media (max-width: 1059px) { .wa-flotante { display: none; } }

/* ---------- 24. Prosa ---------- */
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { margin-top: var(--e-8); }
.prosa h3 { margin-top: var(--e-6); }
.prosa img { border-radius: var(--r-md); margin-block: var(--e-5); }
.prosa figure { margin: var(--e-5) 0; }
.prosa figcaption { font-size: var(--t-sm); color: var(--texto-suave); margin-top: var(--e-2); }
.prosa blockquote {
  margin: var(--e-6) 0; padding-left: var(--e-5);
  border-left: 4px solid var(--cian); font-size: var(--t-md); color: var(--texto-suave);
}
.meta-articulo {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  font-size: var(--t-sm); color: var(--texto-suave);
  padding-bottom: var(--e-5); border-bottom: 1px solid var(--borde); margin-bottom: var(--e-6);
}

/* ---------- 25. Enlaces de silo ---------- */
.enlaces-silo { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); list-style: none; padding: 0; margin: 0; }
.enlaces-silo li { margin: 0; }
.enlaces-silo a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-md);
  text-decoration: none; color: var(--texto); font-weight: 600; font-size: var(--t-sm);
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.enlaces-silo a:hover {
  border-color: var(--cian); transform: translateX(5px);
  color: var(--cian-osc); box-shadow: var(--glow-cian);
}
.enlaces-silo a::after { content: "→"; color: var(--cian-osc); font-size: 1.1em; }

/* ---------- 26. Revelado al hacer scroll ---------- */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1); }
.revelar.visible { opacity: 1; transform: none; }
.rejilla .revelar:nth-child(2) { transition-delay: 90ms; }
.rejilla .revelar:nth-child(3) { transition-delay: 180ms; }
.rejilla .revelar:nth-child(4) { transition-delay: 270ms; }

/* ---------- 27. Utilidades ---------- */
.img-redondeada { border-radius: var(--r-lg); box-shadow: var(--sombra-md); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--e-4); } .mt-5 { margin-top: var(--e-5); } .mt-6 { margin-top: var(--e-6); }
.mb-5 { margin-bottom: var(--e-5); } .mb-6 { margin-bottom: var(--e-6); }

/* ---------- 28. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .hero-media img { animation: none; }
  .diapo-media img { transform: none; }
  .diapo-contenido > * { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .barra-movil, .wa-flotante, .motor, .videos, .slider-barra, .baja { display: none !important; }
  body { background: #fff; }
  .seccion-oscura, .pie { background: #fff !important; color: #000 !important; }
}