/* ═══════════════════════════════════════════════════════════════════
   Clínica Dental Patagonia · Pucón — hoja de estilo
   Demo comercial de Yordy Serna. Sin build, sin librerías, sin frameworks.

   ── IDENTIDAD ───────────────────────────────────────────────────────
   Dirección: "HIELO PATAGÓNICO". Blanco nieve como superficie dominante,
   azul hielo profundo como tinta y un glaciar frío racionado. Sale del
   propio logo del negocio —un diente con el volcán Villarrica nevado
   dentro— y resuelve dos problemas del registro de identidades:

   · Nueve de los catorce proyectos anteriores son fondo oscuro con
     acento cálido, y cuatro de esos naranjas son casi el mismo. Este es
     el primero **claro dominante y completamente frío**.
   · El único azul del registro es constructora ekla (#06182E de fondo,
     cota #62B4EE, acento naranja). Acá el azul NO es fondo sino tinta
     sobre blanco, y el acento es frío. Puestos uno al lado del otro no
     se parecen: ekla es un plano nocturno, esto es una sala blanca.

   Advertencia atendida: el "celeste-clínica" genérico es el aire de
   plantilla comprada. Por eso el celeste vivo del logo NO se usa como
   superficie: la tinta es un petróleo profundo y el acento (#0B6E93) es
   lo bastante oscuro para pasar AA sobre blanco, cosa que el celeste del
   logo no hace ni de cerca.

   ── TIPOGRAFÍA ──────────────────────────────────────────────────────
   Marcellus + Onest + Sometype Mono. Las tres nuevas: ninguna aparece en
   los catorce proyectos anteriores.

   · Marcellus (display) — romana de inscripción, no didone. Transmite
     institución y "doctor caro" sin el aire de revista de moda que
     tendría Bodoni Moda, que además ya se usó en bogota-barber.
   · Onest (cuerpo) — grotesca moderna de x-height alta con un ligero
     calor en las terminaciones. Clínico sin ser frío de más, que es la
     mitad del encargo. Se descartó Albert Sans por geométrica y seca.
   · Sometype Mono (dato) — mono cálida y levemente redondeada, para los
     precios de la carta. Con tabular-nums las columnas se alinean solas.
     Se descartó IBM Plex Mono (ya va dos veces) y Geist Mono (look de
     dashboard, no de clínica).

   ── CONTRASTES MEDIDOS (WCAG, sobre el fondo que corresponde) ────────
   · --hielo   #0A2A3D sobre #FFFFFF ......... 15,9:1
   · --suave   #556B77 sobre #F6F9FA .......... 5,29:1  AA
   · --oro     #8F5F06 sobre #F6F9FA .......... 5,21:1  AA
   · --glaciar #0B6E93 sobre #FFFFFF .......... 5,73:1  AA
   · --glaciar-claro #45B8E0 sobre #0A2A3D .... 6,51:1  AA
   · --abierto #0F7A45 sobre #FFFFFF .......... 5,40:1  AA
   · --alerta  #A8322B sobre #FFFFFF .......... 6,65:1  AA
   El fondo decide el tono: --glaciar es para texto sobre claro y
   --glaciar-claro SÓLO para texto sobre la tinta. Cambiarlos de lado
   rompe los dos.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* superficies */
  --blanco:#FFFFFF;
  --nieve:#F6F9FA;
  --nieve-honda:#EAF1F4;

  /* tinta */
  --hielo:#0A2A3D;
  --hielo-medio:#123D53;
  --suave:#556B77;
  --linea:#D7E3E8;
  --linea-clara:rgba(255,255,255,.16);
  --tiza:#EAF3F7;
  --tiza-suave:#B4CBD6;

  /* acento glaciar — dos variantes, una por fondo */
  --glaciar:#0B6E93;
  --glaciar-claro:#45B8E0;
  --glaciar-agua:#E4F1F7;

  /* señales */
  --abierto:#0F7A45;
  --abierto-agua:#E4F3EA;
  --alerta:#A8322B;
  --alerta-agua:#FBECEA;
  /* La unica nota calida de la paleta, y se la gana: las estrellas de
     Google se leen como estrellas de Google. El dorado de manual (#C98A16)
     da 2,9:1 sobre blanco y no pasa; este si. */
  --oro:#8F5F06;

  /* tipografía */
  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --cuerpo:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dato:"Sometype Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* escala fluida */
  --paso--1:clamp(.8rem,.77rem + .13vw,.88rem);
  --paso-0:clamp(1rem,.96rem + .19vw,1.1rem);
  --paso-1:clamp(1.15rem,1.08rem + .33vw,1.36rem);
  --paso-2:clamp(1.35rem,1.22rem + .6vw,1.72rem);
  --paso-3:clamp(1.6rem,1.38rem + 1.05vw,2.28rem);
  --paso-4:clamp(1.95rem,1.58rem + 1.75vw,3.05rem);
  --paso-5:clamp(2.3rem,1.75rem + 2.6vw,4rem);

  /* medidas */
  --ancho:1180px;
  --alto-cab:64px;
  --alto-urgencia:64px;
  --salida:cubic-bezier(.16,1,.3,1);
  /* Esquina corta y pareja en todo: los botones van a 3 px y las tarjetas a
     4. Con la pildora de antes la pagina se leia como app de telefono. */
  --radio:4px;
}

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

/* Declarado a mano y con !important a propósito: el atributo hidden lo
   pisa cualquier regla que dé display, y el botón del menú nace hidden. */
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  /* La cabecera es sticky: sin esto, cada ancla deja el título tapado. */
  scroll-padding-top:112px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--nieve);
  color:var(--hielo);
  font-family:var(--cuerpo);
  font-size:var(--paso-0);
  line-height:1.62;
  font-weight:400;
  /* La barra de urgencia es fija abajo en celular: sin este hueco taparía
     la última línea de la página. Se anula donde la barra no existe. */
  padding-bottom:calc(var(--alto-urgencia) + 10px + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--glaciar); }

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.1; letter-spacing:-.005em; }
h1{ font-size:var(--paso-5); margin:0 0 1.1rem; }
h2{ font-size:var(--paso-4); margin:0 0 1rem; }
h3{ font-size:var(--paso-1); margin:0 0 .5rem; }
p{ margin:0 0 1rem; }

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

