/* Centro de ayuda (/ayuda/) — componentes del mockup sellado
   designs/sealed/ayuda-20261010. Se carga después de base, content y
   article: el layout 720 + columna derecha, la miga, el TOC, el FAQ y la
   CTA de producto salen de article.css; acá solo lo que el blog no tiene. */
:root{--g300:#CBD5E1}

/* ── Índice ─────────────────────────────────────────────────────────── */
.hero{padding:56px 0 36px}

.hero h1{font-size:40px;font-weight:800;line-height:1.15;max-width:22ch}

.hero p{margin-top:12px;font-size:18px;line-height:1.65;color:var(--g600);max-width:56ch}

.grp{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g500);margin:8px 0 14px}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:36px}

.card{border:1px solid var(--border);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:10px;background:#FFFFFF;color:inherit}

.card:hover{color:inherit;text-decoration:none}

.card .tag{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--g500)}

.card h3{font-size:20px;font-weight:800;line-height:1.3}

.card p{color:var(--g600);font-size:15.5px;line-height:1.65}

.card .more{margin-top:auto;color:var(--signal-text)}

.contact{background:var(--base);border-top:1px solid var(--border);padding:36px 0;font-size:15.5px;line-height:1.65;color:var(--g600)}

.contact a{text-decoration:underline}

/* ── Guía ───────────────────────────────────────────────────────────── */
/* Los enlaces dentro del texto se subrayan (el color solo no basta, WCAG
   1.4.1); los de navegación (miga, TOC, tarjetas, botones) siguen sin subrayar. */
article p a,article li a,article summary a{text-decoration:underline}

article .lead{font-size:18px;color:var(--g600);margin:16px 0 8px;max-width:62ch}

article h2 .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--soft);color:var(--signal-text);font-size:15px;font-weight:700;margin-right:12px;vertical-align:middle}

figure{margin:20px 0 28px}

.prodcta{margin-top:40px}

figure picture{display:block}

figure img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:8px}

figcaption{font-size:13px;color:var(--g500);margin-top:8px}

.tip{background:var(--soft);border-radius:8px;padding:18px 22px;margin:20px 0 28px}

.tip .lbl{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--signal-text)}

.tip p{margin:6px 0 0;font-size:15.5px}

.faq details{border-bottom:1px solid var(--border);padding:16px 22px}

.faq details:last-child{border-bottom:0}

.faq summary{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;cursor:pointer}

.faq details p{margin:10px 0 16px;font-size:15.5px}

.toc .other{margin-top:28px;padding-top:16px;border-top:1px solid var(--border)}

.toc .other a{border:0;padding-left:0;font-weight:700}

/* ── Tutorial de 3 pasos (mismo bloque que en la app), CSS puro ─────── */
.tut-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 28px}

.tut-step{border:1px solid var(--border);border-radius:8px;padding:18px}

.tut-step .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--soft);color:var(--signal-text);font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;margin-bottom:10px}

.tut-step h3{font-size:16px;font-weight:700;margin:0 0 4px}

.tut-step p{font-size:14.5px;color:var(--g600);margin:0 0 12px}

.tut-demo{background:var(--base);border-radius:4px;padding:12px 14px;font-size:14px;line-height:1.5}

.tut-demo .sel{background:var(--soft);box-shadow:inset 0 -2px 0 var(--signal-strong);animation:tutSel 3s ease-in-out 3 forwards}

@keyframes tutSel{0%,20%{background:transparent;box-shadow:none}35%,100%{background:var(--soft);box-shadow:inset 0 -2px 0 var(--signal-strong)}}

.fake-input{margin-top:8px;border:1px solid var(--g300);border-radius:4px;background:#FFFFFF;padding:6px 10px;font-size:13px;min-height:30px}

.fake-input span{display:inline-block;color:var(--ink);border-right:2px solid var(--ink);white-space:nowrap;overflow:hidden;width:0;animation:tutType 3s steps(12) 3 forwards}

@keyframes tutType{0%,25%{width:0}70%,100%{width:7.5em}}

.fake-btn{display:inline-block;margin-top:8px;border:1px solid var(--ink);border-radius:4px;padding:4px 10px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;color:var(--ink);animation:tutPress 3s ease-in-out 3 forwards}

@keyframes tutPress{0%,45%{background:#FFFFFF}55%,60%{background:var(--g100)}70%,100%{background:#FFFFFF}}

.tut-demo .done{display:block;margin-top:6px;color:var(--signal-text);font-weight:700;font-size:13px;opacity:0;animation:tutDone 3s ease-in-out 3 forwards}

@keyframes tutDone{0%,65%{opacity:0}80%,100%{opacity:1}}

/* Tres ciclos de 3 s y se queda en el estado final (decisión de Eric: no es
   infinita, pero 9 s siguen superando los 5 s de WCAG 2.2.2). Sin movimiento: el bloque se queda en su estado final, legible. */
@media (prefers-reduced-motion:reduce){
  .tut-demo .sel,.fake-input span,.fake-btn,.tut-demo .done{animation:none}
  .fake-input span{width:auto;border-right:0}
  .fake-btn{background:#FFFFFF}
  .tut-demo .done{opacity:1}
}

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .tut-steps{grid-template-columns:1fr}
}