/* EasyKids2Go parent guide (27/9/2026): builds on landing.v2.css — same night theme, header, buttons and phones.
   Replaces the March guide (Edgar 26/9: "esto esta desactualizado"). */
.guide-hero { padding-block: 64px 80px; }
.guide-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.guide-hero h1 { font-size: clamp(34px, 4vw, 54px); font-weight: 800; margin-bottom: 20px; }
.guide-hero h1 .accent { color: var(--green); }
.guide-hero .hero-actions { margin-top: 28px; }
.guide-note { margin-top: 18px; color: var(--faint); font-size: 15px; }
.guide-hero .phones .phone { max-width: 260px; }
.paths { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px; align-items: start; }
.path { padding: 30px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.path.main { border-color: rgba(34, 197, 94, 0.45); }
.path .tag { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); }
.path.second .tag { color: var(--cyan); }
.path h3 { font-size: 22px; margin-bottom: 20px; }
.howto { list-style: none; counter-reset: howto; margin: 0; padding: 0; display: grid; gap: 16px; }
.howto li { counter-increment: howto; position: relative; padding-left: 48px; color: var(--soft); }
.howto li::before { content: counter(howto); position: absolute; left: 0; top: -3px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 99px; background: rgba(56, 189, 248, 0.14); border: 1px solid rgba(56, 189, 248, 0.5); color: var(--cyan); font-weight: 800; font-size: 15px; }
.howto li strong { color: var(--text); }
.path-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--soft); font-size: 15px; }
.code-sample { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.06em; }
.app-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; align-items: start; margin: 0; }
.app-shot { margin: 0; display: grid; gap: 22px; justify-items: center; text-align: center; }
.app-shot .phone { max-width: 300px; }
.app-shot h3 { font-size: 19px; margin-bottom: 6px; }
.app-shot p { color: var(--soft); font-size: 15px; max-width: 34ch; margin-inline: auto; }
.guide-checks { max-width: 860px; margin: 56px auto 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.guide-checks li { font-size: 15px; }
.help-box { margin: 56px auto 0; max-width: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.help-box article { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.help-box h3 { font-size: 18px; margin-bottom: 8px; }
.help-box p { color: var(--soft); font-size: 15px; }

/* The guide menu is short: keep it in the bar down to 900 px, then the phone menu. */
@media (max-width: 1240px) {
  .guide .main-nav { display: flex; }
  .guide .header-cta { display: inline-flex; }
  .guide .language-links { margin-left: 0; }
  .guide .menu-toggle { display: none; }
}
@media (max-width: 1100px) {
  .guide-grid, .paths { grid-template-columns: 1fr; }
  .guide-checks { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .guide .main-nav { display: none; }
  .guide .language-links { margin-left: auto; }
  .guide .menu-toggle { display: inline-grid; }
}
@media (max-width: 760px) {
  .app-shots, .help-box { grid-template-columns: 1fr; }
  .app-shots { gap: 52px; }
  .path { padding: 22px; }
}
@media (max-width: 560px) {
  .guide .header-cta { display: none; }
}