/* ============================================================================
   27menu — landing comercial
   Identidad NUEVA, independiente del motor de la carta.

   COLOR: una sola familia cromática, derivada del logotipo. Los neutros son
   negros CÁLIDOS (R>G>B), no el gris azulado de cualquier plantilla oscura:
   con un suelo frío el naranja de la marca no tiene dónde apoyarse y se lee
   como una pegatina traída de otra empresa.
   El naranja NO rellena botones. Un botón naranja grande es "naranja-comida",
   la categoría que el estudio de mercado da por quemada. El naranja se reserva
   para acontecimientos pequeños: el sello, un filo, un check, el foco.
   Lo que rellena los botones es un VALOR, no otro color: hueso #F4EDE1, que es
   exactamente el crema del "27" del logotipo. Marca y acción comparten valor.

   Tema: OSCURO Y ÚNICO, a propósito. No hay modo claro. La página es un plano
   cinematográfico, y una versión clara sería otra marca, no la misma en otro
   tono. Por eso no se declara `prefers-color-scheme`.

   Forma: radio PEQUEÑO y sistemático, no cero y no píldora. El radio 0 dejaba
   la página leyéndose como una pila de rectángulos con esquina de cuchillo;
   una píldora de 999 px sería el cliché contrario. En medio hay un radio de 12
   px en las piezas y 8 en los controles, que es el canto de un objeto fabricado
   y no el de una burbuja. Sigue siendo cierto que lo que hace barato a un botón
   es no tener material, pero la esquina viva sí endurecía el conjunto.
   ============================================================================ */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-vf-latin.woff2") format("woff2");
}