.caja{ width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--hielo); color:var(--tiza);
  padding:.85rem 1.2rem; text-decoration:none;
}
.saltar:focus{ left:.5rem; top:.5rem; }

/* ── reveals ─────────────────────────────────────────────────────
   La clase .revelar la pone main.js, nunca el HTML: si el script no
   carga, no queda nada escondido. */
.js .revelar{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--salida), transform .7s var(--salida);
}
.js .revelar.visible{ opacity:1; transform:none; }

/* ── marcador de dato de ejemplo ─────────────────────────────────
   Todo lo que lleva .ej es relleno. Se ve a simple vista para poder
   decir en la reunión "esto se completa con sus datos reales", y se
   borra junto con la clase cuando el dato llega. */
.ej{
  position:relative;
  outline:1px dashed color-mix(in srgb, var(--alerta) 42%, transparent);
  outline-offset:10px;
  border-radius:2px;
}
.ej::after{
  content:"ejemplo";
  position:absolute; top:-10px; right:-10px;
  transform:translateY(-100%);
  font-family:var(--dato); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--alerta);
  background:var(--nieve);
  padding:0 .4rem;
  pointer-events:none;
}
.ej--inline{
  outline:1px dashed color-mix(in srgb, var(--alerta) 34%, transparent);
  outline-offset:3px;
}
/* A 375 px un offset de 10 px empuja la línea punteada fuera del viewport
   y aparece scroll horizontal. */
@media (max-width:560px){
  .ej{ outline-offset:6px; }
  .ej::after{ top:-6px; right:-6px; font-size:.55rem; }
}

/* ── botones ────────────────────────────────────────────────────── */
/* Botón rectangular, no píldora. La esquina de 3 px y la sombra suave
   debajo son toda la diferencia: la píldora se lee como app de teléfono y
   acá el negocio es una clínica. La sombra va sólo en los rellenos —un
   botón fantasma con sombra parece un botón sólido roto. */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  min-height:48px; padding:.85rem 1.8rem;
  font-family:var(--cuerpo); font-size:var(--paso--1); font-weight:600;
  letter-spacing:.015em;
  text-decoration:none; border:1px solid transparent; border-radius:3px;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease,
             transform .2s ease, box-shadow .2s ease;
}
.boton:hover{ transform:translateY(-1px); }

.boton--acento{
  background:var(--hielo); color:var(--tiza);
  box-shadow:0 6px 16px -8px rgba(10,42,61,.65);
}
.boton--acento:hover{ background:var(--hielo-medio); box-shadow:0 11px 22px -10px rgba(10,42,61,.7); }

.boton--fantasma{
  background:transparent; color:var(--hielo);
  border-color:color-mix(in srgb, var(--hielo) 30%, transparent);
}
.boton--fantasma:hover{ border-color:var(--hielo); background:rgba(10,42,61,.05); }

