/* =============================================
   LEÓN SOLEDAD — Sistema visual v2 (oct 2026)
   La marca es negro y blanco. Los grises solo dan jerarquía; el color lo ponen las fotos.
   Todas las páginas usan este archivo + js/ls.js. El formulario de propuesta vive en ls-propuesta.css.
   ============================================= */
:root {
  --negro:#0B0B0B; --blanco:#FFFFFF;
  --gris-texto:#5C5C5C; --gris-linea:#E4E4E4; --gris-fondo:#F4F4F4;
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --lento:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(16px, 4vw, 56px);
  --max:1240px;
  --nav-h:84px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--sans); font-size:1.0625rem; line-height:1.65; color:var(--negro); background:var(--blanco); overflow-x:hidden; }
img, video { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.wrap { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--angosto { max-width:860px; }
.solo-lector { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.kicker { font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gris-texto); }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.01em; }
h2 { font-size:clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.15; }

.btn { display:inline-flex; align-items:center; gap:.6em; padding:1em 1.7em; font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; border:1px solid currentColor; transition:background .5s var(--lento), color .5s var(--lento); }
.btn svg { width:1.15em; height:1.15em; flex:none; }
.btn--blanco { background:var(--blanco); color:var(--negro); border-color:var(--blanco); }
.btn--blanco:hover { background:transparent; color:var(--blanco); }
.btn--negro { background:var(--negro); color:var(--blanco); border-color:var(--negro); }
.btn--negro:hover { background:transparent; color:var(--negro); }
.btn--borde-blanco { color:var(--blanco); }
.btn--borde-blanco:hover { background:var(--blanco); color:var(--negro); }
.enlace { display:inline-flex; gap:.5em; align-items:center; font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:.3em; }
.enlace span { transition:transform .5s var(--lento); }
.enlace:hover span { transform:translateX(4px); }

/* ---------- Menú ----------
   Sobre el hero va transparente y blanco; al terminar el hero se vuelve blanco con logo negro.
   En el home el logo vuela del centro al hueco (hero con data-vuelo); en el resto ya está en su lugar. */
.nav { position:fixed; inset:0 0 auto; z-index:50; color:var(--blanco); transition:background .6s var(--lento), color .6s var(--lento), box-shadow .6s var(--lento); }
.nav__in { display:flex; align-items:center; gap:2rem; height:var(--nav-h); --logo-h:40px; }
.nav__hueco { flex:none; width:calc(var(--logo-h) * 2.386); height:var(--logo-h); } /* 551×231 del SVG */
.nav__grupo { display:flex; align-items:center; gap:2rem; margin-left:auto; will-change:transform; }
.logo-vuela { position:fixed; top:0; left:0; z-index:60; transform-origin:0 0; will-change:transform; opacity:0; animation:asoma 1.4s var(--lento) .2s forwards; }
.logo-vuela img { display:block; height:40px; width:auto; filter:brightness(0) invert(1); transition:filter .5s var(--lento); }
.nav.solida .logo-vuela img { filter:none; }
@keyframes asoma { to { opacity:1; } }
.nav__links { display:flex; gap:1.9rem; font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.nav__links a { position:relative; padding-block:.4em; }
.nav__links a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--lento); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform:scaleX(1); }
/* El marco de "Escríbenos" aparece a la par que el logo llega al menú (--p lo pone el JS, de 0 a 1) */
.nav .btn { padding:.85em 1.3em; border-color:color-mix(in srgb, currentColor calc(var(--p, 1) * 100%), transparent); }
.nav__menu { display:none; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:.6em 0; }
.nav.solida { background:var(--blanco); color:var(--negro); box-shadow:0 1px 0 var(--gris-linea); }
.nav__panel { display:none; }

/* ---------- Hero del home: video entero + logo gigante ---------- */
.hero { position:relative; height:100svh; min-height:600px; color:var(--blanco); background:var(--negro); overflow:hidden; display:grid; place-items:center; isolation:isolate; }
.hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 72%, rgba(0,0,0,.65) 100%),
             radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.5) 100%); }
