/* ============================================================================
   Lumaram — sistema de estilos
   Mundo visual: Apple x Audi. Fondo claro siempre. Un solo acento.
   Ver DESIGN.md en la raíz del proyecto.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens - */
:root{
  /* Papel. Nunca oscuro: el visitante mira el móvil a pleno sol. */
  --papel:#ffffff;
  --papel-2:#f5f5f7;
  --papel-3:#fafafc;

  /* Filete de 1 px. Es la estructura de la página, no la sombra. */
  --linea:#d2d2d7;
  --linea-suave:#e8e8ed;

  /* Tinta. Negro puro nunca: #1d1d1f es el gris de Apple. */
  --tinta:#1d1d1f;
  --tinta-2:#55555a;
  --tinta-3:#6e6e73;

  /* Un acento. Rojo Audi. Se usa con avaricia. */
  --rojo:#e8112d;
  --rojo-hondo:#b8001f;
  --rojo-lavado:#fdeef0;

  /* Sombra casi invisible: la profundidad la da el filete. */
  --sombra:0 1px 2px rgba(0,0,0,.04);
  --sombra-alta:0 8px 28px rgba(0,0,0,.07);
  --vidrio:rgba(255,255,255,.72);
  /* La barra iba en blanco sobre una página blanca: no se separaba de nada.
     Con el gris de --papel-2 detrás sí, sin romper la regla de fondo claro. */
  --vidrio-tono:rgba(244,244,247,.86);

  /* Tipografía ------------------------------------------------------------
     Titulares: Archivo, grotesca técnica, ensanchada y con tracking cerrado.
     Cuerpo: pila del sistema. En un iPhone es SF Pro, que es lo que usa Apple
     y no cuesta ni un byte en el dispositivo donde más importa.           */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --texto:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --t-nota:.75rem;
  --t-menu:.875rem;
  --t-apoyo:.9375rem;
  --t-cuerpo:1.0625rem;
  --t-guia:clamp(1.0625rem,1.7vw,1.3125rem);
  --t-tarjeta:1.25rem;
  --t-seccion:clamp(1.9rem,4vw,3rem);
  --t-titular:clamp(2.25rem,5.4vw,4rem);
  --t-cifra:clamp(2.4rem,5.2vw,3.5rem);

  --lh:1.53;

  /* Ritmo vertical. El aire es el lujo. */
  --aire:clamp(72px,9vw,128px);
  --canal:clamp(20px,4vw,40px);
  --ancho:1140px;

  --curva:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------------ base - */
*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:400 var(--t-cuerpo)/var(--lh) var(--texto);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:var(--tinta);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{max-width:100%;height:auto}
b,strong{font-weight:600}
em{font-style:normal;color:var(--tinta-2)}

/* Foco propio. La web vende accesibilidad AA: tiene que cumplirla ella. */
:focus-visible{
  outline:2px solid var(--rojo);
  outline-offset:2px;
  border-radius:2px;
}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tinta);color:#fff;padding:12px 20px;border-radius:0 0 4px 0;
  font-size:var(--t-apoyo);font-weight:500;
}
.saltar:focus{left:0;text-decoration:none}

.contenedor{
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 var(--canal);
}

/* ---------------------------------------------------------- tipografía --- */
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"wdth" 110;
  margin:0 0 20px;
}

h1{
  font-size:var(--t-titular);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:700;
  font-variation-settings:"wdth" 112;
}

h2{
  font-size:var(--t-seccion);
  line-height:1.07;
  letter-spacing:-.03em;
  font-weight:700;
  text-wrap:balance;
}

h3{
  font-size:var(--t-tarjeta);
  line-height:1.25;
  letter-spacing:-.018em;
  margin-bottom:10px;
}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.sub{
  color:var(--tinta-2);
  font-size:var(--t-guia);
  line-height:1.45;
  max-width:62ch;
  margin:0 0 36px;
}
.centrado .sub{margin-left:auto;margin-right:auto}
.centrado{text-align:center}

.matiz{
  font-size:var(--t-menu);
  color:var(--tinta-3);
  line-height:1.5;
  margin:18px 0 0;
}

/* Rótulo técnico sobre el titular. El gesto Audi. */
.rotulo{
  display:block;
  font-family:var(--display);
  font-size:var(--t-nota);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rojo-hondo);
  margin:0 0 18px;
}
.rotulo::before{
  content:"";
  display:inline-block;
  width:22px;height:1px;
  background:var(--rojo);
  vertical-align:.32em;
  margin-right:10px;
}
.centrado .rotulo::before{display:none}

/* El degradado de la versión anterior era la firma de IA. Ahora es tinta. */
.degradado{color:var(--tinta)}

/* ------------------------------------------------------------- cabecera -- */
header.barra{
  position:sticky;top:0;z-index:60;
  background:var(--vidrio-tono);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linea);
}
header.barra .contenedor{
  display:flex;align-items:center;gap:10px;
  min-height:72px;
}
.marca{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);
  font-size:1.1875rem;font-weight:700;
  letter-spacing:-.02em;
  color:var(--tinta);
  flex:0 0 auto;
  min-height:44px;
}
.marca:hover{text-decoration:none;opacity:.65}
/* El signo: una ele que sostiene un bloque. Lo que hacemos es la repisa; lo que
   va encima es el negocio del cliente.

   El anterior eran tres barras horizontales decrecientes y, dijera lo que dijera
   su intención, lo que se leía era el icono de menú hamburguesa. Un signo que se
   confunde con un control de interfaz no es un signo. */
.signo{width:26px;height:26px;flex:0 0 auto}
.signo .s-ele{fill:var(--tinta)}
.signo .s-bloque{fill:var(--rojo)}
.signo .s-ele,.signo .s-bloque{transition:fill .2s}

.barra nav{flex:1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:2px}
.barra nav a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 12px;
  font-size:var(--t-menu);
  color:var(--tinta-2);
  transition:color .18s;
}
.barra nav a:hover{color:var(--tinta);text-decoration:none}
.barra nav a[aria-current="page"]{color:var(--tinta);font-weight:600}