:root {
  /* Superficies. Negro cálido: R > G > B en las cinco. */
  --bg: #17110b;         /* el suelo sube: negro absoluto no es oscuro, es vacío */
  --bg-2: #221a13;
  --bg-3: #2d2319;
  --linea: #453629;      /* recalculado sobre el fondo nuevo */
  --linea-viva: #5b4837;

  /* Tinta crema, la del "27" del logotipo. */
  --ink: #f4ede1;   /* 16,8:1 */
  --ink-2: #b4a99b; /*  8,5:1 */
  --ink-3: #948779; /*  5,6:1. El gris anterior daba 4,0:1 y no pasaba AA. */

  /* La marca. Único croma de la página, siempre en dosis pequeña. */
  --marca: #d9500f;      /* el logotipo, intacto */
  --brasa: #e8621f;      /* filos, sellos, rellenos pequeños */
  --brasa-viva: #ff7a3d; /* el naranja CUANDO ES TEXTO (7,6:1) */
  --brasa-honda: #b23f0a;
  --brasa-tierra: #95330f;
  --brasa-ink: #1a0a02;
  --brasa-velo: rgba(232, 98, 31, 0.12);
  --brasa-halo: rgba(217, 80, 15, 0.34);

  /* Superficie de acción. Sustituye al acento en los botones. */
  --hueso: #f4ede1;
  --hueso-viva: #fffbf2;  /* el hover ACLARA */
  --hueso-honda: #e2d7c6; /* pulsado */
  --hueso-ink: #17110d;   /* 16,1:1 sobre hueso */

  /* Luz. En tema oscuro la jerarquía la construye la luz, no la línea. */
  --filo: rgba(255, 240, 225, 0.055);
  --filo-calido: rgba(255, 190, 140, 0.2);

  --fuente: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica */
  --t-hero: clamp(2.7rem, 7.6vw, 6.4rem);
  --t-cifra: clamp(4.5rem, 15vw, 12rem);
  --t-h2: clamp(2rem, 4.4vw, 3.3rem);
  --t-h3: clamp(1.22rem, 1.8vw, 1.55rem);
  --t-cuerpo: clamp(1rem, 1.1vw, 1.1rem);
  --t-menor: 0.9375rem;

  /* Ritmo */
  --borde: clamp(1.25rem, 5vw, 5rem);
  --seccion: clamp(4.5rem, 8.5vw, 8.5rem);
  --seccion-larga: clamp(6rem, 12vw, 11rem);
  --ancho: 1280px;
  --nav-h: 68px;

  /* Forma. Tres escalones y ninguno más: pieza, control y detalle. */
  --r-pieza: 12px;
  --r-control: 8px;
  --r-detalle: 5px;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  /* Progresos de la escena. Valores por defecto para que la página tenga un
     estado válido aunque el JS no llegue a ejecutarse nunca. */
  --sala: 0;
  --copy: 0;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

/* Luz ambiente. Dos focos cálidos muy abiertos y muy suaves, uno arriba y otro
   abajo a la derecha, que impiden que el fondo se lea como una superficie
   plana. Va en un pseudoelemento FIJO: no entra en el flujo, no recibe clics y
   al no moverse con el scroll el navegador no lo repinta. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130% 72% at 50% -12%, rgba(232, 98, 31, 0.13), transparent 62%),
    radial-gradient(90% 60% at 108% 62%, rgba(217, 80, 15, 0.075), transparent 70%),
    radial-gradient(70% 50% at -8% 88%, rgba(255, 150, 90, 0.05), transparent 72%);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  font-variation-settings: "wght" 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
/* El interlineado y el tracking NO pueden ser globales: 1,04 en español hace
   que las tildes de la segunda línea rocen los descendentes de la primera, y
   un tracking de display empasta a 21 px. Cada escalón lleva el suyo. */
h1, h2, h3 { margin: 0; font-variation-settings: "wght" 700; }
h1 { line-height: 1.02; letter-spacing: -0.042em; }
h2 { line-height: 1.08; letter-spacing: -0.032em; }
h3 { line-height: 1.2; letter-spacing: -0.018em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

::selection { background: var(--brasa); color: var(--brasa-ink); }

:focus-visible {
  outline: 2px solid var(--brasa-viva);
  outline-offset: 3px;
}
/* Sobre superficie hueso el naranja no destaca lo suficiente: el foco se
   invierte para no perderse justo en el botón más importante. */
.btn--solido:focus-visible { outline-color: var(--brasa-honda); }

/* Se mueve con transform, no con `top`: animar una propiedad de maquetación
   obliga a recalcular la caja en cada fotograma, y este es el primer elemento
   que toca alguien que navega con el teclado. */
.salto {
  position: fixed;
  border-radius: var(--r-control);
  top: 12px;
  left: var(--borde);
  z-index: 300;
  background: var(--hueso);
  color: var(--hueso-ink);
  padding: 12px 18px;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--curva);
}
.salto:focus { transform: none; }

/* ---------------------------------------------------------------- botones -- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.92em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font: inherit;
  font-size: var(--t-menor);
  font-variation-settings: "wght" 620;
  letter-spacing: 0.004em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--curva), border-color 0.18s var(--curva),
              color 0.18s var(--curva), box-shadow 0.18s var(--curva),
              transform 0.1s var(--curva);
}

/* Acción principal: relleno hueso. Ni naranja (sería "naranja-comida") ni
   verde (se confundía con el propio WhatsApp). El hover ACLARA: el botón
   anterior se oscurecía al acercarte, o sea que se apagaba al ir a pulsarlo. */
.btn--solido {
  background: var(--hueso);
  color: var(--hueso-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 10px 26px -14px rgba(0, 0, 0, 0.9);
}
.btn--solido:hover {
  background: var(--hueso-viva);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 16px 34px -16px rgba(0, 0, 0, 0.95);
}
.btn--solido:active { background: var(--hueso-honda); }

/* Acción secundaria: superficie mínima para que parezca un botón sobre un
   fotograma oscuro. Al señalarla NO adopta el color de la principal, que era
   una inversión de jerarquía. */
.btn--linea {
  background: rgba(244, 237, 225, 0.045);
  color: var(--ink);
  border-color: var(--linea-viva);
  box-shadow: inset 0 1px 0 var(--filo);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--linea:hover {
  background: rgba(244, 237, 225, 0.09);
  border-color: rgba(244, 237, 225, 0.38);
}

/* Física de pulsación: se hunde de verdad y pierde su sombra de contacto. */
.btn:active { transform: translateY(1px) scale(0.994); }
.btn--solido:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 rgba(0, 0, 0, 0);
}

.btn--grande { padding: 1.1em 2em; font-size: 1rem; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.acciones--centro { justify-content: center; }

/* -------------------------------------------------------------- navegación -- */

/* La barra llevaba `padding: 0 var(--borde)` sin ancho máximo mientras TODAS
   las secciones llevan max-width + margen automático: a 1440 px el logotipo
   arrancaba en x=72 y el titular en x=152. Ochenta píxeles de desalineación
   que no se nombran pero se ven. Ahora comparten eje. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  /* Sobre el plano del encabezado no debe haber losa: --barra sube de 0 a 1
     con el scroll y la barra solo se vuelve material cuando ya no hay
     fotografía debajo. */
  background: color-mix(in srgb, var(--bg) calc(var(--barra, 1) * 88%), transparent);
  backdrop-filter: blur(calc(var(--barra, 1) * 16px));
  -webkit-backdrop-filter: blur(calc(var(--barra, 1) * 16px));
  box-shadow: 0 1px 0 rgba(58, 46, 39, calc(var(--barra, 1)));
  transition: background-color 0.3s linear;
}
/* Mismo ancho máximo Y mismo margen interior que las secciones: solo con el
   ancho no basta, porque el contenido de las secciones va metido otro --borde
   dentro de su caja, y la barra se quedaba a 72 px por fuera. */
.nav__interior {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  height: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--borde);
}

/* La marca es el símbolo de Iván (imagen) más la palabra en texto VIVO. El
   wordmark venía de un PNG con el fondo recortado y a 26 px llegaba borroso;
   como texto sale nítido a cualquier tamaño, hereda la tipografía de la página
   y no pesa ni un byte extra. El símbolo se queda tal cual, sin retocar. */
.nav__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}
.nav__marca img { width: 30px; height: 30px; }
.nav__palabra {
  font-size: 1.3rem;
  font-variation-settings: "wght" 600;
  letter-spacing: -0.045em;
}

