/* guia.css — páginas /guias/*.html (guías animadas públicas de HaceloIA) */
:root{--brand:#E0714E;--brand-2:#F2926E;--brand-dark:#B24A2A;--ink:#17130F;--body:#4A423A;--muted:#8A7F74;--border:#E6DED3;--bg:#FBF8F3}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,-apple-system,sans-serif;line-height:1.5}
a{color:var(--brand-dark)}
.g-nav{height:64px;display:flex;align-items:center;gap:16px;padding:0 20px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.g-nav img{height:30px}
.g-nav .sp{flex:1}
.g-nav a.back{font-size:14px;font-weight:600;text-decoration:none;color:var(--body);display:inline-flex;align-items:center;gap:6px}
.g-nav a.back:hover{color:var(--brand-dark)}
.g-wrap{max-width:1180px;margin:0 auto;padding:36px 16px 72px}
.g-head{max-width:820px;margin-bottom:26px}
.g-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:14px}.g-eyebrow::before{content:'';width:22px;height:2px;background:var(--brand)}
.g-head h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(30px,4vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:0 0 12px}
.g-head p{font-size:17px;color:var(--body);margin:0}
.g-head p+p{margin-top:8px}

/* Marco escalado: adentro va el .app de 1280 px */
.g-card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.10);overflow:hidden}
.frame{position:relative;width:100%;overflow:hidden;background:#f8fafc;border-bottom:1px solid var(--border)}
.frame>.app{position:absolute!important;left:0!important;top:0!important;transform:scale(var(--k,1));transform-origin:0 0;pointer-events:none;user-select:none}

/* Barra de pasos (fuera del marco: se lee igual en el celular) */
.cap{position:relative;display:flex;align-items:center;gap:28px;padding:22px 28px;background:#fff}
.cap-bar{position:absolute;left:0;top:-1px;height:3px;background:var(--brand)}
.cap-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cap-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cap-chip{height:22px;padding:0 9px;border-radius:99px;background:#FDEEE9;color:#B24A2A;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center}
.cap-n{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cap h2{margin:0;font-size:22px;font-weight:600;line-height:1.2;font-family:'Fraunces',Georgia,serif}
.cap p{margin:0;font-size:14.5px;color:var(--body);line-height:1.45;max-width:800px}
.cap-ctl{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.cap-btns{display:flex;gap:8px;align-items:center}
.ctl{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:transparent;color:#1e293b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ctl:hover{background:#f1f5f9}
.ctl.play{width:52px;height:52px;border:0;background:var(--brand);color:#fff}
.ctl.play:hover{background:var(--brand-dark)}
.ctl:focus-visible,.dot:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ctl svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ctl.play svg{fill:currentColor;stroke:none}
.dots{display:flex;gap:2px}
.dot{height:24px;border:0;background:transparent;padding:0 2px;display:inline-flex;align-items:center;cursor:pointer}

.g-tip{margin-top:18px;display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--border);font-size:14.5px;color:var(--body)}
.g-tip b{color:var(--ink)}
.g-more{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.g-more a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--border);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.g-more a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.10)}
.g-more b{font-size:17px;font-family:'Fraunces',Georgia,serif;font-weight:600}
.g-more span{font-size:14px;color:var(--body)}
.g-more .go{color:var(--brand-dark);font-weight:700;font-size:14px}
.g-foot{margin-top:40px;text-align:center;font-size:13.5px;color:var(--muted)}

@media(max-width:760px){
  .g-wrap{padding:22px 12px 56px}
  .cap{flex-direction:column;align-items:stretch;gap:16px;padding:18px 16px}
  .cap h2{font-size:18px}
  .cap p{font-size:14px}
  .cap-ctl{align-items:center}
  .g-more{grid-template-columns:1fr}
}