/* ═══════════════════════════════════════════════════════════════════════════
   Megarum · el móvil (por debajo de 900 px)

   ⚠ ESTA HOJA ESTÁ A MEDIAS. Hoy recoge lo que había en la hoja única para que
   el móvil no se rompa mientras se rehace el escritorio. **El diseño de móvil
   se hace después, entero y aparte** — con su menú desplegable, su retícula y
   sus gestos. Lo que hay aquí es un puente, no una decisión.

   Lo que ya está diagnosticado y hay que arreglar cuando toque:

     · la cabecera se come 290 px de una pantalla de 844 — un tercio, y fija;
     · el desfile deja un hueco vertical y nada dice que se arrastre;
     · las áreas de toque de la barra miden 35 px y el mínimo son 44.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La escala del móvil es propia: la del escritorio no cabe. */
:root{
  --t1:2.6rem;
  --t2:1.9rem;
  --t3:1.22rem;
  --t4:1.08rem;
  --t5:1.0625rem;
  --t6:.9rem;
  --t7:.7rem;
}

h1{font-size:clamp(2.2rem,8vw,var(--t1))}
h2{font-size:clamp(1.7rem,6.2vw,var(--t2))}
h3{font-size:var(--t3)}
.ojo{font-size:var(--t7);letter-spacing:.13em;line-height:1.45}
.grande{font-size:var(--t4)}
.plan h3{font-size:1.32rem}
.plan-precio{font-size:3.1rem}
.hito h3{font-size:var(--t3);margin:0 0 .5rem;line-height:1.25}
.desfile-abre p{font-size:.98rem}

.banda{padding:4.5rem 0}

/* ── La barra, de momento como estaba ────────────────────────────────────── */
.menu-movil{display:none}
.sup{
  position:sticky;top:0;z-index:20;
  background:rgba(246,244,239,.9);backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:1px solid var(--linea);
}
.sup .env{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding-block:.72rem}
.privada{
  display:inline-flex;align-items:center;gap:.42rem;min-height:44px;
  border:1px solid var(--veta);color:var(--veta);background:transparent;
  padding:0 .95rem;border-radius:100px;text-decoration:none;
  font-size:.8rem;font-weight:600;white-space:nowrap;
}
.sup nav{margin-left:auto;display:flex;gap:.1rem;flex-wrap:wrap}
.sup nav a{
  color:var(--tinta-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .62rem;
  font-size:.87rem;border-radius:var(--radio);position:relative;
}
.sup nav a[aria-current]{color:var(--tinta);font-weight:600}
.sup nav a[aria-current]::after{
  content:'';position:absolute;left:.62rem;right:.62rem;bottom:.35rem;height:2px;
  background:var(--laton);border-radius:2px;
}

/* ── El pórtico, con la foto de pie ──────────────────────────────────────── */
.portico{padding:4rem 0 7rem}
/* La foto de móvil ya viene recortada de pie y centrada en la llama: aquí solo
   se coloca. Recortarla otra vez con `object-position` sacaba la campana
   extractora, que no es lo que hay que ver en un teléfono. */
.portico-foto img{object-position:50% 32%}
.portico-velo{
  background:
    linear-gradient(to top, var(--crema) 0%, var(--crema) 1.5%,
                            rgba(244,240,229,.72) 5%,
                            rgba(244,240,229,0) 13%),
    linear-gradient(to top, rgba(9,11,12,.96) 0%, rgba(9,11,12,.88) 46%,
                            rgba(9,11,12,.52) 78%, rgba(9,11,12,.30) 100%);
}
.portico-letrero{display:none}

.brasas i{bottom:64%}
.brasas i:nth-child(1) {left:31%;--dx: 18px;animation-duration:5.4s;animation-delay:-0.2s}
.brasas i:nth-child(2) {left:38%;--dx:-14px;animation-duration:7.1s;animation-delay:-1.9s}
.brasas i:nth-child(3) {left:45%;--dx: 26px;animation-duration:6.2s;animation-delay:-3.4s;width:2px;height:2px}
.brasas i:nth-child(4) {left:52%;--dx: -8px;animation-duration:8.3s;animation-delay:-0.9s}
.brasas i:nth-child(5) {left:59%;--dx: 12px;animation-duration:5.9s;animation-delay:-4.6s;width:4px;height:4px}
.brasas i:nth-child(6) {left:35%;--dx:-22px;animation-duration:9.0s;animation-delay:-2.6s;width:2px;height:2px}
.brasas i:nth-child(7) {left:42%;--dx: 16px;animation-duration:6.7s;animation-delay:-5.5s}
.brasas i:nth-child(8) {left:49%;--dx: 30px;animation-duration:7.8s;animation-delay:-1.2s;width:2px;height:2px}
.brasas i:nth-child(9) {left:56%;--dx:-18px;animation-duration:5.1s;animation-delay:-3.9s}
.brasas i:nth-child(10){left:33%;--dx: 20px;animation-duration:8.8s;animation-delay:-6.3s;width:2px;height:2px}
.brasas i:nth-child(11){left:47%;--dx: -4px;animation-duration:6.5s;animation-delay:-2.1s}
.brasas i:nth-child(12){left:61%;--dx: 34px;animation-duration:9.6s;animation-delay:-7.2s;width:2px;height:2px}
.brasas i:nth-child(13){left:40%;--dx:-28px;animation-duration:7.4s;animation-delay:-4.1s}
.brasas i:nth-child(14){left:54%;--dx:  6px;animation-duration:5.7s;animation-delay:-0.5s;width:4px;height:4px}

/* ── El desfile, arrastrando con el dedo ─────────────────────────────────── */
.desfile-fijo{
  display:flex;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:3.5rem 0;
}
.desfile-tira{padding-inline:1.35rem}
.desfile-abre{flex:0 0 min(23rem,78vw);align-self:center;padding-right:1.5rem}
.hito{flex:0 0 min(19.5rem,74vw)}
.hito--fin{flex-basis:min(21rem,80vw)}