@media(max-width:860px){
  header.barra .contenedor{flex-wrap:wrap;padding-top:6px;padding-bottom:2px}
  .barra nav{width:100%;justify-content:flex-start;order:2;
             overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .barra nav::-webkit-scrollbar{display:none}
  .barra nav a{padding:0 11px;white-space:nowrap;min-height:40px}
}

/* --------------------------------------------------------------- botones - */
/* 4 px, relleno sólido, sin degradado, sin sombra de color.
   La píldora con degradado es la firma de IA más reconocible que hay. */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 26px;
  background:var(--tinta);color:#fff;
  border:1px solid var(--tinta);
  border-radius:4px;
  font-family:var(--texto);
  font-size:var(--t-cuerpo);font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s var(--curva);
}
.boton:hover{background:#000;border-color:#000;text-decoration:none;transform:translateY(-1px)}
.boton:active{transform:translateY(0)}

.boton.rojo{background:var(--rojo);border-color:var(--rojo)}
.boton.rojo:hover{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}

.boton.fantasma{background:transparent;color:var(--tinta);border-color:var(--linea)}
.boton.fantasma:hover{background:var(--papel-2);border-color:var(--tinta-3);color:var(--tinta)}

.botonera{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.centrado .botonera{justify-content:center}

/* -------------------------------------------------------------- secciones */
section{padding:var(--aire) 0;position:relative}

/* La transición entre secciones es un filete, no un cambio de color. */
.fondo2{background:var(--papel-2)}
.tinte1,.tinte2,.tinte3,.tinte4,.tinte5,.tintemix{background:var(--papel)}
.tinte1,.tinte4,.tintemix{background:var(--papel-2)}

section + section:not([class*="fondo"]):not([class*="tinte"]){
  border-top:1px solid var(--linea-suave);
}

/* ------------------------------------------------------------------ hero - */
.hero{
  padding:clamp(64px,9vw,112px) 0 clamp(48px,6vw,80px);
  text-align:center;
  position:relative;
}
.hero p{
  font-size:var(--t-guia);
  line-height:1.45;
  color:var(--tinta-2);
  max-width:56ch;
  margin:0 auto;
}
.hero h1{margin-bottom:24px}
/* La botonera es un <p>, así que hereda el max-width y el margin:auto de .hero p:
   su caja queda centrada, pero el flex de dentro empaqueta a la izquierda y los
   botones se ven desplazados respecto al titular. */
.hero .botonera{justify-content:center}

/* Distintivo. Antes verde con degradado; ahora un solo acento y un filete. */
.gratis{
  display:inline-block;
  background:var(--rojo-lavado);
  color:var(--rojo-hondo);
  border:1px solid rgba(232,17,45,.22);
  border-radius:4px;
  padding:7px 14px;
  font-size:var(--t-apoyo);
  font-weight:600;
  letter-spacing:-.005em;
  margin:0 0 26px;
}
.gratis b{font-weight:700}

/* --------------------------------------------------------------- cifras -- */
.cifras{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:0;
  margin:44px 0 0;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.cifra{
  flex:1 1 160px;
  padding:26px 20px;
  text-align:center;
  border-left:1px solid var(--linea-suave);
}
.cifra:first-child{border-left:0}
.cifra strong{
  display:block;
  font-family:var(--display);
  font-size:var(--t-cifra);
  font-weight:700;
  font-variation-settings:"wdth" 112;
  line-height:1;
  letter-spacing:-.045em;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
/* Hijo directo, no descendiente: esta regla es para la ETIQUETA que va bajo la
   cifra. Con el descendiente suelto también cazaba el <span class="digitos">
   que anima.js inyecta dentro del <strong> para el contador accesible, y la
   cifra se veía a 13 px dentro de un hueco de 56. */
.cifra > span{
  display:block;margin-top:12px;
  font-size:var(--t-menu);
  line-height:1.4;
  color:var(--tinta-2);
}
.cifra strong .digitos{font-size:inherit;color:inherit;display:inline}

@media(max-width:640px){
  .cifra{flex:1 1 50%;border-left:0;border-top:1px solid var(--linea-suave);padding:20px 12px}
  .cifra:nth-child(-n+2){border-top:0}
  .cifra:nth-child(even){border-left:1px solid var(--linea-suave)}
}

/* ------------------------------------------------------ tira credenciales */
/* Just Eat, Aloha24, Flipdish, Ambigú. La credencial más fuerte del negocio. */
.credenciales{
  padding:clamp(28px,4vw,44px) 0;
  border-top:1px solid var(--linea-suave);
  border-bottom:1px solid var(--linea-suave);
  background:var(--papel);
}
.credenciales-rotulo{
  display:block;text-align:center;
  font-family:var(--display);
  font-size:var(--t-nota);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
  margin:0 0 22px;
}
.credenciales-lista{
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;
  gap:clamp(24px,5vw,60px);
  margin:0;padding:0;list-style:none;
}
.credenciales-lista li{
  font-family:var(--display);
  font-size:clamp(1.05rem,2.3vw,1.5rem);
  font-weight:700;
  font-variation-settings:"wdth" 106;
  letter-spacing:-.025em;
  color:var(--tinta);
  opacity:.72;
  transition:opacity .2s;
}
.credenciales-lista li:hover{opacity:1}

/* -------------------------------------------------------------- rejillas - */
.rejilla{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}

.tarjeta{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:32px;
  box-shadow:var(--sombra);
  transition:border-color .22s,box-shadow .22s,transform .22s var(--curva);
}
.tarjeta:hover{
  border-color:var(--tinta-3);
  box-shadow:var(--sombra-alta);
  transform:translateY(-2px);
}
.fondo2 .tarjeta,.tinte1 .tarjeta,.tinte4 .tarjeta,.tintemix .tarjeta{background:var(--papel)}
.tarjeta p{color:var(--tinta-2)}
.tarjeta ul{margin:0;padding-left:18px;color:var(--tinta-2);font-size:var(--t-apoyo)}
.tarjeta li{margin-bottom:8px}
.tarjeta li::marker{color:var(--tinta-3)}

/* Las variantes de color de la versión anterior se neutralizan a propósito. */
.tarjeta.c2,.tarjeta.c3,.tarjeta.c4{background:var(--papel)}

/* -------------------------------------------------------------- etiquetas */
.etiqueta{
  display:inline-block;
  font-family:var(--display);
  font-size:var(--t-nota);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-3);
  margin:0 0 14px;
  padding:0;
}
.etiqueta.v,.etiqueta.n,.etiqueta.g{color:var(--tinta-3)}
.etiqueta.rojo{color:var(--rojo-hondo)}

/* ---------------------------------------------------------------- panel -- */
.panel-gratis{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:clamp(30px,5vw,52px);
  text-align:center;
  box-shadow:var(--sombra);
}
.fondo2 .panel-gratis,.tinte5 .panel-gratis{background:var(--papel)}
.panel-gratis h2,.panel-gratis h3{margin-bottom:14px}
.panel-gratis .sub{margin-bottom:24px}

/* --------------------------------------------------------------- precios - */
.precio{
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--linea-suave);
}
.precio strong{
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--tinta);
}
.segmentos{
  margin-top:8px;
  font-size:var(--t-menu);
  color:var(--tinta-2);
}
.tachado{text-decoration:line-through;color:var(--tinta-3);font-weight:400}

/* ----------------------------------------------------------------- tablas */
.tabla-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:var(--t-apoyo)}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--linea-suave)}
th{
  font-family:var(--display);
  font-size:var(--t-nota);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);
  background:var(--papel-2);
}
tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------ aviso */
.aviso{
  border:1px solid var(--linea);
  border-left:3px solid var(--rojo);
  border-radius:0 12px 12px 0;
  background:var(--papel);
  padding:26px 30px;
  font-size:var(--t-apoyo);
  color:var(--tinta-2);
}
.aviso p{margin-bottom:12px}
.aviso p:last-child{margin-bottom:0}
.aviso strong{color:var(--tinta)}

