/* Magic Place · versión «Delta».
   Color: negro y blanco puros con una escala de grises neutra; el color lo ponen las fotos y los vídeos.
   Fuera de :root no se escribe ningún color a mano: todo sale de un token o de color-mix sobre un token.
   Letra: una sola, Manrope. Titulares en 600 y cerrados (-.03em), texto en 500, rótulos en 600;
   nueve tamaños por papel (--t-*); el mismo papel lleva siempre el mismo tamaño.
   Movimiento: --ease para lo que entra o responde, --ease-io para lo que abre y cierra.
   Espacio: rejilla de 14 columnas y una escala corta; no se usa ningún valor fuera de ella. */
:root{
  /* escala oscura: grises neutros hasta el negro de la página */
  --n50:#F4F4F5; --n100:#E6E6E8; --n200:#CFCFD3; --n300:#ABACB1; --n400:#85878D; --n500:#63656B;
  --n600:#46484D; --n700:#2F3034; --n800:#1E1F22; --n900:#111214; --n950:#0A0A0C;
  /* escala clara: del blanco puro hacia el gris */
  --p50:#FFFFFF; --p100:#FFFFFF; --p200:#F1F1F2; --p300:#E2E2E4; --p400:#C6C7CB; --p500:#A3A5AA;
  --p600:#7E8086; --p700:#5E6066; --p800:#404247; --p900:#27282B;
  /* las fiestas, cada una con el color de su foto (solo en sus fichas) */
  --f-quince:#F2B8CC; --f-boda:#C4D6EC; --f-shower:#CDB6EA; --f-cumple:#F5CBA6; --f-corp:#9A7A4C;

  /* filetes y cristales, siempre sobre la escala */
  --raya:color-mix(in srgb,var(--n900) 14%,transparent);        /* filete fino sobre claro */
  --raya-clara:color-mix(in srgb,var(--p50) 18%,transparent);   /* filete fino sobre oscuro */
  --vidrio:color-mix(in srgb,var(--n900) 35%,transparent);
  --vidrio-oscuro:color-mix(in srgb,var(--n900) 40%,transparent);
  --vidrio-texto:color-mix(in srgb,var(--n900) 80%,transparent);
  --filo:inset 1px 1px 0 color-mix(in srgb,var(--p50) 30%,transparent);
  --filo-oscuro:inset 1px 1px 0 color-mix(in srgb,var(--n900) 16%,transparent);
  --sombra:0 4px 16px color-mix(in srgb,var(--n950) 15%,transparent);

  --ease:cubic-bezier(0.19,1,0.22,1);
  --ease-io:cubic-bezier(0.77,0,0.175,1);
  --d-h:.25s; --d-t:.5s; --d-l:.75s; --d-o:1s; --d-foto:1.2s; --d-trazo:1.4s;

  /* espacio: escala de 4 px; móvil primero (los valores de abajo), escritorio en los @media de después de :root */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px; --e8:40px;
  /* contenedor único: margen lateral --m y ancho máximo --ancho; --borde es el margen real (crece si la ventana pasa del ancho) */
  --m:20px; --ancho:1280px; --borde:max(var(--m),calc((100vw - var(--ancho)) / 2));
  --gap:16px;                 /* hueco entre columnas */
  --pad:20px;                 /* relleno de tarjeta y panel */
  --sec:72px;                 /* aire de toda sección, igual arriba y abajo */
  --sec-in:32px;              /* del título de sección a su contenido */
  /* radios */
  --r1:6px; --r2:12px; --r4:999px;  /* r1 miniaturas y etiquetas, r2 toda tarjeta y panel, r4 píldora */
  /* alturas: --hp botón suelto, --hb botón de un par; barra fija del móvil */
  --hp:48px; --hb:52px; --barra:76px;

  /* letra: titulares 600 / -.03em; texto 500; rótulos 600 */
  --peso-t:600; --peso:500; --tr-t:-.03em;
  --t-xs:.75rem; --t-s:.875rem; --t-base:clamp(.94rem,.5rem + .45vw,1.02rem); --t-m:1rem;
  --t-l:clamp(1.2rem,1.5vw,1.55rem); --t-xl:clamp(1.45rem,1.8vw,1.9rem); --t-medio:clamp(1.75rem,2.4vw,2.5rem);
  --t-gigante:clamp(2.1rem,4.2vw,4.4rem); --t-heroe:clamp(2.4rem,5vw,5.4rem);

  --display:'Manrope','Manrope Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Manrope','Manrope Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (min-width:390px){:root{--m:24px;--pad:24px}}
@media (min-width:600px){:root{--m:max(24px,5vw)}}
@media (min-width:821px){:root{--m:clamp(40px,5vw,88px);--gap:24px;--pad:32px;--sec:112px;--sec-in:48px;--hp:46px}}
@media (min-width:1200px){:root{--gap:32px;--pad:40px;--sec:128px;--sec-in:56px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--n900);-webkit-tap-highlight-color:transparent}  /* sin el recuadro del toque del navegador: cada botón trae su propio estado pulsado */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--n900);color:var(--p100);font:var(--peso) var(--t-base)/1.45 var(--texto);letter-spacing:0;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--p300);outline-offset:3px}
.claro :focus-visible{outline-color:var(--n900)}
/* el foco de teclado sigue la forma de la pieza (píldora, círculo): el contorno toma su radio */
.pil:focus-visible,.opciones button:focus-visible,.cal-dia:focus-visible{outline-offset:3px}
.salto{position:fixed;left:var(--m);top:-80px;z-index:300;background:var(--p50);color:var(--n900);padding:var(--e3) var(--e4);border-radius:var(--r4);font-weight:600}
.salto:focus{top:var(--m)}

/* rejilla de 14 columnas */
.g{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--borde)}
.g>*{grid-column:1/-1}

/* titulares: Manrope en 600, cerrada, en caja de oración */
.t-gigante,.t-medio,.hx-t{font-family:var(--display);font-weight:var(--peso-t);letter-spacing:var(--tr-t);hyphens:none;overflow-wrap:normal;word-break:normal}
.t-gigante{font-size:var(--t-gigante);line-height:1.04;text-wrap:balance}
.t-medio{font-size:var(--t-medio);line-height:1.08;text-wrap:balance}
/* .l queda en el marcado de antes pero ya no cambia nada: el titular es de una pieza */
.l{font:inherit;color:inherit;letter-spacing:inherit}
/* rótulos pequeños: versales en 600 con aire */
.etq{font:600 var(--t-xs)/1.2 var(--texto);text-transform:uppercase;letter-spacing:.08em}
.cab-txt{max-width:40ch;color:var(--p300);text-wrap:pretty}
.claro .cab-txt{color:var(--n600)}
.enlace{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color var(--d-h) var(--ease)}

/* secciones: cada una con su fondo; con JS el fondo de la página cambia de color al entrar */
.sec{padding-block:var(--sec);background:var(--fondo)}
.oscura{color:var(--p100)}
.claro{color:var(--n900)}
/* cambio de oscuro a claro y de claro a oscuro: la sección que entra sube como una lámina con las esquinas de arriba
   redondeadas y se monta --lamina sobre el aire de la anterior, que crece lo mismo: el ritmo entre secciones no cambia */
:root{--lamina:clamp(28px,4vw,72px)}
.lamina{position:relative;z-index:1;margin-top:calc(-1 * var(--lamina));border-radius:var(--lamina) var(--lamina) 0 0}
.antes-lamina{padding-bottom:calc(var(--sec) + var(--lamina))}
/* ES1: con GSAP (main.js pone html.lam) la lámina va ligada al scroll. Arranca pegada al final de la sección anterior
   (--pega de aire), sube algo más rápido que el scroll hasta montarse --monta sobre ella y su radio pasa de --radio0 a 0.
   Sin JS o con movimiento reducido se queda lo de arriba: borde quieto y redondeado */
/* La lámina solo puede montarse sobre aire: la sección anterior lleva debajo --pega más todo el recorrido (--monta),
   así en ningún punto del scroll tapa un píxel de su contenido. Recorrido corto para que ese aire no se note */
