/* ============================================================
   METIS · programa.css — Dictamen 360 y Rescate 90
   ------------------------------------------------------------
   Las dos páginas de programa con el MISMO carácter que el inicio.
   Se carga DESPUÉS de inicio.css y pulir.css, que ponen la paleta
   (navy y hueso), la tipografía de display en peso 500, el grano,
   el resplandor, las pastillas, las tarjetas y los rótulos
   numerados pegajosos. Aquí sólo va lo que el inicio no tiene:
   la portada de programa, el video, el visor de loops, la
   calculadora, la compuerta, la agenda y las preguntas.

   Sin `landing.css`: aquella hoja traía el sistema de secciones a
   pantalla completa de antes y peleaba con los revelados.
   Color saturado SÓLO como señal (rojo de pérdida, ámbar de
   aviso). El azul, sólo en estados.
   CERO DEPENDENCIAS.
   ============================================================ */

/* ---------- utilidades ---------- */
.tarjeta--p{padding:clamp(24px,2.8vw,40px)}
/* El resplandor de Cosmoq tiene su máximo justo en el borde inferior del
   pseudo-elemento y ahí hace un filo visible a media tarjeta. Las puertas
   del inicio ya lo bajan a .35 por lo mismo. */
.tarjeta--p::before{opacity:.35}
.num{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-muted)}
.estimado{font-family:var(--mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;
  color:#1c1405;background:#E9C46A;padding:2px 8px;border-radius:6px;white-space:nowrap}
.base-calculo{color:var(--bone-muted)}
.parrafo b,.tarjeta b{color:var(--bone);font-weight:600}
h3{font-family:var(--display);font-weight:500;font-variation-settings:"wdth" 108;
  letter-spacing:-.02em;margin:0}

/* ============================================================
   §I · LA PORTADA DE PROGRAMA
   No es la pista del inicio: aquí se llega con la decisión medio
   tomada. Texto a la izquierda; a la derecha el campo forma los
   envases, igual que la §V del inicio.
   ============================================================ */
.portada-p{min-height:100vh;display:grid;align-content:center;
  padding:clamp(96px,15vh,150px) var(--marco) clamp(40px,7vh,80px);position:relative}
.portada-p .rotulo{position:absolute;top:clamp(58px,9vh,86px);left:var(--marco)}
.portada-p__rej{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,80px);align-items:center}
.portada-p h1{font-family:var(--display);font-weight:500;font-variation-settings:"wdth" 110;
  font-size:clamp(3.2rem,9vw,8.4rem);line-height:.96;letter-spacing:-.05em;margin:22px 0 0;
  /* La máscara de revelado recorta en la caja: con interlineado < 1 el «360»
     se quedaba sin la parte baja de los glifos. El relleno se la devuelve. */
  padding-bottom:.1em}
.portada-p h1 em{font-style:normal;color:var(--bone-muted)}
.descriptor{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);margin:26px 0 0;max-width:40ch;line-height:1.7}
.portada-p .parrafo{margin-top:22px;max-width:52ch}
.portada-p .botonera{justify-content:flex-start;margin-top:34px}
.precio-rapido{display:flex;align-items:baseline;gap:12px;margin-top:26px;flex-wrap:wrap}
.precio-rapido b{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.02em}
.precio-rapido span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--bone-muted);text-transform:uppercase}
.hero-espacio{height:clamp(320px,60vh,640px)}

/* ---------- el video explicativo ----------
   Siempre ARRIBA de su página. Mientras no haya video, el marco dice
   qué va a contener y los botones llevan a la inversión. */
.video-p{padding:0 var(--marco) clamp(40px,8vh,90px)}
.video-p .tarjeta{aspect-ratio:16/9;max-height:78vh;width:100%;display:grid;place-items:center}
.video-p .tarjeta::before{display:none}
.video-p video,.video-p iframe{width:100%;height:100%;border:0;display:block;background:#000}
.video-vacio{text-align:center;padding:24px;max-width:60ch}
.video-vacio p{color:var(--bone-muted);line-height:1.7;margin:18px 0 0;font-size:clamp(.95rem,1.3vw,1.1rem)}
.play{width:78px;height:78px;border-radius:50%;border:1px solid var(--hair);background:rgba(245,246,248,.06);
  display:grid;place-items:center;cursor:pointer;margin:0 auto;color:var(--bone);transition:border-color .3s var(--curva)}
.play:hover{border-color:var(--bone)}
.barra-video{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-muted)}
/* «Abrir ahora de todas formas» es un <button>: sin esto se queda con el gris
   claro del navegador y el texto blanco no se lee. */
