/* ═══════════════════════════════════════════════════════════════════════════
   Megarum · el escritorio (de 900 px para arriba)

   Esta hoja NO es «lo mismo pero más ancho». Es el diseño de quien está
   sentado, con ratón, con una pantalla grande y sin prisa: retícula de varias
   columnas, menú a la vista, y las animaciones ligadas al desplazamiento.

   El móvil va en su hoja y no comparte ni el menú ni los efectos.

   ── La escala tipográfica ─────────────────────────────────────────────────
   Siete peldaños, razón 1,25, y prohibido salirse. Antes había diecinueve
   tamaños distintos, que no es una escala sino una lista — y se notaba en que
   un `h3` medía 18,9 px y el cuerpo 17: un título de tercer nivel no se
   distinguía de un párrafo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --t1:5rem;      /* 80 · el titular del pórtico */
  --t2:2.75rem;   /* 44 · los títulos de sección */
  --t3:1.6rem;    /* 26 · los de tercer nivel — el arreglo que más se nota */
  --t4:1.25rem;   /* 20 · la entradilla */
  --t5:1.0625rem; /* 17 · el cuerpo */
  --t6:.9375rem;  /* 15 · lo secundario */
  --t7:.75rem;    /* 12 · los rótulos */
}

h1{font-size:clamp(3.4rem,5.4vw,var(--t1))}
h2{font-size:clamp(2.1rem,3.4vw,var(--t2))}
h3{font-size:var(--t3)}
.ojo{font-size:var(--t7);letter-spacing:.19em}
.grande{font-size:var(--t4)}
.plan h3{font-size:var(--t3)}
.plan-precio{font-size:3.4rem}
.hito h3{font-size:var(--t3);margin:0 0 .5rem;line-height:1.25}
.desfile-abre p{font-size:var(--t5)}

.banda{padding:6rem 0}

/* ── La barra de arriba ──────────────────────────────────────────────────────
   El área privada va ARRIBA A LA IZQUIERDA, pegada a la marca: quien entra
   todos los días no viene a leer la web, viene a entrar.

   La barra es una pieza que flota sobre el fondo, no una franja pegada al
   borde: se separa del alto de la ventana y lleva su propio relieve. */
.menu-movil{display:none}

.sup{position:sticky;top:0;z-index:20;padding:.9rem 0}
.sup .env{
  display:flex;align-items:center;gap:1rem;
  background:var(--crema);border-radius:18px;
  padding:.6rem .9rem .6rem 1.2rem;
  box-shadow:var(--relieve);
}
.marca svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.marca:hover svg{transform:rotate(-90deg)}
/* El área de toque: 44 px es el mínimo con el que se acierta, y con el ratón
   tampoco sobra. El alto lo da el relleno, así que el texto no cambia. */
.marca{min-height:44px}

.privada{
  display:inline-flex;align-items:center;gap:.42rem;min-height:44px;
  background:var(--crema);color:var(--veta);
  padding:0 1.05rem;border-radius:100px;text-decoration:none;border:0;
  font-size:var(--t6);font-weight:600;white-space:nowrap;
  box-shadow:var(--relieve-cerca);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), color .16s;
}
.privada:hover{color:var(--veta-os);transform:translateY(-2px)}
.privada:active{box-shadow:var(--hundido);transform:none}