html.lam{--pega:var(--e6);--monta:clamp(40px,6vh,72px);--radio0:clamp(40px,8vw,160px)}
@media (max-width:820px){html.lam{--monta:40px;--radio0:32px}}
html.lam .antes-lamina{padding-bottom:calc(var(--pega) + var(--monta))}
html.lam .lamina{margin-top:calc(-1 * var(--monta))}
html.lam .lamina .rv{opacity:1;transform:none;transition:none}
/* MV2: entre dos secciones del mismo fondo, un solo ritmo (el aire de abajo de la primera) y un poco más */
/* ES6: la misma regla en escritorio, con 32 px: entre secciones del mismo fondo quedan 128 + 32 px de caja */
.sec.oscura+.sec.oscura,.sec.claro+.sec.claro,.sec.oscura+.pasos{padding-top:var(--e7)}
@media (max-width:820px){.sec.oscura+.sec.oscura,.sec.claro+.sec.claro,.sec.oscura+.pasos{padding-top:var(--e4)}}
section[id]{scroll-margin-top:calc(var(--hd-alto) + 20px)}
:root{--hd-alto:84px}
html.menu-abierto,html.menu-abierto body{overflow:hidden}
/* móvil: la barra de arriba mide 76 px y la sección 72 de aire; al llegar por ancla, el título queda 16 px bajo la barra */
@media (max-width:820px){:root{--hd-alto:76px}}

/* fotos de una misma serie: una capa azul noche en multiplicar */
.tinte{position:relative;isolation:isolate}
.tinte::after{content:"";position:absolute;inset:0;background:var(--n700);mix-blend-mode:multiply;opacity:.22;pointer-events:none;border-radius:inherit}


/* ---------- iconos ---------- */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- botones: una sola pieza con su texto centrado; principal relleno, secundario con borde o vidrio ---------- */
.pil{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);height:var(--hp);min-width:var(--hp);padding:0 var(--e7);border-radius:var(--r4);border:1.5px solid transparent;font:600 var(--t-m)/1 var(--texto);letter-spacing:0;white-space:nowrap;transition:background-color var(--d-h) var(--ease),border-color var(--d-h) var(--ease),color var(--d-h) var(--ease),transform var(--d-h) var(--ease)}
/* principal: blanco sobre oscuro, negro sobre claro */
.pil-claro{background:var(--p50);color:var(--n900)}
.pil-oscuro{background:var(--n900);color:var(--p50)}
/* secundario: filete fino; sobre foto lleva además un velo oscuro para leerse */
.pil-vidrio{background:color-mix(in srgb,var(--n900) 55%,transparent);color:var(--p50);border-color:color-mix(in srgb,var(--p50) 80%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pil-linea{color:var(--p50);background:color-mix(in srgb,var(--n900) 55%,transparent);border-color:color-mix(in srgb,var(--p50) 80%,transparent)}
.pil-linea-oscura{color:var(--n900);background:transparent;border-color:color-mix(in srgb,var(--n900) 35%,transparent)}
.pil:active{transform:scale(.97)}
.pil:disabled{opacity:.35;cursor:default;transform:none}

@media (hover:hover) and (pointer:fine){
  .pil-claro:hover{background:var(--p200)}
  .pil-oscuro:hover{background:var(--n700)}
  .pil-vidrio:hover,.pil-linea:hover{background:color-mix(in srgb,var(--n900) 75%,transparent);border-color:var(--p50)}
  .pil-linea-oscura:hover{border-color:var(--n900);background:color-mix(in srgb,var(--n900) 5%,transparent)}
  .enlace:hover{text-decoration-color:currentColor}
}
/* el teclado ve lo mismo que el cursor, más el anillo */
.pil:focus-visible{outline-offset:4px}

/* ---------- cortina de entrada ---------- */
.cortina{display:none}
html.mov .cortina{display:grid;place-items:center;position:fixed;inset:0;z-index:200;background:var(--n900);transform:translateY(0);transition:transform var(--d-o) var(--ease-io),visibility 0s linear 0s}
html.mov.listo .cortina{transform:translateY(-101%);visibility:hidden;transition:transform var(--d-o) var(--ease-io),visibility 0s linear var(--d-o)}
.cortina-logo{width:min(72vw,620px);aspect-ratio:1040/576;mix-blend-mode:screen;opacity:0;transition:opacity var(--d-t) var(--ease)}
.cortina-logo.suena{opacity:1}
/* cambio de idioma: cristal en vez de negro; sube desde abajo al salir y, en la página nueva, vuelve a bajar */
/* cambio de idioma: fundido a negro liso y vuelta, sin persiana ni cristal (con cristal se veía temblar la página de debajo).
   La página nueva nace ya en negro (html.cambio lo pone el <head> antes del primer pintado) y se destapa una sola vez */
html.mov.cambio .cortina{background:var(--n900);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transform:none;opacity:1;visibility:visible;transition:opacity .4s cubic-bezier(.45,0,.55,1)}
html.mov.cambio .cortina-logo{display:none}
html.mov.cambio.listo .cortina{transform:none;opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(.45,0,.55,1),visibility 0s linear .6s}

/* ---------- cabecera: barra de cristal a todo el ancho ---------- */
.hd{--hd-alto:84px;position:fixed;inset:0 0 auto 0;z-index:80;padding:var(--e3) var(--borde) 0;transition:transform 500ms cubic-bezier(.22,.8,.2,1);pointer-events:none}
.hd-in{pointer-events:auto;position:relative;display:flex;align-items:center;gap:var(--e5);height:72px;padding:0 var(--e2) 0 var(--e4);border-radius:var(--r2);background:color-mix(in srgb,var(--n900) 42%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid color-mix(in srgb,var(--p50) 18%,transparent);transition:background-color var(--d-o) var(--ease),height var(--d-t) var(--ease)}
.hd.baja .hd-in{background:color-mix(in srgb,var(--n900) 72%,transparent)}
html.sobre-claro .hd-in{background:color-mix(in srgb,var(--n900) 86%,transparent)}
.hd-logo{display:block;flex:none}
.hd-logo img{height:56px;width:auto;transition:transform var(--d-t) var(--ease)}
@media (hover:hover) and (pointer:fine){.hd-logo:hover img{transform:translateY(2px)}}
.hd-nav{flex:1;min-width:0}
.hd-nav ul{display:flex;justify-content:center;gap:var(--e1)}
.hd-nav a{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 var(--e3);border-radius:var(--r4);font-weight:600;font-size:var(--t-s);color:var(--p100);white-space:nowrap;transition:background-color var(--d-h) var(--ease),color var(--d-h) var(--ease)}
.hd-nav a::after{content:"";position:absolute;left:var(--e3);right:var(--e3);bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d-t) var(--ease)}
@media (hover:hover) and (pointer:fine){.hd-nav a:hover::after{transform:scaleX(1)}}
.hd-nav a:focus-visible::after,.hd-nav a[aria-current="true"]::after{transform:scaleX(1)}
.hd-der{display:flex;align-items:center;gap:var(--e1);flex:none;margin-left:auto}
.hd-tel{display:inline-flex;align-items:center;gap:var(--e2);height:44px;padding:0 var(--e3);border-radius:var(--r4);font-weight:600;font-size:var(--t-s);color:var(--p100);white-space:nowrap;transition:background-color var(--d-h) var(--ease)}
@media (hover:hover) and (pointer:fine){.hd-tel:hover{background:color-mix(in srgb,var(--p50) 10%,transparent)}}
.hd-cta{margin-left:var(--e1)}
.hd-abrir{display:none;position:relative;width:44px;height:44px;border-radius:var(--r4)}
.hd-abrir span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--p100);border-radius:2px;transition:transform var(--d-t) var(--ease),top var(--d-t) var(--ease)}
.hd-abrir span:first-child{top:18px}.hd-abrir span:last-child{top:25px}
.hd.nav-abierta .hd-abrir span:first-child{top:21.5px;transform:rotate(45deg)}
.hd.nav-abierta .hd-abrir span:last-child{top:21.5px;transform:rotate(-45deg)}
@media (max-width:1180px){.hd-tel .hd-tel-n{display:none}.hd-tel{width:44px;padding:0;justify-content:center}}
@media (max-width:960px){
  .hd-in{height:64px;gap:var(--e3)}
  .hd-logo img{height:48px}
  .hd-cta,.hd-tel{display:none}
  .hd-abrir{display:block}
  /* en móvil los enlaces se despliegan debajo de la barra */
  .hd-nav{position:absolute;left:0;right:0;top:calc(100% + var(--e1));padding:var(--e2);border-radius:var(--r2);background:color-mix(in srgb,var(--n900) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--filo),var(--sombra);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--d-h) var(--ease),transform var(--d-t) var(--ease),visibility 0s linear var(--d-t)}
  .hd.nav-abierta .hd-nav{opacity:1;visibility:visible;transform:none;transition:opacity var(--d-h) var(--ease),transform var(--d-t) var(--ease),visibility 0s}
  .hd-nav ul{flex-direction:column;align-items:stretch}
  .hd-nav a{display:flex;height:48px;font-size:var(--t-m)}
  .hd-nav a::after{display:none}
  .hd-nav a:hover,.hd-nav a:focus-visible{background:color-mix(in srgb,var(--p50) 10%,transparent)}
}

