/* ─────────────────────────────────────────────────────────────────────────
   VISORIA Simulator · los capítulos de la portada (26-oct-2026)
   ─────────────────────────────────────────────────────────────────────────
   LA MISMA GRAMÁTICA DE LA PORTADA DE INTELLIGENCE. Fernando, 26-oct-2026:
   organizar Simulator «así como estamos organizando» Intelligence. Cada línea
   que se vende es un capítulo con número: una banda baja con foto propia bajo
   un velo azul noche (.lbanda), y el cuerpo debajo en papel, para que no queden
   dos azules seguidos en una página que hasta hoy era azul de arriba abajo.

   Los nombres de clase son los de Intelligence (.lbanda, .con-banda, .sec-tag,
   .linea-n, .vzp, .vzp-nuevo) para que una corrección allá se pueda traer aquí
   sin traducirla. Las medidas también. Lo propio de Simulator: el verde de la
   línea #2DD4BF en el filete del número, sobre azul noche y nunca como letra
   sobre papel, donde no da contraste.

   Esta hoja se carga después de simulator.css y portada.css, y todo lo que
   cambia de color va dentro de `.cap-cuerpo`: fuera de los capítulos con banda
   la página sigue exactamente como estaba.
   ───────────────────────────────────────────────────────────────────── */
:root{--papel:#F4F6FA;--noche:#0B1628;--oro-firma:#C8973A;--oro-luz:#E0B663;--oro-texto:#8A6520;--gris-texto:#3E4A5C}

/* El capítulo: filete dorado arriba, que lo separa del azul de lo anterior. */
.portada .cap{position:relative;isolation:isolate;padding:0;margin-top:clamp(48px,6vw,88px);background:var(--papel);color:var(--noche)}
/* Dos capítulos seguidos se tocan: el filete dorado de la banda ya los separa, y el
   margen dejaba entre los dos papeles una franja azul que se leía como otra sección. */
.portada .cap+.cap{margin-top:0}
.portada .cap::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--oro-firma) 20%,var(--oro-luz) 50%,var(--oro-firma) 80%,transparent)}

/* ── La banda ───────────────────────────────────────────────────────────── */
.portada .lbanda{position:relative;isolation:isolate;overflow:hidden;background:var(--noche);border-bottom:1px solid rgba(224,180,94,.4);
  display:flex;align-items:center;min-height:clamp(250px,23vw,330px);padding:clamp(40px,4.4vw,64px) 0}
