/* Negocios con IA · v1 (27-oct-2026)
   Página con el tour del video v8. Usa los bloques de la home (hero5, strip, problem, paths, closing)
   y solo agrega lo que la home no tiene. Colores: solo los tokens de styles.css. */

/* Hero: sin chat ni caminos, así que el texto respira más */

/* El video ocupa el lugar de la foto del hero (v2, pedido de Juan 27-oct) */
/* v6 (27-oct): los títulos arriba, el video debajo y el botón de Sara al final, alineados a la izquierda */
.ng-hero .hero5-inner{display:flex;flex-direction:column;align-items:flex-start;gap:34px;height:auto;min-height:0;max-width:calc(var(--max) + var(--gutter)*2);padding:40px var(--gutter) 110px;text-align:left}
.ng-hero .hero5-copy{padding:0;max-width:none}
.ng-hero .hero5-copy h1{max-width:none}
.ng-hero .btn-row{justify-content:flex-start}
.ng-hero .hero5-signature{left:var(--gutter)}
.ng-hero-video{margin:0;position:relative;z-index:3;width:100%}
@media (min-width:761px){.ng-hero-video{width:min(100%,calc((100vh - 460px)*1.78))}}
.ng-hero-video video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius);background:var(--temple);box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
.ng-frame{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ng-frame video{cursor:pointer;box-shadow:none}
.ng-frame:fullscreen video{border-radius:0;border:0;height:100%}
.ng-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:68px;padding:0;border:0;background:none;transition:transform .2s var(--ease),opacity .2s}
.ng-play svg{width:100%;height:100%;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.ng-play rect{fill:var(--copper)}
.ng-play path{fill:var(--white)}
.ng-play:hover{transform:translate(-50%,-50%) scale(1.08)}
.ng-full{position:absolute;right:14px;bottom:14px;width:40px;height:40px;padding:9px;border:0;border-radius:10px;background:rgba(11,20,16,.55);opacity:0;transition:opacity .2s}
.ng-full svg{width:100%;height:100%;fill:none;stroke:var(--white);stroke-width:2;stroke-linecap:round}
.playing .ng-play{opacity:0;pointer-events:none}
.playing .ng-frame:hover .ng-full,.ng-full:focus-visible{opacity:1}
/* v8 (28-oct): barra de avance fina en el borde inferior del video, en cobre. Aparece al darle play */
.ng-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18);opacity:0;transition:opacity .3s;pointer-events:none}
.ng-progress span{display:block;height:100%;background:var(--copper);transform:scaleX(0);transform-origin:left}
.started .ng-progress{opacity:1}
.ng-hero-video figcaption{margin-top:18px;font-size:14px;line-height:1.5;color:var(--sage-light)}
.ng-hero-video figcaption span{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}

/* El problema: los dolores sin enlace, solo el título */
.ng-problem .problem-left h2{font-size:clamp(2.2rem,3.4vw,3.2rem)}
.ng-problem .checks{margin-top:34px}
.ng-intro{font-size:17px;color:var(--sage);margin-bottom:6px}
.ng-problem .pain h3{margin-bottom:0;font-size:21px}

/* El escalón o el verdugo */
.ng-statement{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.2;max-width:980px;margin-bottom:56px}
.ng-fork-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ng-fork-card{padding:36px 40px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.ng-fork-card small{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--sage-light);margin-bottom:14px}
.ng-fork-card strong{font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.25;letter-spacing:-.02em}
.ng-fork-bad{border-color:rgba(200,121,42,.45)}
.ng-fork-bad strong{color:var(--copper)}

/* Lo que Juan construyó: tarjetas de la home, sin enlace */
.ng-built .path-card{cursor:default}
.ng-built .path-card h3{font-size:24px}
.ng-built .path-image{height:auto;aspect-ratio:16/9}
.ng-built .path-image img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ng-agents{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ng-agents li{padding:26px 24px;border-radius:var(--radius);background:var(--pale);border:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--sage)}
.ng-agents strong{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}

/* Los roles */
.ng-roles{background:var(--bone)}
.ng-roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.ng-roles-text p{font-size:18px;color:var(--sage)}
.ng-roles-text p+p{margin-top:20px}
.ng-numbers .proof-row{grid-template-columns:repeat(3,1fr)}
.ng-numbers .proof-row span{white-space:normal}
.ng-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--sage-light)}

/* La mentoría */
.ng-mentoria-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.ng-lead{margin-top:24px;font-size:18px;color:var(--sage);max-width:30em}
.ng-chips-title{font-size:17px;font-weight:600;margin-bottom:18px}
.ng-chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.ng-chips li{padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:var(--pale);font-size:15px;font-weight:600;color:var(--forest)}
.ng-motto{margin-top:36px;font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:700;letter-spacing:-.03em}

/* Cierre */
.ng-close-text{font-size:17px;color:var(--sage);margin:-14px 0 30px;max-width:28em}
.closing-copy .world-back{display:inline-block;margin-top:26px}

@media (max-width:1100px){
  .ng-agents{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .ng-fork-row,.ng-roles-grid,.ng-mentoria-grid{grid-template-columns:1fr;gap:32px}
  .ng-numbers .proof-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ng-hero .hero5-inner{padding:24px 20px 56px;gap:32px}
  .ng-hero .hero5-copy{padding:0}
  .ng-hero .hero5-copy:before{display:none}
  .ng-agents{grid-template-columns:1fr}
  .ng-fork-card{padding:28px 24px}
  .ng-hero .btn-row .btn{width:100%}
  .ng-play{width:76px;height:54px}
  .playing .ng-full{opacity:1}
}