/* selector de idioma */
.idioma{position:relative}
.idioma-btn{gap:var(--e2);padding:0 var(--e4) 0 var(--e3)}
.idioma-flecha{width:16px;height:16px;transition:transform var(--d-t) var(--ease)}
.idioma.abierto .idioma-flecha{transform:rotate(180deg)}
.idioma-globo{transition:transform var(--d-l) var(--ease)}
.idioma.abierto .idioma-globo{transform:rotate(180deg)}
.idioma-panel{position:absolute;right:0;top:calc(100% + var(--e2));min-width:200px;padding:var(--e1);border-radius:var(--r2);background:var(--vidrio-oscuro);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--filo),var(--sombra);opacity:0;visibility:hidden;transition:opacity var(--d-h) var(--ease),visibility 0s linear var(--d-t)}
.idioma.abierto .idioma-panel{opacity:1;visibility:visible;transition:opacity var(--d-h) var(--ease),visibility 0s}
.idioma-panel a{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);height:44px;padding:0 var(--e3);border-radius:var(--r2);font-weight:600;opacity:0;transform:translateY(10px) scale(.95);transition:opacity var(--d-h) var(--ease) calc(var(--i)*.05s),transform var(--d-t) var(--ease) calc(var(--i)*.05s),background-color var(--d-h) var(--ease)}
.idioma.abierto .idioma-panel a{opacity:1;transform:none}
.idioma-panel a .ic{width:18px;height:18px;opacity:0}
.idioma-panel a[aria-checked="true"] .ic{opacity:1}
.idioma-panel a:hover,.idioma-panel a:focus-visible{background:color-mix(in srgb,var(--p50) 14%,transparent)}
.idioma-panel a:focus-visible{outline-offset:-2px}

/* ---------- 1. héroe ---------- */
.hx{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--n900);color:var(--p50)}
.hx-pases,.pase{position:absolute;inset:0}
.hx-pases{z-index:0}
/* ES2: relevo = fundido cruzado de opacidad, sin clip-path ni máscara. El entrante (activo) sube de 0 a 1 encima del
   saliente, que sigue opaco y en marcha debajo; cuando el entrante lo tapa entero, el saliente pasa a 0 sin transición */
.pase{opacity:0;z-index:1}
.pase.sale{opacity:1;z-index:2}
.pase.activo{opacity:1;z-index:3}
html.mov .pase.activo{transition:opacity var(--relevo) var(--curva)}
.vid{width:100%;height:100%;object-fit:cover;background:var(--n900)}
.pase[data-pase="1"] .vid{object-position:50% 60%}
.pase::after{content:"";position:absolute;inset:0;background:var(--n950);opacity:.26}
/* velo suave: oscurece el centro, donde va el texto, y el pie, donde van las miniaturas */
.hx-velo{position:absolute;inset:0;background:radial-gradient(ellipse 62% 48% at 50% 52%,color-mix(in srgb,var(--n900) 55%,transparent) 0%,color-mix(in srgb,var(--n900) 22%,transparent) 62%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--n900) 25%,transparent) 0%,transparent 30%,color-mix(in srgb,var(--n900) 75%,transparent) 92%)}
.hx-texto{position:absolute;left:var(--borde);right:var(--borde);top:50%;transform:translateY(-46%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e4)}
.hx-texto .acciones{margin-top:var(--e2)}
/* relevo del héroe: una sola duración y una sola curva para el fondo y para la línea que cambia */
.hx{--relevo:1000ms;--curva:cubic-bezier(.45,0,.55,1)}
.hx-titulos{display:grid;justify-items:center;align-items:end}
.hx-t{grid-area:1/1;font-family:var(--display);font-weight:var(--peso-t);letter-spacing:var(--tr-t);font-size:var(--t-heroe);line-height:1.04;max-width:14ch;text-shadow:0 2px 24px color-mix(in srgb,var(--n950) 35%,transparent);text-wrap:balance;hyphens:none;visibility:hidden}
.hx-t.activo{visibility:visible}
.hx-t>span{display:inline-block}
/* ES2: los titulares se cruzan solapados, con la misma curva y el mismo tramo (del 20 % al 80 % del relevo): la suma de
   opacidades es 1 en todo momento y el cruce cae en el 50 %, a la vez que la imagen */
