/* ── Sistema "sala de edición" (6 nov 2026) ─────────────────────────────────────────────────────────────────────
   Informe "Referentes de diseño web que venden": el negro se queda para PROYECTAR (video, casos); las zonas de leer y
   decidir (planes, cotizador, proceso, garantías, preguntas) van en PAPEL de hoja de rodaje. Una monoespaciada para la
   interfaz de edición (código de tiempo, claquetas, datos, precios). La condensada gigante, una sola vez por página.
   Se carga después de estilos.css y lo ajusta. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --papel: #efebe3;
  --papel-2: #e6e1d6;
  --tinta-p: #141216;
  --tinta-p2: #4c4741;
  --linea-p: rgba(20, 18, 22, .16);
  --violeta-p: #5b2fa6; /* violeta que pasa 4,5:1 sobre papel */
  --t-mono: 13px;
}

/* etiquetas y datos en mono, nunca por debajo de 13 px */
.etiqueta, .mono { font-family: var(--mono); font-size: var(--t-mono); font-weight: 600; letter-spacing: .06em; }
.etiqueta.v { color: var(--violeta-claro); }

/* ── cabecera de sala: fondo sólido, código de tiempo, CTA ── */
.cabecera { background: rgba(11, 10, 12, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cab-der { display: flex; align-items: center; gap: 10px; }
.tc { font: 600 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.tc b { color: var(--violeta-claro); font-weight: 600; }
.cab-cta { display: none; }
@media (min-width: 900px) { .cab-cta { display: inline-flex; } }
.cab-nav { display: none; }
@media (min-width: 1100px) { .cab-nav { display: flex; gap: 26px; } .cab-nav a { font: 600 13px/1 var(--mono); letter-spacing: .05em; color: var(--texto-2); padding: 14px 0; } .cab-nav a:hover { color: var(--hueso); } }
.abrir-menu { min-height: 44px; min-width: 44px; }
.boton { min-height: 48px; }
.boton.chico { min-height: 44px; }

/* ── rótulo de cada sección como un clip: "SC 03 · PLANES" ── */
.clip { display: flex; align-items: center; gap: 12px; font: 600 var(--t-mono)/1 var(--mono); letter-spacing: .06em; color: var(--cemento); text-transform: uppercase; }
.clip::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--violeta); }
.papel .clip { color: var(--tinta-p2); }

/* ── banner: palabras sólidas, sin contorno ── */
.b-palabra { color: var(--hueso) !important; -webkit-text-stroke: 0; }
.b-texto h1 { font-size: clamp(40px, min(6.6vw, 9vh), 112px); }

/* ── prueba: marcas en una fila ── */
.prueba { padding: 30px var(--borde); border-bottom: 1px solid var(--linea); display: grid; gap: 14px; }
.prueba ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px 28px; flex-wrap: wrap; }
.prueba li { font: 700 15px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }

/* ── secciones ── */
.sec { padding: clamp(64px, 9vw, 120px) var(--borde); }
.sec h2 { font-family: var(--sans); font-weight: 750; font-stretch: 100%; text-transform: none; letter-spacing: -.02em; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; margin: 18px 0 0; max-width: 20ch; }
.sec h2 .serif { color: var(--violeta-claro); }
.sec .bajada { color: var(--texto-2); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 52ch; margin: 16px 0 0; }