.nav__enlaces { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__enlaces a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-menor);
  transition: color 0.2s var(--curva);
}
.nav__enlaces a:hover { color: var(--ink); }

/* =========================================================================
   1. ESCENA
   Un lienzo fijo de una pantalla de alto dentro de un tramo de scroll largo.
   El JS escribe seis números (--sala, --qr-in, --qr-out, --mov, --carta,
   --copy) y aquí solo se consumen en transforms y opacidades, que el
   navegador resuelve en el compositor sin recalcular maquetación.

   Sin la clase `.js` en <html> nada de esto se activa: la escena se queda
   como un bloque normal con el móvil y el texto, y la página sigue leyéndose.
   ========================================================================= */

/* z-index en la escena para que cree su propio contexto de apilado: sin él,
   lo que hay dentro compite con la sección que le pasa por encima. */
.escena { position: relative; z-index: 0; }
.js .escena { height: 330vh; }

.escena__fijo {
  display: grid;
  place-items: center;
  min-height: min(100dvh, 900px);
  padding: var(--nav-h) var(--borde) 0;
}
.js .escena__fijo {
  position: sticky;
  top: 0;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.capa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}
/* Sin JS la película sobra: no hay recorrido que la avance. Queda el póster
   fuera y se ve el móvil con el texto, que es la información que importa. */
html:not(.js) .capa--pelicula { display: none; }

.capa--pelicula { overflow: hidden; }

/* El póster va en el PROPIO lienzo, no en la capa que lo contiene. Puesto en la
   capa se quedaba a plena opacidad mientras el lienzo se fundía, y se veían las
   dos imágenes superpuestas a media escena.
   Se ve antes de que llegue ningún fotograma; en cuanto llega el primero, el
   lienzo se dibuja opaco (su contexto va sin canal alfa) y lo tapa.
   El lienzo es un elemento reemplazado, así que `object-fit` le vale igual que
   a una imagen: se dibuja 1:1 en su tamaño natural y el CSS lo recorta. */
.pelicula {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #120d08 url("../assets/hero-escaneo-poster.webp") center / cover no-repeat;
  transform: scale(calc(1.04 + var(--sala) * 0.42));
  opacity: calc(1 - var(--sala) * 0.92);
}
/* Oscurece los bordes y funde el pie del plano con el fondo de la página, para
   que el vídeo no termine en un corte recto contra la sección siguiente. */
.capa__velo {
  position: absolute;
  inset: 0;
  background:
    /* Cortina lateral: el titular y la entradilla viven a la izquierda y el
       plano tiene ahí zonas claras (un abrigo beige, la luz de la entrada).
       Sin esto el texto pierde contraste en algunos fotogramas y no en otros,
       que es peor que perderlo siempre. */
    linear-gradient(to right, rgba(23, 17, 11, 0.72) 0%, rgba(23, 17, 11, 0.4) 44%, rgba(23, 17, 11, 0.04) 74%),
    radial-gradient(128% 98% at 50% 34%, transparent 0%, rgba(23, 17, 11, 0.3) 62%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(23, 17, 11, 0.46) 0%, rgba(23, 17, 11, 0.16) 40%, var(--bg) 100%);
}

.escena__copy {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--borde);
  opacity: calc(1 - var(--copy));
  transform: translateY(calc(var(--copy) * -7vh));
}
.js .escena__copy { position: absolute; left: 0; right: 0; }
.escena__copy[data-oculto] { pointer-events: none; }

