/* ══════════════════════════════════════════════════════════════════════
   ETERNAL STUDIO — PÁGINA DEL ASISTENTE (/asistente/)
   Va DESPUÉS de /css/estudio.css, la hoja de la web principal, que manda
   en la letra, los colores, la barra, el pie y los botones. Aquí solo va
   lo propio de esta página (2026-09-15, rediseño pedido por Josep para
   que parezca la misma web).

   · Sala negra entera (`<html class="apagada">`), como «Lo que trabaja».
   · El oro, solo en detalles. El verde de WhatsApp, solo dentro de los móviles.
   · Nombres que chocaban con la hoja principal, cambiados: .portada → .inicio,
     .movil → .tel, .plan → .tarifa, .rejilla → .reja, .pieza → .muestra.
   · Texto funcional nunca por debajo de 11 px. Toques de 44 px como mínimo.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. BASE ───────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
main :is(h1,h2,h3){margin:0; text-wrap:balance}
main p{margin:0}
main :is(b,strong){font-weight:600}
button{font:inherit; color:inherit}
h1 em,h2 em{font-style:normal; color:var(--texto-2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dato{font-variant-numeric:tabular-nums}
/* Como en la web principal, el contenido va alineado a la izquierda con el
   margen de la página (lo pone cada sección). Solo se le pone techo para que
   en pantallas muy anchas las rejillas no se estiren de lado a lado. */
.env,.env-ancho{max-width:96rem}

/* La etiqueta pequeña encima de cada titular. El punto es el oro. */
.ceja,.seccion-cab .ceja{
  margin:0 0 1rem; display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--texto-2);
}
.ceja::before{content:""; flex:none; width:.42rem; height:.42rem; border-radius:50%; background:var(--oro)}
.seccion-cab .ceja{margin:0}

.entradilla{max-width:36rem; font-size:clamp(1.08rem,1.45vw,1.28rem); line-height:1.52; color:var(--texto-2)}
.entradilla b{color:var(--texto)}
.fuente{max-width:62rem; font-size:.86rem; line-height:1.55; color:var(--texto-2)}
.titulo-s{font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.1}

/* ─── 2. BOTONES ────────────────────────────────────────────────── */
/* El secundario en píldora. Borde a .5: por debajo no llega a 3:1. */
.boton-linea{background:transparent; color:var(--texto); box-shadow:inset 0 0 0 1px rgba(233,235,238,.5)}
.boton-linea:hover{background:rgba(233,235,238,.08)}
.btn-fila{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.6rem; margin-top:1.8rem}
.btn-nota{margin-top:1rem; max-width:34rem; font-size:.92rem; line-height:1.55; color:var(--texto-2)}

/* ─── 3. LA PORTADA ─────────────────────────────────────────────── */
/* En el móvil manda el orden: titular, botones, la conversación y las
   tres pruebas. En el ordenador, texto y pruebas a la izquierda y el
   móvil a la derecha ocupando las dos filas. */
.inicio{padding-top:calc(var(--nav) + clamp(1.5rem,6vh,4rem)); padding-bottom:clamp(3rem,8vh,5rem)}
.inicio .titulo-sector{font-size:clamp(2.8rem,6.4vw,6.6rem); margin-bottom:1.1rem}
.inicio h1{max-width:none; font-size:clamp(2rem,3.1vw,3.1rem)}
.portada-in{display:grid; gap:clamp(2rem,5vw,3rem)}
@media (min-width:980px){
  .portada-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:1.8rem clamp(2rem,5vw,5rem)}
  .portada-txt{grid-column:1; grid-row:1; align-self:end}
  .portada-in .pruebas{grid-column:1; grid-row:2; align-self:start}
  .portada-movil{grid-column:2; grid-row:1 / 3; align-self:center}
}
/* 16/09, Josep: en el móvil fuera las seis conversaciones, ocupaban mucho.
   La que queda se escribe al bajar, dentro de la noche (sección 5). */
@media (max-width:919px){ .portada-movil{display:none} }

/* El sello: una línea, y el punto no parpadea. */
.sello{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.1rem;
  padding:.4em .9em; border:1px solid var(--linea); border-radius:999px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
}
.sello .punto{width:.42rem; height:.42rem; border-radius:50%; background:var(--oro); flex:none}