/* ── tres puertas ── */
.puertas { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 900px) { .puertas { grid-template-columns: repeat(3, 1fr); } }
.puerta { position: relative; display: grid; align-content: end; min-height: 440px; padding: 22px; border-radius: 4px; overflow: hidden; color: var(--hueso); isolation: isolate; }
.puerta video, .puerta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.puerta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 10, 12, .1), rgba(11, 10, 12, .2) 40%, rgba(11, 10, 12, .9)); }
.puerta:hover video, .puerta:hover img { transform: scale(1.04); }
.puerta .clave { position: absolute; top: 18px; left: 18px; font: 600 12.5px/1 var(--mono); letter-spacing: .08em; background: rgba(11, 10, 12, .7); border: 1px solid var(--linea); padding: 8px 10px; border-radius: 3px; }
.puerta h3 { font-family: var(--sans); font-weight: 750; font-stretch: 100%; text-transform: none; letter-spacing: -.015em; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; margin: 0; }
.puerta p { margin: 10px 0 14px; color: #d8d2ca; font-size: 15.5px; line-height: 1.5; }
.puerta .ir { font: 600 13px/1 var(--mono); letter-spacing: .06em; color: var(--violeta-claro); }
.puertas-mas { margin-top: 18px; color: var(--texto-2); font-size: 15px; }
.puertas-mas a { color: var(--hueso); text-decoration: underline; text-underline-offset: 3px; }

/* ── casos con claqueta: el film y sus cortes lado a lado ── */
.casos-s { display: grid; gap: 56px; margin-top: 40px; }
.caso-s { display: grid; gap: 16px; }
.claqueta { display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 0; border: 1px solid var(--linea); border-radius: 3px; overflow: hidden; font: 600 12.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.claqueta span { padding: 11px 12px; border-right: 1px solid var(--linea); color: var(--texto-2); white-space: nowrap; }
.claqueta span:first-child { background: var(--hueso); color: var(--negro); }
.claqueta span:last-child { border-right: 0; text-align: right; color: var(--cemento); }
@media (max-width: 699px) { .claqueta { grid-template-columns: 1fr 1fr; } .claqueta span { border-bottom: 1px solid var(--linea); } .claqueta span:last-child { grid-column: span 2; text-align: left; } }
.caso-s .cortes { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 10px; align-items: start; }
.caso-s .cortes video { width: 100%; border-radius: 3px; background: var(--carbon); object-fit: cover; }
.caso-s .cortes .h { aspect-ratio: 16 / 9; }
.caso-s .cortes .v { aspect-ratio: 9 / 16; }
@media (max-width: 699px) { .caso-s .cortes { grid-template-columns: 1fr 1fr; } .caso-s .cortes .h { grid-column: span 2; } }
.caso-s h3 { font-family: var(--sans); font-weight: 750; font-stretch: 100%; text-transform: none; letter-spacing: -.015em; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; margin: 0; }
.caso-s .reto { display: grid; gap: 6px 28px; color: var(--texto-2); font-size: 16px; line-height: 1.5; }
@media (min-width: 900px) { .caso-s .reto { grid-template-columns: 1fr 1fr; } }
.caso-s .reto b { color: var(--hueso); font: 600 12.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.conteo { font: 600 12.5px/1 var(--mono); letter-spacing: .05em; color: var(--violeta-claro); }

/* ── un rodaje, muchas piezas: línea de tiempo de una jornada ── */
.jornada { margin-top: 40px; border-top: 1px solid var(--linea); display: grid; }
.jornada li { list-style: none; display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.jornada time { font: 600 13px/1 var(--mono); color: var(--violeta-claro); font-variant-numeric: tabular-nums; }
.jornada b { font-weight: 700; font-size: 18px; }
.jornada span { color: var(--texto-2); display: block; margin-top: 4px; font-size: 15.5px; }
.jornada ul { margin: 0; padding: 0; }
@media (min-width: 900px) {
  .jornada ul { display: grid; grid-template-columns: repeat(5, 1fr); }
  .jornada li { grid-template-columns: 1fr; border-bottom: 0; border-right: 1px solid var(--linea); padding: 20px 18px 6px 0; }
  .jornada li:last-child { border-right: 0; }
}
.jornada .final { background: var(--violeta); border-radius: 3px; padding: 18px; margin-top: 14px; color: #fff; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.jornada .final b { font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* ── PAPEL: planes, cotizador, proceso, garantías, preguntas ── */
.papel { background: var(--papel); color: var(--tinta-p); }
.papel h2 .serif, .papel .serif { color: var(--violeta-p); }
.papel .bajada, .papel p { color: var(--tinta-p2); }
.papel .etiqueta, .papel .etiqueta.v { color: var(--violeta-p); }
.papel .boton { color: var(--tinta-p); border-color: rgba(20, 18, 22, .5); }
.papel .boton:hover { background: var(--tinta-p); color: var(--papel); border-color: var(--tinta-p); }
.papel .boton.lleno { background: var(--violeta-p); border-color: var(--violeta-p); color: #fff; }
.papel :focus-visible { outline: 2px solid var(--violeta-p); outline-offset: 3px; }

.planes-s { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 760px) { .planes-s { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .planes-s { grid-template-columns: repeat(5, 1fr); } }
.plan { background: #fbf9f4; border: 1px solid var(--linea-p); border-radius: 3px; padding: 22px 20px; display: grid; gap: 12px; align-content: start; }
.plan h3 { font-family: var(--sans); font-weight: 800; font-stretch: 100%; text-transform: none; letter-spacing: -.01em; font-size: 28px; line-height: 1; margin: 0; color: var(--tinta-p); }
.plan .para { font: 600 12.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-p2); }
.plan ul { margin: 0; padding: 0; list-style: none; border-top: 1px dashed var(--linea-p); }
.plan li { padding: 9px 0; border-bottom: 1px dashed var(--linea-p); font-size: 15px; line-height: 1.4; color: var(--tinta-p); }
.plan .precio { margin: 4px 0 0; font: 600 12.5px/1.2 var(--mono); color: var(--tinta-p2); }
.plan .precio b { display: block; margin-top: 6px; font: 600 26px/1 var(--mono); letter-spacing: -.02em; color: var(--tinta-p); }
.plan.rec { background: var(--tinta-p); color: var(--papel); border-color: var(--tinta-p); }
.plan.rec h3, .plan.rec li, .plan.rec .precio b { color: var(--papel); }
.plan.rec .para, .plan.rec .precio { color: #c9c2b7; }
.plan.rec ul, .plan.rec li { border-color: rgba(239, 235, 227, .22); }
.plan.rec .sello { justify-self: start; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--violeta-claro); color: var(--negro); padding: 7px 9px; border-radius: 2px; }
.plan.rec .boton { color: var(--papel); border-color: rgba(239, 235, 227, .6); }
.plan.rec .boton.lleno { background: var(--violeta-claro); border-color: var(--violeta-claro); color: var(--negro); }
.planes-nota { margin-top: 20px; font-size: 15px; }
.planes-nota a { color: var(--tinta-p); text-decoration: underline; text-underline-offset: 3px; }

/* hoja de rodaje (cotizador) */
.hoja { margin-top: 40px; background: #fbf9f4; border: 1px solid var(--linea-p); border-radius: 3px; overflow: hidden; }
.hoja-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--linea-p); font: 600 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-p2); }
.hoja-cuerpo { padding: clamp(20px, 3vw, 34px); display: grid; gap: 18px; }
.hoja-cuerpo .pregunta { font-family: var(--sans); font-weight: 750; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; color: var(--tinta-p); margin: 0; }
.opciones { display: grid; gap: 10px; }
@media (min-width: 700px) { .opciones { grid-template-columns: repeat(2, 1fr); } }
.opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 16px; border: 1px solid var(--linea-p); border-radius: 3px; background: var(--papel); font: 600 16px/1.3 var(--sans); color: var(--tinta-p); cursor: pointer; text-align: left; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.opcion:hover { border-color: var(--tinta-p); }
.opcion:active { transform: scale(.98); }
.opcion[aria-pressed="true"] { background: var(--tinta-p); color: var(--papel); border-color: var(--tinta-p); }
.opcion small { font: 600 12px/1 var(--mono); color: inherit; opacity: .7; letter-spacing: .04em; }

/* proceso y garantías */
.pasos-s { display: grid; gap: 1px; margin-top: 40px; background: var(--linea-p); border: 1px solid var(--linea-p); border-radius: 3px; overflow: hidden; }
@media (min-width: 900px) { .pasos-s { grid-template-columns: repeat(3, 1fr); } }
.paso-s { background: #fbf9f4; padding: 26px 22px; display: grid; gap: 10px; align-content: start; }
.paso-s .n { font: 600 13px/1 var(--mono); color: var(--violeta-p); letter-spacing: .06em; }
.paso-s h3 { font-family: var(--sans); font-weight: 800; font-stretch: 100%; text-transform: none; font-size: 24px; line-height: 1.1; margin: 0; color: var(--tinta-p); letter-spacing: -.01em; }
.garantias-s { margin-top: 40px; display: grid; gap: 0; border-top: 1px solid var(--linea-p); }
@media (min-width: 900px) { .garantias-s { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.garantias-s li { list-style: none; padding: 18px 0 18px 34px; border-bottom: 1px solid var(--linea-p); position: relative; font-size: 17px; line-height: 1.45; color: var(--tinta-p); }
.garantias-s li::before { content: '✓'; position: absolute; left: 0; top: 17px; font: 600 15px/1 var(--mono); color: var(--violeta-p); }
.papel .faq details { border-color: var(--linea-p); }
.papel .faq { border-color: var(--linea-p); }
.papel .faq summary { font-family: var(--sans); font-weight: 750; font-stretch: 100%; text-transform: none; letter-spacing: -.01em; font-size: clamp(19px, 1.7vw, 23px); color: var(--tinta-p); min-height: 44px; align-items: center; }
.papel .faq summary::after { color: var(--violeta-p); }
.papel .faq details p { color: var(--tinta-p2); }
@media (min-width: 900px) { .papel .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* cierre con la hora de Bogotá */
.cierre-s { padding: clamp(90px, 12vw, 160px) var(--borde) clamp(60px, 8vw, 100px); display: grid; gap: 22px; }
.cierre-s .gigante { font-size: clamp(76px, 15vw, 230px); }
.reloj { font: 600 13px/1.4 var(--mono); color: var(--texto-2); letter-spacing: .04em; }
.reloj b { color: var(--hueso); }

/* tira y horizontales: más sobrias */
.formato .grande { font-family: var(--sans); font-weight: 750; font-stretch: 100%; text-transform: none; letter-spacing: -.02em; font-size: clamp(32px, 4vw, 56px); }

/* barra fija en celular: aparece al salir del hero y se esconde en el cierre */
.barra-movil { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(11, 10, 12, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linea); transform: translateY(110%); transition: transform .35s var(--ease); }
.barra-movil.on { transform: none; }
.barra-movil a { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font: 600 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.barra-movil a:first-child { background: var(--violeta); color: #fff; }
.barra-movil a:last-child { border: 1px solid rgba(236, 232, 225, .5); color: var(--hueso); }
@media (min-width: 900px) { .barra-movil { display: none; } }

/* pausar todo el movimiento (WCAG 2.2.2) */
.pausa { font: 600 12.5px/1 var(--mono); letter-spacing: .05em; color: var(--texto-2); background: none; border: 1px solid var(--linea); border-radius: 999px; padding: 0 14px; min-height: 44px; cursor: pointer; }
.pausa:hover { color: var(--hueso); }
body.quieto .b-escena .b-palabra, body.quieto .b-escena .b-clips > *, body.quieto .b-progreso b { animation-play-state: paused !important; }

/* pie con datos legales */
.pie-legal { display: grid; gap: 8px; font: 400 14px/1.5 var(--sans); color: var(--texto-2); margin-top: 24px; }
.pie-legal a { color: var(--hueso); }
.pie nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* tira: scroll nativo horizontal con snap */
.tira { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tira-pista { transform: none !important; padding-bottom: 12px; }
.tira figure { scroll-snap-align: start; }
.b-pausa { position: absolute; z-index: 5; right: var(--borde); bottom: 38px; background: rgba(11,10,12,.55); }
@media (max-width: 899px) { .b-pausa { bottom: 34px; min-height: 36px; padding: 0 12px; } }
@media (max-width: 599px) { .tc { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 76px; } }