/* ------------------------------------------------------------------ logos */
.logos{margin:32px 0}
.logos .marco,.pie-fondos .marco{
  background:#fff;
  border:1px solid var(--linea);
  border-radius:12px;
  padding:20px 24px;
  display:flex;justify-content:center;align-items:center;
}
.logos img,.pie-fondos img{width:100%;max-width:660px;height:auto;display:block}

/* --------------------------------------------------------------- revelar - */
.revelar{opacity:0;transform:translateY(10px);
         transition:opacity .62s var(--curva),transform .62s var(--curva)}
.revelar.visible{opacity:1;transform:none}
.revelar.d1{transition-delay:.07s}
.revelar.d2{transition-delay:.14s}
.revelar.d3{transition-delay:.21s}
html:not(.js) .revelar{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .revelar{opacity:1 !important;transform:none !important}
}

/* ============================================================================
   Secuencia de pasos — antes "cine". Sin manchas orgánicas ni fondo animado.
   Ahora: rejilla técnica, numeración grande y filetes. Gesto Audi.
   ========================================================================= */
.cine{padding:var(--aire) 0;background:var(--papel-2)}
.cine-lienzo{position:relative}
.cine-fondo,.liquido,.blob-capa,.blob,.cine-pista{display:none !important}

.cine-cab{text-align:center;margin-bottom:clamp(36px,5vw,56px);
          max-width:var(--ancho);margin-left:auto;margin-right:auto;
          padding:0 var(--canal)}
.cine-cab .sub{margin-left:auto;margin-right:auto;margin-bottom:0}

.cine-baraja{
  display:grid;
  gap:0;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 var(--canal);
  border-top:1px solid var(--linea);
}
.naipe{
  position:relative;
  padding:34px 30px 34px 0;
  border-bottom:1px solid var(--linea-suave);
}
.naipe + .naipe{padding-left:30px;border-left:1px solid var(--linea-suave)}

.cifra-orden{
  display:block;
  font-family:var(--display);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--rojo);
  font-variant-numeric:tabular-nums;
  margin-bottom:18px;
}
.naipe .etiqueta{display:none}
.naipe h3{font-size:1.5rem;letter-spacing:-.025em;margin-bottom:12px}
.naipe p{color:var(--tinta-2);font-size:var(--t-apoyo);margin-bottom:16px}
.naipe ul{margin:0;padding-left:16px;color:var(--tinta-2);font-size:var(--t-apoyo)}
.naipe li{margin-bottom:7px}
.naipe li::marker{color:var(--rojo)}

@media(max-width:920px){
  .naipe{padding:30px 0}
  .naipe + .naipe{padding-left:0;border-left:0}
}

/* ============================================================================
   Película — la demostración de producto. Se conserva: es prueba, no adorno.
   ========================================================================= */
.pelicula{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(36px,6vw,80px);
  align-items:center;
  max-width:940px;
  margin:0 auto;
}
@media(max-width:820px){
  .pelicula{grid-template-columns:1fr;justify-items:center;gap:40px}
}

.movil{
  width:270px;height:552px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:38px;
  padding:9px;
  box-shadow:0 20px 50px rgba(0,0,0,.10);
  flex:0 0 auto;
}
.pantalla{
  position:relative;
  width:100%;height:100%;
  background:var(--papel-2);
  border-radius:30px;
  overflow:hidden;
}
.muesca{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:96px;height:22px;
  background:var(--papel);
  border-radius:0 0 12px 12px;
  border:1px solid var(--linea-suave);border-top:0;
  z-index:5;
}

.esc{
  position:absolute;inset:0;
  padding:42px 16px 16px;
  opacity:0;
  transition:opacity .5s var(--curva);
}
.en-pantalla .esc1{animation:paso 12s var(--curva) infinite}
.en-pantalla .esc2{animation:paso 12s var(--curva) infinite 3s}
.en-pantalla .esc3{animation:paso 12s var(--curva) infinite 6s}
.en-pantalla .esc4{animation:paso 12s var(--curva) infinite 9s}
@keyframes paso{
  0%{opacity:0;transform:translateY(8px)}
  4%,23%{opacity:1;transform:none}
  27%,100%{opacity:0;transform:translateY(-8px)}
}
html:not(.js) .esc4,.pelicula:not(.en-pantalla) .esc1{opacity:1}

/* escena 1 — busca */
.buscador{
  display:flex;align-items:center;gap:8px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:10px 14px;
  font-size:.8125rem;color:var(--tinta);
}
.lupa{
  width:13px;height:13px;flex:0 0 auto;
  border:1.5px solid var(--tinta-3);border-radius:50%;
  position:relative;
}
.lupa::after{content:"";position:absolute;right:-4px;bottom:-3px;
             width:5px;height:1.5px;background:var(--tinta-3);transform:rotate(45deg)}
.tecleo{white-space:nowrap;overflow:hidden}
.cursor{display:inline-block;width:1px;height:13px;background:var(--rojo);
        vertical-align:-2px;animation:parpadeo 1.05s step-end infinite}
@keyframes parpadeo{50%{opacity:0}}

.sugerencias{margin-top:12px;display:grid;gap:7px}
.sug{height:9px;background:var(--linea-suave);border-radius:2px}
.sug:nth-child(2){width:78%}
.sug:nth-child(3){width:60%}

.teclado{
  position:absolute;left:10px;right:10px;bottom:10px;
  display:grid;grid-template-columns:repeat(10,1fr);gap:4px;
}
.teclado i{height:22px;background:var(--papel);border:1px solid var(--linea-suave);border-radius:3px}

/* escena 2 — encuentra */
.mapita{
  height:132px;border-radius:8px;margin-bottom:12px;
  background:
    linear-gradient(90deg,transparent 49.6%,var(--linea-suave) 49.6%,var(--linea-suave) 50.4%,transparent 50.4%),
    linear-gradient(0deg,transparent 39.6%,var(--linea-suave) 39.6%,var(--linea-suave) 40.4%,transparent 40.4%),
    linear-gradient(0deg,transparent 74.6%,var(--linea-suave) 74.6%,var(--linea-suave) 75.4%,transparent 75.4%),
    var(--papel);
  border:1px solid var(--linea-suave);
  display:flex;align-items:center;justify-content:center;
}
.chincheta{width:26px;height:26px}
.chincheta path{fill:var(--rojo)}

.resultado{
  background:var(--papel);border:1px solid var(--linea-suave);
  border-radius:8px;padding:11px 12px;margin-bottom:7px;
}
.resultado.destacado{border-color:var(--rojo);box-shadow:0 0 0 2px var(--rojo-lavado)}
.rtitulo{font-size:.8125rem;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
.estrellas{font-size:.6875rem;color:var(--rojo)}
.abierto{color:var(--tinta-2)}
.rlinea{height:6px;background:var(--linea-suave);border-radius:2px;margin-top:6px}

/* escena 3 — elige */
.cabecera-negocio{
  height:70px;border-radius:8px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--papel-2),var(--linea-suave));
  border:1px solid var(--linea-suave);
}
.nombre-negocio{font-family:var(--display);font-size:1rem;font-weight:700;
                letter-spacing:-.02em;margin-bottom:4px}