.hx-t>span{opacity:0}
.hx-t.activo>span{opacity:1}
html.mov .hx-t{transition:visibility 0s linear var(--relevo)}
html.mov .hx-t.activo{transition:visibility 0s}
html.mov .hx-t>span{transform:translateY(-12px);transition:opacity calc(var(--relevo) * .6) var(--curva) calc(var(--relevo) * .2),transform calc(var(--relevo) * .6) var(--curva) calc(var(--relevo) * .2)}
html.mov .hx-t.activo>span{transform:none}
html.mov .hx-t.entra-desde>span{transform:translateY(12px);transition:none}
.hx-apoyo{max-width:44ch;color:var(--p100)}
.hx-texto .acciones{justify-content:center}
.acciones{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}
/* los botones de un grupo se miden igual: misma altura, misma letra y mismo relleno */
.acciones .pil{height:var(--hb)}
@media (max-width:820px){
  /* apilados: los dos del mismo ancho y alineados por los dos bordes */
  .acciones{flex-direction:column;align-items:stretch;width:100%}
  .acciones>.pil{width:100%}
  .hx-texto .acciones,.cierre-in .acciones{margin-inline:auto}
}
/* hctl:css:inicio ── mando del héroe, versión final (opción 1: tres trazos). Autónomo: solo usa tokens de la página con valor de reserva. */
.hctl{position:absolute;z-index:5;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;filter:drop-shadow(0 1px 6px color-mix(in srgb,#0A0A0C 40%,transparent))}
.hctl-tramo{display:grid;place-items:center;width:clamp(56px,3.6vw,72px);height:44px;padding:0;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hctl-linea{position:relative;display:block;width:calc(100% - 14px);height:2px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,#fff 28%,transparent);transition:height .3s var(--ease,cubic-bezier(.19,1,.22,1)),background-color .3s var(--ease,cubic-bezier(.19,1,.22,1))}
.hctl-tramo[aria-current="true"] .hctl-linea{height:3px}
.hctl-lleno{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.hctl-sep{width:1px;height:14px;margin:0 8px;background:color-mix(in srgb,#fff 30%,transparent)}
/* ES8: el anillo está siempre (más tenue mientras corre): el botón se ve del mismo tamaño en los dos estados */
.hctl-pausa{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid color-mix(in srgb,#fff 22%,transparent);border-radius:50%;background:none;color:#fff;opacity:.85;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s var(--ease,cubic-bezier(.19,1,.22,1)),background-color .3s var(--ease,cubic-bezier(.19,1,.22,1)),border-color .3s var(--ease,cubic-bezier(.19,1,.22,1))}
.hctl-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hctl-i-play{display:none}
.hctl-pausa[aria-pressed="true"] .hctl-i-pausa{display:none}
.hctl-pausa[aria-pressed="true"] .hctl-i-play{display:inline}
/* parado: el botón gana un aro fino y el tramo en curso respira, para que se lea «quieto», no «colgado» */
.hctl-pausa[aria-pressed="true"]{opacity:1;border-color:color-mix(in srgb,#fff 45%,transparent)}
@keyframes hctl-respira{to{opacity:.35}}
@keyframes hctl-entra{from{opacity:0}}
.hctl[data-pausado="true"] .hctl-tramo[aria-current="true"] .hctl-lleno{animation:hctl-respira 1.4s cubic-bezier(.4,0,.2,1) infinite alternate}
/* relevo: hacia delante el tramo que acaba se completa deslizando; al volver atrás o al dar la vuelta, funden */
.hctl.hctl-salto .hctl-lleno{transition:transform .35s var(--ease,cubic-bezier(.19,1,.22,1))}
.hctl.hctl-vuelta .hctl-lleno{animation:hctl-entra .35s cubic-bezier(.4,0,.2,1)}
.hctl-tramo:focus-visible{outline:2px solid var(--p300,#E2E2E4);outline-offset:-4px}
.hctl-pausa:focus-visible{outline:2px solid var(--p300,#E2E2E4);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .hctl-tramo:hover .hctl-linea{background:color-mix(in srgb,#fff 50%,transparent)}
  .hctl-pausa:hover{opacity:1;background:color-mix(in srgb,#fff 10%,transparent)}
}
@media (max-width:820px){.hctl{bottom:24px}}
@media (min-width:1600px){.hctl{bottom:36px}}
@media (prefers-reduced-motion:reduce){
  .hctl-linea,.hctl-pausa,.hctl.hctl-salto .hctl-lleno{transition:none}
  .hctl.hctl-vuelta .hctl-lleno,.hctl[data-pausado="true"] .hctl-tramo[aria-current="true"] .hctl-lleno{animation:none}
  .hctl[data-pausado="true"] .hctl-tramo[aria-current="true"] .hctl-lleno{opacity:.55}
}
/* hctl:css:fin */
@media (max-width:820px){
  .hx-texto{top:auto;bottom:calc(24px + 44px + var(--e5));transform:none}
}

/* ---------- cabeceras de fila ---------- */

/* ---------- filas arrastrables ---------- */
.fila{position:relative}
.fila-pista,.cinta-fila{position:relative}  /* las piezas miden su sitio contra la cinta */
.fila-pista{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--borde);padding-inline:var(--borde);scrollbar-width:none;cursor:grab}
.fila-pista::-webkit-scrollbar{display:none}
.fila-pista>li{scroll-snap-align:start;flex:none}
.fila-pista.agarra{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.fila-pista.agarra a{pointer-events:none}
.fila-pista:focus-visible{outline-offset:-2px}

/* ---------- 2. barra de bloques ---------- */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bloques{--fondo:var(--n900)}
.fila-bloques .fila-pista{gap:var(--e5)}
@media (min-width:821px){.fila-bloques .fila-pista{gap:var(--e6)}}
/* con movimiento: la cinta deriva sola a sangre por los dos lados (la mueve el JS con translate3d) */
.corre{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.corre img{-webkit-user-drag:none}
.corre.agarra{cursor:grabbing;user-select:none;-webkit-user-select:none}
.corre.agarra a{pointer-events:none}
.corre>ul,.corre .fila-pista{overflow:visible;padding-inline:0;scroll-snap-type:none;width:max-content;will-change:transform}
.bloque{width:clamp(260px,24vw,360px)}
.bloque a{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r2);overflow:hidden;color:var(--p50);-webkit-user-drag:none}
.bloque img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d-foto) var(--ease);-webkit-user-drag:none}
/* velo solo en el tercio de abajo, lo justo para leer el nombre; la foto arriba a su color */
.bloque a::before{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:1;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--n900) 72%,transparent))}
.bloque-txt{position:absolute;left:var(--e4);right:var(--e4);bottom:var(--e4);z-index:3;display:flex;flex-direction:column;gap:var(--e1);transition:transform var(--d-t) var(--ease)}
.bloque-arriba a::before{inset:0 0 auto 0;background:linear-gradient(0deg,transparent,color-mix(in srgb,var(--n900) 72%,transparent))}
.bloque-arriba .bloque-txt{top:var(--e4);bottom:auto}
.bloque-nom{font:var(--peso-t) var(--t-xl)/1.08 var(--display);letter-spacing:-.02em}
@media (hover:hover) and (pointer:fine){
  .bloque a:hover img{transform:scale(1.05)}
  .bloque a:hover .bloque-txt{transform:translateY(-4px)}
}
.bloque a:focus-visible{outline-offset:-3px}
@media (max-width:820px){.bloque{width:70vw}}

/* ---------- 3. tema (de _tema.html, opción elegida por el dueño): foto del salón dentro del contenedor, titular encima y cifras en banda de cristal ---------- */
/* Foto grande del salón dentro del contenedor (1280 px como mucho: la foto mide 1400, así que nunca pasa de ×1),
   titular, texto y botón sobre un velo que oscurece la izquierda y el pie (contraste AA medido),
   y las tres cifras en una banda con el mismo cristal que la barra superior (.hd-in). */
.tema-marco{position:relative;display:grid;grid-template-rows:1fr auto auto;min-height:clamp(600px,52vw,780px);border-radius:var(--r2);overflow:hidden;isolation:isolate}
.tema-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2}
/* ES3: en escritorio el marco va a 16/9, la proporción de la foto servida: a 1280 de ancho mide 720 y no se amplía */
@media (min-width:821px){.tema-marco{min-height:0;aspect-ratio:16/9}}
.tema-velo{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,color-mix(in srgb,var(--n900) 82%,transparent) 0%,color-mix(in srgb,var(--n900) 68%,transparent) 42%,transparent 72%),
  linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--n900) 55%,transparent) 100%)}
.tema-cab{grid-row:2;display:grid;row-gap:var(--e6);justify-items:start;padding:0 var(--pad) var(--e7)}
.tema-t{max-width:11em}
.tema-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5) var(--e7)}
.tema-txt{max-width:40ch;color:var(--p100)}
.tema-pie .pil{height:var(--hb)}
/* banda: cristal de la barra superior, tres columnas iguales con filete fino entre ellas */
.tema-cifras{grid-row:3;margin:0 var(--e4) var(--e4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r2);background:color-mix(in srgb,var(--n900) 42%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--filo)}
.tema-cifras li{display:grid;align-content:end;row-gap:var(--e3);padding:var(--e6) var(--pad);border-left:1px solid var(--raya-clara);min-width:0}
.tema-cifras li:first-child{border-left:0}
.tema-n{font:var(--peso-t) clamp(4rem,9vw,9rem)/.86 var(--display);letter-spacing:-.045em;font-variant-numeric:lining-nums;color:var(--p50);white-space:nowrap}
/* la caja de cada número se reserva a su ancho final (--d cifras): al contar desde 0 no se mueve nada.
   Numerales proporcionales y no tabulares: el «1» tabular deja un hueco a la izquierda y descuadra el número con su leyenda */
.tema-n [data-n]{display:inline-block;min-width:calc(var(--d) * .62em);text-align:left}
.tema-u{font-size:.5em;letter-spacing:-.02em;margin-left:.06em}
.tema-l{font:600 var(--t-l)/1.2 var(--texto);letter-spacing:-.01em;color:var(--p200);white-space:nowrap}
/* texto solo para lectores de pantalla (la estrella va oculta: se lee «5 estrellas en Google») */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* entrada de las cifras: máscara por abajo, subida larga y frenada, escalonada 120 ms; la leyenda llega detrás */
.tema-arma .tema-n{clip-path:inset(-.2em -.3em 0 -.3em)}
.tema-arma .tema-n>span{display:inline-block;transform:translateY(112%);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.tema-arma .tema-l{opacity:0;transform:translateY(.6em);transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.tema-arma li:nth-child(2) .tema-n>span{transition-delay:.12s}
.tema-arma li:nth-child(3) .tema-n>span{transition-delay:.24s}
.tema-arma li:nth-child(1) .tema-l{transition-delay:.35s}
.tema-arma li:nth-child(2) .tema-l{transition-delay:.47s}
.tema-arma li:nth-child(3) .tema-l{transition-delay:.59s}
.tema-arma.tema-visto .tema-n>span{transform:none}
.tema-arma.tema-visto .tema-l{opacity:1;transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tema-cifras{background:color-mix(in srgb,var(--n900) 80%,transparent)}}
@media (max-width:820px){
  .tema-marco{min-height:640px}
  .tema-foto{object-position:72% 50%}
  .tema-velo{background:linear-gradient(180deg,transparent 12%,color-mix(in srgb,var(--n900) 72%,transparent) 42%,color-mix(in srgb,var(--n900) 80%,transparent) 100%)}
  .tema-cab{padding:0 var(--e5) var(--e6);row-gap:var(--e4)}
  .tema-pie{display:grid;width:100%;row-gap:var(--e5)}
  .tema-pie .pil{width:100%}
  .tema-cifras{margin:0 var(--e3) var(--e3)}
  .tema-cifras li{padding:var(--e4) var(--e3);row-gap:var(--e2)}
  /* AQ: sin cuenta ya no hace falta reservar el ancho final; con la reserva, «130» se salía de su celda a 375 */
  .tema-n [data-n]{min-width:0}
  .tema-n{font-size:clamp(2.25rem,11.4vw,4rem)}
  .tema-l{font-size:var(--t-s)}
}
/* M2: «to celebrate» (en) no cabía con aire a 375 y 320: leyendas un punto más pequeñas en pantallas estrechas, en las dos lenguas */
@media (max-width:420px){.tema-l{font-size:var(--t-xs)}}
@media (max-width:360px){
  /* a 320 la leyenda «en Google» no cabía: celdas con menos margen lateral */
  .tema-cifras{margin-inline:var(--e2)}
  .tema-cifras li{padding-inline:var(--e2)}
}

/* ---------- 5. pasos sobre foto ---------- */
.pasos{position:relative;color:var(--p50);padding-block:var(--sec);overflow:hidden;background:var(--n900)}
.pasos-fondo{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--n950) 25%,var(--n950) 75%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,var(--n950) 25%,var(--n950) 75%,transparent 100%)}
.pasos-fondo::after{content:"";position:absolute;inset:0;background:var(--n950);opacity:.68}
.pasos-in{position:relative;z-index:2;row-gap:var(--sec-in)}
/* MV1: el fondo entra y sale con un degradado fijo a la sección (no a la foto, que se mueve con el paralaje), y en móvil
   la foto empieza más abajo para que el techo quede bajo el degradado y se vea el salón */
.pasos::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--n900) 0%,color-mix(in srgb,var(--n900) 0%,transparent) 22%,color-mix(in srgb,var(--n900) 0%,transparent) 80%,var(--n900) 100%)}
@media (max-width:820px){.pasos-fondo,html.mov .pasos-fondo.paralaje{top:16%}}
.pasos-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e4)}
.paso{position:relative;border-radius:var(--r2);--i:0}
/* cristal oscuro de la tarjeta: la foto se ve detrás, el texto se lee encima */
.vidrio{position:absolute;inset:0;border-radius:inherit;background:var(--vidrio-oscuro);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--filo)}
.paso .vidrio{transition:background-color var(--d-t) var(--ease)}
/* entrada guiada por el desplazamiento (main.js, «pasos»): cada paso arranca al 45 % y se enciende cuando
   el avance llega a él; su anillo se cierra con el avance y el icono se dibuja y hace un gesto.
   Sin html.mov, o con .completo, todo está entero */
