@font-face { font-family:'Pacifico'; src:url('../../../fonts/Pacifico-Regular.ttf') format('truetype'); font-display:swap; }
@page { size:A4 portrait; margin:12mm; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:0; overflow-x:hidden; color:var(--azul-noche); background:radial-gradient(circle at 8% 9%,rgba(123,203,91,.25),transparent 24rem),radial-gradient(circle at 92% 30%,rgba(255,213,74,.25),transparent 26rem),linear-gradient(180deg,#fffdf8,#f4ffef 55%,#eef9ff); font-family:var(--font-cuerpo); line-height:1.55; }
button { color:inherit; font:inherit; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:10px 14px; border-radius:12px; color:#fff; background:var(--azul-noche); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.activity-header { display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:20px; padding:12px clamp(16px,4vw,56px); border-bottom:1px solid rgba(39,75,143,.1); background:rgba(255,255,255,.92); box-shadow:0 8px 30px rgba(39,75,143,.07); }
.brand { display:flex; min-width:0; flex-direction:column; color:inherit; line-height:1.05; text-decoration:none; }
.brand__collection { font-family:var(--font-titulo); font-weight:800; }
.brand__signature,.signature { color:var(--naranja-texto); font-family:var(--font-firma); font-weight:400; }
.brand__signature { font-size:1.3rem; }
.back-link { display:inline-flex; min-height:44px; align-items:center; padding:9px 16px; border:2px solid rgba(39,75,143,.12); border-radius:999px; color:var(--azul-noche); background:#fff; font-family:var(--font-titulo); font-weight:700; text-decoration:none; }
.crafts-page { width:min(1120px,100%); margin:0 auto; padding:clamp(32px,5vw,68px) clamp(14px,3vw,36px) 64px; }
.crafts-intro { max-width:850px; margin:0 auto 32px; text-align:center; }
.eyebrow { display:inline-block; margin-bottom:8px; padding:7px 14px; border-radius:999px; background:var(--verde-menta); font-family:var(--font-titulo); font-size:.8rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.crafts-intro h1 { margin:0 0 12px; font-family:var(--font-titulo); font-size:clamp(2.2rem,6vw,4.3rem); line-height:1.04; }
.crafts-intro p { max-width:730px; margin:0 auto; color:var(--gris-suave); font-size:clamp(1rem,2vw,1.15rem); }
.craft-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:10px; }
.filter-button { min-height:42px; padding:8px 16px; border:2px solid rgba(39,75,143,.1); border-radius:999px; background:#fff; cursor:pointer; font-family:var(--font-titulo); font-weight:800; }
.filter-button.is-active { border-color:var(--verde-campo); background:var(--verde-menta); }
.results-count { margin:0 0 20px; color:var(--gris-suave); text-align:center; }
.guide-grid { display:grid; min-width:0; gap:24px; }
.guide-card { min-width:0; padding:clamp(18px,3vw,28px); border:1px solid rgba(39,75,143,.1); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 16px 42px rgba(39,75,143,.09); overflow-wrap:anywhere; }
.guide-card__header { display:flex; align-items:flex-start; gap:16px; }
.guide-card__header > div { min-width:0; }
.guide-card__icon { display:grid; width:64px; height:64px; flex:0 0 64px; place-items:center; border-radius:20px; background:var(--amarillo-claro); font-size:2rem; }
.guide-tag { color:var(--verde-texto); font-family:var(--font-titulo); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.guide-card h2 { margin:4px 0 4px; font-family:var(--font-titulo); font-size:clamp(1.4rem,3vw,1.85rem); line-height:1.15; }
.guide-card__header p { margin:0; color:var(--gris-suave); }
.guide-meta { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.guide-meta span { padding:7px 10px; border-radius:11px; background:var(--crema-papel); font-size:.84rem; font-weight:700; }
.guide-content { display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; padding:18px; border-radius:20px; background:#f8fcff; }
.guide-content h3 { margin:0 0 8px; font-family:var(--font-titulo); font-size:1rem; }
.guide-content ul,.guide-content ol { margin:0; padding-left:21px; color:var(--gris-texto); }
.guide-content li+li { margin-top:5px; }
.safety-note { margin:14px 0; padding:10px 13px; border-left:4px solid var(--naranja-icono); border-radius:0 10px 10px 0; color:#654123; background:#fff4e5; font-size:.9rem; }
.print-guide,.template-link { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:9px 15px; border:0; border-radius:13px; cursor:pointer; font-family:var(--font-titulo); font-weight:800; text-decoration:none; }
.print-guide { color:#fff; background:var(--azul-noche); }
.template-link { color:var(--azul-noche); background:var(--celeste-claro); }
.guide-actions { display:flex; flex-wrap:wrap; gap:10px; }
.puppet-preview { display:flex; height:155px; justify-content:center; gap:10px; margin:16px 0; overflow:hidden; border-radius:18px; background:linear-gradient(145deg,#fff,#eaf9ff); }
.puppet-preview img { width:105px; height:155px; object-fit:contain; }
.family-note { display:flex; align-items:flex-start; gap:12px; margin-top:24px; padding:17px 20px; border-radius:20px; color:var(--gris-texto); background:rgba(255,255,255,.9); box-shadow:0 9px 25px rgba(39,75,143,.07); }
.family-note > span { font-size:1.7rem; }
.family-note p { margin:0; }
.activity-footer { padding:28px 16px; color:rgba(255,255,255,.82); background:var(--azul-noche); text-align:center; }
.activity-footer p { margin:0; }
.activity-footer .signature { color:var(--amarillo-sol); font-size:1.15rem; }
:focus-visible { outline:3px solid var(--naranja-icono); outline-offset:3px; }
@media (max-width:700px) { .guide-content { grid-template-columns:1fr; gap:16px; } }
@media (max-width:560px) {
  .activity-header { gap:8px; align-items:flex-start; }
  .back-link { padding:8px 12px; font-size:.78rem; }
  .back-link__wide { display:none; }
  .crafts-intro { text-align:left; }
  .crafts-intro h1 { font-size:2.05rem; }
  .craft-filter { justify-content:flex-start; }
  .guide-card__header { gap:11px; }
  .guide-card__icon { width:52px; height:52px; flex-basis:52px; border-radius:16px; font-size:1.6rem; }
  .guide-content { padding:14px; }
  .puppet-preview img { width:min(30%,105px); height:auto; }
}
@media print {
  body { min-width:0; color:#1e355f; background:#fff; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  body.printing-guide * { visibility:hidden!important; }
  body.printing-guide .is-print-target,body.printing-guide .is-print-target * { visibility:visible!important; }
  body.printing-guide .is-print-target { position:absolute; top:0; left:0; width:100%; padding:0; border:0; border-radius:0; box-shadow:none; }
  body.printing-guide .print-guide,body.printing-guide .template-link { display:none!important; }
  body.printing-guide .guide-card__header { margin-bottom:4mm; }
  body.printing-guide .guide-card__icon { width:18mm; height:18mm; flex-basis:18mm; }
  body.printing-guide .guide-meta { margin:4mm 0; }
  body.printing-guide .guide-content { gap:7mm; padding:5mm; }
  body.printing-guide .puppet-preview { height:42mm; }
  body.printing-guide .puppet-preview img { width:29mm; height:42mm; }
  body.printing-guide .safety-note { margin:4mm 0 0; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

:root { --verde-texto:#397522; --cielo-texto:#176B9A; }

/* Al imprimir una guia, quitar el resto del flujo para evitar hojas vacias. */
@media print {
  body.printing-guide .skip-link,
  body.printing-guide .activity-header,
  body.printing-guide .activity-footer,
  body.printing-guide .crafts-intro,
  body.printing-guide .craft-filter,
  body.printing-guide .results-count,
  body.printing-guide .family-note,
  body.printing-guide .guide-card:not(.is-print-target) { display:none!important; }
  body.printing-guide .crafts-page,
  body.printing-guide .guide-grid { display:block!important; margin:0!important; padding:0!important; max-width:none!important; width:100%!important; }
  body.printing-guide .is-print-target { position:static!important; break-inside:avoid; }
}