.meta-negocio{font-size:.6875rem;color:var(--tinta-2);margin-bottom:14px}
.servicio{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;font-size:.8125rem;
  background:var(--papel);border:1px solid var(--linea-suave);
  border-radius:6px;margin-bottom:6px;
}
.servicio.elegido{border-color:var(--rojo);background:var(--rojo-lavado)}
.servicio span{color:var(--tinta-2)}
.btn-reservar{
  margin-top:12px;text-align:center;
  background:var(--tinta);color:#fff;
  border-radius:4px;padding:11px;
  font-size:.8125rem;font-weight:500;
}

/* escena 4 — reserva */
.dias,.horas{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:9px}
.horas{grid-template-columns:repeat(3,1fr)}
.dia,.hora{
  text-align:center;padding:8px 2px;
  font-size:.6875rem;
  background:var(--papel);border:1px solid var(--linea-suave);
  border-radius:5px;color:var(--tinta-2);
}
.dia.sel,.hora.sel{background:var(--tinta);border-color:var(--tinta);color:#fff;font-weight:600}
.confirmado{
  margin-top:14px;text-align:center;
  background:var(--papel);border:1px solid var(--linea-suave);
  border-radius:8px;padding:18px 12px;
}
.tick{width:38px;height:38px;margin-bottom:8px}
.tick circle{fill:none;stroke:var(--rojo);stroke-width:3}
.tick path{fill:none;stroke:var(--rojo);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.confirmado b{display:block;font-size:.875rem;margin-bottom:3px}
.confirmado span{font-size:.6875rem;color:var(--tinta-2)}

/* capítulos, la columna de texto que acompaña al móvil */
.capitulos{list-style:none;margin:0;padding:0;counter-reset:cap}
.capitulo{
  position:relative;
  padding:22px 0 22px 0;
  border-bottom:1px solid var(--linea-suave);
}
.capitulo:last-child{border-bottom:0}
.capitulo b{
  display:block;
  font-family:var(--display);
  font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;
  margin-bottom:6px;
}
.capitulo span{display:block;color:var(--tinta-2);font-size:var(--t-apoyo);line-height:1.5}

/* ============================================================================
   Chat de WhatsApp
   ========================================================================= */
.pelicula.chat .pantalla{background:var(--papel-2)}
.chat-cab{
  display:flex;align-items:center;gap:9px;
  padding:28px 12px 10px;
  background:var(--papel);
  border-bottom:1px solid var(--linea-suave);
}
.chat-cab .av{width:30px;height:30px;border-radius:50%;background:var(--linea-suave);flex:0 0 auto}
.chat-cab b{display:block;font-size:.8125rem;letter-spacing:-.01em}
.chat-cab span{display:block;font-size:.625rem;color:var(--tinta-3)}

.hilo{padding:12px 10px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.burbuja{
  max-width:82%;padding:8px 11px 16px;
  border-radius:10px;
  font-size:.75rem;line-height:1.4;
  position:relative;
  opacity:0;transform:translateY(6px);
}
.burbuja small{
  position:absolute;right:9px;bottom:4px;
  font-size:.5625rem;color:var(--tinta-3);
}
.burbuja.cli{align-self:flex-end;background:var(--tinta);color:#fff;border-bottom-right-radius:3px}
.burbuja.cli small{color:rgba(255,255,255,.6)}
.burbuja.bot{align-self:flex-start;background:var(--papel);border:1px solid var(--linea-suave);
             border-bottom-left-radius:3px}

.escribiendo{
  align-self:flex-start;
  display:flex;gap:3px;padding:9px 11px;
  background:var(--papel);border:1px solid var(--linea-suave);border-radius:10px;
  opacity:0;
}
.escribiendo i{width:5px;height:5px;border-radius:50%;background:var(--tinta-3);
               animation:puntito 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}
.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes puntito{0%,60%,100%{opacity:.3}30%{opacity:1}}

.en-pantalla .b1{animation:entra .45s var(--curva) .3s forwards}
.en-pantalla .tec1{animation:pulso 1.1s .9s forwards}
.en-pantalla .b2{animation:entra .45s var(--curva) 2.1s forwards}
.en-pantalla .b3{animation:entra .45s var(--curva) 3s forwards}
.en-pantalla .tec2{animation:pulso 1s 3.6s forwards}
.en-pantalla .b4{animation:entra .45s var(--curva) 4.7s forwards}
.en-pantalla .b5{animation:entra .45s var(--curva) 5.5s forwards}
.en-pantalla .tec3{animation:pulso 1.1s 6.1s forwards}
.en-pantalla .b6{animation:entra .45s var(--curva) 7.3s forwards}
@keyframes entra{to{opacity:1;transform:none}}
@keyframes pulso{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0;height:0;padding:0;margin:0}}
html:not(.js) .burbuja{opacity:1;transform:none}

.chat-pie{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:8px;
  padding:10px;background:var(--papel);
  border-top:1px solid var(--linea-suave);
}
.chat-pie div{flex:1;height:28px;background:var(--papel-2);
              border:1px solid var(--linea-suave);border-radius:999px}
.chat-pie b{width:28px;height:28px;border-radius:50%;background:var(--tinta);flex:0 0 auto}

/* ============================================================================
   Prueba el bot
   ========================================================================= */
.prueba{
  border:1px solid var(--linea);
  border-radius:12px;
  background:var(--papel);
  padding:clamp(30px,5vw,48px);
  text-align:center;
  margin-top:56px;
}
.prueba .rotulo{margin-bottom:14px}
.prueba .rotulo::before{display:none}
.prueba p{color:var(--tinta-2);max-width:56ch;margin:0 auto 24px}
.wa{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 24px;
  background:var(--tinta);color:#fff;
  border-radius:4px;
  font-size:var(--t-cuerpo);font-weight:500;
}
.wa:hover{background:#000;text-decoration:none}
.wa svg{width:19px;height:19px}
.numero{display:block;margin-top:16px;font-size:var(--t-menu);color:var(--tinta-3)}
.numero b{color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* ============================================================================
   Ilustración de ficha de Google
   ========================================================================= */
.escena{
  border:1px solid var(--linea);
  border-radius:12px;
  background:var(--papel);
  padding:clamp(16px,3vw,28px);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.escena.ancha{max-width:900px;margin:0 auto}

/* ============================================================================
   Botón flotante de WhatsApp
   ========================================================================= */
.flota{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  min-height:52px;padding:0 20px;
  background:var(--tinta);color:#fff;
  border-radius:4px;
  font-size:var(--t-apoyo);font-weight:500;
  box-shadow:0 8px 26px rgba(0,0,0,.20);
  transition:transform .2s var(--curva),background .2s;
}
.flota:hover{background:#000;transform:translateY(-2px);text-decoration:none}
.flota svg{width:20px;height:20px;flex:0 0 auto}
@media(max-width:520px){
  .flota{right:14px;bottom:14px;padding:0 16px;min-height:48px}
  .flota span{display:none}
  .flota{padding:0;width:52px;justify-content:center;border-radius:50%}
}

/* ============================================================================
   Pie
   ========================================================================= */
footer{
  border-top:1px solid var(--linea);
  padding:clamp(48px,6vw,72px) 0 40px;
  background:var(--papel-2);
}
.pie-cols{
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:48px;
}
.pie-cols h4{
  font-family:var(--display);
  font-size:var(--t-nota);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
  margin:0 0 16px;
}
.pie-cols ul{list-style:none;margin:0;padding:0}
.pie-cols li{margin-bottom:2px;font-size:var(--t-apoyo);line-height:1.45}
.pie-cols li a,.pie-cols li span{display:inline-block;padding:7px 0;min-height:24px}
.pie-cols a{color:var(--tinta-2)}
.pie-cols a:hover{color:var(--tinta)}
.pie-cols span{color:var(--tinta-2)}

.pie-raya{border-top:1px solid var(--linea);padding-top:32px}
.pie-fondos{margin-bottom:26px}
.pie-fondos .marco{max-width:720px;margin:0 auto}

.pie-legal{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  font-size:var(--t-menu);color:var(--tinta-3);margin:0 0 12px;
}
.pie-legal a{color:var(--tinta-2)}
.sep{color:var(--linea)}
.pie-nota{
  font-size:var(--t-nota);color:var(--tinta-3);
  text-align:center;max-width:70ch;margin:0 auto;line-height:1.5;
}

/* ============================================================================
   Retirados del sistema anterior. Se neutralizan por si queda marcado suelto.
   ========================================================================= */
.metal{color:var(--tinta)}
.iman,.escribir{}
.cursor-esc{display:none}
.txt{display:inline}
.cae,.antes,.despues{display:inline}
.antes{text-decoration:line-through;color:var(--tinta-3);font-weight:400;margin-right:6px}

/* ============================================================================
   Calculadora de ayuda — el imán de captación
   ========================================================================= */
.calc{
  max-width:820px;margin:0 auto;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--sombra);
}
.calc-paso{
  border:0;border-bottom:1px solid var(--linea-suave);
  margin:0;padding:clamp(22px,3.6vw,32px);
}
.calc-paso legend{
  font-family:var(--display);
  font-size:1.0625rem;font-weight:700;letter-spacing:-.018em;
  color:var(--tinta);
  padding:0;margin-bottom:18px;float:left;width:100%;
}
.calc-ops{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));clear:both}
.calc-op{position:relative;display:block;cursor:pointer}
.calc-op input{position:absolute;opacity:0;width:0;height:0}
.calc-op span{
  display:block;
  min-height:64px;
  padding:14px 16px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:8px;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.calc-op b{display:block;font-size:var(--t-cuerpo);font-weight:600;letter-spacing:-.01em;margin-bottom:3px}
.calc-op small{display:block;font-size:var(--t-menu);color:var(--tinta-2);line-height:1.35}
.calc-op:hover span{border-color:var(--tinta-3)}
.calc-op input:checked + span{
  border-color:var(--rojo);
  background:var(--rojo-lavado);
  box-shadow:inset 0 0 0 1px var(--rojo);
}
.calc-op input:focus-visible + span{outline:2px solid var(--rojo);outline-offset:2px}

.calc-out{
  display:block;
  padding:clamp(24px,4vw,36px);
  background:var(--papel-3);
  text-align:center;
}
.calc-cifra{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.6rem,7vw,4rem);
  font-weight:700;
  font-variation-settings:"wdth" 112;
  line-height:1;
  letter-spacing:-.045em;
  color:var(--rojo-hondo);
  font-variant-numeric:tabular-nums;
  margin-bottom:12px;
}
.calc-texto{font-size:var(--t-guia);color:var(--tinta);margin:0 auto 8px;max-width:46ch}
.calc-detalle{font-size:var(--t-apoyo);color:var(--tinta-2);margin:0 auto 22px;max-width:52ch}
.calc-detalle b{color:var(--tinta)}
.calc-nota{font-size:var(--t-nota);color:var(--tinta-3);margin:20px auto 0;max-width:60ch;line-height:1.5}

/* ============================================================================
   Formulario de contacto
   ========================================================================= */
.formulario{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:760px;margin:0 auto;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:clamp(24px,4vw,40px);
  box-shadow:var(--sombra);
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.ancho{grid-column:1 / -1}
.campo label{
  font-size:var(--t-menu);
  font-weight:600;
  color:var(--tinta);
  letter-spacing:-.005em;
}
.opcional{font-weight:400;color:var(--tinta-3)}
.campo input[type=text],
.campo input[type=tel],
.campo input[type=email],
.campo textarea{
  font:400 var(--t-cuerpo)/1.45 var(--texto);
  color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:6px;
  padding:12px 14px;
  min-height:48px;
  width:100%;
  transition:border-color .18s,box-shadow .18s;
}
.campo textarea{resize:vertical;min-height:88px}
.campo input:hover,.campo textarea:hover{border-color:var(--tinta-3)}
.campo input:focus,.campo textarea:focus{
  outline:0;
  border-color:var(--rojo);
  box-shadow:0 0 0 3px var(--rojo-lavado);
}
.campo input[aria-invalid="true"]{border-color:var(--rojo-hondo)}
.campo .error{font-size:var(--t-nota);color:var(--rojo-hondo);margin:0}

.consentimiento label{
  display:flex;align-items:flex-start;gap:10px;
  font-weight:400;font-size:var(--t-apoyo);color:var(--tinta-2);
  line-height:1.45;cursor:pointer;
}
.consentimiento input{
  width:18px;height:18px;flex:0 0 auto;margin-top:2px;
  accent-color:var(--rojo);
}
.consentimiento a{color:var(--tinta);text-decoration:underline;text-underline-offset:2px}

/* Trampa antispam. Invisible para personas, visible para robots. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-estado{margin:14px 0 0;font-size:var(--t-apoyo);min-height:1.4em}
.form-estado.ok{color:var(--tinta);font-weight:600}
.form-estado.mal{color:var(--rojo-hondo)}

/* ============================================================================
   WhatsApp — identidad propia de la marca.
   Verde oficial y bocadillo con pico. Es el único color ajeno al sistema, y
   está justificado: la gente reconoce WhatsApp por el verde antes que por el
   texto. Se usa solo en lo que es WhatsApp, nunca como color decorativo.
   ========================================================================= */
:root{
  --wa:#25d366;
  --wa-hondo:#128c7e;
  --wa-teal:#075e54;
  --wa-lienzo:#efeae2;
  --wa-mio:#d9fdd3;
  --wa-suyo:#ffffff;
}

/* Botón flotante: bocadillo con pico abajo a la derecha. */
.flota{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;padding:0 22px;
  background:var(--wa);color:#fff;
  border-radius:28px 28px 6px 28px;
  font-size:var(--t-apoyo);font-weight:600;
  box-shadow:0 10px 30px rgba(37,211,102,.38);
  transition:transform .24s var(--curva),box-shadow .24s,background .2s;
}
.flota:hover{
  background:var(--wa-hondo);
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 40px rgba(37,211,102,.5);
  text-decoration:none;
}
.flota svg{width:22px;height:22px;flex:0 0 auto}
.flota::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:latido 2.6s var(--curva) infinite;
  pointer-events:none;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
@media(max-width:520px){
  .flota{right:16px;bottom:16px;padding:0;width:56px;justify-content:center;
         border-radius:28px 28px 6px 28px}
  .flota span{display:none}
}

/* Botón "Probar por WhatsApp": mismo bocadillo, tamaño de acción principal. */
.wa{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 28px;
  background:var(--wa);color:#fff;
  border-radius:26px 26px 6px 26px;
  font-size:var(--t-cuerpo);font-weight:600;
  box-shadow:0 8px 24px rgba(37,211,102,.30);
  transition:background .2s,transform .22s var(--curva),box-shadow .22s;
}
.wa:hover{
  background:var(--wa-hondo);text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(37,211,102,.42);
}
.wa svg{width:20px;height:20px}

/* ---- La conversación ---- */
.pelicula.chat .pantalla{
  background:var(--wa-lienzo);
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.55) 0 2px,transparent 2px),
    radial-gradient(circle at 62% 42%,rgba(255,255,255,.45) 0 2px,transparent 2px),
    radial-gradient(circle at 34% 76%,rgba(255,255,255,.5) 0 2px,transparent 2px);
  background-size:96px 96px;
}
.chat-cab{
  display:flex;align-items:center;gap:10px;
  padding:30px 12px 10px;
  background:var(--wa-teal);
  border-bottom:0;
}
.chat-cab .av{width:32px;height:32px;border-radius:50%;
              background:rgba(255,255,255,.28);flex:0 0 auto}
.chat-cab b{display:block;font-size:.8125rem;color:#fff;letter-spacing:-.01em}
.chat-cab span{display:block;font-size:.625rem;color:rgba(255,255,255,.75)}

.burbuja{
  position:relative;
  max-width:80%;
  padding:7px 11px 16px;
  font-size:.75rem;line-height:1.42;
  box-shadow:0 1px 1px rgba(0,0,0,.13);
  opacity:0;transform:translateY(6px) scale(.96);
}
.burbuja small{
  position:absolute;right:9px;bottom:4px;
  font-size:.5625rem;color:rgba(0,0,0,.42);
}

/* Bocadillo del cliente: pico a la derecha. */
.burbuja.cli{
  align-self:flex-end;
  background:var(--wa-mio);color:#111b21;
  border-radius:12px 12px 2px 12px;
  margin-right:8px;
}
.burbuja.cli::after{
  content:"";position:absolute;right:-7px;bottom:0;
  width:0;height:0;
  border-style:solid;border-width:0 0 10px 9px;
  border-color:transparent transparent var(--wa-mio) transparent;
}
.burbuja.cli small{color:rgba(0,0,0,.42)}

/* Bocadillo del negocio: pico a la izquierda. */
.burbuja.bot{
  align-self:flex-start;
  background:var(--wa-suyo);color:#111b21;
  border-radius:12px 12px 12px 2px;
  margin-left:8px;
  border:0;
}
.burbuja.bot::after{
  content:"";position:absolute;left:-7px;bottom:0;
  width:0;height:0;
  border-style:solid;border-width:0 9px 10px 0;
  border-color:transparent var(--wa-suyo) transparent transparent;
}

.escribiendo{
  align-self:flex-start;margin-left:8px;
  display:flex;gap:4px;padding:10px 12px;
  background:var(--wa-suyo);border:0;
  border-radius:12px 12px 12px 2px;
  box-shadow:0 1px 1px rgba(0,0,0,.13);
  opacity:0;
}
.escribiendo i{background:#8696a0}

.chat-pie{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:8px;
  padding:10px;background:var(--wa-lienzo);
  border-top:0;
}
.chat-pie div{flex:1;height:32px;background:#fff;border:0;border-radius:999px;
              box-shadow:0 1px 1px rgba(0,0,0,.1)}
.chat-pie b{width:32px;height:32px;border-radius:50%;background:var(--wa);flex:0 0 auto}

/* El check azul de "leído", que es el detalle que hace que se reconozca. */
.burbuja.cli small{color:#53bdeb}

/* ============================================================================
   MOTOR DE SCROLL
   Lo que hace que una web se sienta de Apple no son animaciones al entrar:
   es contenido que responde al dedo. Todo lo de aquí lo gobierna anima.js
   escribiendo variables CSS, y todo se apaga con prefers-reduced-motion.
   ========================================================================= */

/* ---- Zoom ligado al scroll -------------------------------------------------
   El elemento entra pequeño y crece al acercarse al centro de la pantalla
   (data-zoom="in"), o al revés (data-zoom="out"). La amplitud la fija
   data-amp. anima.js solo escribe --z. */
[data-zoom]{
  transform:scale(var(--z,1));
  transform-origin:center center;
  will-change:transform;
}

/* ---- Parallax de profundidad ---------------------------------------------- */
[data-parallax]{transform:translate3d(0,var(--y,0px),0);will-change:transform}

/* ---- Titular que entra palabra a palabra ---------------------------------- */
.pal{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em) rotateX(-35deg);
  transform-origin:50% 100%;
  transition:opacity .7s var(--curva),transform .7s var(--curva);
}
.visible .pal,.pal.visible{opacity:1;transform:none}
html:not(.js) .pal{opacity:1;transform:none}

/* ---- Indicador de scroll en el hero --------------------------------------- */
.baja{
  display:block;width:22px;height:36px;margin:44px auto 0;
  border:1.5px solid var(--linea);border-radius:12px;
  position:relative;opacity:var(--baja-op,1);
  transition:opacity .3s;
}
.baja::after{
  content:"";position:absolute;left:50%;top:7px;
  width:3px;height:7px;margin-left:-1.5px;
  background:var(--rojo);border-radius:2px;
  animation:rueda 1.9s var(--curva) infinite;
}
@keyframes rueda{
  0%{transform:translateY(0);opacity:0}
  35%{opacity:1}
  75%{transform:translateY(13px);opacity:0}
  100%{transform:translateY(13px);opacity:0}
}

/* ============================================================================
   ESCENARIO ANCLADO — la pieza principal
   La sección se queda fija mientras el visitante sigue bajando, y el contenido
   avanza paso a paso. Es el recurso con el que Apple cuenta un producto.
   ========================================================================= */
.escenario{padding:var(--aire) 0 0}
.escenario-pista{
  position:relative;
  height:calc(var(--pasos,4) * 78vh);
}
.escenario-fijo{
  position:sticky;
  top:56px;
  height:calc(100vh - 56px);
  min-height:560px;
  display:flex;align-items:center;
  overflow:hidden;
}
.escenario-fijo > .contenedor{width:100%}

@media(max-width:820px){
  .escenario-pista{height:calc(var(--pasos,4) * 62vh)}
  .escenario-fijo{min-height:0;height:auto;position:sticky;padding:18px 0 24px}
}
@media(max-width:820px) and (max-height:700px){
  .escenario-fijo{padding:10px 0}
}

/* La barra de progreso del escenario: filete rojo que se llena. */
.escenario-barra{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--linea-suave);
}
.escenario-barra i{
  display:block;height:100%;width:calc(var(--p,0) * 100%);
  background:var(--rojo);
  transition:width .12s linear;
}

/* Los capítulos se encienden según el paso. */
.capitulo{
  opacity:.32;
  transition:opacity .45s var(--curva),transform .45s var(--curva);
  transform:translateX(0);
}
.capitulo.activo{opacity:1}
.capitulo::before{
  content:"";position:absolute;left:-18px;top:24px;
  width:2px;height:0;background:var(--rojo);
  transition:height .45s var(--curva);
}
.capitulo.activo::before{height:calc(100% - 44px)}
html:not(.js) .capitulo{opacity:1}

/* En el escenario anclado, las escenas del móvil las manda el scroll, no un
   temporizador. Se anula la animación automática. */
.escenario .esc{animation:none !important;opacity:0;transform:translateY(10px) scale(.98)}
.escenario .esc.activa{opacity:1;transform:none}
html:not(.js) .escenario .esc:last-child{opacity:1;transform:none}

/* El móvil respira dentro del escenario. */
.escenario .movil{
  transform:scale(var(--z,1)) translate3d(0,var(--y,0px),0);
  transition:box-shadow .4s;
}

/* ============================================================================
   MARQUESINA DE MARCAS — la prueba social en movimiento
   ========================================================================= */
.marquesina{
  --vel:64s;
  position:relative;
  padding:clamp(26px,4vw,40px) 0;
  border-top:1px solid var(--linea-suave);
  border-bottom:1px solid var(--linea-suave);
  overflow:hidden;
  background:var(--papel);
}
.marquesina::before,.marquesina::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(48px,10vw,160px);z-index:2;
  pointer-events:none;
}
.marquesina::before{left:0;background:linear-gradient(90deg,var(--papel),transparent)}
.marquesina::after{right:0;background:linear-gradient(270deg,var(--papel),transparent)}

.marquesina-pista{
  display:flex;width:max-content;
  animation:desfile var(--vel) linear infinite;
}
.marquesina:hover .marquesina-pista{animation-play-state:paused}
.marquesina-grupo{display:flex;align-items:center;flex:0 0 auto}
@keyframes desfile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================================
   Sección a pantalla completa para la ficha de Google
   ========================================================================= */
.escena{transform-origin:center center}

@media (prefers-reduced-motion:reduce){
  .marquesina-pista{animation:none;transform:none}
  .marquesina{overflow-x:auto}
  [data-zoom],[data-parallax],.escenario .movil{transform:none !important}
  .escenario-pista{height:auto !important}
  .escenario-fijo{position:static !important;height:auto !important}
  .escenario .esc{position:relative;opacity:1 !important;transform:none !important}
  .capitulo{opacity:1 !important}
  .baja{display:none}
  .flota::after{animation:none}
}

/* Dentro de un escenario anclado, los mensajes los suelta el scroll, no un
   temporizador. Se anula la animación automática. */
.escenario .burbuja,.escenario .escribiendo{animation:none !important}
.escenario .burbuja.puesta,.escenario .escribiendo.puesta{
  opacity:1;transform:none;
  transition:opacity .4s var(--curva),transform .4s var(--curva);
}
.escenario .hilo{justify-content:flex-end;height:100%;padding-bottom:56px}
html:not(.js) .escenario .burbuja,html:not(.js) .escenario .escribiendo{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .escenario .burbuja,.escenario .escribiendo{opacity:1 !important;transform:none !important}
}

/* Corrección: dentro del escenario el hilo desbordaba por encima de la
   cabecera. La pantalla es una columna: cabecera fija, hilo elástico que
   recorta lo que no cabe y ancla los mensajes abajo, como WhatsApp real. */
.pelicula.chat .pantalla{display:flex;flex-direction:column}
.pelicula.chat .chat-cab{flex:0 0 auto;position:relative;z-index:2}
.escenario .hilo{
  flex:1 1 auto;min-height:0;
  overflow:hidden;
  justify-content:flex-end;
  padding:12px 10px 62px;
  height:auto;
}

/* Contexto dentro de la sección anclada: sin esto el visitante ve un móvil
   flotando sin saber de qué sección viene. */
.escenario-titulo{
  position:absolute;top:clamp(14px,3vh,34px);left:0;right:0;
  text-align:center;pointer-events:none;
}
.escenario-titulo .rotulo{margin:0 0 6px}
.escenario-titulo .rotulo::before{display:none}
.escenario-titulo b{
  display:block;
  font-family:var(--display);
  font-size:clamp(1rem,1.8vw,1.35rem);
  font-weight:700;
  font-variation-settings:"wdth" 108;
  letter-spacing:-.025em;
  color:var(--tinta);
}
@media(max-width:820px){.escenario-titulo{display:none}}

/* El móvil dentro del escenario, un poco más alto y con más presencia. */
.escenario .movil{box-shadow:0 30px 70px rgba(0,0,0,.13)}
.escenario-fijo{height:min(calc(100vh - 56px),820px)}


/* Las credenciales también respiran: filete de color bajo cada una al pasar. */
.credenciales-lista li{position:relative;padding-bottom:6px}
.credenciales-lista li::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--rojo);transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--curva);
}
.credenciales-lista li:hover::after{transform:scaleX(1)}
.credenciales-lista li:nth-child(2)::after{background:#d98324}
.credenciales-lista li:nth-child(3)::after{background:#0b7a75}
.credenciales-lista li:nth-child(4)::after{background:#1e5aa8}

/* ============================================================================
   Marquesina de marcas — nombre, tipo de cocina e icono
   Cuarenta nombres en gris son una lista. Con el tipo de cocina y su color son
   cuarenta negocios distintos, y se ve de un vistazo la variedad de lo que se
   ha implantado. Los iconos son dibujo propio: ningún logotipo de terceros.
   ========================================================================= */

.marquesina{--vel:96s}
.marquesina-grupo{display:flex;align-items:stretch;flex:0 0 auto}

.mq-e{
  width:36px;height:36px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:9px;
  font-size:1.25rem;line-height:1;
  background:color-mix(in srgb,var(--m) 13%,transparent);
  /* Emoji a color del sistema: Apple en iPhone y Mac, Noto en Android. */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  overflow:hidden;
}
/* Algunas categorías llevan dibujo propio en lugar de emoji, porque Unicode
   no tiene bandera para las comunidades autónomas. Ocupa la caja entera. */
.mq-e .mq-svg{width:100%;height:100%;display:block;border-radius:inherit}
.mq-e:has(.mq-svg){background:none;padding:0}

.mq{
  display:inline-flex;align-items:center;gap:11px;
  padding:10px 16px;margin:0 7px;
  border:1px solid var(--linea-suave);
  border-radius:10px;
  background:var(--papel);
  white-space:nowrap;
  transition:border-color .24s,transform .24s var(--curva),box-shadow .24s;
}
.mq:hover{
  border-color:var(--m);
  transform:translateY(-2px);
  box-shadow:0 8px 22px color-mix(in srgb,var(--m) 22%,transparent);
}


.mq-t{display:flex;flex-direction:column;line-height:1.15}
.mq-t b{
  font-family:var(--display);
  font-size:.9375rem;font-weight:600;
  font-variation-settings:"wdth" 104;
  letter-spacing:-.015em;
  color:var(--tinta);
}
.mq-t small{
  margin-top:3px;
  font-family:var(--display);
  font-size:.625rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--m);
}

@media(max-width:640px){
  .mq{padding:8px 12px;margin:0 5px;gap:9px}
    .mq-t b{font-size:.875rem}
}

/* ============================================================================
   CATÁLOGO DE LÍNEAS — el índice real de la empresa
   Lumaram no es una agencia de webs: son cinco negocios distintos y la portada
   tenía que decirlo antes de vender ninguno. Formato de hoja de
   especificaciones, no de rejilla de tarjetas: numeración a la izquierda,
   filete entre filas y el enlace alineado a la derecha. Gesto Audi, y además
   se lee de un vistazo, que es lo que hace quien entra la primera vez.
   ========================================================================= */
.catalogo{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--linea);
}
.lin{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:0 28px;
  padding:28px 4px;
  border-bottom:1px solid var(--linea);
  transition:background .22s;
}
.lin:hover{background:var(--papel-3)}

.lin-n{
  font-family:var(--display);
  font-size:var(--t-tarjeta);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--tinta-3);
  padding-top:3px;
  min-width:2.4em;
}
.lin:hover .lin-n{color:var(--rojo)}