html.mov .paso{opacity:.45;transition:opacity var(--d-t) var(--ease),transform var(--d-t) var(--ease)}
html.mov .paso.activo,html.mov .pasos-lista.completo .paso{opacity:1}
.forma circle{stroke-dasharray:var(--anillo-l,none);stroke-dashoffset:var(--anillo-o,0)}
html.mov .ic-paso :is(path,rect,circle){transition:stroke-dashoffset .9s var(--ease)}
html.mov .paso:not(.activo) .ic-paso :is(path,rect,circle){stroke-dashoffset:var(--ic-l,0)}
html.mov .paso.gesto .ic-paso{animation:var(--gesto) .7s var(--ease) 1}
.paso[data-gesto="tel"]{--gesto:g-tel}
.paso[data-gesto="casa"]{--gesto:g-casa}
.paso[data-gesto="etiqueta"]{--gesto:g-etiqueta}
.paso[data-gesto="fecha"]{--gesto:g-fecha}
@keyframes g-tel{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
@keyframes g-casa{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}70%{transform:translateY(1px)}}
@keyframes g-etiqueta{0%,100%{transform:rotate(0)}35%{transform:rotate(18deg)}65%{transform:rotate(-6deg)}}
@keyframes g-fecha{0%,100%{transform:scale(1)}45%{transform:scale(1.18)}70%{transform:scale(.96)}}
/* línea que une los anillos: tres tramos, cada uno se dibuja entre un paso y el siguiente */
.pasos-linea{position:absolute;inset:0;pointer-events:none}
.pasos-linea i{position:absolute;background:color-mix(in srgb,var(--p50) 70%,transparent);transform-origin:0 0;transform:scale(var(--sx,1),var(--sy,1))}
/* título: las líneas suben al entrar la sección */
html.mov #t-pasos>span{display:inline-block;transition:opacity var(--d-o) var(--ease),transform var(--d-o) var(--ease)}
html.mov #t-pasos>span:nth-child(2){transition-delay:.08s}
html.mov #t-pasos>span:nth-child(3){transition-delay:.16s}
html.mov .pasos:not(.entra) #t-pasos>span{opacity:0;transform:translateY(.35em)}
/* fondo: paralaje suave, solo sobre la foto; si hay vídeo no se mueve */
.pasos-fondo{will-change:transform}
html.mov .pasos-fondo.paralaje{inset:-48px 0;transform:translate3d(0,var(--py,0px),0)}
/* brillo que sigue al cursor dentro de cada tarjeta */
.paso::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--p50) 14%,transparent),transparent 70%);transition:opacity var(--d-h) var(--ease)}
/* el botón principal se resalta una vez cuando se completa el paso 4 */
html.mov .pasos-acciones .pil.resalta{animation:resalta 1.1s var(--ease) 1}
@keyframes resalta{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p50) 55%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
@media (hover:hover) and (pointer:fine){
  .paso:hover::after{opacity:1}
  .paso:hover .vidrio{background:color-mix(in srgb,var(--n900) 58%,transparent)}
  .paso.activo:hover{transform:translateY(-4px)}
  .paso:hover .forma circle{fill:color-mix(in srgb,var(--p50) 10%,transparent)}
}
.paso-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--pad)}
.paso-dib{position:relative;display:grid;place-items:center;width:min(100%,180px)}
.forma{width:100%;aspect-ratio:1;overflow:visible}
.forma{transform-origin:50% 50%}
.forma circle{fill:transparent;stroke:currentColor;stroke-width:1.6;transition:fill var(--d-t) var(--ease)}
.ic-paso{position:absolute;width:36px;height:36px;stroke-width:1}
.paso h3{margin-top:var(--e5);font:var(--peso-t) var(--t-l)/1.15 var(--display);letter-spacing:-.02em;display:grid;justify-items:center;row-gap:var(--e2);text-wrap:balance}
.paso-n{font:600 var(--t-xs)/1 var(--texto);letter-spacing:.12em;color:var(--p300)}
.paso-in{height:100%}
#t-pasos{text-align:center;justify-self:center}
.pasos-acciones{justify-content:center}
.paso p{margin-top:var(--e2);color:var(--p100);max-width:28ch}
@media (max-width:1000px) and (min-width:821px){.pasos-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .pasos-lista{grid-template-columns:1fr}
  .paso-in{display:grid;grid-template-columns:88px 1fr;column-gap:var(--e5);text-align:left;align-items:start;padding:var(--pad)}
  .paso-dib{grid-row:1/3;width:88px}
  .ic-paso{width:30px;height:30px}
  .paso h3{margin-top:var(--e1);justify-items:start}
  #t-pasos{text-align:left;justify-self:start}
}

/* ---------- 6. tira y opiniones ---------- */
.tira-sec{--fondo:var(--n900);padding-top:var(--sec-in)}
/* la tira se mueve por transform (marquesina), no por scroll: sin overflow desplazable no entra en el orden de Tab */
.tira{margin-bottom:var(--sec-in);overflow:hidden}
.tira::-webkit-scrollbar{display:none}
.tira-pista{display:flex;gap:var(--e5);width:max-content;padding-inline:var(--borde)}
.tira-pista li{height:clamp(220px,24vw,360px);aspect-ratio:3/4;flex:none;border-radius:var(--r2);overflow:hidden}
.tira-pista img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
@media (min-width:821px){.tira-pista{gap:var(--e6)}}
/* título de sección: un solo patrón en toda la página salvo héroe, frase y cierre:
   --t-gigante, alineado a la izquierda de la rejilla, y --sec-in hasta el contenido */
.cab{display:grid;text-align:left;justify-items:start;row-gap:var(--e4);margin-bottom:var(--sec-in)}
.cab .cab-txt{max-width:62ch}
/* la nota se lee de un vistazo */
.op-nota{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--e2) var(--e4)}
.op-nota-n{font:var(--peso-t) var(--t-medio)/1 var(--display);letter-spacing:var(--tr-t);color:var(--p50)}
.op-nota-est{display:flex;gap:3px;color:var(--p50)}
.op-nota-est svg{width:20px;height:20px;fill:currentColor}
.op-nota-t{font-weight:600;color:var(--p100)}
/* cinta de opiniones: scroll nativo que el dedo o el ratón pueden mover; el avance solo lo pone el JS
   (escritorio: dos filas continuas en sentidos contrarios; móvil: una fila, una tarjeta centrada cada vez) */