/* Con el velo más suave y el titular volviendo sobre los últimos fotogramas
   (que son los más claros del plano), el texto no puede depender del fondo:
   la sombra le da un suelo de contraste propio en cualquier fotograma. */
.titular {
  font-size: var(--t-hero);
  font-variation-settings: "wght" 800;
  letter-spacing: -0.045em;
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(10, 6, 3, 0.72), 0 1px 4px rgba(10, 6, 3, 0.45);
}
.entradilla { text-shadow: 0 1px 24px rgba(10, 6, 3, 0.7); }
/* En el titular NO se usa cursiva ni cambio de color.
   La cursiva, porque el único @font-face declarado es de estilo normal: pedir
   `font-style: italic` no cargaba una cara cursiva, el navegador cizallaba la
   romana y sintetizaba una oblicua falsa, a 6,4rem y en la primera pantalla.
   La cara cursiva real costaría unos 22 KB, que en una página cuyo argumento
   es el peso no se sostiene.
   El color, porque pintar las últimas palabras de la frase con el acento es un
   recurso de plantilla, y aquí se descartó a propósito. */

.entradilla {
  margin-top: 1.4rem;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink-2);
  line-height: 1.45;
}

.escena__copy .acciones { margin-top: 2.2rem; }

/* ------------------------------------------------------------ piezas base -- */

.titulo-seccion {
  font-size: var(--t-h2);
  font-variation-settings: "wght" 800;
  max-width: 18ch;
}
.titulo-seccion--centrado { max-width: none; text-align: center; }

.parrafo {
  margin-top: 1.3rem;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
}
.parrafo--ancho { max-width: 60ch; }

/* ========================================================== 3. VENTAJAS == */
/* Sin tarjetas y sin imágenes: una lista de argumentos separada por filetes.
   El primero es el diferencial y por eso va más grande que el resto. */

/* SUBE POR ENCIMA DEL PLANO.
   El margen negativo la mete dentro del último tramo de la escena, que todavía
   está fija: al bajar, el vídeo se queda quieto apagándose y la sección entra
   desde abajo. El movimiento relativo es el que se ve.
   El borde superior es un degradado de transparente al fondo, así que el plano
   no se corta de golpe: se va disolviendo bajo el texto. Al ser un degradado de
   una sola parada final, todo lo que queda por debajo es fondo opaco. */
.ventajas {
  position: relative;
  z-index: 2;
  padding: calc(var(--seccion) + 22vh) var(--borde) var(--seccion);
  background: linear-gradient(180deg, rgba(23, 17, 11, 0) 0, var(--bg) 24vh);
}
.js .ventajas { margin-top: -100vh; }
/* La sección va a ancho completo porque el degradado del borde superior tiene
   que cruzar toda la pantalla. Por eso el contenido se centra por dentro, y su
   ancho máximo descuenta los dos márgenes: así cae en el mismo eje que el resto
   de secciones, que sí llevan la caja limitada y el relleno por dentro. */
.ventajas > * {
  max-width: calc(var(--ancho) - 2 * var(--borde));
  margin-inline: auto;
}
.ventaja-lista {
  display: grid;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
.ventaja {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: baseline;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--linea);
}
.ventaja__titulo {
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-variation-settings: "wght" 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}
.ventaja__texto {
  color: var(--ink-2);
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  max-width: 46ch;
}
.ventaja:first-child .ventaja__titulo { font-size: clamp(1.7rem, 3.6vw, 2.8rem); }
/* Un filo cálido al principio de la lista: el único sitio de la sección donde
   aparece la marca, y marca por dónde se empieza a leer. */
.ventaja-lista { border-top-color: var(--brasa); }

/* ========================================================== 5. LA PRUEBA == */