.hero__pie { position:absolute; left:0; right:0; bottom:0; padding-bottom:clamp(24px, 5vh, 48px); display:flex; justify-content:space-between; align-items:end; gap:1rem; font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.hero__pausa { display:inline-flex; align-items:center; gap:.6em; min-height:44px; padding-inline:.5em; margin-right:-.5em; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.hero__pausa:hover { opacity:1; }
.hero__pausa i { display:inline-block; width:8px; height:10px; border-left:2px solid; border-right:2px solid; }
.hero__pausa.pausado i { border:0; width:0; height:0; border-left:9px solid; border-top:5px solid transparent; border-bottom:5px solid transparent; }

/* ---------- Hero de página interna: foto entera, título abajo a la izquierda ---------- */
.portada { position:relative; min-height:clamp(560px, 86svh, 900px); color:var(--blanco); background:var(--negro); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.portada > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(1.04); animation:respira 2.4s var(--lento) forwards; }
/* Velo medido (referencias/medir-heros.js): oscurece arriba (menú), a la izquierda y abajo (texto) */
.portada::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,0) 78%),
             linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 18%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.86) 100%); }
.portada__txt { padding-block:0 clamp(40px, 8vh, 88px); }
.portada__ruta { font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; opacity:.85; margin-bottom:1.2rem; }
.portada__ruta a { border-bottom:1px solid transparent; }
.portada__ruta a:hover { border-color:currentColor; }
.portada h1 { font-size:clamp(2.6rem, 6vw, 5.2rem); max-width:18ch; text-wrap:balance; }
.portada p { max-width:36rem; margin:1.1rem 0 2rem; font-size:clamp(1rem, 1.5vw, 1.15rem); opacity:.92; }
.portada__ctas { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; }
.portada--corta { min-height:clamp(380px, 52svh, 520px); }
.portada--corta .portada__txt { padding-top:calc(var(--nav-h) + 48px); } /* que la ruta no choque con el logo */
.portada--negra::before { background:none; }
@keyframes respira { to { transform:scale(1); } }

/* ---------- Bloques genéricos ---------- */
.bloque { padding-block:clamp(88px, 12vw, 150px); }
.bloque--negro { background:var(--negro); color:var(--blanco); }
.bloque--negro .kicker { color:rgba(255,255,255,.7); }
.bloque--gris { background:var(--gris-fondo); }
/* Dos bloques blancos seguidos no duplican el espacio entre ellos */
.bloque:not(.bloque--negro):not(.bloque--gris) + .bloque:not(.bloque--negro):not(.bloque--gris) { padding-top:0; }
.cab { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1.5rem 3rem; margin-bottom:clamp(36px, 5vw, 64px); }
.cab h2 { margin-top:.35em; max-width:18ch; }
.cab > p { max-width:28rem; color:var(--gris-texto); }
.bloque--negro .cab > p { color:rgba(255,255,255,.7); }

/* ---------- Franja de locales ---------- */
.locales { border-bottom:1px solid var(--gris-linea); overflow:hidden; }
.locales__in { display:flex; align-items:center; gap:2.5rem; padding-block:1.4rem; }
.locales__titulo { flex:none; padding-left:var(--gutter); }
.locales__mascara { overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.locales__cinta { display:flex; gap:3rem; width:max-content; animation:cinta 48s linear infinite; font-family:var(--serif); font-size:1.35rem; font-style:italic; color:var(--negro); white-space:nowrap; }
.locales__cinta span::after { content:"·"; margin-left:3rem; font-style:normal; color:var(--gris-texto); }
@keyframes cinta { to { transform:translateX(-50%); } }

/* ---------- Texto + foto (antes "Una sola casa") ---------- */
.casa { padding-block:clamp(88px, 13vw, 168px); }
.casa__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px, 7vw, 112px); align-items:center; }
.casa__grid--al-reves > figure { order:-1; }
.casa h2 { margin:.5em 0 .6em; max-width:15ch; }
.casa p { color:var(--gris-texto); max-width:34rem; }
.casa p + p { margin-top:1rem; }
.casa p.casa__lista { margin:2rem 0 2.4rem; font-family:var(--serif); font-size:1.2rem; line-height:1.9; color:var(--negro); max-width:32rem; }
.casa__lista span:not(:last-child)::after { content:" · "; color:var(--gris-texto); }
.casa__foto img { aspect-ratio:4/5; object-fit:cover; width:100%; }
.casa__foto figcaption { margin-top:.9rem; font-size:.82rem; color:var(--gris-texto); }
.casa .enlace { margin-top:2rem; }