.cinta{display:grid;row-gap:var(--gap)}
.cinta-fila{position:relative;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.cinta-fila::-webkit-scrollbar{display:none}
.cinta-fila:focus-visible{outline-offset:-2px}
.cinta-pista{display:flex;align-items:flex-start;width:max-content;padding-inline:var(--borde)}
.cinta-pista>li{margin-right:var(--gap)}
.cinta.lista .cinta-pista{padding-inline:0}
@media (min-width:821px){
  .cinta.lista .cinta-fila{cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,var(--n950) 6%,var(--n950) 94%,transparent);mask-image:linear-gradient(90deg,transparent,var(--n950) 6%,var(--n950) 94%,transparent)}
  .cinta.lista .cinta-fila.arrastra{cursor:grabbing;user-select:none}
}
.cinta-mandos{display:none}
@media (max-width:820px){
  .cinta.una .cinta-vuelta{display:none}
  .cinta-fila{scroll-snap-type:x mandatory}
  .cinta.una .cinta-fila{overflow-y:hidden;transition:height var(--d-t) var(--ease)}
  .cinta.una{row-gap:var(--e5)}
  .cinta-pista,.cinta.lista .cinta-pista{padding-inline:var(--borde)}
  .cinta-pista>li{scroll-snap-align:center;scroll-snap-stop:always;margin-right:var(--e4)}
  .cinta-pista>li:last-child{margin-right:0}
  .cinta.una .cinta-mandos{display:flex;align-items:center;justify-content:center;gap:var(--e3);padding-inline:var(--borde)}
  .cinta.una .cinta-mandos .pil{flex:1 1 0;min-width:0}  /* MV3: Anterior y Siguiente del mismo ancho */
  .cinta-cuenta{min-width:5.5ch;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:var(--p200)}
}
/* tarjetas de opinión: todas del mismo ancho y alto y con el mismo cuerpo de letra. El texto entero está en el DOM
   y se corta a la vista a --op-lineas líneas; si no cabe, «Leer más» lo abre en un diálogo. El texto va centrado en
   su hueco, así una opinión corta no deja la tarjeta medio vacía por abajo */
.op{--op-lineas:6;width:360px;height:340px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:var(--pad);border-radius:var(--r2);background:color-mix(in srgb,var(--p50) 6%,transparent);box-shadow:var(--filo)}
.op-cuerpo{display:flex;flex-direction:column;justify-content:center;min-height:0}
.op-t{line-height:1.35;color:var(--p100);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--op-lineas);line-clamp:var(--op-lineas);overflow:hidden}
.op-mas{justify-self:start;min-height:44px;padding:0;color:var(--p50);font-weight:600;cursor:pointer}
.op-mas[hidden]{display:none}
.op-a{margin-top:var(--e3);font-size:var(--t-xs);color:var(--p300)}
.op-a strong{font-weight:600;color:var(--p50)}
.op-est{display:flex;gap:var(--e1);margin-bottom:var(--e3);color:var(--p300)}
.op-est svg{width:14px;height:14px;fill:currentColor}
@media (min-width:821px){.cinta-pista{align-items:stretch}}
@media (max-width:820px){.op{--op-lineas:7;width:calc(100vw - 2 * var(--borde));height:320px}}
/* diálogo con la opinión entera */
.op-dlg{width:min(640px,calc(100vw - 2 * var(--borde)));max-height:min(80vh,720px);padding:var(--pad);border:0;border-radius:var(--r2);background:var(--n900);color:var(--p100);box-shadow:var(--filo),var(--sombra);overflow:auto}
.op-dlg::backdrop{background:color-mix(in srgb,var(--n950) 70%,transparent)}
.op-dlg .op-t{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible;font-size:var(--t-l);line-height:1.45}
.op-dlg .op-mas{display:none}
.op-dlg form{margin-top:var(--e6)}

/* ---------- 7. preguntas que nos hacen: alternativa 4 de _faq.html (números grandes), pasada a fondo blanco ----------
   arriba el título con los dos botones a la derecha; debajo, a todo el ancho, las filas con su número grande.
   Una abierta cada vez (main.js); sin JS se ven todas las respuestas. En móvil los botones van al final */
.faq{--fondo:var(--p100)}
.faq-in{--col:clamp(4.6rem,12vw,13rem);align-items:end;row-gap:var(--sec-in)}
.faq-lado{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--e7) var(--gap)}
.faq-t{max-width:12ch}
.faq-acc{margin-top:0}
.a4-lista{grid-column:1/-1;border-bottom:1px solid var(--raya)}
@media (max-width:820px){
  .faq-lado{display:contents}
  .faq-t{grid-column:1/-1;order:1}
  .a4-lista{order:2}
  .faq-in .faq-acc{grid-column:1/-1;order:3;margin-top:var(--e4)}
}
.a4-fila{border-top:1px solid var(--raya)}
.a4-h{font:inherit}
.a4-b{display:grid;grid-template-columns:var(--col) minmax(0,1fr);gap:var(--e5);align-items:center;width:100%;padding:var(--e4) 0;min-height:64px;border-radius:var(--r1);text-align:left;cursor:pointer;color:inherit}
.a4-b:focus-visible{outline:2px solid var(--n900);outline-offset:2px}
.a4-n{justify-self:start;font:var(--peso-t) clamp(2.4rem,7.4vw,7.6rem)/1 var(--display);letter-spacing:-.05em;padding:.06em .16em .1em;border-radius:var(--r2);color:var(--n400);font-variant-numeric:tabular-nums;
  transition:background-color 1s var(--ease),color 1s var(--ease)}
.a4-q{font:var(--peso-t) var(--t-xl)/1.15 var(--display);letter-spacing:-.025em;color:var(--n700);transition:color var(--d-l) var(--ease),transform 1.1s var(--ease)}
@media (hover:hover) and (pointer:fine){.a4-b:hover .a4-n{color:var(--n900)}.a4-b:hover .a4-q{color:var(--n900);transform:translateX(6px)}}
.a4-fila.abierta .a4-n{background:var(--n900);color:var(--p50)}
.a4-fila.abierta .a4-q{color:var(--n900)}
.a4-r{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .9s var(--ease-io),visibility 0s .9s}
.a4-fila.abierta .a4-r{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .9s var(--ease-io)}
.a4-r-in{overflow:hidden;min-height:0}
.a4-txt{display:grid;gap:var(--e3);padding:0 0 var(--e7) calc(var(--col) + var(--e5));max-width:calc(var(--col) + 56ch);font-size:var(--t-l);line-height:1.4;color:var(--n600);
  opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ease),transform .9s var(--ease)}
.a4-fila.abierta .a4-txt{opacity:1;transform:none;transition-delay:.2s}
.a4-txt .enlace{justify-self:start;color:var(--n900);font-weight:600}
html:not(.js) .a4-r{grid-template-rows:1fr;visibility:visible}
html:not(.js) .a4-txt{opacity:1;transform:none}
@media (max-width:599px){.a4-txt{padding-left:0}.a4-b{gap:var(--e4)}}
@media (prefers-reduced-motion:reduce){.a4-r,.a4-fila.abierta .a4-r,.a4-txt,.a4-n,.a4-q{transition:none}}