button.btn--linea{background:transparent;color:var(--bone);cursor:pointer}
/* Cuando el video abre la compuerta, la voz dice «aquí abajo»: la barra lo
   confirma en el mismo instante, sin mover la página ni tapar el video. */
.barra-video[data-abierta] [data-cuenta]{color:var(--bone)}
.barra-video[data-abierta] [data-abrir]{background:var(--bone);color:var(--void);border-color:var(--bone);
  animation:compuerta-latido 1.6s var(--curva) 3}
@keyframes compuerta-latido{0%,100%{box-shadow:0 0 0 0 rgba(245,246,248,.45)}60%{box-shadow:0 0 0 14px rgba(245,246,248,0)}}
@media (prefers-reduced-motion:reduce){.barra-video[data-abierta] [data-abrir]{animation:none}}

/* ---------- lo que responde / lo que no es ---------- */
.par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:clamp(30px,5vh,56px)}
.par h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.lista{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.lista li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  color:var(--bone-muted);line-height:1.6;font-size:clamp(.95rem,1.2vw,1.05rem)}
.mk{width:18px;height:18px;border-radius:50%;border:1px solid var(--hair);margin-top:3px;position:relative}
.mk--si::after{content:"";position:absolute;left:5px;top:3px;width:5px;height:8px;
  border:solid var(--bone);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.mk--no::before,.mk--no::after{content:"";position:absolute;left:8px;top:4px;width:1.5px;height:9px;background:var(--bone-muted)}
.mk--no::before{transform:rotate(45deg)}.mk--no::after{transform:rotate(-45deg)}

/* ============================================================
   ASÍ SE VE EL TRABAJO · el visor de los loops
   ------------------------------------------------------------
   De nordpixel.ch: los clips enseñan el trabajo, no el resultado.
   UN SOLO <video> por página —el campo ya cuesta lo suyo y ocho
   decodificadores a la vez hunden un celular—; las tarjetas del
   área son las pestañas y cambian su `src`. Póster siempre.
   ============================================================ */
.visor{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(30px,5vh,56px);align-items:start}
.pestanas{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.pestana{width:100%;text-align:left;cursor:pointer;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;
  padding:16px 18px;border-radius:16px;border:1px solid transparent;background:transparent;color:inherit;
  transition:background .35s var(--curva),border-color .35s var(--curva)}
.pestana:hover{background:rgba(245,246,248,.035);border-color:var(--hair2)}
.pestana[aria-selected="true"]{background:linear-gradient(165deg,var(--navy-alto),var(--panel));border-color:var(--hair)}
.pestana[aria-selected="true"] .pestana__n{color:var(--bone)}
.pestana__n{grid-row:span 2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--bone-muted);padding-top:5px}
.pestana__t{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.02em}
.pestana__d{color:var(--bone-muted);font-size:.92rem;line-height:1.5;display:none}
.pestana[aria-selected="true"] .pestana__d{display:block}
.pestana .extra{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#E9C46A;text-transform:uppercase;margin-left:8px}

.escena-loop{position:sticky;top:clamp(90px,14vh,130px)}
.pantalla{position:relative;aspect-ratio:16/9;border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--hair);background:#07070C;box-shadow:0 40px 120px rgba(0,0,0,.55)}
.pantalla video{width:100%;height:100%;object-fit:cover;display:block}
.pantalla__boton{position:absolute;inset:0;display:none;place-items:center;background:rgba(7,7,12,.25);border:0;cursor:pointer;color:var(--bone)}
.pantalla__boton span{width:72px;height:72px;border-radius:50%;background:rgba(7,7,12,.72);border:1px solid rgba(245,246,248,.4);
  display:grid;place-items:center;backdrop-filter:blur(6px)}
.pantalla.en-pausa .pantalla__boton{display:grid}
.pie-loop{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;align-items:baseline}
.pie-loop b{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
.pie-loop span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-muted)}
.aviso-loop{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--bone-muted);opacity:.75;margin:12px 0 0;line-height:1.7}
.cierre-visor{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:-.025em;
  margin:clamp(34px,6vh,64px) 0 0;max-width:30ch}
.cierre-visor em{font-style:normal;color:var(--bone-muted)}