.prueba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--seccion) var(--borde);
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
.prueba__texto .btn { margin-top: 2rem; }
.prueba__qr { text-align: center; }
.qr {
  width: clamp(170px, 23vw, 228px);
  height: clamp(170px, 23vw, 228px);
  /* La norma pide 4 módulos de zona de silencio alrededor. Con 14 px sobre un
     interior de ~188 no llegaba a 2, y un QR que falla al escanear se lleva
     por delante justo la conversión que esta sección existe para producir. */
  padding: 26px;
  border-radius: var(--r-pieza);
  background: var(--hueso);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.qr svg { width: 100%; height: 100%; display: block; }
.qr__pie {
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* =========================================================== 6. MONTAJE === */

.montaje {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--seccion) var(--borde);
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
/* Eran tres columnas de texto con un filete encima y un número diminuto: mucho
   aire vacío y ningún cuerpo. Ahora cada paso es una pieza con superficie
   propia, canto de luz y un numeral grande al fondo, hueco, que da escala sin
   competir con el texto. Se conserva el escalonado, que es lo que impide que la
   fila se lea como tres tarjetas iguales, y NO se juntan en rejilla continua
   porque esa composición ya la usa la tabla de precios. */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: paso;
}
.paso {
  position: relative;
  counter-increment: paso;
  border-radius: var(--r-pieza);
  overflow: hidden;
  padding: clamp(1.7rem, 2.8vw, 2.4rem);
  padding-top: clamp(3.2rem, 5vw, 4.2rem);
  background: var(--bg-2);
  box-shadow: inset 0 1px 0 var(--filo);
}
.paso::after {
  /* Filo cálido superior, más corto que la pieza: marca por dónde empieza. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(38px, 22%, 72px);
  height: 2px;
  background: var(--brasa);
  border-top-left-radius: var(--r-pieza);
}
.paso::before {
  content: counter(paso);
  position: absolute;
  top: -0.24em;
  right: 0.04em;
  font-size: clamp(5rem, 9vw, 8.5rem);
  font-variation-settings: "wght" 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--brasa);
  opacity: 0.3;
  pointer-events: none;
}
.paso:nth-child(2) { margin-top: clamp(0rem, 2.4vw, 2.4rem); }
.paso:nth-child(3) { margin-top: clamp(0rem, 4.8vw, 4.8rem); }
.paso__titulo {
  position: relative;
  font-size: var(--t-h3);
  font-variation-settings: "wght" 700;
  text-wrap: balance;
}
.paso__texto {
  position: relative;
  margin-top: 0.8rem;
  color: var(--ink-2);
  font-size: 0.98rem;
}

/* ============================================================ 7. PRECIOS === */

.precios {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--seccion) var(--borde);
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
.precios__intro { margin-top: 0.9rem; text-align: center; color: var(--ink-2); }

.planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--linea);
  border: 1px solid var(--linea);
}
/* `.plan` se pintaba con el MISMO color que el <body>, separado por filetes a
   1,28:1: no eran tarjetas, eran tres columnas de texto flotando, justo en la
   pantalla donde se decide la venta. Ahora son superficies con escalón de
   elevación y canto de luz. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  box-shadow: inset 0 1px 0 var(--filo);
}
/* La rejilla de planes va unida por juntas de 1 px, así que el radio se aplica
   SOLO a las cuatro esquinas exteriores del bloque. Redondear cada tarjeta por
   dentro dejaría cuatro mordiscos en cada junta. */
.planes { border-radius: var(--r-pieza); overflow: hidden; }

/* El destacado iba señalado con `outline`, que es literalmente lo que dibuja
   el navegador alrededor de un elemento enfocado con el teclado: se leía como
   "aquí ha pasado algo raro", no como "este es el bueno". Ahora sobresale de
   la fila, tiene sombra propia y un filo de 3 px en el naranja de la marca. */
.plan--destacado {
  background: var(--bg-3);
  z-index: 1;
  box-shadow:
    inset 0 3px 0 var(--brasa),
    inset 0 4px 0 var(--filo-calido),
    0 24px 60px -28px rgba(0, 0, 0, 0.95);
}
@media (min-width: 901px) {
  .plan--destacado { margin: -14px 0; padding-top: calc(clamp(1.6rem, 2.6vw, 2.4rem) + 14px); }
}
/* Pasa de micro-versalitas trackeadas (el cliché de plantilla por excelencia,
   ilegible a un metro) a una pestaña maciza que se ve desde lejos. */
.plan__sello {
  /* `align-self` y no solo `inline-block`: dentro de una columna flex los hijos
     se estiran por defecto y el sello salía como una banda a todo el ancho. */
  align-self: flex-start;
  border-radius: var(--r-detalle);
  margin-bottom: 1.1rem;
  padding: 0.38em 0.7em;
  background: var(--brasa-tierra);
  color: var(--hueso);
  font-size: 0.78rem;
  font-variation-settings: "wght" 700;
  letter-spacing: 0.01em;
}
.plan__nombre { font-size: var(--t-h3); font-variation-settings: "wght" 700; }
/* Donde antes iba la cifra. Los planes ya no publican importe, así que este
   renglón sostiene el ritmo vertical de las tres tarjetas sin gritar como
   gritaba un número de 3 rem: la tarjeta ya tiene su foco en el nombre y en
   el botón. Lo usan también el módulo de la mesa, por coherencia. */