.portada .lbanda>.envoltura{width:min(1180px,92vw)}
.portada .lbanda-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.portada .lbanda::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,22,40,.97) 0%,rgba(11,22,40,.9) 38%,rgba(11,22,40,.5) 64%,rgba(11,22,40,.15) 100%)}
.portada .lbanda .sec-head{max-width:820px}
.portada .lbanda .sec-head h2{color:#fff;margin:0 0 12px}
.portada .lbanda .sec-head p{color:#C9D5E6;font-size:1.06rem;margin:0;text-align:justify;hyphens:auto}
.portada .sec-tag{display:flex;align-items:center;gap:13px;margin:0 0 14px;font-family:var(--mono);font-size:clamp(13px,1.25vw,15.5px);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#E0B45E}
.portada .sec-tag::before{content:"";width:34px;height:2px;background:#E0B45E;flex-shrink:0}
.portada .linea-n{display:inline-flex;align-items:center;gap:13px;letter-spacing:.06em;color:#F4F6FA}
.portada .linea-n::after{content:"";width:1px;height:1.15em;background:var(--verde);opacity:.7}
/* Cada foto con su encuadre: el texto sobre la zona oscura, la escena a la vista. */
.portada .lbanda-s1 .lbanda-foto{object-position:70% 55%}
.portada .lbanda-s2 .lbanda-foto{object-position:62% 60%}
.portada .lbanda-s6 .lbanda-foto{object-position:65% 40%}

/* El «NUEVO» de Intelligence, igual: dorado, con su destello. */
.portada .vzp-tags{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.portada .vzp-nuevo{position:relative;overflow:hidden;isolation:isolate;animation:capNuevoHalo 2.4s ease-in-out infinite;
  background:linear-gradient(135deg,#E0B663,#C8973A 55%,#B8862B);color:var(--noche);font-family:var(--mono);
  font-size:clamp(15px,1.5vw,18px);letter-spacing:.22em;font-weight:500;padding:10px 22px;border-radius:999px;box-shadow:0 8px 24px rgba(200,151,58,.35)}
.portada .vzp-nuevo::after{content:"";position:absolute;top:-50%;bottom:-50%;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);
  animation:capNuevoBrillo 3.2s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes capNuevoHalo{0%,100%{box-shadow:0 8px 24px rgba(200,151,58,.35)}50%{box-shadow:0 8px 30px rgba(224,182,99,.65),0 0 0 6px rgba(224,182,99,.14)}}
@keyframes capNuevoBrillo{0%,55%{left:-60%}85%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){.portada .vzp-nuevo,.portada .vzp-nuevo::after{animation:none}}

/* ── El cuerpo en papel ─────────────────────────────────────────────────── */
.portada .cap-cuerpo{padding:clamp(34px,4.4vw,56px) 0 clamp(64px,8vw,112px)}
.portada .cap-cuerpo .sim-rubi{padding:0 0 clamp(26px,3.4vw,40px)}
.portada .cap-cuerpo .grupo-rotulo{color:var(--oro-texto)}
.portada .cap-cuerpo .grupo-rotulo.segundo{border-top-color:#D9DFE8}
.portada .cap-cuerpo .demo-nota{color:#65728A}
.portada .cap-cuerpo .mg-rotulo span{color:var(--noche)}
.portada .cap-cuerpo .mg-rotulo i{background:linear-gradient(90deg,var(--oro-firma),transparent)}
/* Las fichas que ya eran azul noche siguen siéndolo, pero opacas: con su
   transparencia de antes, sobre papel salían de un gris lavado. */
.portada .cap-cuerpo .mg-card{background:#0E1B31;box-shadow:0 18px 40px -26px rgba(11,22,40,.6)}
.portada .cap-cuerpo .proximos .sim{background:#0E1B31;border-color:rgba(11,22,40,.15);box-shadow:0 16px 36px -26px rgba(11,22,40,.55)}
.portada #instituciones .cap-cuerpo .publicos>div{background:#0E1B31;border-color:rgba(11,22,40,.15);box-shadow:0 18px 40px -26px rgba(11,22,40,.6)}
.portada .cap-cuerpo .medida{background:linear-gradient(180deg,#132541,#0B1628);border-color:rgba(11,22,40,.2);color:var(--tinta)}

/* ── La ficha ancha de cada Arena que se vende (.vzp) ───────────────────── */
.portada .sim-vzps{display:grid;gap:18px}
.portada .vzp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:#fff;border:1px solid #E3E8EF;
  border-radius:18px;overflow:hidden;color:var(--noche);box-shadow:0 10px 30px rgba(11,22,40,.08)}
.portada .vzp-img{display:block;padding:12px;background:var(--papel)}
.portada .vzp-img img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:10px;
  border:1px solid #E3E8EF;box-shadow:0 8px 22px -14px rgba(11,22,40,.35)}
.portada .vzp-t{padding:clamp(28px,3.4vw,46px) clamp(26px,3.4vw,46px);border-left:3px solid var(--oro-firma);display:flex;flex-direction:column}
.portada .vzp-k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--oro-texto);text-transform:uppercase}
.portada .vzp h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:8px 0 10px;color:var(--noche)}
.portada .vzp h3 a{color:inherit;text-decoration:none}
.portada .vzp h3 .arena{color:var(--noche);font-style:italic}
.portada .vzp p{margin:0 0 14px;font-size:15.5px;line-height:1.6;color:var(--gris-texto);font-weight:400;text-align:justify;hyphens:auto}
.portada .vzp .sim-temas{margin:0 0 18px;color:#65728A}
.portada .vzp-precio{margin:0 0 18px!important;text-align:left!important;color:var(--noche)!important;font-family:var(--mono);font-size:13px!important}
.portada .vzp-precio span{letter-spacing:.12em;text-transform:uppercase;color:#65728A}
.portada .vzp-precio b{font-weight:500;font-size:22px;color:var(--noche);margin:0 4px}
.portada .vzp-precio small{font-size:12px;color:#65728A}
.portada .vzp-pie{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.portada .vzp-ir{display:inline-block;background:var(--oro-firma);color:#1A1204;padding:10px 22px;border-radius:999px;font-weight:600;
  font-size:14.5px;text-decoration:none;animation:capLatido 2.2s infinite ease-in-out}
.portada .vzp-ir:hover{filter:brightness(1.06)}
.portada .vzp-ver{border:1px solid var(--noche);color:var(--noche);padding:9px 20px;border-radius:999px;font-weight:500;font-size:14.5px;text-decoration:none}
.portada .vzp-ver:hover{background:var(--noche);color:#fff}
@keyframes capLatido{0%,100%{box-shadow:0 0 0 0 rgba(200,151,58,.45)}50%{box-shadow:0 0 0 8px rgba(200,151,58,0)}}
@media(prefers-reduced-motion:reduce){.portada .vzp-ir{animation:none}}

/* ── Teléfono ───────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .portada .vzp{grid-template-columns:1fr}
  .portada .vzp-img{padding:10px 10px 0}
  .portada .vzp-img img{min-height:0;height:auto;aspect-ratio:16/9}
  .portada .vzp-t{border-left:0;border-top:3px solid var(--oro-firma);padding:26px 22px 24px;margin-top:10px}
  .portada .lbanda::before{background:linear-gradient(180deg,rgba(11,22,40,.42) 0%,rgba(11,22,40,.86) 42%,rgba(11,22,40,.97) 100%)}
  .portada .lbanda{padding-top:clamp(96px,30vw,140px)}
  .portada .lbanda .sec-head p{text-align:left}
  /* En columna de teléfono el justificado abre ríos entre palabras: aquí va a la izquierda. */
  .portada .vzp p,.portada .cap-cuerpo .proximos .sim p{text-align:left}
  /* LOS TRECE MODELOS, EN CARRUSEL. Apilados medían siete mil píxeles en un
     teléfono, un cuarto de la página: cada familia pasa a una fila que se
     desliza de lado, con la ficha siguiente asomando para que se vea que hay más. */
  .portada #modelos .mg-rejilla{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 14px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .portada #modelos .mg-card{scroll-snap-align:start}
  /* Los cuatro escenarios que vienen, en la misma fila deslizable: apilados eran mil cien píxeles
     de algo que todavía no se vende. */
  .portada .cap-cuerpo .simuladores.proximos{display:grid;grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .portada .cap-cuerpo .proximos .sim{scroll-snap-align:start}
}

/* LOS TRES LABORATORIOS JUNTOS (30-oct-2026): una línea bajo las tres tarjetas, con el precio en cifra y su botón. */
.portada .labs-tres{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 0;padding:16px 20px;border:1px solid rgba(200,151,58,.45);border-radius:14px;background:#fff;color:var(--noche);font-size:15px}
.portada .labs-tres b{font-family:var(--mono);font-weight:500;font-size:18px}
.portada .labs-tres small{font-family:var(--mono);font-size:12px;color:#5B6B82}
.portada .labs-tres .vzp-ir{margin-left:auto}
@media(max-width:560px){.portada .labs-tres .vzp-ir{margin-left:0}}

/* PRÓXIMAMENTE (30-oct-2026): se leen como lo que viene, no como tarjetas rotas. */
.portada .proximos-nota{margin:-6px 0 16px;font-size:14px;color:var(--gris-texto)}
.portada .proximos-nota a{color:var(--oro-texto)}
/* Una sola llamada para la sección (2-nov-2026): el «En preparación» de cada tarjeta se quitó. */
.portada .proximos-llamada{margin:22px 0 0}
.portada .proximos-llamada .vzp-ir{animation:none}

/* LICENCIAS PARA INSTITUCIONES (30-oct-2026): tabla de precios publicada, por solicitud. */
.portada .labs-inst{margin:22px 0 0;padding:clamp(18px,3vw,28px);border:1px solid rgba(11,22,40,.12);border-left:3px solid var(--oro-firma);border-radius:14px;background:#fff;color:var(--noche)}
.portada .labs-inst h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:1.35rem;margin:0 0 8px}
.portada .labs-inst p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--gris-texto)}
.portada .labs-tabla{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:14px}
.portada .labs-tabla th,.portada .labs-tabla td{text-align:left;padding:9px 8px;border-bottom:1px solid rgba(11,22,40,.10);vertical-align:top}
.portada .labs-tabla thead th{font:500 11px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-texto)}
.portada .labs-tabla td:last-child{font-family:'DM Mono',ui-monospace,monospace;white-space:nowrap;text-align:right}
.portada .labs-inst-nota{font-size:12.5px!important}
.portada .labs-tres .vzp-ver{margin-left:8px}
@media(max-width:560px){.portada .labs-tabla td:nth-child(2){font-size:13px}.portada .labs-tabla th,.portada .labs-tabla td{padding:8px 4px}}
.portada .labs-tabla thead th:last-child{text-align:right}