.sup nav{margin-left:auto;display:flex;gap:.15rem;align-items:center}
.sup nav a{
  color:var(--tinta-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;
  font-size:var(--t6);border-radius:100px;position:relative;
  transition:color .16s, box-shadow .16s;
}
.sup nav a:hover{color:var(--tinta);box-shadow:var(--relieve-cerca)}
/* La página en la que estás va HUNDIDA: la tecla que está pulsada. Es más
   claro que subrayarla y es el mismo idioma que el resto. */
.sup nav a[aria-current]{
  color:var(--tinta);font-weight:600;box-shadow:var(--hundido);
}

/* ── Retícula de varias columnas ─────────────────────────────────────────── */
.rej-2,.rej-3{grid-template-columns:1fr 1fr}
@media(min-width:1020px){ .rej-3{grid-template-columns:repeat(3,1fr)} }
.acto{grid-template-columns:1fr 1.12fr;gap:4rem}
.acto--vuelta > figure{order:-1}
.planes{grid-template-columns:repeat(3,1fr);align-items:stretch}
.modulos{grid-template-columns:repeat(3,1fr)}

/* Los tres planes acaban a la misma altura: con los botones a distinto nivel,
   la comparación se lee peor. */
.plan{height:100%}
.plan .btn{margin-top:auto}

/* ── El pórtico ──────────────────────────────────────────────────────────────
   La foto apaisada, el titular a la izquierda y el letrero de la marca donde
   la pared de la foto. El aire de abajo es mayor que el de arriba a propósito:
   por ahí sube el fundido al fondo, y el texto no puede caer dentro de él. */
.portico{
  min-height:min(92vh,50rem);
  padding:6.5rem 0 10rem;
}
.portico-foto img{object-position:44% 50%}
.portico-velo{
  background:
    /* El fundido al fondo va ARRIBA del todo: el fogón acaba y empieza la
       cocina. Puesto debajo del velo solo asomaba por donde el velo era
       transparente, o sea por la derecha. */
    linear-gradient(to top, var(--crema) 0%, var(--crema) 2.5%,
                            rgba(244,240,229,.82) 7%,
                            rgba(244,240,229,.28) 16%,
                            rgba(244,240,229,0) 26%),
    linear-gradient(100deg, rgba(9,11,12,.96) 0%, rgba(9,11,12,.90) 28%,
                            rgba(9,11,12,.55) 52%, rgba(9,11,12,.12) 78%,
                            rgba(9,11,12,.34) 100%);
}
.portico-dentro{grid-template-columns:1.06fr .94fr;gap:3.5rem}
.portico h1{font-size:clamp(3.4rem,5.4vw,var(--t1))}

/* El letrero de la pared. La foto traía otro logotipo, inventado por el
   generador; allí se apagó y aquí va el de verdad, en vectorial. */
.portico-letrero{
  display:block;margin:0;justify-self:end;text-align:center;
  color:var(--piedra);opacity:.92;
  filter:drop-shadow(0 2px 26px rgba(0,0,0,.55));
}
.portico-letrero svg{margin:0 auto .9rem}
.portico-letrero img{display:block;margin:0 auto}

/* El hogar respira. Un latido lento, de fuego quieto, no un parpadeo. */
@media (prefers-reduced-motion: no-preference){
  .portico-letrero svg circle{
    animation:hogar 3.6s ease-in-out infinite;
    transform-box:fill-box;transform-origin:center;
  }
  @keyframes hogar{
    0%,100%{opacity:.82;transform:scale(.94)}
    50%    {opacity:1;  transform:scale(1.06)}
  }
}

/* Las brasas suben desde donde está la llama en el recorte apaisado. Los
   catorce recorridos van uno a uno: con una sola animación y catorce retrasos
   se ve el patrón enseguida, y entonces parece un salvapantallas. */
.brasas i{bottom:41%}
.brasas i:nth-child(1) {left:43.6%;--dx: 22px;animation-duration:5.4s;animation-delay:-0.2s}
.brasas i:nth-child(2) {left:46.0%;--dx:-16px;animation-duration:7.1s;animation-delay:-1.9s}
.brasas i:nth-child(3) {left:48.5%;--dx: 34px;animation-duration:6.2s;animation-delay:-3.4s;width:2px;height:2px}
.brasas i:nth-child(4) {left:41.8%;--dx: -8px;animation-duration:8.3s;animation-delay:-0.9s}
.brasas i:nth-child(5) {left:50.2%;--dx: 12px;animation-duration:5.9s;animation-delay:-4.6s;width:4px;height:4px}
.brasas i:nth-child(6) {left:44.8%;--dx:-30px;animation-duration:9.0s;animation-delay:-2.6s;width:2px;height:2px}
.brasas i:nth-child(7) {left:47.3%;--dx: 18px;animation-duration:6.7s;animation-delay:-5.5s}
.brasas i:nth-child(8) {left:42.7%;--dx: 40px;animation-duration:7.8s;animation-delay:-1.2s;width:2px;height:2px}
.brasas i:nth-child(9) {left:49.4%;--dx:-22px;animation-duration:5.1s;animation-delay:-3.9s}
.brasas i:nth-child(10){left:41.0%;--dx: 26px;animation-duration:8.8s;animation-delay:-6.3s;width:2px;height:2px}
.brasas i:nth-child(11){left:51.5%;--dx: -4px;animation-duration:6.5s;animation-delay:-2.1s}
.brasas i:nth-child(12){left:45.6%;--dx: 48px;animation-duration:9.6s;animation-delay:-7.2s;width:2px;height:2px}
.brasas i:nth-child(13){left:44.4%;--dx:-38px;animation-duration:7.4s;animation-delay:-4.1s}
.brasas i:nth-child(14){left:47.8%;--dx:  6px;animation-duration:5.7s;animation-delay:-0.5s;width:4px;height:4px}

/* La foto se aleja al bajar. No es un efecto: es lo que despega el titular del
   fondo. Lo lleva el navegador, sin una línea de JavaScript. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .portico-foto{
      animation:alejarse linear both;
      animation-timeline:scroll(root block);
      animation-range:0 90vh;
    }
    @keyframes alejarse{
      from{transform:scale(1.06) translateY(0)}
      to  {transform:scale(1.14) translateY(3.5vh)}
    }
  }
}

/* ── El desfile ──────────────────────────────────────────────────────────────
   El servicio, minuto a minuto. Va en horizontal porque ES una línea de
   tiempo: al bajar con el ratón, la sección se queda quieta y lo que avanza es
   la tarde.

   En el móvil esto no se hace —secuestrar el desplazamiento con el dedo es una
   grosería— y por eso vive aquí y no en la hoja común. */
.desfile-fijo{display:flex;align-items:center;padding:4.5rem 0;overflow:hidden}
.desfile-tira{padding-inline:max(1.35rem,calc((100vw - var(--ancho)) / 2))}
.desfile-abre{flex:0 0 min(23rem,40vw);align-self:center;padding-right:1.5rem}
.hito{flex:0 0 19.5rem;min-height:18.5rem}
.hito--fin{flex-basis:21rem}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* La sección se hace alta y lo que se ve se pega arriba. `contain` es
       justo el tramo en el que la sección tapa la ventana entera, o sea lo que
       dura el pegado.

       Sin `overflow` en la sección: en un antepasado rompe el `sticky` de
       dentro —el pegado se hace contra ese antepasado, que no se mueve— y la
       sección se queda en blanco. El recorte lo hace la tira. */
    .desfile{height:340vh;position:relative;view-timeline:--tarde block}
    .desfile-fijo{
      position:sticky;top:0;height:100vh;overflow:hidden;
      /* La barra de arriba se queda encima de lo pegado y le come el aire: si
         no se le devuelve aquí, el desfile se ve descentrado. */
      padding:5rem 0 0;
    }
    .desfile-tira{
      animation:desfilar linear both;
      animation-timeline:--tarde;
      animation-range:contain 0% contain 100%;
      will-change:transform;
    }
    @keyframes desfilar{
      from{transform:translate3d(0,0,0)}
      to  {transform:translate3d(calc(-100% + 92vw),0,0)}
    }
  }
}

/* ── Que aparezca al llegar ──────────────────────────────────────────────────
   Sin una sola línea de JavaScript: la línea de tiempo de la vista la lleva el
   navegador. Donde no exista, la página se ve igual — solo que ya puesta. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .banda .env > *, .acto > *{
      animation:asomar linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 22%;
    }
    @keyframes asomar{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:none}
    }
  }
}