.plan__consulta {
  margin-top: 1.05rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  font-variation-settings: "wght" 620;
}
.plan__lista { display: grid; gap: 0.62rem; margin: 1.8rem 0; }
.plan__lista li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-2);
  font-size: 0.93rem;
}
/* Era un guion de 9x1 px. Un guion delante de una prestación se lee como "no
   incluida": la lista de lo que SÍ te llevas iba marcada con el signo de
   resta. Ahora es un check, dibujado con dos bordes, sin bytes nuevos. */
.plan__lista li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.44em;
  width: 5px;
  height: 9px;
  border-right: 1.8px solid var(--brasa);
  border-bottom: 1.8px solid var(--brasa);
  transform: rotate(42deg);
}
/* `margin-top:auto` empuja el botón al fondo de la columna para que los tres
   queden a la misma altura pese a tener distinto número de líneas. Va en la
   misma regla que el ancho: si se parte en dos, `.plan .btn` gana por
   especificidad y se lleva por delante el auto. */
.plan__cta { margin-top: auto; width: 100%; }

/* El ejemplo va DENTRO de la tarjeta, pegado al botón. El sitio donde se decide
   es este, y lo que cierra la venta es verlo, no leerlo. Va como enlace y no
   como segundo botón para no pelearle el sitio al CTA. Es hermano de
   `.plan__cta`, no hijo: el `margin-top:auto` del botón empuja a los dos al
   fondo de la columna, y así no hay que tocar esa regla. */
.plan__demo {
  align-self: center;
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
  border-bottom: 1px solid var(--linea-viva);
  padding-bottom: 2px;
  transition: color 0.18s var(--curva), border-color 0.18s var(--curva);
}
.plan__demo:hover { color: var(--brasa-viva); border-color: var(--brasa); }

.plan__para { margin-top: 0.35rem; color: var(--ink-3); font-size: 0.9rem; }

/* --------------------------------------------------- el módulo de la mesa -- */
/* NO es un cuarto plan: se suma a cualquiera de los tres, así que va fuera de
   la rejilla y en horizontal. Su filo encendido es lo ÚNICO naranja de toda la
   sección aparte del sello: aquí el naranja significa exactamente una cosa,
   "esto es opcional y se cobra aparte". */
.modulo {
  margin-top: clamp(2.2rem, 3.5vw, 3rem);
  border: 1px solid var(--linea);
  border-top: 2px solid transparent;
  border-radius: var(--r-pieza);
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(90deg, var(--linea), var(--brasa), var(--linea)) border-box;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: grid;
  gap: 1.6rem 2.8rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.modulo__eti {
  color: var(--ink-3);
  font-size: 0.78rem;
  font-variation-settings: "wght" 620;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.modulo__nombre { margin-top: 0.7rem; font-size: var(--t-h3); font-variation-settings: "wght" 720; }
.modulo__texto { margin-top: 0.9rem; color: var(--ink-2); font-size: 0.93rem; max-width: 42ch; }
.modulo__pie {
  grid-column: 1 / -1;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
}
.modulo__pie p { flex: 1 1 24rem; color: var(--ink-3); font-size: 0.875rem; }
/* La lista del módulo reusa `.plan__lista`, que trae `margin: 1.8rem 0` pensado
   para las fichas. Aquí el espaciado lo pone el `gap` de la rejilla, así que ese
   margen se sumaba: descuadraba la columna en ordenador y doblaba el hueco en
   móvil. */
.modulo .plan__lista { margin: 0; }

/* ------------------------------------------------- lo que NO va a encontrar -- */
/* Lo único de esta página que ningún competidor puede copiar sin cambiar su
   producto: appQR limita las fotos, MiBarOnline da un cambio al mes,
   Nuestracarta mete anuncios de Google en la carta del cliente. */
.franja {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-pieza);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: linear-gradient(180deg, var(--brasa-velo), transparent 60%), var(--bg-2);
}
.franja__titulo { font-size: var(--t-h3); font-variation-settings: "wght" 700; }
.nadas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 2.6rem; margin-top: 1.3rem; }
.nadas li { display: flex; gap: 0.85rem; align-items: flex-start; }
/* Marca de negación, no un número: la lista no es una secuencia, es un
   inventario de ausencias. Numerarla (01/02/03) diría algo que no es cierto. */