/* ---------- 8. formulario ---------- */
.pregunta{--fondo:var(--p100)}
.pregunta-in{position:relative;z-index:2;max-width:calc(760px + 2 * var(--borde));margin:0 auto;padding-inline:var(--borde);display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--e4)}
/* ES9: la columna arranca en el borde del contenedor, como los demás títulos de sección; el formulario sigue a 760 px como mucho */
@media (min-width:821px){.pregunta-in{max-width:none}.pregunta-in>*{max-width:760px}}
.panel{width:100%;margin-top:var(--sec-in);padding:var(--pad);border-radius:var(--r2);background:color-mix(in srgb,var(--p50) 80%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--filo),var(--sombra);text-align:left;display:flex;flex-direction:column;gap:var(--e6)}
.panel-et{display:block;margin-bottom:var(--e2);color:var(--n500)}
.opciones{display:flex;flex-wrap:wrap;gap:var(--e2)}
.opciones button{min-height:44px;padding:0 var(--e5);flex:0 0 auto;border-radius:var(--r4);background:color-mix(in srgb,var(--n900) 5%,transparent);box-shadow:var(--filo-oscuro);font-weight:600;color:var(--n900);transition:background-color var(--d-h) var(--ease),color var(--d-h) var(--ease),transform var(--d-h) var(--ease)}
.opciones button[aria-pressed="true"]{background:var(--n900);color:var(--p100)}
.opciones button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.opciones button[aria-pressed="false"]:hover{background:color-mix(in srgb,var(--n900) 10%,transparent)}}
/* calendario de mes: sin librerías; los días pasados no se pueden elegir */
.cal-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);margin-bottom:var(--e2)}
.cal-mes{font:var(--peso-t) var(--t-l)/1.1 var(--display);letter-spacing:-.02em;color:var(--n900)}
.cal-ir{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--n900);background:color-mix(in srgb,var(--n900) 5%,transparent);box-shadow:var(--filo-oscuro);transition:background-color var(--d-h) var(--ease)}
.cal-ir:disabled{color:var(--n300);background:transparent;box-shadow:inset 0 0 0 1px var(--raya);cursor:default}
@media (hover:hover) and (pointer:fine){.cal-ir:not(:disabled):hover{background:color-mix(in srgb,var(--n900) 10%,transparent)}}
.cal-tabla{width:100%;border-collapse:collapse;table-layout:fixed}
.cal-tabla th{text-align:center;padding-bottom:var(--e2);font-size:var(--t-xs);font-weight:600;color:var(--n500);text-transform:uppercase;letter-spacing:.04em}
.cal-tabla td{padding:2px;text-align:center}
.cal-tabla abbr{text-decoration:none}
.cal-dia{display:grid;place-items:center;width:100%;max-width:48px;aspect-ratio:1;min-height:40px;margin:0 auto;border-radius:50%;font-weight:600;color:var(--n900);font-variant-numeric:tabular-nums;transition:background-color var(--d-h) var(--ease),color var(--d-h) var(--ease)}
.cal-dia.hoy{box-shadow:inset 0 0 0 1.5px var(--n900)}
.cal-dia[aria-pressed="true"]{background:var(--n900);color:var(--p100)}
.cal-dia:disabled{color:var(--n200);cursor:default}
@media (hover:hover) and (pointer:fine){.cal-dia:not(:disabled):not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--n900) 10%,transparent)}}
.cal-dia:focus-visible{outline-offset:1px}
@media (max-width:820px){.cal-dia{min-height:44px}.cal-tabla td{padding:0}}
/* MV7: a 375 cada día medía 42 px de ancho; con menos relleno lateral en la tarjeta del calendario, 44 */
@media (max-width:420px){.panel{padding-inline:var(--e3)}}
.previa-txt{padding:var(--e5);border-radius:var(--r2) var(--r2) var(--r2) var(--r1);background:var(--p200);color:var(--n900);line-height:1.35}

/* ---------- 8b. dónde estamos ----------
   escritorio: a la izquierda (6 de 14) cabecera, dirección, botones, datos y enlace; a la derecha la fachada (16:10) y,
   debajo, el mapa, que se estira hasta acabar a la altura de la izquierda; tableta: texto arriba y foto y mapa a la par;
   móvil: dirección, copiar, botones, foto, mapa, datos y enlace */
.ubi{--fondo:var(--p100)}
.ubi-in{align-items:stretch;row-gap:var(--sec-in)}
.ubi-datos{grid-column:1/7;display:flex;flex-direction:column;align-items:flex-start;gap:var(--e5)}
.ubi-cab{display:grid;row-gap:var(--e4);margin-bottom:calc(var(--sec-in) - var(--e5))}
.ubi-dir{font:var(--peso-t) var(--t-medio)/1.08 var(--display);letter-spacing:var(--tr-t);color:var(--n900);user-select:all;-webkit-user-select:all}
.ubi-dir span{display:block}
.ubi-copiar{font-weight:600;color:var(--n900);min-height:44px}
.ubi-lista{width:100%;margin:0;border-top:1px solid var(--raya)}
.ubi-lista div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:var(--e4);align-items:baseline;padding:var(--e3) 0;border-bottom:1px solid var(--raya)}
.ubi-lista dt{font:600 var(--t-xs)/1.5 var(--texto);text-transform:uppercase;letter-spacing:.08em;color:var(--n500)}
.ubi-lista dd{margin:0;color:var(--n800)}
.ubi-mas{font-weight:600;color:var(--n900)}
.ubi-ver{grid-column:8/15;display:flex;flex-direction:column;gap:var(--e5)}
.ubi-foto{margin:0;display:grid;gap:var(--e3)}
.ubi-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 20%;border-radius:var(--r2)}
.ubi-foto figcaption{font-size:var(--t-s);color:var(--n600)}
.ubi-mapa{position:relative;flex:1;min-height:320px;border-radius:var(--r2);overflow:hidden;background:var(--p200);box-shadow:var(--filo-oscuro);isolation:isolate}
.ubi-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.15)}
.ubi-tapa{display:none}
@media (hover:none){
  .ubi-tapa{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;background:color-mix(in srgb,var(--n900) 8%,transparent)}
  .ubi-tapa span{padding:var(--e2) var(--e4);border-radius:var(--r4);font-weight:600;font-size:var(--t-s);color:var(--p50);background:color-mix(in srgb,var(--n900) 78%,transparent)}
  .ubi-mapa.suelto .ubi-tapa{display:none}
}
@media (max-width:1000px){
  .ubi-datos,.ubi-ver{grid-column:1/-1}
  .ubi-ver{flex-direction:row;align-items:stretch}
  .ubi-ver>*{flex:1 1 0;min-width:0}
  .ubi-mapa{min-height:0}
}
@media (max-width:820px){
  /* móvil: las piezas de las dos columnas se ordenan en una sola */
  .ubi-in{row-gap:0}
  .ubi-datos,.ubi-ver{display:contents}
  .ubi-in>*,.ubi-datos>*,.ubi-ver>*{grid-column:1/-1}
  .ubi-cab{order:1;margin-bottom:var(--sec-in)}
  .ubi-dir{order:2}
  .ubi-copiar{order:3;justify-self:start;margin-top:var(--e2)}
  .ubi-datos .acciones{order:4;margin-top:var(--e4)}
  .ubi-foto{order:5;margin-top:var(--e7)}
  .ubi-mapa{order:6;margin-top:var(--e5);aspect-ratio:1/1;flex:none}
  .ubi-lista{order:7;margin-top:var(--e7)}
  .ubi-mas{order:8;justify-self:start;margin-top:var(--e5)}
  #ubi-aviso{order:9}
}

/* ---------- 9. guías ----------
   escritorio y tableta: tres guías en rejilla dentro del contenedor y «Ver todas» en la línea del título;
   móvil: fila con imán, la primera en el margen y la siguiente asomando; «Ver todas» debajo a todo el ancho */
.guias{--fondo:var(--p100)}
.guias-in{align-items:end}
.guias-in .cab{grid-column:1/11}
.guias-todas{grid-column:11/15;justify-self:end;margin-bottom:var(--sec-in)}
.guias-lista{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.guia a{height:100%;display:grid;grid-template-rows:auto 1fr auto;row-gap:var(--e3);-webkit-user-drag:none}
.guia-foto{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden}
.guia-foto::before{content:"";position:absolute;inset:0;z-index:1;background:var(--n900);opacity:0;transition:opacity var(--d-t) var(--ease)}
.guia-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-foto) var(--ease);-webkit-user-drag:none}
.etiqueta{position:absolute;left:var(--e3);top:var(--e3);z-index:2;display:inline-flex;align-items:center;height:28px;padding:0 var(--e4);border-radius:var(--r1);background:color-mix(in srgb,var(--n900) 75%,transparent);color:var(--p100);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.guia-t{font:var(--peso-t) var(--t-l)/1.15 var(--display);letter-spacing:-.02em;max-width:24ch;color:var(--n900);text-wrap:balance}
.guia-ir{color:var(--n600);text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
@media (hover:hover) and (pointer:fine){
  .guia a:hover .guia-foto::before{opacity:.12}
  .guia a:hover .guia-foto img{transform:scale(1.04)}
  .guia a:hover .guia-ir{text-decoration-color:currentColor}
}
.guia a:focus-visible .guia-foto::before{opacity:.12}
.guia a:focus-visible{outline-offset:6px;border-radius:var(--r2)}
@media (max-width:820px){
  .guias-in .cab{grid-column:1/-1}
  .guias-lista{order:2;display:flex;gap:var(--e4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--borde);padding-inline:var(--borde);margin-inline:calc(-1 * var(--borde));scrollbar-width:none}
  .guias-lista::-webkit-scrollbar{display:none}
  .guia{flex:0 0 84%;scroll-snap-align:start}
  .guias-todas{order:3;grid-column:1/-1;justify-self:stretch;margin:var(--e7) 0 0}
}

/* ---------- 10. cierre y pie ---------- */
.final{--fondo:var(--n900);position:relative;overflow:hidden;background:var(--n900)}
.final-fondo{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--n950) 25%);mask-image:linear-gradient(180deg,transparent 0%,var(--n950) 25%)}
.final-fondo::after{content:"";position:absolute;inset:0;background:var(--n950);opacity:.48}
.cierre{position:relative;min-height:92svh;display:flex;align-items:center;padding-block:var(--sec)}
.cierre-in{position:relative;width:100%;justify-items:center;text-align:center;row-gap:var(--e7)}
.cierre-in .t-gigante{max-width:9ch;text-shadow:0 4px 16px color-mix(in srgb,var(--n950) 15%,transparent)}
.cierre-in .acciones{justify-content:center}
/* ES5: en escritorio el título va en una o dos líneas y empieza a --sec del borde de la lámina, como cualquier sección;
   la foto entra antes (el degradado de arriba acaba al 12 %) para que ese aire no sea una franja oscura vacía */