/* ---------- entregables, resultados, compromisos ---------- */
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(30px,5vh,56px)}
.rejilla-3 h3,.rejilla-2 h3{font-size:clamp(1.25rem,1.8vw,1.6rem);margin:14px 0 10px}
.rejilla-3 p,.rejilla-2 p{color:var(--bone-muted);line-height:1.62;margin:0;font-size:clamp(.93rem,1.15vw,1.02rem)}
.rejilla-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(30px,5vh,56px)}
.rejilla-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-bottom:clamp(50px,8vh,90px);text-align:left}
.rejilla-4 h3{font-size:1.15rem;margin:0 0 10px}
.rejilla-4 p{color:var(--bone-muted);line-height:1.6;margin:0;font-size:.92rem}
.tarjeta{transition:border-color .45s var(--curva),transform .45s var(--curva)}
.rejilla-3 .tarjeta:hover,.rejilla-2 .tarjeta:hover,.rejilla-4 .tarjeta:hover{border-color:rgba(91,124,255,.45);transform:translateY(-4px)}
.nota-metodo{margin-top:clamp(26px,4vh,40px);max-width:78ch;color:var(--bone-muted);font-size:.95rem;line-height:1.7;
  border-left:1px solid var(--hair);padding-left:18px}

/* Un h2 a 6,6 rem en media pantalla se parte en cinco renglones: en las
   rejillas de dos columnas baja al tamaño de `.dos h2` del inicio. */
.calc-rej h2,.vitrina h2,.requisito h2{font-size:clamp(2.3rem,4.4vw,4.4rem);line-height:1.02}

/* ---------- la prueba: el informe ---------- */
.vitrina{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.informe__marco{border-radius:var(--radio);overflow:hidden;border:1px solid var(--hair);background:#fff;
  box-shadow:0 40px 120px rgba(0,0,0,.55);max-height:78vh}
.informe__marco img{width:100%;height:auto;display:block;filter:brightness(.93)}
.informe__lupa{display:block;cursor:zoom-in}
.informe__pie{font-family:var(--mono);font-size:10px;letter-spacing:.1em;line-height:1.8;color:var(--bone-muted);margin:24px 0 0;max-width:52ch}
.informe__toca{display:none}
.informe__falta{padding:40px;text-align:center;color:var(--void)}

/* ---------- la calculadora ---------- */
.calc-rej{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(30px,5vh,56px)}
.calc__campos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.calc__campo label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-muted);margin-bottom:8px}
.calc__campo input{width:100%;background:rgba(7,7,12,.55);border:1px solid var(--hair);border-radius:12px;
  color:var(--bone);font:500 1.25rem var(--display);padding:14px 16px;outline:none;transition:border-color .3s var(--curva)}
.calc__campo input:focus{border-color:rgba(91,124,255,.7)}
.calc__salidas{margin-top:24px;display:grid;gap:10px}
.calc__fila{display:flex;justify-content:space-between;border-bottom:1px solid var(--hair2);padding-bottom:10px;color:var(--bone-muted)}
.calc__fila b{color:var(--bone);font-family:var(--display);font-weight:500;font-size:1.2rem}
.calc__titular{margin-top:10px;padding:18px 20px;border-radius:16px;border:1px solid var(--hair);background:rgba(245,246,248,.04);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc__titular span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-muted)}
.calc__titular b{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em}
.calc__titular.mal b{color:#FF6B7A}
.calc__nota{color:var(--bone-muted);font-size:.9rem;line-height:1.65;margin:12px 0 0}
.aviso{margin-top:16px;padding:14px 16px;border-radius:14px;font-size:.93rem;line-height:1.6}
.aviso b{display:block;color:var(--bone)}
.aviso--mal{border:1px solid rgba(255,83,100,.5);background:rgba(255,83,100,.08)}
.aviso--ambar{border:1px solid rgba(233,196,106,.5);background:rgba(233,196,106,.07)}
.areas{display:flex;flex-wrap:wrap;gap:6px}
.area{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--hair2);color:var(--bone-muted);opacity:.5}
.area--viva{opacity:1;color:var(--bone);border-color:var(--hair)}
.sin-captura{color:var(--bone-muted);font-size:.88rem;line-height:1.6;margin:14px 0 0}

/* ---------- la compuerta: inversión y agenda ----------
   El mismo contrato de siempre, que lee metis.js: data-estado en
   #compuerta decide qué se ve. Sin video configurado, nace abierta. */
.compuerta{position:relative}
.compuerta__aviso{text-align:center;padding:clamp(40px,8vh,90px) 20px;display:grid;justify-items:center;gap:18px}
.compuerta__aviso .candado{width:38px;height:38px;color:var(--bone-muted)}
.compuerta__aviso h2{font-size:clamp(1.8rem,4vw,3.4rem);max-width:20ch}
.compuerta__aviso p{color:var(--bone-muted);max-width:52ch;margin:0;line-height:1.7}
.compuerta__int{display:none}
.compuerta[data-estado="abierto"] .compuerta__aviso{display:none}
.compuerta[data-estado="abierto"] .compuerta__int{display:block}
.precio__cifra{font-family:var(--display);font-weight:500;font-variation-settings:"wdth" 110;
  font-size:clamp(2.8rem,6vw,4.8rem);letter-spacing:-.045em;line-height:1;margin:22px 0 0}