/* ---------- Dos caminos (paneles grandes con foto) ---------- */
.caminos { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--blanco); }
.camino { position:relative; min-height:min(92vh, 860px); color:var(--blanco); overflow:hidden; display:flex; align-items:flex-end; isolation:isolate; background:var(--negro); }
.camino img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.6s var(--lento); }
.camino::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.8) 100%); }
.camino:hover img { transform:scale(1.035); }
.camino__txt { padding:clamp(28px, 4vw, 56px); max-width:34rem; }
.camino .kicker { color:var(--blanco); opacity:.85; }
.camino h3 { font-size:clamp(2rem, 3.4vw, 3rem); margin:.4em 0 .4em; }
.camino p { opacity:.9; margin-bottom:1.6rem; }
.camino p.camino__frase { font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem, 2vw, 1.7rem); line-height:1.25; opacity:1; margin:-.2rem 0 .8rem; }

/* ---------- Lista numerada editorial (reemplaza las grillas de íconos) ---------- */
.lista { list-style:none; border-top:1px solid var(--gris-linea); }
.lista li { display:grid; grid-template-columns:clamp(56px, 8vw, 110px) minmax(0, 1fr) minmax(0, 1.2fr); gap:clamp(16px, 3vw, 48px); align-items:baseline; padding-block:clamp(24px, 3.4vw, 40px); border-bottom:1px solid var(--gris-linea); }
.lista__n { font-family:var(--serif); font-size:1.1rem; color:var(--gris-texto); font-variant-numeric:lining-nums; }
.lista h3 { font-size:clamp(1.4rem, 2.2vw, 1.85rem); }
.lista p { color:var(--gris-texto); max-width:34rem; }
/* Sin número cuando la lista no es una secuencia (servicios, valores, beneficios) */
.lista li:not(:has(.lista__n)) { grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); }
.bloque--negro .lista, .bloque--negro .lista li { border-color:rgba(255,255,255,.16); }
.bloque--negro .lista__n, .bloque--negro .lista p { color:rgba(255,255,255,.7); }

/* ---------- Tarjetas con foto (estilos, tipos, modalidades) ---------- */
.tarjetas { display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 32px); }
.tarjeta img { width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:1.2rem; transition:transform 1.4s var(--lento); }
.tarjeta figure { overflow:hidden; }
.tarjeta:hover img { transform:scale(1.03); }
.tarjeta h3 { font-size:clamp(1.4rem, 2vw, 1.75rem); margin-bottom:.4em; }
.tarjeta p { color:var(--gris-texto); }
.bloque--negro .tarjeta p { color:rgba(255,255,255,.72); }
.tarjeta--sin-foto { border-top:1px solid currentColor; padding-top:1.4rem; }

/* ---------- Cifras sobrias ---------- */
.cifras { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:2rem; border-block:1px solid var(--gris-linea); padding-block:clamp(32px, 4vw, 48px); }
.cifras b { display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem, 4vw, 3.4rem); line-height:1; }
.cifras span { display:block; margin-top:.6rem; font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-texto); }