@media (min-width:821px){
  .cierre{min-height:72svh;align-items:flex-start}
  .cierre-in .t-gigante{max-width:16ch}
  .final-fondo{-webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--n950) 12%);mask-image:linear-gradient(180deg,transparent 0%,var(--n950) 12%)}
}
.cierre-foto{display:none}
/* móvil: cierre y pie sobre negro liso; la foto del salón, nítida y enmarcada, encima del titular */
@media (max-width:820px){
  .final-fondo{display:none}
  .cierre{min-height:0;align-items:flex-start}
  .cierre-foto{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;margin-bottom:var(--e4)}
  .cierre-foto img{width:100%;height:100%;object-fit:cover}
  .pie-panel{background:color-mix(in srgb,var(--p50) 6%,var(--n900));-webkit-backdrop-filter:none;backdrop-filter:none}
}
.pie{position:relative;padding:0 var(--borde) var(--e6)}
.pie-panel{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:var(--gap);row-gap:var(--e8);padding:var(--pad);border-radius:var(--r2);background:var(--vidrio-oscuro);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--filo);min-height:0}
.pie-marca{grid-column:9/15;grid-row:2;display:flex;align-items:flex-end;justify-content:flex-end;gap:var(--e5)}
.pie-logo{width:96px;height:auto}
.red{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--p100);color:var(--n900);transition:transform var(--d-t) var(--ease),background-color var(--d-h) var(--ease)}
.red .ic{width:15px;height:15px;stroke-width:1.8}
.red::after{content:"";position:absolute;width:44px;height:44px}
.pie-cols{grid-column:9/15;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--e8);align-content:space-between}
.pie-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e1)}
.pie-et{font-size:var(--t-s);color:var(--p300);margin-bottom:var(--e2)}
.pie-col a,.pie-suelto a{font-weight:var(--peso);font-size:var(--t-base);color:var(--p100);padding-block:var(--e1);transition:transform var(--d-h) var(--ease),opacity var(--d-h) var(--ease)}
.pie-col a.sub{font-size:var(--t-s);color:var(--p200)}
.pie-suelto{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e1) var(--e6);align-self:end}
.pie-contacto{grid-column:1/9;grid-row:1/3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e7) var(--gap);align-content:space-between}
.pie-es{grid-column:1/-1}
.pie-dato.pie-grande{font:var(--peso-t) var(--t-gigante)/1.04 var(--display);letter-spacing:var(--tr-t);margin-top:var(--e2)}
.pie-es .pie-wa{margin-top:var(--e3);font-size:var(--t-s)}
.pie-mini{font-size:var(--t-xs);color:var(--p300);margin-bottom:var(--e1);letter-spacing:.04em}
.pie-dato{display:block;font:var(--peso-t) var(--t-l)/1.1 var(--texto);letter-spacing:-.02em;color:var(--p50);transition:transform var(--d-h) var(--ease),opacity var(--d-h) var(--ease)}
.pie-dir{font-size:var(--t-m);max-width:24ch}
.pie-wa{display:inline-block;margin-top:var(--e1);font-size:var(--t-s);color:var(--p200);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.pie-nota{margin-top:var(--e2);font-size:var(--t-xs);color:var(--p300);max-width:34ch}
.pie-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e2);padding:var(--e5) var(--e1) 0;font-size:var(--t-xs);color:var(--p200);letter-spacing:.04em}
.pie-legal a{transition:opacity var(--d-h) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .pie-col a:hover,.pie-suelto a:hover,a.pie-dato:hover{transform:translateX(4px)}
  .pie-legal a:hover,.pie-wa:hover{opacity:.7}
  .red:hover{transform:scale(1.1)}
}
.pie-col a:focus-visible,.pie-suelto a:focus-visible,a.pie-dato:focus-visible{transform:translateX(4px)}
@media (max-width:1000px){
  .pie-contacto{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-marca{grid-column:1/-1;grid-row:auto;justify-content:space-between;align-items:center}
  .pie-cols{grid-column:1/-1;grid-row:auto}
}
@media (max-width:600px){
  .pie-contacto{grid-template-columns:1fr}
  .pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-legal{flex-direction:column}
}
@media (max-width:340px){.pie-cols{grid-template-columns:1fr}}

/* barra fija en móvil */
.barra{display:none}
@media (max-width:820px){
  .barra{display:flex;gap:var(--e2);position:fixed;left:var(--borde);right:var(--borde);bottom:calc(var(--e3) + env(safe-area-inset-bottom));z-index:70;transform:translateY(160%);transition:transform var(--d-t) var(--ease)}
  .barra{padding:var(--e2);border-radius:var(--r4);background:color-mix(in srgb,var(--n900) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid color-mix(in srgb,var(--p50) 14%,transparent);box-shadow:var(--sombra)}
  .barra .pil{height:var(--hp)}
  html{scroll-padding-bottom:var(--barra)}
  .barra .pil{flex:1}
  /* 5c. que la barra no tape el final de cada sección */
  /* MV6: sin relleno bajo el pie: la barra ya está oculta al llegar al final */
  .barra.ver{transform:none}
}

/* ---------- entradas al llegar ---------- */
.rv-on .rv{transition:opacity var(--d-t) var(--ease),transform var(--d-l) var(--ease)}
.rv-on .rv:not(.in){opacity:0;transform:translateY(24px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important;scroll-behavior:auto!important}
}

/* móvil: botones con algo menos de relleno lateral para que los pares quepan a 320 */
@media (max-width:820px){
  .pil{padding:0 var(--e6)}
  .cinta-mandos .pil{padding:0 var(--e5)}
}
@media (max-width:360px){.cinta-mandos .pil{padding:0 var(--e4)}.cinta-cuenta{min-width:0}}

@media (max-width:820px){.opciones button{flex:1 1 auto;padding:0 var(--e3);font-size:var(--t-s)}}

/* táctil: toda zona pulsable llega a 44 px */
.red{position:relative}
.red::after{content:"";position:absolute;inset:-9px}   /* MV7: 26 px a la vista, 44 px al dedo */
@media (pointer:coarse),(max-width:820px){
  .enlace{position:relative}
  .enlace::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  .pie-col a,.pie-suelto a,.pie-legal a,.salto,.pie-wa{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .pie-col a{min-height:0;min-width:44px;padding-block:10px;line-height:24px}   /* MV8: 10 px arriba y abajo en cada fila, ocupe una línea o dos */
  .pie-col{gap:0}
  a.pie-dato{display:flex;align-items:center;min-height:44px}
}
h2,h3,.pie-dato{text-wrap:balance}
/* sin JS: el idioma se abre al pasar o enfocar */
html:not(.js) .idioma:hover .idioma-panel,html:not(.js) .idioma:focus-within .idioma-panel{opacity:1;visibility:visible}
html:not(.js) .idioma:hover .idioma-panel a,html:not(.js) .idioma:focus-within .idioma-panel a{opacity:1;transform:none}
.hd.recogida{transform:translateY(calc(-100% - 16px));transition:transform 300ms cubic-bezier(.4,0,1,1)}
.hd.recogida:focus-within{transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vidrio{background:color-mix(in srgb,var(--n900) 80%,transparent)}.pil-vidrio{background:color-mix(in srgb,var(--n500) 85%,transparent)}}
/* móvil: sin desenfoque de fondo encima del vídeo del héroe. Un cristal sobre un vídeo obliga al teléfono a
   recalcular el desenfoque en cada fotograma y el vídeo pierde cadencia; aquí el cristal pasa a tinta opaca */
@media (max-width:820px){
  .hd-in{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--n900) 78%,transparent)}
  .hx .pil-vidrio{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--n900) 72%,transparent)}
  .hctl{filter:none}
}