/* ===================================================
   EDU Skills · Folla de estilos unificada
   Versión 1.0 · Setembro 2026
   Javier Feijóo López · javierfeijoo.eu
  Mesmo sistema de compoñentes que FP Skills (fpskills.css),
  con paleta propia para diferenciar o sitio.
   =================================================== */

/* ===== VARIABLES ===== */
:root{
  --primary:#246356;
  --primary-dark:#17483f;
  --primary-light:#e7f1ed;
  --accent:#b6533b;
  --success:#059669;
  --success-light:#ecfdf5;
  --warning:#d97706;
  --warning-light:#fffbeb;
  --danger:#dc2626;
  --danger-light:#fef2f2;
  --text-main:#1e293b;
  --text-muted:#64748b;
  --border:#cbd5e1;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --radius:8px;
  --content-w:820px;
}

/* ===== RESET / BASE ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text-main);
  background:var(--bg);
  line-height:1.7;
}
a{color:var(--primary);}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--primary);outline-offset:2px;
}

/* ===== ACCESIBILIDADE ===== */
.skip-link{
  position:absolute;left:-999px;top:0;
  background:var(--primary);color:#fff;padding:.6rem 1rem;z-index:100;
  text-decoration:none;font-weight:600;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

/* ===== NAVEGACIÓN PRINCIPAL ===== */
.site-nav{
  background:var(--text-main);color:#fff;padding:.7rem 1.25rem;font-size:.88rem;
}
.site-nav-inner{
  max-width:1080px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.site-nav-brand{color:#fff;font-weight:800;text-decoration:none;letter-spacing:.02em;}
.site-nav-brand:hover{opacity:.85;}
.site-nav-links{display:flex;gap:1.2rem;flex-wrap:wrap;margin:0;padding:0;list-style:none;}
.site-nav-links a{color:#cbd5e1;text-decoration:none;font-weight:600;}
.site-nav-links a:hover{color:#fff;}
.site-nav a:focus-visible{outline-color:#fff;}
.site-nav-links a.is-active,
.site-nav-links a[aria-current="page"]{color:#fff;border-bottom:2px solid #fff;padding-bottom:1px;}
.site-nav-lang{display:flex;align-items:center;gap:.35rem;}
.site-nav-lang a{
  color:#cbd5e1;text-decoration:none;font-weight:700;
  padding:.15rem .45rem;border-radius:5px;font-size:.82rem;
}
.site-nav-lang a:hover{color:#fff;}
.site-nav-lang a.is-active,
.site-nav-lang a[aria-current="true"]{background:#fff;color:var(--text-main);}
.site-nav-lang span{color:#64748b;}

/* ===== HERO ===== */
header.hero{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff;padding:3.2rem 1.25rem 2.6rem;text-align:center;
}
header.hero .eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;opacity:.85;font-weight:600;
}
header.hero h1{margin:.5rem 0 .5rem;font-family:inherit;font-size:2.1rem;line-height:1.25;}
header.hero p.lead{max-width:none;margin:0 auto 1.6rem;font-size:1.05rem;opacity:.95;}
.hero-meta{margin-top:1.4rem;font-size:.85rem;opacity:.85;}
.hero-meta a{color:#fff;text-decoration:underline;}

/* ===== BOTÓNS ===== */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;
  padding:.78rem 1.5rem;border-radius:6px;border:2px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);}

/* Primario: índigo (fondo claro) */
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}

/* Primario en hero: branco sobre fondo escuro */
header.hero .btn-primary{
  background:#fff;color:var(--primary-dark);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
header.hero .btn-primary:hover{box-shadow:0 6px 18px rgba(0,0,0,.25);}

/* Contorno (hero) */
.btn-outline{border-color:rgba(255,255,255,.6);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);}

/* Fantasma (tarxetas índice) */
.btn-ghost{
  background:transparent;color:var(--primary);
  border:2px solid var(--border);
}
.btn-ghost:hover{border-color:var(--primary);}

/* Sobre fondo escuro (índice) */
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn-on-dark:hover{background:rgba(255,255,255,.12);}

/* Descarga */
.btn-download{
  background:var(--primary);color:#fff;padding:.75rem 1.6rem;border-radius:8px;
  font-weight:700;text-decoration:none;display:inline-block;
}
.btn-download:hover{background:var(--primary-dark);}

/* ===== LAYOUT PRINCIPAL ===== */
main{max-width:var(--content-w);margin:0 auto;padding:2.6rem 1.25rem 1rem;}

/* ===== ÍNDICE: h2, selector de skill, helper ===== */
h2{font-size:1.4rem;color:var(--primary-dark);text-align:center;margin:0 0 .4rem;}
p.section-kicker{color:var(--text-muted);text-align:center;font-size:.92rem;margin:0 0 2rem;}

.picker{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr);margin-bottom:3rem;}
.skill-card{
  border:1px solid var(--border);border-radius:14px;padding:1.8rem 1.7rem;
  background:var(--bg-soft);display:flex;flex-direction:column;
  transition:box-shadow .15s ease,transform .15s ease;
}
.skill-card:hover{box-shadow:0 10px 28px rgba(23,72,63,.14);transform:translateY(-2px);}
.skill-card .icon{
  width:3rem;height:3rem;border-radius:8px;background:var(--primary-light);
  color:var(--primary);display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:800;margin-bottom:1rem;
}
.skill-card h3{margin:0 0 .3rem;font-size:1.25rem;color:var(--text-main);}
.skill-card .slug{
  display:inline-block;font-family:"Courier New",Consolas,monospace;font-size:.8rem;
  color:var(--primary);background:var(--primary-light);border-radius:6px;
  padding:.15rem .5rem;margin-bottom:.8rem;
}
.skill-card p.desc{color:var(--text-muted);margin:0 0 1.1rem;flex:1;}
.skill-card ul{margin:0 0 1.3rem;padding-left:1.2rem;color:var(--text-main);font-size:.93rem;}
.skill-card li{margin:.3rem 0;}
.skill-card .actions{display:flex;gap:.6rem;flex-wrap:wrap;}

.helper{
  border-left:5px solid var(--primary);background:var(--primary-light);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.3rem 1.5rem;margin:0 0 3rem;
}
.helper strong.label{
  color:var(--primary-dark);display:block;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.6rem;
}
.helper-row{display:flex;gap:.8rem;align-items:flex-start;margin:.6rem 0;}
.helper-row .q{font-weight:700;min-width:220px;}
.helper-row .a{color:var(--text-main);}
.helper-row .a strong{color:var(--primary-dark);}

/* ===== ÍNDICE: franxa de etapas educativas ===== */
.stages{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:1.4rem 0 2.4rem;}
.stages span{
  background:var(--primary-light);color:var(--primary-dark);font-weight:700;
  font-size:.85rem;padding:.4rem .9rem;border-radius:6px;
}

/* ===== GUÍAS: seccións, texto ===== */
section{margin-bottom:3.2rem;scroll-margin-top:3.2rem;}
section h2{
  font-size:1.5rem;color:var(--primary-dark);margin:0 0 .3rem;
  border-bottom:3px solid var(--primary-light);padding-bottom:.5rem;text-align:left;
}
section .section-kicker{color:var(--text-muted);font-size:.85rem;margin:0 0 1.1rem;text-align:left;}
h3{font-size:1.1rem;color:var(--text-main);margin:1.6rem 0 .5rem;}
p{margin:.6rem 0;}
ul,ol{padding-left:1.3rem;}
li{margin:.35rem 0;}
code,.code{
  font-family:"Courier New",Consolas,monospace;background:#f1f5f9;
  padding:.15rem .4rem;border-radius:4px;font-size:.92em;
}
table{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:.9rem;}
th,td{border:1px solid var(--border);padding:.5rem .6rem;text-align:left;vertical-align:top;}
th{background:var(--primary-light);color:var(--primary-dark);}
tr:nth-child(even) td{background:var(--bg-soft);}

/* ===== GUÍAS: TOC de sección (sticky) ===== */
nav.toc{
  position:sticky;top:0;z-index:10;
  background:#fff;border-bottom:1px solid var(--border);
  overflow-x:auto;white-space:nowrap;
}
nav.toc ul{
  list-style:none;display:flex;gap:1.3rem;margin:0;padding:.7rem 1.25rem;
  max-width:1040px;margin-inline:auto;
}
nav.toc a{
  color:var(--text-muted);text-decoration:none;font-size:.88rem;font-weight:600;
  padding:.3rem 0;border-bottom:2px solid transparent;white-space:nowrap;
}
nav.toc a:hover,nav.toc a:focus-visible{color:var(--primary);border-color:var(--primary);}

/* ===== GUÍAS: callouts ===== */
.callout{
  border-left:5px solid var(--primary);background:var(--primary-light);
  border-radius:0 var(--radius) var(--radius) 0;padding:.9rem 1.1rem;margin:1.1rem 0;
}
.callout strong.label{
  color:var(--primary-dark);display:block;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem;
}
.callout--aviso{border-color:var(--warning);background:var(--warning-light);}
.callout--aviso strong.label{color:var(--warning);}
.callout--importante{border-color:var(--danger);background:var(--danger-light);}
.callout--importante strong.label{color:var(--danger);}
.callout--tip{border-color:var(--success);background:var(--success-light);}
.callout--tip strong.label{color:var(--success);}

/* ===== GUÍAS: grid de tarxetas ===== */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:1.2rem 0;}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;background:var(--bg-soft);}
.card h4{margin:0 0 .35rem;color:var(--primary-dark);font-size:1rem;}
.card p{margin:0;font-size:.92rem;color:var(--text-muted);}
.card .tag{
  display:inline-block;font-size:.72rem;font-weight:700;color:var(--primary);
  background:var(--primary-light);border-radius:6px;padding:.1rem .5rem;margin-bottom:.4rem;
}
.card .swatch{
  display:inline-block;width:1rem;height:1rem;border-radius:4px;
  vertical-align:middle;margin-right:.3rem;border:1px solid rgba(0,0,0,.1);
}

/* ===== GUÍAS: apartados numerados (PROENS/estrutura) ===== */
.apartados{list-style:none;padding:0;margin:1.2rem 0;}
.apartados li{
  display:flex;gap:.9rem;align-items:flex-start;
  border-bottom:1px solid var(--border);padding:.7rem 0;
}
.apartados .num{
  flex:0 0 auto;min-width:3rem;text-align:center;
  background:var(--primary);color:#fff;font-weight:700;font-size:.82rem;
  border-radius:6px;padding:.25rem .3rem;
}
.apartados .txt strong{display:block;color:var(--text-main);}
.apartados .txt span{color:var(--text-muted);font-size:.92rem;}

/* ===== GUÍAS: pasos numerados ===== */
.steps{list-style:none;padding:0;margin:1.2rem 0;counter-reset:step;}
.steps li{counter-increment:step;position:relative;padding-left:3rem;margin-bottom:1.3rem;}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--primary);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:1.05rem;top:2.1rem;bottom:-1.3rem;
  width:2px;background:var(--border);
}
.steps li strong{display:block;color:var(--primary-dark);}

/* ===== GUÍAS: fórmula ===== */
.formula{
  text-align:center;font-size:1.35rem;font-weight:700;color:var(--primary-dark);
  background:var(--primary-light);border-radius:var(--radius);padding:1rem;margin:1.1rem 0;
}

/* ===== GUÍAS: FAQ accordion (HTML5 puro) ===== */
details.faq{border:1px solid var(--border);border-radius:var(--radius);margin:.6rem 0;overflow:hidden;}
details.faq summary{
  cursor:pointer;list-style:none;padding:.85rem 1.1rem;font-weight:600;
  background:var(--bg-soft);display:flex;justify-content:space-between;align-items:center;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";font-size:1.2rem;color:var(--primary);margin-left:1rem;}
details.faq[open] summary::after{content:"–";}
details.faq[open] summary{background:var(--primary-light);}
details.faq .faq-body{padding:.85rem 1.1rem;}

/* ===== GUÍAS: caixa de descarga ===== */
.download-box{
  border:2px dashed var(--primary);border-radius:var(--radius);
  background:var(--primary-light);padding:1.2rem 1.3rem;text-align:center;margin:1.3rem 0;
}
.download-box p{margin:.2rem 0 1rem;color:var(--text-muted);font-size:.92rem;}

/* ===== RODAPÉ ===== */
footer{
  background:var(--text-main);color:#cbd5e1;text-align:center;
  padding:2.4rem 1.25rem;margin-top:2rem;font-size:.88rem;
}
footer a{color:#fff;}
footer .license{margin-top:.5rem;opacity:.8;}
footer .site-footer-links{margin-top:1.1rem;opacity:.9;}
footer .site-footer-links a{color:#cbd5e1;text-decoration:underline;}
footer .site-footer-links a.is-active,
footer .site-footer-links a[aria-current="page"]{color:#fff;text-decoration:none;font-weight:700;}
footer{text-align:left;padding:2rem 1.5rem;}
.site-footer-inner{max-width:1600px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 2rem;align-items:start;}
.site-footer-author p{margin:0;}
.site-footer-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.75rem 1.5rem;}
.site-footer-actions>a{display:inline-flex;align-items:center;min-height:44px;}
.site-footer-navigation,.site-footer-attribution{grid-column:1/-1;}
.site-footer-navigation ul{display:flex;flex-wrap:wrap;gap:.4rem 2rem;list-style:none;padding:0;margin:0;}
.site-footer-navigation li{margin:0;}
.site-footer-navigation a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px;}
.site-footer-navigation a[aria-current="page"]{font-weight:700;text-decoration:none;}
.site-footer-attribution{margin:0;padding-top:1rem;border-top:1px solid #ffffff30;color:#cbd5e1;}
@media(max-width:720px){
  footer{padding:1.5rem 1rem;}
  .site-footer-inner{grid-template-columns:minmax(0,1fr);gap:1rem;}
  .site-footer-actions{justify-content:flex-start;}
  .site-footer-navigation ul{gap:.3rem 1.25rem;}
}

/* ===== RESPONSIVO ===== */
@media(max-width:720px){
  .picker{grid-template-columns:1fr;}
  header.hero h1{font-size:1.7rem;}
  .helper-row{flex-direction:column;}
  .helper-row .q{min-width:0;}
  table,thead,tbody,th,td,tr{display:block;}
  thead{display:none;}
  td{border:none;border-bottom:1px solid var(--border);padding:.3rem 0;}
  td::before{content:attr(data-label);font-weight:700;display:block;color:var(--primary-dark);font-size:.78rem;text-transform:uppercase;}
}
@media(max-width:600px){
  header.hero h1{font-size:1.6rem;}
  .btn-outline{display:block;margin:.6rem auto 0;}
  .site-nav-inner{gap:.6rem;}
}

/* ===== IMPRESIÓN ===== */
@media print{
  nav.toc,.btn,.btn-download,.download-box,.site-nav-lang{display:none;}
  header.hero{background:none;color:var(--text-main);padding:0 0 1rem;}
  .callout{background:none;border-left:3px solid #000;}
  body{color:#000;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* Portada: elección de tarefa e primeiros pasos */
.home{--content-w:1600px;--text-muted:#4b5e61;--primary:#205b50;--primary-dark:#123f38;--bg-soft:#f6f8f7;}
.home .site-nav{background:#123f38;}
.home .site-nav a{display:inline-flex;align-items:center;min-height:44px;}
.home .site-nav-links{gap:1rem;}
.home .site-nav-lang a{min-width:44px;justify-content:center;}
.home header.home-hero{background:#edf3ef;color:var(--primary-dark);text-align:left;padding:3.5rem 1.25rem;}
.home-hero-inner{max-width:1060px;margin:auto;}
.home header.hero .eyebrow{font-size:.8rem;letter-spacing:.055em;opacity:1;}
.home header.hero h1{font-family:inherit;font-size:clamp(2rem,4.8vw,3.5rem);font-weight:750;letter-spacing:-.045em;max-width:none;margin:1rem 0;line-height:1.12;}
.home header.hero p.lead{max-width:none;margin:0 0 1.6rem;color:var(--text-main);font-size:1.12rem;opacity:1;}
.home header.hero .btn-primary{background:var(--primary);color:#fff;box-shadow:none;}
.home header.hero .btn-primary:hover{background:var(--primary-dark);}
.hero-link{display:inline-block;margin:.7rem 0 .7rem 1.2rem;font-weight:600;text-underline-offset:4px;}
.hero-note{color:var(--text-muted);font-size:.85rem;margin:1.3rem 0 0;}
.home main{padding-top:3rem;}
.home-section{margin-bottom:3.5rem;}
.section-label{color:var(--primary);font-weight:700;font-size:.83rem;letter-spacing:.035em;margin:0 0 .5rem;}
.home section h2{border:0;padding:0;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.025em;line-height:1.25;}
.home section .section-kicker{font-size:1rem;max-width:none;margin:.7rem 0 1.6rem;}
.home .picker{margin-bottom:0;gap:1.25rem;}
.home .skill-card{background:#fff;border-color:#c8d7cf;padding:1.6rem;}
.home .skill-card:hover{transform:none;box-shadow:0 5px 18px rgba(23,72,63,.08);}
.home .skill-card-planning{border-top:4px solid #997047;}
.home .skill-card:not(.skill-card-planning){border-top:4px solid var(--primary);}
.home .card-category{font-size:.75rem;font-weight:750;letter-spacing:.06em;color:var(--primary);margin:0 0 .75rem;}
.home .skill-card-planning .card-category{color:#79522f;}
.home .skill-card h3{font-size:1.35rem;line-height:1.3;margin:0 0 .8rem;}
.home .skill-card .desc{font-size:1rem;}
.home .skill-card ul{font-size:.95rem;}
.home .actions{align-items:center;gap:1rem;}
.home .btn{font:inherit;font-weight:650;cursor:pointer;min-height:44px;padding:.65rem 1rem;}
.home .text-link{font-weight:650;text-underline-offset:4px;}
.package-link{font-size:.85rem;border-top:1px solid #dde5df;margin:1.2rem 0 0;padding-top:.8rem;}
.usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.usage-card{background:var(--bg-soft);border:1px solid #d5dfd9;border-radius:12px;padding:1.3rem;}
.usage-card h3{font-size:1.2rem;margin:.65rem 0 .5rem;}
.usage-card p,.usage-card li{font-size:.95rem;}
.usage-tag{color:var(--primary-dark);font-size:.73rem;font-weight:700;}
.usage-card ol{padding-left:1.2rem;}
.usage-card li{margin-bottom:.7rem;}
.usage-card .usage-note{font-size:.84rem;color:var(--text-muted);border-top:1px solid #d5dfd9;padding-top:.8rem;}
.instruction-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;margin-top:1.2rem;font-size:.9rem;}
.instruction-links a{padding:.4rem 0;text-underline-offset:4px;}
.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;}
.example-card{border:1px solid #d5dfd9;border-radius:12px;padding:1.4rem;scroll-margin-top:1.5rem;}
.example-card h3{margin:0 0 1rem;font-size:1.15rem;}
.example-card blockquote{margin:0 0 1rem;padding:1rem;border-left:3px solid #a3bcae;background:#f3f6f4;font-size:.95rem;}
.example-card .example-note{font-size:.85rem;color:var(--text-muted);margin-top:1rem;}
.copy-status{color:var(--primary-dark);font-weight:600;font-size:.9rem;}
.copy-status:empty{display:none;}
.review-note{font-size:.9rem;color:var(--text-muted);margin-top:1.5rem;}
.home-help{background:#edf3ef;border-radius:12px;padding:1.5rem;}
.home-help p{color:var(--text-muted);}
.help-links{display:flex;gap:.7rem 1.5rem;flex-wrap:wrap;}
.help-links a{padding:.5rem 0;font-weight:650;text-underline-offset:4px;}
.home [hidden]{display:none!important;}
@media(max-width:850px){.usage-grid{grid-template-columns:1fr;}.usage-card ol{max-width:none;}}
@media(max-width:720px){
  .home header.home-hero{padding:2.2rem 1.25rem;}
  .hero-link{display:block;margin:.8rem 0 0;}
  .example-grid{grid-template-columns:1fr;}
  .home .site-nav-inner{gap:.3rem .8rem;}
  .home .site-nav-links{order:3;width:100%;gap:.25rem 1rem;}
  .home .site-nav-lang{margin-left:auto;}
  .home .skill-card{padding:1.25rem;}
  .home main{padding-top:2rem;}
}
@media print{.home .copy-prompt,.home .hero-link{display:none;}.usage-grid,.example-grid{display:block;}.home header.home-hero{background:none;}}

/* Guías: índice lateral e contido distribuído en pantallas grandes. */
.guide-layout{width:calc(100% - 3rem);max-width:1600px;margin:auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:2rem;align-items:start;}
.guide-page .site-nav-inner,.templates-page .site-nav-inner{max-width:1600px;}
.guide-page nav.toc{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto;white-space:normal;border:1px solid var(--border);border-top:3px solid var(--primary);border-radius:8px;margin-top:2rem;background:#fff;}
.guide-page .toc-title{margin:0;padding:1rem 1rem .5rem;font-size:.95rem;font-weight:750;color:var(--primary-dark);}
.guide-page nav.toc ul{display:flex;flex-direction:column;gap:.15rem;padding:0 .6rem .8rem;}
.guide-page nav.toc li{margin:0;}
.guide-page nav.toc a{display:block;white-space:normal;padding:.5rem .4rem;min-height:44px;border:0;border-radius:5px;color:var(--primary);font-weight:400;font-size:.9rem;line-height:1.55;}
.guide-page nav.toc a:hover{background:var(--primary-light);}
.guide-page main{width:100%;max-width:none;min-width:0;padding:2rem 0 1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem 2rem;align-items:start;}
.guide-page main>section{min-width:0;margin:0;padding-bottom:1rem;scroll-margin-top:1.5rem;container-type:inline-size;}
.guide-page main>.guide-wide{grid-column:1/-1;}
.guide-page main>.guide-purpose{grid-column:1/-1;margin:0;padding:1rem 1.2rem;background:var(--primary-light);border-radius:8px;max-width:none;}
.guide-page section>p,.guide-page section>ul,.guide-page section>ol{max-width:none;}
.guide-page main>.guide-full-row{grid-column:1/-1;}
.guide-page .guide-full-row>p,.guide-page .guide-full-row>ul,.guide-page .guide-full-row>ol{max-width:none;}
.guide-page .grid{grid-template-columns:minmax(0,1fr);}
.guide-page .card{min-width:0;overflow-wrap:anywhere;}
@container(min-width:580px){
  .guide-page .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@container(min-width:900px){
  .guide-page .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@container(min-width:1160px){
  .guide-page .grid--four{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.guide-page section h2{font-size:1.35rem;}
.guide-page .card{padding:1rem;}
.guide-page .callout,.guide-page .download-box{margin:.8rem 0;}
.guide-page code{overflow-wrap:anywhere;}
.guide-page header.hero{padding:2.2rem 1.5rem;}
.templates-page main{max-width:none;padding-inline:0;}
.templates-page .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
@media(max-width:1100px){
  .guide-layout{display:block;width:calc(100% - 2rem);}
  .guide-page nav.toc{position:static;margin-top:1.5rem;max-height:none;}
  .guide-page nav.toc ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.15rem .75rem;}
  .guide-page nav.toc a{white-space:normal;}
}
@media(max-width:700px){.guide-page nav.toc ul{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:420px){.guide-page nav.toc ul{grid-template-columns:1fr;}}
@media(max-width:800px){
  .guide-page main{grid-template-columns:1fr;gap:1.5rem;}
  .guide-page main>.guide-wide{grid-column:auto;}
}
@media print{
  .guide-layout{display:block;width:100%;}
  .guide-page main{display:block;}
  .guide-page main>section{margin-bottom:1.5rem;}
}

/* Shared explanatory site: clear navigation and a hero on every page. */
body.home,body.guide-page,body.templates-page{background:#f4f7f6;}
.site-nav,.home .site-nav{background:#fff;color:var(--primary-dark);border-top:3px solid var(--primary);border-bottom:1px solid #d5dfd9;padding:1rem 1.5rem;}
.site-nav-inner,.guide-page .site-nav-inner,.templates-page .site-nav-inner{max-width:1600px;gap:1rem 1.5rem;}
.site-nav-brand{color:var(--primary-dark);font-size:1.15rem;}
.site-nav-links{gap:.5rem 1.2rem;}
.site-nav-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--primary-dark);font-weight:500;}
.site-nav-links a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:5px;}
.site-nav-links a.is-active,.site-nav-links a[aria-current="page"]{color:var(--primary-dark);border-color:var(--primary);font-weight:700;}
.site-nav-lang{background:var(--primary-light);border:1px solid #d5dfd9;border-radius:999px;padding:.2rem;gap:.2rem;}
.site-nav-lang a,.home .site-nav-lang a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.4rem .85rem;color:var(--primary-dark);border-radius:999px;}
.site-nav-lang a:hover{color:var(--primary-dark);background:#d8e8e0;}
.site-nav-lang a.is-active,.site-nav-lang a[aria-current="true"]{background:var(--primary);color:#fff;}
.site-nav a:focus-visible{outline-color:var(--primary);}
header.hero,.home header.home-hero,.guide-page header.hero{width:calc(100% - 3rem);max-width:1600px;margin:1.5rem auto 0;border-radius:14px;background:var(--primary);color:#fff;text-align:left;padding:3.5rem 3rem;}
.home-hero-inner{max-width:none;}
header.hero .eyebrow,.home header.hero .eyebrow{display:inline-block;margin:0 0 1.5rem;padding:.3rem .75rem;border:1px solid #ffffff60;border-radius:999px;opacity:1;font-size:.78rem;letter-spacing:.045em;}
header.hero h1,.home header.hero h1{font-family:inherit;font-size:clamp(2rem,3.6vw,3.2rem);font-weight:750;line-height:1.15;letter-spacing:-.035em;margin:0 0 1.4rem;max-width:none;}
header.hero p.lead,.home header.hero p.lead{max-width:none;margin:0 0 1.6rem;color:#fff;font-size:1.1rem;opacity:1;}
.home header.hero .btn-primary{background:#fff;color:var(--primary-dark);}
.home header.hero .btn-primary:hover{background:var(--primary-light);}
.hero-link,.hero-note,.home .hero-note{color:#fff;}
.hero-meta{max-width:none;}
.guide-page .card,.templates-page .card{background:#fff;}
@media(max-width:1100px){.site-nav-links{order:3;width:100%;}.site-nav-lang{margin-left:auto;}}
@media(max-width:720px){
  header.hero,.home header.home-hero,.guide-page header.hero{width:calc(100% - 2rem);padding:2rem 1.25rem;margin-top:1rem;}
  .site-nav,.home .site-nav{padding:.6rem 1rem;}
  .site-nav-links,.home .site-nav-links{gap:.2rem 1rem;}
  header.hero .eyebrow{border-radius:12px;}
}
@media print{header.hero,.home header.home-hero,.guide-page header.hero{width:100%;background:none;color:#000;margin:0;padding:0 0 1rem;}header.hero p.lead,.home header.hero p.lead,.hero-note,.home .hero-note{color:#000;}.site-nav{display:none;}}
/* Requests and format downloads share the guide controls. */
.prompt-block { display:block; margin:1rem 0; }
.prompt-block pre, .example-card pre { background:#102b46; color:#f4f8fc; border-radius:.5rem; padding:1rem; white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; }
.prompt-block code, .example-card code { font-family:Consolas,monospace; font-size:.95rem; color:inherit; background:none; }
.format-download { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.45rem .8rem; margin:.25rem; border:1px solid #a7c4df; border-radius:.35rem; background:#f2f7fc; color:#103b61; font-weight:700; text-decoration:none; }
.format-download:hover, .format-download:focus-visible { background:#dfedfa; outline:2px solid #1c6198; outline-offset:2px; }
.copy-status:not(:empty) { position:fixed; bottom:1rem; right:1rem; z-index:100; max-width:min(26rem,90vw); background:#123c60; color:white; border-radius:.5rem; padding:.8rem 1rem; box-shadow:0 3px 12px #0003; }