.boton--fantasma-claro{
  background:transparent; color:var(--tiza);
  border-color:rgba(255,255,255,.45);
}
.boton--fantasma-claro:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.boton--urgencia{
  background:var(--abierto); color:#fff;
  box-shadow:0 6px 16px -8px rgba(15,122,69,.8);
}
.boton--urgencia:hover{ background:#0C6338; box-shadow:0 11px 22px -10px rgba(15,122,69,.85); }

.boton--alerta{
  background:var(--alerta); color:#fff;
  box-shadow:0 6px 16px -8px rgba(168,50,43,.7);
}
.boton--alerta:hover{ background:#8C2822; box-shadow:0 11px 22px -10px rgba(168,50,43,.75); }

.boton--fila{
  min-height:44px; padding:.5rem 1.1rem;
  background:var(--glaciar-agua); color:var(--glaciar);
  border-color:color-mix(in srgb, var(--glaciar) 25%, transparent);
  font-size:.82rem;
}
.boton--fila:hover{ background:var(--glaciar); color:#fff; box-shadow:0 6px 14px -8px rgba(11,110,147,.7); }

.boton--ancho{ width:100%; }

/* ── rótulo mono ────────────────────────────────────────────────── */
.ojo{
  font-family:var(--dato); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--glaciar);
  margin:0 0 .9rem;
}
.ojo--claro{ color:var(--glaciar-claro); }
.ojo--alerta{ color:var(--alerta); }

/* ═══════════ BANDA DE PROPUESTA ═══════════ */
.propuesta{ background:var(--hielo); color:var(--tiza); }
.propuesta__cinta{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
  padding:.85rem 0;
}
.propuesta__marca{
  font-family:var(--dato); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--hielo); background:var(--glaciar-claro);
  padding:.25rem .55rem; border-radius:3px; white-space:nowrap;
}
.propuesta__txt{ margin:0; font-size:.85rem; color:var(--tiza-suave); flex:1 1 22ch; line-height:1.5; }
.propuesta__txt strong{ color:var(--tiza); font-weight:600; }
.propuesta__txt code{ font-family:var(--dato); font-size:.9em; color:var(--glaciar-claro); }
.propuesta__link{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.82rem; font-weight:600; color:var(--glaciar-claro);
  text-decoration:none; border-bottom:1px solid currentColor;
  padding:.4rem 0; white-space:nowrap;
}
.propuesta__link:hover{ color:#fff; }

/* ═══════════ CABECERA FANTASMA ═══════════
   No se monta encima de la portada con margen negativo, y es a propósito:
   el alto de esta barra cambia según haya JS o no (con JS el nav es un
   panel y la barra mide una fila; sin JS el nav queda como lista y mide
   dos). Un margen negativo atado a un alto variable descuadra la portada
   justo en el caso degradado. En su lugar, la portada empieza pegada
   debajo y comparte el fondo nieve: transparente arriba del todo se ve
   exactamente igual, y no hay número que mantener sincronizado. */
.cabecera{
  position:sticky; top:0; z-index:80;
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
  transition:transform .3s var(--salida), background-color .3s ease,
             border-color .3s ease, box-shadow .3s ease;
}
.js .cabecera:not(.cabecera--solida){
  background:transparent;
  border-bottom-color:transparent;
}
.cabecera--solida{ box-shadow:0 8px 24px -18px rgba(10,42,61,.55); }
.cabecera--oculta{ transform:translateY(-100%); }
/* Nunca esconderla con el foco de TECLADO dentro: si el usuario llegó
   tabulando, esconder la barra le arrebata de la pantalla el elemento que
   tiene enfocado.
   Va con :has(:focus-visible) y no con :focus-within, y costó descubrirlo:
   un toque en el botón del menú también deja el foco puesto, así que con
   :focus-within la barra quedaba congelada para el resto de la sesión
   apenas alguien abría y cerraba el menú una vez. :focus-visible sólo
   marca el foco que el navegador considera de teclado, que es el único
   que hay que proteger. */
.cabecera:has(:focus-visible){ transform:none !important; }
/* Ni con el menú abierto: el panel se iría con ella. */
.cabecera--menu{ transform:none !important; }

.cabecera__fila{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  min-height:var(--alto-cab);
  flex-wrap:wrap;
}

.marca{
  display:flex; align-items:center; gap:.6rem;
  min-height:48px; text-decoration:none; color:var(--hielo);
  margin-right:auto;
}
.marca__logo{ width:auto; height:38px; flex:none; }
.marca__txt{
  font-family:var(--display); font-size:1.02rem; line-height:1.05;
  display:flex; flex-direction:column;
}
.marca__sub{
  font-family:var(--dato); font-size:.56rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--glaciar); margin-top:.28rem;
}

.nav__lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.1rem .3rem;
}
.nav a{
  display:flex; align-items:center; min-height:44px;
  padding:.35rem .7rem;
  font-size:.85rem; font-weight:500; color:var(--hielo);
  text-decoration:none; border-radius:3px;
}
.nav a:hover{ background:var(--glaciar-agua); color:var(--glaciar); }
.nav a[aria-current="true"]{ color:var(--glaciar); font-weight:600; }
.js .cabecera:not(.cabecera--solida) .nav a:hover{ background:rgba(10,42,61,.07); }

.cabecera__cta{ display:none; }

.menu-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px; padding:.5rem .9rem;
  background:transparent; color:var(--hielo);
  border:1px solid color-mix(in srgb, var(--hielo) 25%, transparent);
  border-radius:3px;
  font-family:var(--cuerpo); font-size:.82rem; font-weight:600;
  cursor:pointer;
}
.menu-btn__barras{ display:grid; gap:3px; width:16px; }
.menu-btn__barras i{ display:block; height:2px; background:currentColor; border-radius:2px; }

/* ── celular: el nav es un panel ──────────────────────────────── */
@media (max-width:899px){
  /* Sin JS el nav se queda como lista bajo la marca, siempre alcanzable.
     Con JS se convierte en panel y aparece el botón. */
  .js .nav{
    display:none;
    order:3; width:100%;
    border-top:1px solid var(--linea);
    padding:.4rem 0 .8rem;
  }
  .js .cabecera--menu .nav{ display:block; }
  .js .cabecera--menu{ background:var(--blanco); border-bottom-color:var(--linea); }
  .nav__lista{ flex-direction:column; gap:0; }
  .nav a{ min-height:52px; padding:.5rem .4rem; font-size:1rem; border-radius:var(--radio); }
  .marca__logo{ height:34px; }
}

@media (min-width:900px){
  .cabecera__fila{ min-height:72px; flex-wrap:nowrap; }
  .nav{ margin-inline:auto 0; }
  .cabecera__cta{ display:inline-flex; flex:none; }
  /* Acá el nav va entero en la barra: el botón de menú sobra. main.js le
     quita el atributo hidden en todos los anchos, así que si esta línea no
     está, en escritorio aparece un "Menú" al lado del propio menú. */
  .menu-btn{ display:none; }
  .marca__logo{ height:42px; }
  .marca__txt{ font-size:1.12rem; }
}

/* ═══════════ PORTADA ═══════════
   Sólo @keyframes: ni observer ni rAF. El primer pantallazo no puede
   quedar colgando de que un script dispare. */
.portada{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(178deg, var(--blanco) 0%, var(--nieve) 42%, var(--nieve-honda) 100%);
  padding:clamp(2.5rem,7vh,5rem) 0 clamp(4rem,9vh,6rem);
}

/* Fondo dibujado. Cero bytes de imagen: una foto de 680 px estirada al
   ancho de un escritorio se ve mal, un degradado no se ve nunca mal. */