.lin-txt h3{
  font-size:var(--t-tarjeta);
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.lin-txt p{
  margin:0;
  color:var(--tinta-2);
  font-size:var(--t-apoyo);
  max-width:62ch;
}

.lin-ir{
  align-self:center;
  white-space:nowrap;
  font-family:var(--display);
  font-size:var(--t-menu);
  font-weight:600;
  color:var(--tinta);
  text-decoration:none;
  border-bottom:1px solid var(--linea);
  padding-bottom:2px;
}
.lin-ir::after{content:" →";color:var(--tinta-3)}
.lin-ir:hover{color:var(--rojo);border-bottom-color:var(--rojo)}
.lin-ir:hover::after{color:var(--rojo)}

/* En móvil el número pasa a ser un rótulo sobre el título y el enlace baja:
   tres columnas en 360 px dejan la descripción en dos palabras por línea. */
@media(max-width:720px){
  .lin{grid-template-columns:1fr;gap:10px 0;padding:24px 2px}
  .lin-n{font-size:var(--t-nota);letter-spacing:.14em;padding-top:0;min-width:0}
  .lin-ir{align-self:start;justify-self:start}
}

/* ============================================================================
   TARIFA DEL CHATBOT
   Publicar el precio es la decisión comercial más rentable de la página: el
   que pregunta "¿cuánto vale?" y no lo encuentra, se va. Dos cajas, porque la
   tarifa tiene exactamente dos números, y una tabla de ejemplos para que nadie
   tenga que multiplicar de cabeza.
   ========================================================================= */
.tarifa{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0;
  border:1px solid var(--linea);
  border-radius:12px;
  overflow:hidden;
  background:var(--papel);
  box-shadow:var(--sombra);
}
.tarifa-caja{padding:36px 32px}
.tarifa-caja + .tarifa-caja{border-left:1px solid var(--linea)}
@media(max-width:660px){
  .tarifa-caja + .tarifa-caja{border-left:0;border-top:1px solid var(--linea)}
}

.tarifa-rotulo{
  display:block;
  font-family:var(--display);
  font-size:var(--t-nota);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-3);
  margin-bottom:14px;
}
.tarifa-precio{
  margin:0 0 14px;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 10px;
}
.tarifa-precio b{
  font-family:var(--display);
  font-size:var(--t-cifra);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.tarifa-precio span{
  font-size:var(--t-apoyo);
  color:var(--tinta-3);
}
.tarifa-nota{
  margin:0;
  color:var(--tinta-2);
  font-size:var(--t-apoyo);
}

.tabla-tarifa{margin:0}
.tabla-tarifa caption{
  caption-side:top;
  padding:14px 18px;
  text-align:left;
  font-family:var(--display);
  font-size:var(--t-nota);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-3);
  background:var(--papel);
  border-bottom:1px solid var(--linea-suave);
}
.tabla-tarifa tbody th{
  background:transparent;
  font-size:var(--t-apoyo);
  letter-spacing:0;
  text-transform:none;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
/* El rótulo de la columna tiene que ir sobre la cifra, no al otro extremo. */
.tabla-tarifa thead th:last-child,
.tabla-tarifa td:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.tabla-tarifa tbody tr:last-child th,
.tabla-tarifa tbody tr:last-child td{border-bottom:0}
.tabla-scroll + .tarifa-pie{margin-top:22px}
.tarifa-pie{
  color:var(--tinta-3);
  font-size:var(--t-apoyo);
  max-width:72ch;
  margin-left:auto;
  margin-right:auto;
}
.tarifa{margin-bottom:28px}

/* ---------------------------------------------------------------- PERSONA -
   La foto y la trayectoria de Luis. Es la sección que más peso comercial
   tiene y la que menos estilo propio necesita: una foto, un titular y tres
   párrafos. Cualquier adorno aquí resta credibilidad en vez de sumarla. */
.persona{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.persona-foto{margin:0}
.persona-foto img{
  display:block;width:100%;height:auto;
  border-radius:14px;
  border:1px solid var(--linea);
  box-shadow:var(--sombra-alta);
}
.persona-foto figcaption{
  margin-top:12px;
  font-size:.8125rem;color:var(--tinta-2);
  text-align:center;
}
.persona-txt h2{margin:6px 0 0}
/* La frase de entrada va un punto por encima del cuerpo: es la que resume
   por qué esta sección existe, y se lee antes que los dos párrafos de datos. */
.persona-guia{
  font-size:1.125rem;line-height:1.5;
  color:var(--tinta);
  margin:16px 0 20px;
  padding-left:16px;
  border-left:2px solid var(--rojo);
}
.persona-txt p{max-width:62ch}

@media(max-width:820px){
  .persona{grid-template-columns:1fr;gap:32px}
  /* En columna, la foto a tamaño completo ocupa media pantalla y empuja el
     texto fuera del primer vistazo. Se limita y se centra. */
  .persona-foto{max-width:260px;margin-inline:auto}
  .persona-txt{text-align:left}
}