/* Piezas nuevas de esta página. Usa las mismas variables y el mismo lenguaje visual de kit.css (copiado tal cual del sitio de kits). */

/* ===== Sección "míralo" con el short en marco de celular ===== */
.mira{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.celu{width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/16;background:#000;border-radius:34px;border:9px solid var(--tinta);position:relative;overflow:hidden;box-shadow:0 40px 80px -40px #000000b3}
.celu video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.video-falta{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:22px;color:#cfcac0;font:500 13px/1.5 var(--mono);background:
  linear-gradient(160deg,#1d1a17,#0b0b0b)}
.video-falta b{display:block;color:var(--amarillo);font-weight:500;margin-bottom:6px;font-size:14px}
.sin-video .video-falta{display:grid}
.sin-video video{display:none}
.mira h2{margin-bottom:12px}
.mira .lista{margin-top:20px}
.pie-video{margin-top:18px;color:var(--gris);font-size:14px}

/* ===== Tarjetas "solo comunidad" ===== */
.bloqueadas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bloqueadas .card{background:#fff}
.bloqueadas .card .tag{display:inline-block;font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;background:var(--papel-2);border:1px solid var(--linea);border-radius:999px;padding:4px 9px;color:var(--tinta-2)}
.bloqueadas .card h4{font-family:var(--sans);font-size:20px;letter-spacing:-.02em;margin:12px 0 8px}
.bloqueadas .card .skill-id{font-family:var(--mono);font-size:12.5px;color:var(--gris);margin:-2px 0 12px}
.bloqueadas .card.destacada{background:var(--tinta);color:var(--papel);border-color:var(--tinta);grid-column:span 3;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:24px}
.bloqueadas .card.destacada h4{font-size:30px;margin:6px 0 8px}
.bloqueadas .card.destacada .ctas{margin-top:6px}
.btn-claro{background:var(--papel);color:var(--tinta)}
.nota-clara{color:#9b968c;font-size:13px;margin:12px 0 0}

/* ===== Cuánto me pagan ===== */
.pago{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.pago-caja{border:1px solid var(--linea);box-shadow:var(--sombra);background:#fff;border-radius:22px;padding:26px}
.pago-caja h3{margin:0 0 4px;font-size:20px;letter-spacing:-.01em}
.pago-caja .fuente{color:var(--gris);font-size:13px;margin:0 0 16px}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.numeros div{background:var(--papel-2);border:1px solid var(--linea);border-radius:14px;padding:12px 14px}
.numeros b{display:block;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.numeros span{color:var(--gris);font-size:13px}
.barras{display:flex;align-items:flex-end;gap:14px;height:190px;margin:22px 0 6px;border-bottom:1.5px solid var(--tinta);padding:0 4px}
.barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.barra i{display:block;width:100%;max-width:86px;background:var(--naranja);border-radius:10px 10px 0 0;min-height:4px}
.barra b{font-size:15px;margin-bottom:6px}
.barra.ult i{background:var(--tinta)}
.etiq-barras{display:flex;gap:14px;padding:0 4px;color:var(--gris);font-size:13px}
.etiq-barras span{flex:1;text-align:center}
.tabla-pago{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla-pago th{font-weight:600;text-align:left;color:var(--gris);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:0 0 8px}
.tabla-pago td{padding:9px 0;border-top:1px solid var(--linea)}
.tabla-pago td:last-child,.tabla-pago th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.tabla-pago .mal td:last-child{color:#c2410c;font-weight:600}
.aviso{margin-top:18px;background:#fff8e6;border:1px solid #f1dc9f;border-radius:14px;padding:14px 16px;font-size:14.5px;color:var(--tinta-2)}
.aviso b{color:var(--tinta)}

/* ===== Comparación de los tres cortos ===== */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tres .card h4{font-family:var(--sans);font-size:19px}

/* ===== Cierre ===== */
.cierre{background:var(--tinta);color:var(--papel);border-radius:26px;padding:42px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.cierre h2{font-size:clamp(30px,3.6vw,44px)}
.cierre p{color:#cfcac0;margin:12px 0 0;max-width:46ch}
.cierre .ctas{justify-content:flex-start}

/* ===== Requisitos con costo ===== */
.req.seis{grid-template-columns:repeat(3,1fr)}
.req .precio{display:block;margin-top:10px;font-weight:600;color:var(--tinta);font-size:15px}
.req .precio-sub{display:block;margin-top:2px;font-size:13px}
@media (width<=920px){.req.seis{grid-template-columns:1fr 1fr}}
@media (width<=600px){.req.seis{grid-template-columns:1fr}}

/* ===== Galería de ediciones (previews) ===== */
.reel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;align-items:start}
.reel figure{margin:0;text-align:center}
.reel .celu{max-width:270px}
.reel figcaption{margin-top:14px}
.reel figcaption b{display:block;font-size:17px;letter-spacing:-.01em}
.reel figcaption span{display:block;color:var(--gris);font-size:14px;margin-top:2px}
.oculto-fig{display:none!important}
.snd{position:absolute;right:10px;bottom:10px;z-index:2;border:0;border-radius:999px;background:#000000a8;color:#fff;font-size:15px;line-height:1;padding:8px 10px;cursor:pointer;backdrop-filter:blur(4px)}
.snd:hover{background:#000}
/* mini celular encima de la terminal del hero */
.hero-visual{position:relative}
.celu.mini{position:absolute;right:-14px;bottom:-62px;width:128px;max-width:none;border-width:6px;border-radius:26px;z-index:3;box-shadow:0 30px 60px -24px #000000cc;transform:rotate(3deg)}
/* video ancho dentro de la tarjeta de comunidad */
.card.destacada .der{display:grid;gap:16px}
.ancho{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid #ffffff1f}
.ancho video{width:100%;height:100%;object-fit:cover;display:block}
.ancho.sin-video video{display:none}
@media (width<=920px){.celu.mini{display:none}}

/* ===== Vista previa: avisos de modo demo ===== */
.demo-aviso{font-size:13px;color:var(--gris);margin-top:8px}

@media (width<=920px){
  .mira,.pago,.cierre{grid-template-columns:1fr}
  .bloqueadas,.tres{grid-template-columns:1fr 1fr}
  .bloqueadas .card.destacada{grid-column:span 2;grid-template-columns:1fr}
}
@media (width<=600px){
  .bloqueadas,.tres{grid-template-columns:1fr}
  .bloqueadas .card.destacada{grid-column:span 1}
  .numeros{grid-template-columns:1fr}
  .cierre{padding:26px}
  .celu{max-width:250px}
}

/* ===== Sección gratis en modo «próximamente» ===== */
.proximamente{display:grid;gap:12px}
.proximamente label{font-size:15px;font-weight:600}
.proximamente p{margin:0;color:var(--tinta-2)}
.proximamente .btn{justify-self:start}

/* ===== Lo que ya hay adentro ===== */
.sub-sec{font-size:22px;letter-spacing:-.02em;margin:0 0 16px}
.dentro{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.dentro .card{background:#fff}
.dentro .card h4{font-family:var(--sans);font-size:20px;letter-spacing:-.02em;margin:12px 0 4px}
.dentro .card .skill-id{font-family:var(--mono);font-size:12.5px;color:var(--gris);margin:0 0 12px}
.card .tag.ok{display:inline-block;font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;background:#e7f6ec;border:1px solid #bfe6cc;border-radius:999px;padding:4px 9px;color:#14532d}
@media (width<=600px){.dentro{grid-template-columns:1fr}}

/* pantallas muy angostas (< 320 px): que las cajas de cifras no desborden la página */
.pago>*{min-width:0}
.pago-caja{overflow-x:auto}

/* 12-nov (v2): un solo short, completo, con barra de avance; y «Más skills, solo en la comunidad» */
.reel.uno{grid-template-columns:1fr}
.reel.uno .celu{max-width:330px}
.prog{position:absolute;left:14px;right:60px;bottom:22px;height:4px;border-radius:3px;background:#ffffff40;z-index:2;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--naranja)}
.prog-t{position:absolute;left:14px;bottom:32px;z-index:2;color:#fff;font:600 12px var(--mono);text-shadow:0 1px 4px #000}
.mas-skills{background:var(--tinta);color:var(--papel)}
.mas-skills .bajada{color:#cfcac0}
.mas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mas-card{margin:0;text-align:center}
.celu.chico{max-width:220px;border-color:#2a2826}
.celu .solo{position:absolute;top:10px;left:10px;z-index:2;background:#000000b0;color:#fff;font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 9px}
.mas-card figcaption{margin-top:14px}
.mas-card figcaption b{display:block;font-size:17px}
.mas-card figcaption span{display:block;color:#b9b4aa;font-size:14px;margin-top:4px;line-height:1.45}
.mas-cta{margin-top:36px;display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center;border:1px solid #ff6a1a8c;border-radius:22px;padding:26px;box-shadow:0 0 0 5px #ff6a1a1a}
.mas-cta b{display:block;font-size:24px;letter-spacing:-.02em}
.mas-cta span{display:block;color:#cfcac0;margin-top:6px}
.mas-cta .ctas{justify-content:flex-end}
@media (width<=920px){.mas-grid{grid-template-columns:1fr 1fr}.mas-cta{grid-template-columns:1fr}.mas-cta .ctas{justify-content:flex-start}}
@media (width<=600px){.celu.chico{max-width:160px}.mas-grid{gap:14px}.mas-card figcaption b{font-size:15px}.mas-card figcaption span{font-size:13px}}

/* 13-nov: imágenes del equipo (Codex, low poly) */
.sis-director{display:grid;grid-template-columns:150px 1fr;column-gap:18px;align-items:start}
.sis-director>*:not(.dir-img){grid-column:2}
.dir-img{grid-column:1;grid-row:1 / span 4;width:150px;height:150px;border-radius:16px;object-fit:cover;border:1px solid #ff6a1a66;box-shadow:0 10px 30px #0008}
.nodo-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin:-2px 0 10px;border:1px solid #ffffff14;display:block;background:#15110e}
.nodo-num{text-transform:none}
@media (width<=600px){.sis-director{grid-template-columns:1fr}.sis-director>*:not(.dir-img){grid-column:1}.dir-img{grid-row:auto;width:100%;height:auto;margin-bottom:12px}}
/* director: imagen arriba, grande */
.sis-director{display:block}
.dir-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 45%;margin:0 0 14px;border-radius:14px}
.nodo-img{height:auto}