.hielo{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hielo__halo{
  position:absolute; top:-22%; right:-18%;
  width:min(70vw,620px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(69,184,224,.26) 0%, rgba(69,184,224,.10) 46%, transparent 72%);
}
.hielo__curvas{
  position:absolute; inset:auto 0 0; width:100%; height:62%;
  fill:none; stroke:rgba(11,110,147,.16); stroke-width:1.2;
}
.hielo__cumbre{
  position:absolute; right:-4%; bottom:0;
  width:min(58vw,520px); height:46%;
}
.hielo__ladera{ fill:rgba(11,110,147,.07); }
.hielo__nieve{ fill:rgba(255,255,255,.75); }

.portada__caja{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:grid; gap:clamp(2.5rem,7vw,4rem);
}
.portada__bajada{
  font-size:var(--paso-1); color:var(--hielo-medio);
  max-width:44ch; margin-bottom:1.8rem;
}
.portada__bajada strong{ font-weight:600; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; }

.sellos{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  border-top:1px solid var(--linea); padding-top:1.2rem;
}
.sellos li{ display:flex; flex-direction:column; gap:.1rem; }
.sellos b{
  font-family:var(--dato); font-size:1.28rem; font-weight:700;
  color:var(--hielo); line-height:1; font-variant-numeric:tabular-nums;
}
.sellos span{ font-size:.78rem; color:var(--suave); }

/* Marco de la portada + ficha que se le sale por la esquina.
   Profundidad por composición: la ficha no está dentro del marco, lo
   pisa. Es el escalón barato de la escalera y no cuesta una librería. */
.marco{ position:relative; margin:0 0 3.2rem; }
.marco__foto{
  /* 16/9 y no 16/11: la foto de la casa es apaisada 2,17:1, y un marco mas
     alto obliga a recortarle los lados y a estirar lo que queda. */
  aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radio);
  border:1px solid var(--linea);
  box-shadow:0 30px 60px -34px rgba(10,42,61,.55), 0 4px 14px -8px rgba(10,42,61,.25);
  background:var(--nieve-honda);
}
.marco__foto img{ width:100%; height:100%; object-fit:cover; }
.marco__pie{
  margin:.7rem 0 0; font-size:.76rem; color:var(--suave);
  font-family:var(--dato);
}
.ficha{
  position:absolute; left:0; right:2.5rem; bottom:-2.2rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-left:3px solid var(--glaciar);
  border-radius:var(--radio);
  padding:.85rem 1.1rem;
  box-shadow:0 18px 40px -22px rgba(10,42,61,.45);
}
.ficha__estrellas{ margin:0 0 .1rem; color:var(--oro); font-size:.9rem; letter-spacing:.12em; }
.ficha__dato{ margin:0; font-size:.94rem; }
.ficha__dato b{ font-family:var(--dato); font-weight:700; font-variant-numeric:tabular-nums; }
.ficha__nota{ margin:.15rem 0 0; font-size:.76rem; color:var(--suave); }

@media (min-width:980px){
  .portada{ padding-block:clamp(3rem,8vh,6rem) clamp(5rem,10vh,7rem); }
  .portada__caja{ grid-template-columns:1.02fr .98fr; align-items:center; }
  .marco{ margin-bottom:0; }
  .ficha{ left:-2.2rem; right:auto; width:min(74%,300px); bottom:-1.6rem; }
}

/* Entrada de la portada. Cuelga de .js: sin script no se esconde nada. */
@keyframes sube{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes aparece{ from{ opacity:0; } to{ opacity:1; } }
@keyframes respira{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.06); opacity:.82; } }

.js .portada .ojo,
.js .portada h1,
.js .portada__bajada,
.js .portada__acciones,
.js .sellos,
.js .marco__foto,
.js .marco__pie,
.js .ficha{
  opacity:0;
  animation:sube .85s var(--salida) forwards;
}
.js .portada .ojo{ animation-delay:.05s; }
.js .portada h1{ animation-delay:.14s; }
.js .portada__bajada{ animation-delay:.24s; }
.js .portada__acciones{ animation-delay:.34s; }
.js .sellos{ animation-delay:.44s; }
.js .marco__foto{ animation-delay:.2s; }
.js .marco__pie{ animation-delay:.5s; }
.js .ficha{ animation-delay:.62s; }
.js .hielo__halo{ animation:respira 9s ease-in-out infinite 1.2s; }