.pruebas{list-style:none; margin:0; padding:1.5rem 0 0; display:grid; gap:.9rem; border-top:1px solid var(--linea)}
@media (min-width:560px){ .pruebas{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem} }
.prueba{display:flex; gap:.6rem; align-items:flex-start; font-size:.93rem; line-height:1.45; color:var(--texto-2)}
.prueba svg{flex:none; width:19px; height:19px; margin-top:.12rem; color:var(--oro)}
.prueba b{display:block; color:var(--texto)}

/* ─── 4. LAS CONVERSACIONES ─────────────────────────────────────
   Seis sectores, seis situaciones. En reposo cada una se lee entera y
   ninguna pasa sola: flechas, puntos, dedo o teclado. Sin JavaScript la
   pista se desplaza igual de lado y los puntos son enlaces de verdad.
   La pista es una fila flexible: mide lo que la conversación más larga,
   así que los seis móviles miden igual y no hay saltos. */
.casos{display:grid; gap:.9rem}
.casos-pista{
  display:flex; gap:1.25rem; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
  padding:2px; margin:-2px;
}
.casos-pista::-webkit-scrollbar{width:0; height:0}
.casos-pista:focus-visible{outline-offset:-2px; border-radius:8px}

.caso{flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always;
  display:grid; grid-template-rows:auto 1fr auto; gap:.75rem}
.caso-eti{text-align:center; line-height:1.35}
.caso-eti b{display:block; margin-bottom:.15rem; font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase}
.caso-eti span{display:block; min-height:2.7em; font-size:.92rem; color:var(--texto-2)}

/* El móvil: el mismo marco, isla y WhatsApp oscuro que el móvil quieto de
   la web principal (.movil-quieto). */