.nadas__no {
  flex: none;
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.28rem;
  border: 1.5px solid var(--brasa);
  border-radius: 50%;
}
.nadas__no::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-top: 1.5px solid var(--brasa);
  transform: rotate(45deg);
}
.nadas__t { font-variation-settings: "wght" 600; font-size: 0.93rem; }
.nadas__d { margin-top: 0.15rem; color: var(--ink-3); font-size: 0.875rem; }

.notas { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.4rem; }
.nota { border-left: 2px solid var(--linea-viva); padding-left: 1.1rem; }
.nota__titulo { font-size: 0.93rem; font-variation-settings: "wght" 680; }
.nota p { margin-top: 0.4rem; color: var(--ink-3); font-size: 0.875rem; }
.precios__pie { margin-top: 2.4rem; color: var(--ink-3); font-size: 0.875rem; }

/* ----------------------------------------------------------- volver arriba -- */
/* Por debajo de la barra (100) y muy por debajo del enlace de accesibilidad
   (300): nunca debe taparlos. Arranca oculto Y sin recibir clics — sin
   `pointer-events: none` seguiría interceptando pulsaciones en la esquina
   aunque no se vea. */
.arriba {
  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linea-viva);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s var(--curva), transform 0.25s var(--curva),
              color 0.18s var(--curva), border-color 0.18s var(--curva);
}
.arriba.se-ve { opacity: 1; transform: none; pointer-events: auto; }
.arriba:hover { color: var(--ink); border-color: var(--ink-3); }
.arriba svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------- el número, aparte -- */
/* `<dialog>` nativo, por el mismo motivo que las preguntas son `<details>`: el
   navegador ya trae el foco atrapado, el Escape y la capa superior. Cero
   librería y cero dependencia nueva. */
.modal {
  border: 1px solid var(--linea-viva);
  border-radius: var(--r-pieza);
  background: var(--bg-2);
  color: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  max-width: min(92vw, 26rem);
  text-align: center;
  box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.95);
}
.modal::backdrop { background: rgba(12, 7, 3, 0.74); }
.modal__eti {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-variation-settings: "wght" 620;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
/* Sigue siendo un `tel:`: desde un portátil con el móvil emparejado, o desde
   una tableta, se puede pulsar igualmente. */
.modal__numero {
  display: block;
  margin-top: 0.7rem;
  color: var(--ink);
  /* Con el prefijo son 16 caracteres. El máximo baja de 2,3 a 2,1 rem para que
     quepan en una línea dentro del diálogo sin recurrir a `nowrap`, que ahí
     provocaría desbordamiento en vez de un salto de línea feo. */
  font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  font-variation-settings: "wght" 760;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.modal__numero:hover { color: var(--brasa-viva); }
.modal__cerrar { margin-top: 1.5rem; width: 100%; }

/* ========================================================= 9. PREGUNTAS === */

.preguntas {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--seccion) var(--borde);
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
.faq { margin-top: clamp(2rem, 4vw, 3rem); max-width: 74ch; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-variation-settings: "wght" 600;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transition: transform 0.25s var(--curva), border-color 0.25s var(--curva);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--curva);
}
.faq__item[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--brasa-viva);
}
.faq__item p { padding: 0 0 1.4rem; max-width: 62ch; color: var(--ink-2); }

/* ================================================= 9b. QUIÉN ESTÁ DETRÁS == */
/* Todos los tokens existen ya: los usa `.prueba` unas lineas mas abajo. */
.quien {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--seccion) var(--borde);
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
.quien__cuerpo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  margin-top: 2rem;
}
/* La foto todavia no esta (WEB-08 queda a medias hasta que Ivan la de). El estilo entra YA para
   que añadirla sea una linea de HTML y no una tarea de maquetacion. */
.quien__foto {
  width: clamp(96px, 12vw, 140px);
  height: clamp(96px, 12vw, 140px);
  object-fit: cover;
  border-radius: var(--r-pieza);
}
.quien__nombre {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-variation-settings: "wght" 700;
}
@media (max-width: 719px) {
  .quien__cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ 10. CIERRE == */

.cierre {
  max-width: 62ch;
  margin: 0 auto;
  padding: var(--seccion) var(--borde);
  text-align: center;
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
.cierre__titular {
  font-size: var(--t-h2);
  font-variation-settings: "wght" 800;
}
.cierre__texto { margin-top: 1.2rem; color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.15rem); }
.cierre .acciones { margin-top: 2.2rem; }

/* ================================================================== PIE === */

.pie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2.6rem var(--borde) 3.4rem;
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}
.pie__marca { display: flex; flex-direction: column; align-items: flex-start; }
.pie__marca img { width: 30px; height: 30px; }
.pie__marca p {
  margin-top: 0.8rem;
  color: var(--ink-3);
  font-size: 0.82rem;
}
/* WEB-12: contacto visible en el pie. Un email de contacto que solo esta en el aviso legal
   cumple la letra de la LSSI y falla su proposito — nadie entra al aviso legal a escribirte. */