/* ═══════════ BANDA 24 HORAS ═══════════ */
.banda24{
  background:var(--hielo); color:var(--tiza);
  border-top:1px solid rgba(255,255,255,.08);
}
.banda24__fila{
  display:grid; gap:1.2rem;
  padding:clamp(1.6rem,4vw,2.4rem) 0;
  align-items:center;
}
.banda24__estado{
  display:inline-flex; align-items:center; gap:.55rem;
  justify-self:start; margin:0;
  font-family:var(--dato); font-size:.74rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:#8DE0AE;
  background:rgba(15,122,69,.28);
  border:1px solid rgba(141,224,174,.4);
  padding:.4rem .8rem; border-radius:3px;
}
.banda24__punto{
  width:8px; height:8px; border-radius:50%; background:#4ADE80; flex:none;
  box-shadow:0 0 0 0 rgba(74,222,128,.55);
}
.js .banda24__punto{ animation:latido 2.4s ease-out infinite; }
@keyframes latido{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.5); }
  70%{ box-shadow:0 0 0 10px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
.banda24__cuerpo h2{ font-size:var(--paso-2); margin:0 0 .4rem; color:#fff; }
.banda24__cuerpo p{ margin:0; color:var(--tiza-suave); max-width:52ch; font-size:.94rem; }
.banda24 .boton{ justify-self:start; }

@media (min-width:900px){
  .banda24__fila{ grid-template-columns:auto 1fr auto; gap:2rem; }
  .banda24__estado{ align-self:center; }
}

/* ═══════════ LÁMINAS A SANGRE ═══════════ */
.lamina{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:88vh; min-height:88svh;
  display:flex; align-items:center;
  padding:clamp(3.5rem,10vh,6rem) 0;
  background:var(--hielo); color:var(--tiza);
}
.lamina__foto{ position:absolute; inset:0; z-index:-3; }
/* <picture> es inline por defecto: sin esto la img de dentro no tiene contra
   qué resolver el height:100% y la lámina se queda con el fondo pelado. */
.lamina__foto picture{ display:block; width:100%; height:100%; }
.lamina__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.lamina--der .lamina__foto img{ object-position:center 30%; }
.lamina__nota{
  margin:1.4rem 0 0; font-family:var(--dato); font-size:.72rem;
  color:var(--tiza-suave); max-width:40ch;
}
.lamina__velo{
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(96deg,
    rgba(6,20,30,.94) 0%, rgba(6,20,30,.86) 34%,
    rgba(6,20,30,.52) 68%, rgba(6,20,30,.68) 100%);
}
.lamina__caja{
  position:relative; z-index:1;
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
}
.lamina h2{ font-size:var(--paso-4); color:#fff; max-width:17ch; margin:0 0 1.1rem; }
.lamina p{ color:var(--tiza-suave); max-width:46ch; margin-bottom:1.7rem; font-size:var(--paso-0); }
/* Sobre foto el párrafo va en tiza plena y no en tiza suave: el gris apagado
   alcanza de sobra contra un fondo liso, pero contra una zona clara de la
   foto —una ventana, una bata blanca— se cae a 3,5:1. */
.lamina--foto p{ color:var(--tiza); }

/* Láminas de fondo dibujado: hielo (azul) y bosque (verde-petróleo). */
.lamina__hielo{ position:absolute; inset:0; z-index:-1; }
.lamina--hielo{ background-color:#0A2A3D; background-image:linear-gradient(160deg,#08283A 0%,#0A2A3D 46%,#06202F 100%); }
.lamina--bosque{ background-color:#0A2A3D; background-image:linear-gradient(160deg,#0A2E33 0%,#0A2A3D 55%,#071E2B 100%); }
.lamina__halo{
  position:absolute; top:-14%; left:-10%;
  width:min(80vw,700px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(69,184,224,.20) 0%, rgba(69,184,224,.07) 48%, transparent 72%);
}
.lamina--bosque .lamina__halo{
  left:auto; right:-12%;
  background:radial-gradient(circle at 50% 50%,
    rgba(122,208,190,.18) 0%, rgba(122,208,190,.06) 48%, transparent 72%);
}
.lamina__curvas{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:rgba(150,205,230,.16); stroke-width:1.1;
}
.lamina--bosque .lamina__curvas{ stroke:rgba(150,215,200,.14); }

@media (min-width:900px){
  .lamina--der .lamina__caja{ display:flex; justify-content:flex-end; }
  .lamina--der .lamina__caja > *{ text-align:right; }
  .lamina--der .lamina__caja{ flex-direction:column; align-items:flex-end; }
  .lamina--der h2, .lamina--der p{ margin-left:auto; }
  .lamina--der .lamina__velo{ background:linear-gradient(264deg,
    rgba(6,20,30,.94) 0%, rgba(6,20,30,.86) 34%,
    rgba(6,20,30,.52) 68%, rgba(6,20,30,.68) 100%); }
}

/* ── lámina de la atención ─────────────────────────────────────────
   La escena ya viene oscura —box con luz dirigida y ventana de noche—, así
   que con el velo de las otras láminas la foto desaparecía entera. Este es
   bastante más liviano y el texto blanco igual queda sobre 9:1: se midió
   sobre los píxeles reales de la foto en la zona del texto, no a ojo.
   Van después del bloque de --der a propósito: misma especificidad, así que
   lo que manda es el orden. */
.lamina--atencion .lamina__velo{
  background:linear-gradient(96deg,
    rgba(6,20,30,.90) 0%, rgba(6,20,30,.82) 34%,
    rgba(6,20,30,.52) 68%, rgba(6,20,30,.62) 100%);
}
/* En escritorio la caja es más ancha que la foto y sólo se recorta de alto,
   así que el 70 % horizontal no hace nada ahí. Sí hace en el celular, donde
   la lámina es vertical y sin él el recorte se queda con la camilla en vez
   de con la gente. */
.lamina--atencion .lamina__foto img{ object-position:70% 38%; }
@media (min-width:900px){
  .lamina--atencion .lamina__velo{
    background:linear-gradient(264deg,
      rgba(6,20,30,.90) 0%, rgba(6,20,30,.82) 34%,
      rgba(6,20,30,.52) 68%, rgba(6,20,30,.62) 100%);
  }
}

/* Parallax de las capas dibujadas, ligado al scroll y fuera del hilo
   principal. Va dentro de @supports como mejora: donde no exista, las
   capas se quedan quietas y no se nota que falta nada. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .lamina__curvas{
      animation:deriva linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    .lamina__halo{
      animation:deriva-halo linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    .lamina--foto .lamina__foto img{
      animation:deriva-foto linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes deriva{ from{ transform:translateY(6%); } to{ transform:translateY(-6%); } }
@keyframes deriva-halo{ from{ transform:translateY(14%); } to{ transform:translateY(-14%); } }
@keyframes deriva-foto{ from{ transform:scale(1.1) translateY(2%); } to{ transform:scale(1.1) translateY(-2%); } }

/* ═══════════ SECCIONES ═══════════ */
.seccion{ padding:clamp(3.2rem,8vw,5.5rem) 0; background:var(--blanco); }
.seccion--nieve{ background:var(--nieve); }
.seccion--nieve .ej::after{ background:var(--nieve); }
.seccion .ej::after{ background:var(--blanco); }
.seccion--tinta{ background:var(--hielo); color:var(--tiza); }
.seccion--tinta .ej::after{ background:var(--hielo); color:#F09A93; }
.seccion--tinta .ej{ outline-color:rgba(240,154,147,.45); }

.titulo{ font-size:var(--paso-3); margin:0 0 1rem; max-width:20ch; }
.titulo--claro{ color:#fff; }
.entrada{ color:var(--suave); max-width:56ch; margin:0 0 2.4rem; }
.entrada--clara{ color:var(--tiza-suave); }

.nota-precios{
  margin:2.2rem 0 0; font-size:.8rem; color:var(--suave);
  max-width:58ch; font-family:var(--dato); line-height:1.55;
}

/* ═══════════ LA CARTA CLARA ═══════════ pieza firma ═══════════ */
.carta{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
}
.carta__cabecera{ display:none; }

.carta__lista{ list-style:none; margin:0; padding:0; }

.fila{
  display:grid; gap:.55rem;
  padding:1.25rem clamp(1rem,3vw,1.5rem);
  border-bottom:1px solid var(--linea);
}
.fila:last-child{ border-bottom:0; }
.fila--destaca{ background:var(--glaciar-agua); }

.fila__nombre h3{ margin:0; font-size:var(--paso-1); }
.fila__etiq{
  margin:.15rem 0 0; font-family:var(--dato); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--suave);
}
.fila__precio b{
  display:block;
  font-family:var(--dato); font-size:1.06rem; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--hielo);
}
.fila__precio span{ display:block; font-size:.76rem; color:var(--suave); }
.fila__dura span{
  display:inline-block;
  font-family:var(--dato); font-size:.74rem; color:var(--glaciar);
  background:var(--glaciar-agua); border-radius:3px; padding:.2rem .6rem;
}
.fila--destaca .fila__dura span{ background:var(--blanco); }
.fila__incluye{ font-size:.88rem; color:var(--suave); line-height:1.55; }
.fila__accion{ margin-top:.2rem; }

.carta__pie{
  background:var(--nieve); padding:1.3rem clamp(1rem,3vw,1.5rem);
  border-top:1px solid var(--linea);
  display:grid; gap:.8rem;
}
.carta__pie p{ margin:0; font-size:.85rem; color:var(--suave); line-height:1.55; }
.carta__pie b{ color:var(--hielo); }

@media (min-width:1000px){
  .carta__cabecera{
    display:grid;
    grid-template-columns:minmax(190px,1.1fr) minmax(160px,.95fr) 118px minmax(230px,1.7fr) 118px;
    gap:1.2rem;
    padding:.8rem clamp(1rem,3vw,1.5rem);
    background:var(--hielo);
    font-family:var(--dato); font-size:.66rem; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--tiza-suave);
  }
  .fila{
    grid-template-columns:minmax(190px,1.1fr) minmax(160px,.95fr) 118px minmax(230px,1.7fr) 118px;
    gap:1.2rem; align-items:start;
  }
  .fila__accion{ margin-top:0; justify-self:end; }
  .carta__pie{ grid-template-columns:1fr 1fr; gap:2rem; }
}

/* ═══════════ TRATAMIENTOS ═══════════ */
.rejilla-trat{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.4rem;
}
.trat{
  background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.trat:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--glaciar) 35%, transparent);
  box-shadow:0 22px 44px -30px rgba(10,42,61,.6);
}
.trat__foto{ aspect-ratio:16/10; overflow:hidden; background:var(--nieve-honda); }
/* Varias fuentes son verticales y el marco es apaisado: centrado a la mitad
   les corta la cara. A 45 % queda dentro en todas. */
.trat__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.trat__txt{ padding:1.1rem 1.2rem 1.35rem; }
.trat__txt h3{ margin:0 0 .45rem; }
.trat__txt p{ margin:0; font-size:.9rem; color:var(--suave); line-height:1.58; }

@media (min-width:660px){ .rejilla-trat{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .rejilla-trat{ grid-template-columns:repeat(3,1fr); } }

/* ═══════════ CÓMO ES LA VISITA ═══════════ */
.pasos{
  list-style:none; margin:0 0 3rem; padding:0;
  display:grid; gap:1.2rem;
  counter-reset:paso;
}
.paso{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1.3rem 1.3rem 1.4rem;
  border-top:3px solid var(--glaciar);
}
.paso__num{
  margin:0 0 .5rem; font-family:var(--dato); font-size:.8rem; font-weight:700;
  letter-spacing:.14em; color:var(--glaciar);
}
.paso h3{ margin:0 0 .5rem; font-size:var(--paso-1); }
.paso p{ margin:0; font-size:.88rem; color:var(--suave); line-height:1.58; }

@media (min-width:700px){ .pasos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .pasos{ grid-template-columns:repeat(4,1fr); } }

.visita__espera{
  display:grid; gap:1.6rem; align-items:center;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden;
}
.visita__foto{ aspect-ratio:4/3; overflow:hidden; background:var(--nieve-honda); }
/* Igual que arriba: la foto de la sala mide 287 px de ancho y sin tope se
   estiraba a 470. */
.visita__foto{ max-width:340px; }
.visita__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.visita__txt{ padding:0 1.3rem 1.5rem; }
.visita__txt h3{ font-size:var(--paso-2); max-width:20ch; }
.visita__txt p{ margin:0; color:var(--suave); max-width:52ch; }

@media (min-width:800px){
  .visita__espera{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:0; }
  .visita__foto{ aspect-ratio:auto; height:100%; min-height:320px; }
  .visita__txt{ padding:2rem 2.2rem; }
}

/* ═══════════ EQUIPO ═══════════ */
.rejilla-equipo{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; }
.pro{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1.4rem;
}
.pro__inicial{
  margin:0 0 .9rem;
  width:52px; height:52px; border-radius:4px;
  display:grid; place-items:center;
  background:var(--hielo); color:var(--glaciar-claro);
  font-family:var(--dato); font-size:1rem; font-weight:700; letter-spacing:.04em;
}
.pro h3{ margin:0 0 .25rem; font-size:var(--paso-1); }
.pro__esp{ margin:0 0 .35rem; font-size:.85rem; font-weight:600; color:var(--glaciar); }
.pro__reg{
  margin:0 0 .7rem; font-family:var(--dato); font-size:.7rem;
  color:var(--suave); letter-spacing:.02em;
}
.pro__txt{ margin:0; font-size:.88rem; color:var(--suave); line-height:1.55; }

@media (min-width:640px){ .rejilla-equipo{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .rejilla-equipo{ grid-template-columns:repeat(4,1fr); } }

/* ═══════════ CONVENIOS ═══════════ */
.rejilla-conv{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13); border-radius:var(--radio); overflow:hidden; }
.conv{ background:var(--hielo); padding:1.4rem; }
.conv h3{ margin:0 0 .5rem; color:#fff; font-size:var(--paso-1); }
.conv p{ margin:0; font-size:.88rem; color:var(--tiza-suave); line-height:1.58; }

@media (min-width:700px){ .rejilla-conv{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .rejilla-conv{ grid-template-columns:repeat(4,1fr); } }

/* ═══════════ DÓNDE ESTAMOS ═══════════ */
.donde{ display:grid; gap:2rem; }

/* Tope de ancho: las fotos del negocio son de 680 px y en el tramo de tablet
   el mosaico llegaba a ocupar 1156 px, que es estirarlas al doble. */
.mosaico{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; max-width:760px; }
.mosaico__pieza{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden;
}
.mosaico__pieza img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
/* La aerea de Pucon es 1,5:1 y la pieza ancha 2:1: centrada al 50 % le corta
   la cumbre del volcan, que es lo unico que hay que ver. */
.mosaico__pieza--ancha img{ aspect-ratio:2/1; object-position:center 34%; }
.mosaico__pie{
  margin:0; padding:.6rem .9rem;
  font-family:var(--dato); font-size:.72rem; color:var(--suave);
}

.datos__lista{ margin:0 0 1.6rem; padding:0; }
.datos__par{ padding:.9rem 0; border-bottom:1px solid var(--linea); }
.datos__par dt{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--glaciar); margin-bottom:.25rem;
}
.datos__par dd{ margin:0; font-size:1rem; }
.datos__par dd a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--dato); font-weight:500; text-decoration:none; border-bottom:1px solid;
}

.horarios{
  background:var(--nieve); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1.2rem 1.3rem; margin-bottom:1.4rem;
}
.horarios h3{ margin:0 0 .8rem; font-size:var(--paso-1); }
.horarios__lista{ list-style:none; margin:0 0 .9rem; padding:0; }
.horarios__lista li{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem;
  padding:.55rem 0; border-bottom:1px dashed var(--linea);
  font-size:.88rem;
}
.horarios__lista li:last-child{ border-bottom:0; }
.horarios__lista b{ font-family:var(--dato); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.horarios__nota{ margin:0; font-size:.8rem; color:var(--suave); }

.estacion{
  border-left:3px solid var(--glaciar); padding:.2rem 0 .2rem 1rem;
}
.estacion p{ margin:0; font-size:.9rem; color:var(--suave); }
.estacion b{ color:var(--hielo); }

@media (min-width:560px){
  .mosaico{ grid-template-columns:repeat(2,1fr); }
  .mosaico__pieza--ancha{ grid-column:1 / -1; }
}
@media (min-width:960px){
  .donde{ grid-template-columns:1.15fr .85fr; gap:2.6rem; align-items:start; }
}

/* ═══════════ RESERVA ═══════════ */
.reserva{ display:grid; gap:1.6rem; }

.form{
  display:grid; gap:1rem;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:clamp(1.2rem,3vw,1.8rem);
}
.campo{ display:grid; gap:.35rem; }
.campo label{ font-size:.82rem; font-weight:600; }
.campo label span{ font-weight:400; color:var(--suave); }
.campo input, .campo select, .campo textarea{
  font-family:var(--cuerpo); font-size:1rem; color:var(--hielo);
  background:var(--nieve);
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:.75rem .85rem; min-height:48px; width:100%;
}
.campo textarea{ resize:vertical; line-height:1.5; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible{
  outline:3px solid var(--glaciar); outline-offset:1px; background:var(--blanco);
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--suave); opacity:1; }
.form__pie{ margin:.6rem 0 0; font-size:.78rem; color:var(--suave); text-align:center; }

.resumen{
  background:var(--hielo); color:var(--tiza);
  border-radius:var(--radio); padding:clamp(1.2rem,3vw,1.8rem);
  align-self:start;
}
.resumen h3{ margin:0 0 .9rem; color:#fff; font-size:var(--paso-1); }
.resumen__papel{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radio);
  padding:1rem 1.1rem;
  font-family:var(--dato); font-size:.82rem; line-height:1.65;
  color:var(--tiza);
  white-space:normal;
}
.resumen__papel p{ margin:0 0 .35rem; }
.resumen__papel p:last-child{ margin-bottom:0; }
.resumen__papel p:empty{ display:none; }
.resumen__nota{ margin:.9rem 0 1rem; font-size:.78rem; color:var(--tiza-suave); }
.resumen__wsp{
  display:inline-block; color:var(--glaciar-claro); font-weight:600;
  font-size:.88rem; text-decoration:none; border-bottom:1px solid currentColor;
  min-height:44px; padding-top:.55rem;
}
.resumen__wsp:hover{ color:#fff; }

@media (min-width:900px){
  .reserva{ grid-template-columns:1.15fr .85fr; gap:2rem; align-items:start; }
  .form{ grid-template-columns:1fr 1fr; }
  .campo--ancho{ grid-column:1 / -1; }
}

/* ═══════════ RESEÑAS ═══════════ */
.rejilla-resenas{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; }
.resena{
  background:var(--nieve); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1.4rem;
}
.resena__estrellas{ margin:0 0 .6rem; color:var(--oro); letter-spacing:.14em; }
.resena blockquote{ margin:0 0 .8rem; }
.resena blockquote p{ margin:0; font-size:.95rem; line-height:1.6; }
.resena__firma{
  margin:0; font-family:var(--dato); font-size:.72rem;
  letter-spacing:.06em; color:var(--suave);
}
@media (min-width:760px){ .rejilla-resenas{ grid-template-columns:repeat(3,1fr); } }

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno{
  background:var(--alerta-agua);
  border-top:3px solid var(--alerta);
  padding:clamp(3.2rem,8vw,5.5rem) 0;
}
.dueno .ej::after{ background:var(--alerta-agua); }
.dueno__titulo{ font-size:var(--paso-3); margin:0 0 1.8rem; max-width:22ch; }

/* Reproducción de la pantalla negra que muestra hoy su dominio. Es el
   argumento entero de la propuesta: se ve, no se cuenta. */
.dueno__pantalla{ margin:0 0 2.4rem; max-width:640px; }
.dueno__url{
  margin:0; background:#DCE3E6; color:#465A63;
  font-family:var(--dato); font-size:.76rem;
  padding:.5rem .9rem; border-radius:var(--radio) var(--radio) 0 0;
  border:1px solid #C6D2D7; border-bottom:0;
}
.dueno__negro{
  background:#000; color:#D8D8D8;
  border:1px solid #000;
  padding:2.6rem 1.4rem 1.2rem;
  text-align:center;
  font-family:var(--cuerpo);
}
.dueno__negro p{ margin:0 0 .3rem; font-size:1rem; }
.dueno__copy{ margin-top:1.8rem !important; font-size:.75rem !important; color:#8A8A8A; }
.dueno__captura{
  margin:.6rem 0 0; font-family:var(--dato); font-size:.74rem; color:var(--suave);
}

.dueno__rejilla{ display:grid; gap:1.4rem; margin-bottom:2.4rem; }
.dueno__bloque{
  background:var(--blanco); border:1px solid #EED6D3;
  border-radius:var(--radio); padding:1.4rem;
}
.dueno__bloque h3{ margin:0 0 .7rem; font-size:var(--paso-1); }
.dueno__bloque p{ margin:0 0 .8rem; font-size:.92rem; color:#3E5561; line-height:1.6; }
.dueno__bloque p:last-child{ margin-bottom:0; }
.dueno__bloque code{ font-family:var(--dato); font-size:.9em; color:var(--alerta); }
.dueno__lista{ margin:0; padding-left:1.1rem; font-size:.9rem; color:#3E5561; line-height:1.6; }
.dueno__lista li{ margin-bottom:.4rem; }

.dueno__cierre{ text-align:center; }
/* El enlace va en su propia linea a proposito: dentro del parrafo quedaba
   de 17 px de alto y no hay dedo que acierte eso. */
.dueno__firma{
  margin:1rem 0 0; font-size:.85rem; color:var(--suave);
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
}
.dueno__firma a{ display:inline-flex; align-items:center; min-height:44px; }

@media (min-width:820px){ .dueno__rejilla{ grid-template-columns:repeat(2,1fr); } }

/* ═══════════ PIE ═══════════ */
.pie{ background:var(--hielo); color:var(--tiza-suave); padding:3rem 0 3.4rem; }
.pie__fila{ display:grid; gap:1.6rem; }
.pie__marca{ display:flex; align-items:center; gap:.9rem; }
.pie__marca img{ width:auto; height:56px; }
.pie__marca p{ margin:0; font-size:.9rem; line-height:1.5; }
.pie__marca b{ color:#fff; font-family:var(--display); font-weight:400; font-size:1.1rem; }
.pie__lista{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.2rem 1.4rem; }
.pie__lista a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--glaciar-claro); text-decoration:none; font-size:.9rem;
}
.pie__lista a:hover{ color:#fff; text-decoration:underline; }
.pie__nota{
  margin:0; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem; max-width:62ch;
}

@media (min-width:900px){
  .pie__fila{ grid-template-columns:auto 1fr; align-items:center; }
  .pie__lista{ justify-content:flex-end; }
  .pie__nota{ grid-column:1 / -1; }
}

/* ═══════════ BARRA DE URGENCIA (sólo celular) ═══════════ */
.urgencia-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:1px;
  background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.16);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.urgencia-movil a{
  display:flex; flex-direction:column; justify-content:center;
  min-height:var(--alto-urgencia); padding:.5rem 1rem;
  text-decoration:none;
}
.urgencia-movil__wsp{ flex:1 1 auto; background:var(--abierto); color:#fff; }
.urgencia-movil__eti{
  font-family:var(--dato); font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; opacity:.92;
}
.urgencia-movil__num{ font-size:.92rem; font-weight:600; line-height:1.2; }
.urgencia-movil__hora{
  flex:0 0 auto; background:var(--hielo); color:var(--tiza);
  font-size:.88rem; font-weight:600;
  align-items:center;
}

@media (min-width:900px){
  /* En escritorio no hace falta: el WhatsApp está en la cabecera, en la
     banda de 24 horas y en el pie. Y el hueco del body se cierra. */
  .urgencia-movil{ display:none; }
  body{ padding-bottom:0; }
}

/* ═══════════ MOVIMIENTO REDUCIDO ═══════════
   Se apaga lo intrusivo —bucles, parallax, el latido del punto verde— y
   se dejan los fundidos y los hovers. Si se apaga todo, la página se ve
   muerta, y en Windows esta preferencia viene activada de fábrica en
   muchos equipos. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .hielo__halo,
  .js .banda24__punto{ animation:none !important; }
  .lamina__curvas, .lamina__halo, .lamina--foto .lamina__foto img{ animation:none !important; }
  .boton:hover, .trat:hover{ transform:none; }
  .js .portada .ojo,
  .js .portada h1,
  .js .portada__bajada,
  .js .portada__acciones,
  .js .sellos,
  .js .marco__foto,
  .js .marco__pie,
  .js .ficha{ animation-name:aparece; animation-duration:.4s; }
  .js .revelar{ transition-duration:.3s; transform:none; }
  /* La cabecera sigue escondiéndose y volviendo: es navegación, no
     decoración. Sólo se le quita la deslizada. */
  .cabecera{ transition-duration:1ms; }
}