.tel{
  position:relative; width:100%; max-width:330px; height:100%; margin-inline:auto;
  display:flex; flex-direction:column; overflow:hidden;
  border:11px solid #0b0c0f; border-radius:48px; background:#0b141a; color:#e9edef;
  box-shadow:0 0 0 1px #3a3f47, 0 50px 90px -30px rgba(0,0,0,.5);
}
.tel::after{content:""; position:absolute; left:50%; top:9px; z-index:2; width:30%; height:26px;
  transform:translateX(-50%); border-radius:999px; background:#040405}
@media (max-width:899px){ .tel{border-width:9px; border-radius:40px} }
.tel-barra{flex:none; height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem 0 1.7rem; font-size:.8rem; font-weight:650; color:#fff}
.tel-barra i{font-style:normal; font-size:.7rem; letter-spacing:.1em}
.tel-cab{flex:none; display:flex; align-items:center; gap:.65rem; padding:.5rem 1rem .6rem; background:#1f2c34}
.tel-avatar{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--oro); color:#16130a; font-weight:700; font-size:.85rem}
.tel-quien{min-width:0; line-height:1.3}
.tel-quien b{display:block; font-size:.95rem; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tel-quien span{font-size:.75rem; color:#8696a0}          /* 4,7:1 */

.chat{flex:1 1 auto; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end;
  gap:.45rem; padding:.8rem .75rem; background:#0b141a}
.burbuja{max-width:84%; padding:.5rem .7rem .4rem; border-radius:.8rem; font-size:.9rem; line-height:1.38}
.burbuja b{font-weight:650}
.burbuja.el{align-self:flex-start; background:#202c33; color:#e9edef; border-top-left-radius:.2rem}
.burbuja.yo{align-self:flex-end; background:#005c4b; color:#fff; border-top-right-radius:.2rem}
/* Colores sólidos, sin transparencia: así cada hora está calculada. */
.burbuja .hora{display:block; margin-top:.15rem; text-align:right; font-size:.7rem}
.burbuja.el .hora{color:#9fb0b8}                            /* 6,4:1 */
.burbuja.yo .hora{color:#cfe6e0}                            /* 6,1:1 */
.burbuja.sello-fecha{align-self:center; max-width:100%; padding:.3rem .8rem; border-radius:.6rem;
  background:#182229; color:#8fa3ad; font-size:.75rem; text-align:center}

/* Sólo mientras se repite la escena a petición del visitante. */
.chat.repitiendo .burbuja{animation:entra-burbuja .3s var(--curva) both}
@keyframes entra-burbuja{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
.tel-escribiendo{align-self:flex-start; display:flex; gap:4px; padding:.7rem .85rem;
  border-radius:.8rem; border-top-left-radius:.2rem; background:#202c33}
.tel-escribiendo i{width:6px; height:6px; border-radius:50%; background:rgba(233,237,239,.7); animation:tel-punto 1s infinite}
.tel-escribiendo i:nth-child(2){animation-delay:.15s}
.tel-escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes tel-punto{50%{opacity:.25}}

.tel-pie{flex:none; display:flex; align-items:center; gap:.5rem; margin:.35rem .6rem 1.1rem}
.tel-pie span{flex:1; padding:.6rem 1rem; border-radius:999px; background:#202c33; color:#8696a0; font-size:.85rem}
.tel-pie i{width:2.3rem; height:2.3rem; flex:none; border-radius:50%; background:#00a884}

/* Debajo del móvil: que es de ejemplo, y el botón de verla entrar. */
.caso-pie{width:100%; max-width:330px; margin-inline:auto; display:flex; align-items:center;
  justify-content:space-between; gap:.75rem}
.caso-pie span{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-2)}
.repetir{
  -webkit-appearance:none; appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.5rem .2rem;
  font-size:.92rem; font-weight:600; color:var(--texto);
  text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px;
}
.repetir svg{width:16px; height:16px}
/* `aria-disabled` y no `disabled`: no le quita el foco a quien lo pulsó. */
.repetir[aria-disabled="true"]{color:var(--texto-2); cursor:default; text-decoration:none}

/* Flechas y contador: vienen con `hidden` y `app.js` se lo quita. */
.casos-mandos{display:flex; align-items:center; justify-content:center; gap:.4rem}
.casos-mandos[hidden]{display:none}
.casos-flecha{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:transparent; color:var(--texto); box-shadow:inset 0 0 0 1px rgba(233,235,238,.5);
  transition:background-color .18s, transform .14s var(--curva);
}
.casos-flecha svg{width:20px; height:20px}
.casos-flecha:hover{background:rgba(233,235,238,.08)}
.casos-flecha:active{transform:scale(.94)}
.casos-flecha[aria-disabled="true"]{color:var(--texto-2); box-shadow:inset 0 0 0 1px var(--linea); cursor:default}
.casos-flecha[aria-disabled="true"]:hover{background:transparent}
.casos-flecha[aria-disabled="true"]:active{transform:none}
.casos-num{min-width:3.4rem; text-align:center; font-family:var(--mono); font-size:.78rem; color:var(--texto-2)}

/* El punto se ve de 8 px, pero el enlace mide 44 × 44. */
.casos-puntos{display:flex; justify-content:center; flex-wrap:wrap}
.casos-punto{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; text-decoration:none}
.casos-punto::before{content:""; width:8px; height:8px; border-radius:50%; background:rgba(233,235,238,.5);
  transition:background-color .18s, transform .18s var(--curva)}
.casos-punto:hover::before{background:var(--texto-2)}
.casos-punto[aria-current="true"]::before{background:var(--oro); transform:scale(1.4)}
@media (prefers-reduced-motion:reduce){
  .casos-punto[aria-current="true"]::before{transform:none; width:11px; height:11px}
}
/* En el ordenador el móvil gana ancho y la letra baja un punto: así la
   conversación más larga cabe entera en la primera pantalla. */
@media (min-width:980px){
  .inicio{padding-top:calc(var(--nav) + 1.5rem)}
  .tel,.caso-pie{max-width:360px}
  .burbuja{font-size:.875rem}
}

/* ─── 5. LA NOCHE ───────────────────────────────────────────────
   El efecto de scroll (2026-09-15). Sin la clase `noche-viva`, que la
   pone `app.js`, se ve la mañana ya hecha: reloj a las 9:00, cielo
   claro y los seis avisos a la vista. La mañana acaba en el blanco frío. */
.noche{position:relative; color:var(--hueso); --dia:1}
.noche.amanece{color:var(--tinta)}
.noche-fija{position:relative; min-height:100svh; display:grid; align-items:center;
  padding:calc(var(--nav) + 1.5rem) var(--margen) 2rem; overflow:clip}
.noche-cielo{position:absolute; inset:0; z-index:0; background:var(--oscuro)}
.noche-cielo::before,.noche-cielo::after{content:""; position:absolute; inset:0}
.noche-cielo::before{
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 34% 9%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 22%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 76% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 30%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(120% 90% at 70% 0%, #16203d 0%, #0a0c16 55%, #08090B 100%)}
.noche-cielo::after{background:linear-gradient(180deg,#9fb1c4 0%,#d5dde5 55%,var(--claro) 100%); opacity:var(--dia)}
.noche-in{position:relative; z-index:1; display:grid; gap:clamp(1.25rem,4vw,3rem); align-items:center}
@media (min-width:920px){ .noche-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }
.noche-txt .ceja{margin-bottom:.4rem}
.noche.amanece .ceja{color:var(--tinta)}
.noche.amanece h2 em{color:var(--tinta-2)}
.noche-reloj{margin:0 0 .5rem; font-weight:800; font-stretch:112%; font-size:clamp(3.6rem,15vw,10.5rem);
  line-height:.9; letter-spacing:-.04em}
.noche-final{margin-top:1rem; font-size:clamp(1.15rem,2.2vw,1.55rem); font-weight:650; font-stretch:106%}

.bloqueo{position:relative; margin-inline:auto; height:min(60svh,660px); aspect-ratio:9/18.5; max-width:100%;
  border-radius:clamp(30px,4vw,44px); border:9px solid #0b0c0f; overflow:hidden; color:#fff;
  padding:clamp(1.8rem,5svh,3rem) .7rem 1rem;
  background:linear-gradient(180deg,#1b2440,#0b0e18);
  box-shadow:0 0 0 1px #3a3f47, 0 40px 80px -30px rgba(0,0,0,.6)}
.bloqueo::after{content:""; position:absolute; inset:0; z-index:0; opacity:var(--dia);
  background:linear-gradient(180deg,#56708f,#5f7690)}      /* de día, la hora y la fecha en blanco siguen a 4,7:1 */
.bloqueo > *{position:relative; z-index:1}
.bloqueo-hora{margin:0; text-align:center; font-weight:600; font-size:clamp(2.2rem,6svh,3.4rem);
  line-height:1; letter-spacing:-.03em}
.bloqueo-fecha{margin:.25rem 0 .9rem; text-align:center; font-size:.78rem; opacity:.9}
/* Como en un móvil de verdad: el aviso más nuevo arriba. */
.avisos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:.45rem}
.aviso-n{display:grid; grid-template-columns:28px 1fr auto; gap:.1rem .55rem; align-items:start;
  padding:.55rem .6rem; border-radius:14px; background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:.74rem; line-height:1.3}
.noche.amanece .aviso-n{background:rgba(11,12,15,.66)}
.aviso-app{width:28px; height:28px; border-radius:8px; background:#25D366}
.aviso-txt b{display:block; font-weight:650; font-size:.78rem}
.aviso-hora{font-size:.7rem; opacity:.85; font-variant-numeric:tabular-nums}

.noche-viva{height:330svh}
.noche-viva .noche-fija{position:sticky; top:0; height:100svh; min-height:0}
.noche-viva .aviso-n:not(.ver){display:none}
.noche-viva .aviso-n.ver{animation:aviso-entra .5s var(--curva) both}
@keyframes aviso-entra{from{opacity:0; transform:translateY(-14px) scale(.96)}}
.noche-viva .noche-final{opacity:0; transform:translateY(10px); transition:opacity .5s var(--curva), transform .5s var(--curva)}
.noche-viva.al-final .noche-final{opacity:1; transform:none}
@media (max-width:919px){
  .noche-fija{align-items:start}
  .noche-reloj{font-size:clamp(3rem,16vw,4.2rem)}
  .noche-txt .titulo{font-size:clamp(1.35rem,5.4vw,1.7rem)}
  .bloqueo{height:min(52svh,560px)}
}
@media (prefers-reduced-motion:reduce){
  .noche-viva{height:auto}
  .noche-viva .noche-fija{position:relative; height:auto; min-height:100svh}
}

/* El móvil grande (16/09, Josep). Por debajo de 920 px el dibujo a escala
   partía los avisos palabra a palabra: ahora ocupa casi todo el ancho, llega
   hasta abajo y asoma por debajo de la barra de los botones. La conversación
   de Ana que abría la noche en el móvil la quitó Josep el mismo día: la
   sección empieza directamente con el móvil bloqueado y los avisos. */
@media (max-width:919px){
  .noche-viva .noche-fija{align-items:stretch; padding-bottom:0}
  .noche-viva .noche-in{height:100%; grid-template-rows:auto minmax(0,1fr)}
  .noche-viva .noche-movil{min-height:0; align-self:stretch}
  .noche-viva .bloqueo{height:100%; width:min(88%,22.5rem); aspect-ratio:auto;
    border-bottom:0; border-radius:40px 40px 0 0; padding:1.4rem .8rem 0}
  .noche-viva .aviso-n{font-size:.8rem}
  .noche-viva .aviso-txt b{font-size:.84rem}
}

/* ─── 6. LO QUE SE ESCAPA: las cifras ───────────────────────────── */
.cifras{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--linea)}
.cifra{display:grid; gap:.6rem; align-content:start; padding:1.6rem 0; border-bottom:1px solid var(--linea)}
@media (min-width:760px){
  .cifras{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cifra{padding:1.8rem 1.8rem 1.8rem 0; border-bottom:0; border-right:1px solid var(--linea)}
  .cifra + .cifra{padding-left:1.8rem}
  .cifra:last-child{border-right:0}
}
.cifra > b{font-weight:820; font-stretch:118%; font-size:clamp(2.4rem,4vw,3.6rem); line-height:.95; letter-spacing:-.03em}
.cifra p{line-height:1.5; color:var(--texto-2)}
.cifra p b{color:var(--texto)}

/* ─── 7. QUÉ HACE Y LA DIFERENCIA ───────────────────────────────── */
.reja{display:grid; gap:0 clamp(1.5rem,3vw,3rem)}
.reja-2{row-gap:3rem}
@media (min-width:700px){ .reja-2,.reja-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .reja-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.reja .chips{margin-top:1.25rem}

.ficha{display:flex; flex-direction:column; gap:.55rem; padding:1.6rem 0 1.9rem; border-top:1px solid var(--linea)}
.ficha h3{font-weight:700; font-stretch:108%; font-size:1.3rem; line-height:1.2}
.ficha p{color:var(--texto-2)}
.ficha p b{color:var(--texto)}
.ficha-icono{width:40px; height:40px; margin-bottom:.35rem; display:grid; place-items:center;
  border:1px solid var(--linea); border-radius:50%; color:var(--oro)}
.ficha-icono svg{width:19px; height:19px}
.ficha-num{font-family:var(--mono); font-size:.8rem; color:var(--texto-2)}

.lista-si{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.lista-si li{display:flex; gap:.65rem; align-items:flex-start; line-height:1.5}
.lista-si li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:.2rem; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.55);
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ─── 8. LOS PLANES ─────────────────────────────────────────────── */
.planes-todos{margin-bottom:1.6rem; padding:1.4rem 0 1.6rem; border-block:1px solid var(--linea)}
.planes-todos > p{margin-bottom:.9rem; font-weight:600}
@media (min-width:760px){ .planes-todos .lista-si{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1040px){ .planes-todos .lista-si{grid-template-columns:repeat(3,minmax(0,1fr))} }

.tarifas{display:grid; gap:1.4rem 1rem; align-items:stretch; margin-top:1.6rem}
@media (min-width:880px){ .tarifas{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tarifa{position:relative; display:flex; flex-direction:column; gap:1rem; padding:1.7rem 1.6rem 1.6rem;
  border-radius:18px; background:var(--oscuro-2); box-shadow:inset 0 0 0 1px var(--linea)}
.tarifa-destacada{box-shadow:inset 0 0 0 1px var(--oro)}
.tarifa-cinta{position:absolute; top:-.8rem; left:1.4rem; padding:.3em .8em; border-radius:999px;
  background:var(--oscuro); box-shadow:inset 0 0 0 1px var(--oro);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--oro)}
.tarifa-nombre{font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto-2)}
.tarifa-precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem;
  font-weight:820; font-stretch:115%; font-size:clamp(2.4rem,4vw,3.2rem); line-height:1; letter-spacing:-.03em}
.tarifa-precio span{font-size:.95rem; font-weight:500; font-stretch:100%; letter-spacing:0; color:var(--texto-2)}
.tarifa-para{line-height:1.5; color:var(--texto-2)}
.tarifa-topes{display:grid; gap:.4rem; margin:0; padding:.9rem 0; border-block:1px solid var(--linea)}
.tarifa-topes div{display:flex; justify-content:space-between; gap:1rem; font-size:.95rem}
.tarifa-topes dt{color:var(--texto-2)}
.tarifa-topes dd{margin:0; font-weight:600}
.tarifa .boton{width:100%; margin-top:auto; white-space:normal}
.planes-pie{margin-top:1.5rem; max-width:62ch; font-size:.95rem; line-height:1.65; color:var(--texto-2)}
.planes-pie b{color:var(--texto)}

/* ─── 9. CÓMO SE PONE: los pasos de la web principal, con cuatro ── */
@media (min-width:900px){ .pasos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.paso h3{margin-bottom:.4rem; font-weight:700; font-stretch:108%; font-size:1.3rem; line-height:1.2}
.paso p{color:var(--texto-2)}
.paso-min{display:block; margin-top:.8rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase}

/* ─── 10. QUIÉN LO MONTA ────────────────────────────────────────
   Las mismas piezas de «Hecho aquí». Cada una crece en proporción a su
   formato, así que las tres miden lo mismo de alto. En el móvil la
   ancha va sola arriba. */
.galeria{display:flex; flex-wrap:wrap; gap:clamp(.8rem,1.6vw,1.4rem)}
.muestra{flex:var(--ar) 1 0; min-width:0; margin:0}
.muestra img{width:100%; height:auto; aspect-ratio:var(--ar); object-fit:cover; border-radius:14px; background:var(--fondo-2)}
.muestra figcaption{margin-top:.7rem; font-size:.95rem; line-height:1.35}
@media (max-width:759px){ .muestra.ancha{flex-basis:100%} }

/* ─── 11. PREGUNTAS ─────────────────────────────────────────────── */
.faq-r{display:grid; gap:.8rem; max-width:44rem; padding-bottom:1.3rem; color:var(--texto-2)}
.preguntas .faq-r p{margin:0}
.faq-r b{color:var(--texto)}
.faq-r a{color:var(--texto); text-underline-offset:.2em}

/* ─── 12. LA BARRA DE ABAJO (sólo móvil) ────────────────────────
   Aparece al pasar la portada. `visibility` además del `transform`:
   fuera de pantalla no coge el foco del tabulador. */
.barra-pie{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:.5rem;
  padding:.6rem max(.75rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  background:color-mix(in srgb, var(--fondo) 92%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--linea);
  visibility:hidden; transform:translateY(120%);
  transition:transform .26s var(--curva), visibility .26s;
}
.barra-pie.se-ve{transform:none; visibility:visible}
.barra-pie .boton{min-height:48px; padding-inline:1rem; font-size:.95rem}
.barra-pie .boton:first-child{flex:1}
@media (min-width:920px){ .barra-pie{display:none} }
body:has(.barra-pie){padding-bottom:76px}
@media (min-width:920px){ body:has(.barra-pie){padding-bottom:0} }

/* ─── 13. EL REVELADO ───────────────────────────────────────────
   Se esconde SÓLO si `<html>` lleva `con-js`, que la pone el guion de la
   cabecera. Si el JavaScript no llega, la página se lee entera. */
.con-js .rv{opacity:0; transform:translateY(14px); transition:opacity .45s var(--curva), transform .45s var(--curva)}
.con-js .rv.visto{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important; transform:none !important; transition:none}
}