/* ---------- Una noche con nosotros: reloj fijo + fotos ---------- */
.noche { background:var(--negro); color:var(--blanco); padding-block:clamp(88px, 12vw, 150px) clamp(48px, 7vw, 96px); }
.noche .kicker { color:rgba(255,255,255,.7); }
.noche__cab { display:flex; flex-wrap:wrap; gap:1.5rem 3rem; justify-content:space-between; align-items:end; margin-bottom:clamp(40px, 6vw, 80px); }
.noche__cab h2 { margin-top:.35em; }
.noche__cab p { font-size:.88rem; color:rgba(255,255,255,.65); margin-top:.6rem; }
.selector { display:inline-flex; border:1px solid rgba(255,255,255,.6); }
.selector button { min-height:44px; padding:.85em 1.5em; font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:background .5s var(--lento), color .5s var(--lento); }
.selector button[aria-pressed="true"] { background:var(--blanco); color:var(--negro); }
.noche__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px, 6vw, 96px); }
.reloj { position:sticky; top:calc(var(--nav-h) + 12vh); align-self:start; }
.reloj__hora { display:block; font-family:var(--serif); font-size:clamp(5rem, 12vw, 11rem); line-height:.9; letter-spacing:-.03em; font-variant-numeric:lining-nums; transition:opacity .5s var(--lento), transform .5s var(--lento); }
.reloj__ampm { display:block; margin-top:1rem; font-size:.85rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.7); transition:opacity .5s var(--lento); }
.reloj.cambia .reloj__hora { opacity:0; transform:translateY(10px); }
.reloj.cambia .reloj__ampm { opacity:0; }
.reloj__barra { margin-top:2.2rem; height:1px; background:rgba(255,255,255,.18); position:relative; max-width:320px; }
.reloj__barra i { position:absolute; inset:0; background:var(--blanco); transform:scaleX(var(--avance, 0)); transform-origin:left; transition:transform .8s var(--lento); }
.pasos { list-style:none; }
.paso { min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding-block:6vh; }
.paso img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:1.6rem; }
.paso:nth-child(odd) img { aspect-ratio:4/5; width:82%; }
.paso h3 { margin-bottom:.45em; }
.paso p { color:rgba(255,255,255,.75); max-width:30rem; }

/* ---------- Testimonios en video ---------- */
.voces { padding-block:clamp(88px, 12vw, 150px); }
.voces__fila { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(12px, 1.6vw, 24px); }
.voz { position:relative; aspect-ratio:9/16; background:var(--negro); overflow:hidden; color:var(--blanco); text-align:left; }
.voz img, .voz video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.voz img { filter:grayscale(1); transition:transform 1.4s var(--lento), filter 1s var(--lento); }
.voz:hover img { transform:scale(1.04); filter:grayscale(0); }
.voz::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.85)); pointer-events:none; }
.voz__txt { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.2rem 1.3rem 1.4rem; display:flex; justify-content:space-between; align-items:end; gap:1rem; }
.voz__nombre { font-family:var(--serif); font-size:1.45rem; line-height:1.1; }
.voz__tipo { display:block; font-family:var(--sans); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; opacity:.8; margin-top:.35rem; }
.voz__play { flex:none; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.7); display:grid; place-items:center; transition:background .5s var(--lento); }
.voz:hover .voz__play { background:rgba(255,255,255,.18); }
.voz__play svg { width:14px; margin-left:3px; fill:currentColor; }
.voz.reproduciendo::after, .voz.reproduciendo .voz__txt { display:none; }

/* ---------- Galería editorial ---------- */
.galeria { padding-block:0 clamp(88px, 12vw, 150px); }
.bloque.galeria { padding-block:clamp(88px, 12vw, 150px); } /* galería como bloque propio (experiencias, XV) */
.galeria__grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(10px, 1.4vw, 20px); }
.galeria figure { position:relative; overflow:hidden; }
.galeria img { width:100%; height:100%; object-fit:cover; }
.galeria figcaption { position:absolute; left:.9rem; bottom:.8rem; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blanco); text-shadow:0 1px 10px rgba(0,0,0,.7); }
.g1 { grid-column:span 7; aspect-ratio:3/2; } .g2 { grid-column:span 5; grid-row:span 2; }
.g3 { grid-column:span 3; aspect-ratio:3/4; } .g4 { grid-column:span 4; aspect-ratio:1/1; }
.g5 { grid-column:span 5; } .g6 { grid-column:span 7; aspect-ratio:3/2; } /* g5 toma la altura de g6: sin hueco */