.pie__contacto { margin-top: 0.4rem; }
.pie__contacto a {
  color: var(--ink-2);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.2s var(--curva);
}
.pie__contacto a:hover { color: var(--ink); }
.pie__enlaces { display: flex; gap: 1.5rem; }
.pie__enlaces a {
  color: var(--ink-3);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.2s var(--curva);
}
.pie__enlaces a:hover { color: var(--ink); }

/* ========================================================= páginas legales = */

/* El texto legal se alineaba al centro de la ventana y quedaba descolgado del
   eje de la barra. Ahora la caja comparte el ancho máximo y el relleno de las
   secciones, y dentro se limita la medida de lectura. */
.legal {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) var(--borde) var(--seccion);
}
.legal > * { max-width: 68ch; }
.legal__titulo { font-size: var(--t-h2); font-variation-settings: "wght" 800; }
.legal section { margin-top: 2.6rem; }
.legal h2 {
  font-size: var(--t-h3);
  font-variation-settings: "wght" 700;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linea);
}
.legal p { margin-top: 0.9rem; color: var(--ink-2); }
.legal b { color: var(--ink); font-variation-settings: "wght" 600; }
.legal a { color: var(--brasa-viva); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ====================================================== revelado al entrar = */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.js [data-revelar][data-visible] { opacity: 1; transform: none; }
/* Si el motor no confirmó su arranque en 2,5 s, el contenido se muestra igual.
   Sin esto, un fallo al cargar el JS dejaba la página en blanco de la primera
   pantalla para abajo. */
.sin-motor [data-revelar] { opacity: 1 !important; transform: none !important; }

/* ============================================================== responsive = */

@media (max-width: 900px) {
  .prueba, .ventaja { grid-template-columns: minmax(0, 1fr); }
  .prueba { justify-items: start; }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .paso:nth-child(2), .paso:nth-child(3) { margin-top: 0; }
  .planes { grid-template-columns: minmax(0, 1fr); }
  /* Apiladas, el destacado caería el ÚLTIMO: mil píxeles de scroll por delante
     justo del plan que recomendamos. En columna no hay escalera que leer de
     izquierda a derecha, así que se sube al principio. */
  .plan--destacado { order: -1; }
  .modulo, .notas, .nadas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  /* No se esconde la navegación entera: sin ella, para llegar a Precios hay
     que cruzar tres pantallas y media de escena. Se queda el único enlace con
     valor comercial. */
  .nav__enlaces a:not([href="#precios"]) { display: none; }
  .nav__enlaces { gap: 0; }
  .solo-ancho { display: none; }
  .dato__apoyos { gap: 0; }
  .movil { width: min(62vw, 260px); }
  .escena__copy .acciones .btn { flex: 1 1 auto; }

  /* La barra se salía. En un móvil de 360 px la marca, el enlace y el botón
     sumaban más que el ancho útil, y como `body` lleva `overflow-x: clip` no
     aparece barra de scroll: el botón se cortaba por la derecha sin avisar.
     Se estrechan el hueco entre piezas y el relleno del botón, que es lo que
     más ocupa, y así entra hasta en 320 px. */
  .nav__interior { gap: 0.75rem; padding: 0 1rem; }
  .nav__cta { padding-left: 1em; padding-right: 1em; }
  .arriba { width: 42px; height: 42px; }
}

/* ========================================================= menos movimiento = */
/* Con `prefers-reduced-motion` la escena deja de secuestrar el scroll: se
   convierte en un bloque normal con el móvil ya montado y el texto encima.
   No es una degradación, es la misma información sin recorrido. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Aparece y desaparece sin fundido, pero sigue apareciendo: es una ayuda de
     navegación, no un adorno. */
  .arriba { transition: none; }

  .js .escena { height: auto; }
  .js .escena__fijo {
    position: static;
    height: auto;
    min-height: min(100dvh, 860px);
    padding: calc(var(--nav-h) + 2rem) var(--borde) var(--seccion);
    overflow: visible;
  }
  .js .escena__copy { position: relative; opacity: 1; transform: none; }
  .capa--pelicula { display: none; }
  .js .ventajas { margin-top: 0; }

  .js [data-revelar] { opacity: 1; transform: none; transition: none; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}