.precio__nota{color:var(--bone-muted);font-size:.93rem;line-height:1.65;margin:10px 0 0}
.precio__nota a{color:var(--bone)}
.filete{height:1px;background:var(--hair2);margin:24px 0 4px}
.pasos{display:grid;gap:22px;margin-top:22px}
.paso{display:grid;grid-template-columns:40px 1fr;gap:14px}
.paso__n{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;font-family:var(--mono);font-size:12px}
.paso h4{font-family:var(--display);font-weight:500;font-size:1.15rem;margin:4px 0 6px;letter-spacing:-.01em}
.paso p{color:var(--bone-muted);line-height:1.65;margin:0;font-size:.93rem}
.btn--ancho{width:100%;justify-content:center;margin-top:22px}
.agenda__marco{border-radius:var(--radio);border:1px dashed var(--hair);min-height:340px;display:grid;place-items:center;overflow:hidden}
.agenda__marco iframe{width:100%;height:100%;min-height:560px;border:0;display:block;background:#fff}
.agenda__vacio{text-align:center;padding:30px;display:grid;justify-items:center;gap:14px}
.agenda__vacio p{color:var(--bone-muted);max-width:40ch;margin:0;line-height:1.7}

/* ---------- las preguntas ---------- */
.faq{margin-top:clamp(30px,5vh,56px);border-top:1px solid var(--hair2)}
.faq details{border-bottom:1px solid var(--hair2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:24px 0;font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--bone-muted);transition:transform .35s var(--curva)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--bone-muted);line-height:1.75;margin:0 0 26px;max-width:78ch}

/* ---------- Rescate 90: requisito y fases ---------- */
.requisito{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.requisito h2{font-size:clamp(1.7rem,3.4vw,2.9rem)}
.requisito p{color:var(--bone-muted);line-height:1.72;margin:18px 0 0;max-width:72ch}
.requisito a{color:var(--bone)}
.fases{list-style:none;margin:clamp(30px,5vh,56px) 0 0;padding:0;position:relative}
.fases::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:1px;background:var(--hair)}
.fase{display:grid;grid-template-columns:22px minmax(150px,240px) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:0 0 clamp(26px,4vh,40px);position:relative}
.fase::before{content:"";width:21px;height:21px;border-radius:50%;border:1px solid var(--hair);background:var(--void);margin-top:4px;position:relative;z-index:1}
.fase .num{padding-top:8px}
.fase h3{font-size:clamp(1.35rem,2.2vw,1.9rem);margin:6px 0 0}
.fase .lista{margin-top:6px}
.fase .precio__nota{margin-top:12px}

/* ---------- el pie legal, con enlace de correo ---------- */
.pie-legal a{text-decoration:none}
.pie-legal a:hover{color:var(--bone)}

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* Aquí la barra lleva seis enlaces y el inicio cuatro: a 1024 px se partían
   en dos renglones. «Inicio» ya lo hace el logo y «Preguntas» está al pie. */
.saltos a{white-space:nowrap}
@media(max-width:1180px){.saltos a[href="index.html"],.saltos a[href="#preguntas"]{display:none}}
@media(max-width:1100px){
  .rejilla-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .portada-p__rej{grid-template-columns:1fr}
  .hero-espacio{height:clamp(240px,38vh,360px);order:-1}
  .visor{grid-template-columns:1fr}
  .escena-loop{position:relative;top:0;order:-1}
  .pestanas{grid-template-columns:1fr 1fr}
  .pestana__d{display:none!important}
  .par,.rejilla-2,.calc-rej,.vitrina{grid-template-columns:1fr}
  .rejilla-3{grid-template-columns:1fr 1fr}
  .fase{grid-template-columns:22px 1fr}
  .fase>div:last-child{grid-column:2}
  .requisito{grid-template-columns:1fr}
}
@media(max-width:560px){
  .rejilla-3,.rejilla-4{grid-template-columns:1fr}
  .calc__campos{grid-template-columns:1fr}
  .pestana{padding:12px 12px;grid-template-columns:30px 1fr}
  .pestana__t{font-size:1.02rem}
}
@media(prefers-reduced-motion:reduce){
  .escena-loop{position:relative;top:0}
}