/* ---------- Preguntas frecuentes (details nativo) ---------- */
.faq { border-top:1px solid var(--gris-linea); }
.faq details { border-bottom:1px solid var(--gris-linea); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:2rem; align-items:baseline; padding-block:1.6rem; font-family:var(--serif); font-size:clamp(1.3rem, 2vw, 1.6rem); line-height:1.25; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--sans); font-size:1.4rem; font-weight:300; transition:transform .5s var(--lento); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--gris-texto); max-width:46rem; padding-bottom:1.8rem; }

/* ---------- Texto legal ---------- */
.legal { max-width:68ch; }
/* Medida de lectura: ningún párrafo pasa de ~65 caracteres por línea */
.casa p, .lista p, .faq details p, .tarjeta p, .cab > p { max-width:62ch; }
h2, h3 { text-wrap:balance; }
::selection { background:var(--negro); color:var(--blanco); }
.legal__fecha { font-size:.85rem; color:var(--gris-texto); margin-bottom:2.5rem; }
.legal h2 { font-size:clamp(1.6rem, 2.6vw, 2.1rem); margin:3rem 0 1rem; }
.legal h3 { font-size:1.3rem; margin:2rem 0 .6rem; }
.legal p, .legal li { color:var(--gris-texto); line-height:1.8; }
.legal p + p { margin-top:1rem; }
.legal ul { padding-left:1.3rem; margin:0 0 1.2rem; }
.legal li { margin-bottom:.4rem; }
.legal a { color:var(--negro); text-decoration:underline; }

/* ---------- Cierre ---------- */
.cierre { background:var(--negro); color:var(--blanco); text-align:center; padding-block:clamp(96px, 14vw, 180px); }
.cierre .kicker { color:rgba(255,255,255,.7); }
.cierre h2 { font-size:clamp(2.6rem, 6vw, 5rem); margin:.4em auto .4em; max-width:14ch; }
.cierre p { max-width:32rem; margin:0 auto 2.4rem; color:rgba(255,255,255,.8); }
.cierre__ctas { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.cierre p.cierre__tel { margin:2rem auto 0; font-size:.9rem; color:rgba(255,255,255,.7); }
.cierre__tel a { border-bottom:1px solid currentColor; }

/* ---------- Empresas (discreto) ---------- */
.empresas { background:var(--gris-fondo); padding-block:1.6rem; font-size:.95rem; }
.empresas .wrap { display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:center; justify-content:space-between; }
.empresas p { color:var(--gris-texto); }
.empresas nav { display:flex; gap:1.6rem; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.pie { background:var(--negro); color:rgba(255,255,255,.75); padding-block:72px 32px; font-size:.92rem; border-top:1px solid rgba(255,255,255,.1); }
.pie__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.pie img { height:52px; width:auto; filter:brightness(0) invert(1); margin-bottom:1.2rem; }
.pie__t { font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--blanco); margin-bottom:1rem; }
.pie li { list-style:none; margin-bottom:.5rem; }
.pie a:hover { color:var(--blanco); }
.pie__base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; color:rgba(255,255,255,.6); }

/* ---------- "Pide tu propuesta" (js/propuesta.js): panel lateral nativo <dialog> ---------- */
.propuesta { position:fixed; inset:0 0 0 auto; width:min(560px, 100vw); max-width:100vw; height:100%; max-height:100%; margin:0; padding:0; border:0; background:var(--blanco); color:var(--negro); }
.propuesta::backdrop { background:rgba(0,0,0,.55); }
.propuesta[open] { animation:entra-panel .55s var(--lento); }
@keyframes entra-panel { from { transform:translateX(40px); opacity:0; } }
.pp-marco { display:flex; flex-direction:column; height:100%; }
.pp-cab { position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.6rem clamp(20px, 5vw, 40px) 1.4rem; border-bottom:1px solid var(--gris-linea); }
.pp-paso { font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-texto); }
.pp-cab h2 { font-size:clamp(1.6rem, 3vw, 2rem); margin-top:.3rem; }
.pp-cerrar { flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--gris-linea); border-radius:50%; transition:border-color .3s; }
.pp-cerrar:hover { border-color:var(--negro); }
.pp-cerrar svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none; }
.pp-barra { position:absolute; left:0; right:0; bottom:-1px; height:2px; }
.pp-barra i { position:absolute; inset:0; background:var(--negro); transform-origin:left; transition:transform .6s var(--lento); }
.pp-cuerpo { flex:1; overflow-y:auto; padding:1.8rem clamp(20px, 5vw, 40px) 2rem; }
.pp-sub { font-size:1.5rem; margin-bottom:1.4rem; }
.pp-campo { border:0; margin:0 0 1.5rem; min-width:0; }
.pp-campo > label, .pp-campo legend, .pp-sigue label { display:block; font-size:.92rem; font-weight:600; margin-bottom:.55rem; padding:0; }
.pp-req { font-weight:400; font-size:.8rem; color:var(--gris-texto); margin-left:.3rem; }
.propuesta input[type="text"], .propuesta input[type="number"], .propuesta input[type="date"], .propuesta select, .propuesta textarea {
  width:100%; min-height:48px; padding:.7rem .9rem; font:inherit; font-size:16px; color:var(--negro); background:var(--blanco); border:1px solid #BDBDBD; border-radius:0; transition:border-color .25s; }
.propuesta textarea { resize:vertical; line-height:1.5; }
.propuesta input:focus, .propuesta select:focus, .propuesta textarea:focus { outline:none; border-color:var(--negro); box-shadow:0 0 0 1px var(--negro); }
.propuesta input:disabled { background:var(--gris-fondo); color:var(--gris-texto); }
.propuesta ::placeholder { color:#767676; }
.pp-ops { display:flex; flex-wrap:wrap; gap:.5rem; }
.pp-op { position:relative; cursor:pointer; }
.pp-op input { position:absolute; opacity:0; width:1px; height:1px; }
.pp-op span { display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1rem; border:1px solid #BDBDBD; font-size:.95rem; line-height:1.3; transition:background .25s, color .25s, border-color .25s; }
.pp-op:hover span { border-color:var(--negro); }
.pp-op input:checked + span { background:var(--negro); color:var(--blanco); border-color:var(--negro); }
.pp-op input:focus-visible + span { outline:2px solid var(--negro); outline-offset:2px; }
.pp-sigue { margin-top:.9rem; }
.pp-sin { display:inline-flex; gap:.5rem; align-items:center; margin-top:.6rem; font-size:.92rem; cursor:pointer; }
.pp-sin input { width:18px; height:18px; accent-color:var(--negro); }
.pp-ayuda { font-size:.88rem; color:var(--gris-texto); margin-top:.45rem; }
.pp-error { font-size:.88rem; color:#A1001E; margin-top:.45rem; }
.pp-mal input, .pp-mal select, .pp-mal textarea, .pp-mal .pp-op span { border-color:#A1001E; }
.pp-mensaje { margin-top:1rem; font-family:var(--sans); font-size:.95rem !important; background:var(--gris-fondo) !important; border-color:var(--gris-linea) !important; }
.pp-pie { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(20px, 5vw, 40px) calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--gris-linea); background:var(--blanco); }
.pp-pie .btn { margin-left:auto; }
.pp-pie [hidden] { display:none; }

/* ---------- Botón fijo de WhatsApp en celular (aparece al pasar el hero) ---------- */
.barra-movil { display:none; }
@media (max-width: 620px) {
  .barra-movil { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40; display:flex; justify-content:center; align-items:center; gap:.6em; min-height:52px; background:var(--negro); color:var(--blanco); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; box-shadow:0 8px 24px rgba(0,0,0,.25); transform:translateY(calc(100% + 24px)); transition:transform .5s var(--lento); }
  .barra-movil svg { width:1.15em; height:1.15em; }
  .barra-movil.visible { transform:none; }
  .pie { padding-bottom:96px; }
}

/* ---------- Revelado lento ---------- */
.js .revela { clip-path:inset(12% 0 0 0); opacity:0; transform:translateY(24px); transition:clip-path 1.3s var(--lento), opacity 1.1s var(--lento), transform 1.3s var(--lento); }
.js .revela.visto { clip-path:inset(0 0 0 0); opacity:1; transform:none; }

/* ---------- Celular ---------- */
@media (max-width: 980px) {
  .nav__links { display:none; }
  .nav__menu { display:block; }
  .nav .btn { padding:.7em 1em; font-size:.75rem; }
  .nav__panel { position:fixed; inset:var(--nav-h) 0 auto; background:var(--blanco); color:var(--negro); padding:1.5rem var(--gutter) 2rem; box-shadow:0 18px 30px rgba(0,0,0,.12); }
  .nav__panel:not([hidden]) { display:grid; gap:.2rem; }
  .nav__panel a { font-family:var(--serif); font-size:1.7rem; padding:.3rem 0; }
  .nav__panel a[aria-current="page"] { text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; }
  .nav__menu, .nav .btn { min-height:44px; }
  .nav__menu { padding:0 .4em; }
  .caminos { grid-template-columns:1fr; }
  .camino { min-height:78svh; }
  .tarjetas { --cols:2 !important; }
  .lista li { grid-template-columns:clamp(40px, 10vw, 64px) minmax(0, 1fr); }
  .lista li p { grid-column:2; }
  .lista li:not(:has(.lista__n)) { grid-template-columns:1fr; gap:.5rem; }
  .lista li:not(:has(.lista__n)) p { grid-column:auto; }
  .pie__grid { grid-template-columns:1fr 1fr; }
  .voces__fila { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(220px, 62vw); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
  .voz { scroll-snap-align:start; }
}
/* En tablet (621–980) el texto y la foto siguen lado a lado y el reloj sigue al costado:
   en una sola columna las fotos 4/5 quedaban de casi 1000px de alto */
@media (max-width: 620px) {
  .casa__grid { grid-template-columns:1fr; }
  .casa__grid--al-reves > figure { order:0; }
  /* El reloj pasa a ser una franja fija arriba */
  .noche__grid { grid-template-columns:1fr; gap:0; }
  .reloj { top:var(--nav-h); z-index:3; background:var(--negro); padding-block:1rem; display:flex; align-items:baseline; gap:1rem; border-bottom:1px solid rgba(255,255,255,.15); }
  .reloj__hora { font-size:3.4rem; }
  .reloj__ampm { margin-top:0; }
  .reloj__barra { flex:1; margin:0 0 .6rem; }
  .paso { min-height:auto; padding-block:2.6rem; }
  .paso:nth-child(odd) img { width:100%; }
  .pie li { margin-bottom:.1rem; }
  .pie li a { display:inline-block; padding-block:.4rem; }
  :root { --nav-h:72px; }
  .nav__in, .nav__grupo { gap:1rem; }
  .nav__in { --logo-h:32px; }
  .logo-vuela img { height:32px; }
  .locales__in { flex-direction:column; align-items:flex-start; gap:.8rem; }
  .locales__mascara { width:100%; }
  .hero__pie { font-size:.75rem; letter-spacing:.14em; }
  /* En celular el texto ocupa todo el ancho: el velo va parejo de arriba abajo */
  .portada::before { background:linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.4) 22%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.9) 100%); }
  .tarjetas { --cols:1 !important; }
  .galeria__grid { grid-template-columns:1fr 1fr; }
  .galeria figure { grid-column:span 1 !important; grid-row:auto !important; aspect-ratio:3/4 !important; }
  .galeria .g1, .galeria .g6 { grid-column:span 2 !important; aspect-ratio:3/2 !important; }
  .pie__grid { grid-template-columns:1fr; }
  .cierre__ctas .btn, .portada__ctas .btn { width:100%; justify-content:center; }
  .galeria figcaption { left:.6rem; right:.6rem; bottom:.6rem; font-size:.75rem; letter-spacing:.06em; line-height:1.35; }
}
/* En pantallas táctiles no hay hover: los testimonios se ven a color desde el inicio */
@media (hover: none) { .voz img { filter:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
  .js .revela { clip-path:none; opacity:1; transform:none; }
  .logo-vuela { opacity:1; }
  .portada > img { transform:none; }
  .locales__cinta { width:auto; flex-wrap:wrap; gap:.4rem 2rem; white-space:normal; padding-inline:var(--gutter); }
  .locales__cinta [aria-hidden] { display:none; }
}