:root{
  --bg:#fffaf3; --ink:#2b2a33; --muted:#6a6773; --card:#ffffff; --line:#eadfce;
  --c1:#f08a5d; --c2:#3a7ca5; --c3:#6bab90; --c4:#e8b94a; --c5:#9b7ede;
  --accent:#3a7ca5; --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

header.hero{background:linear-gradient(135deg,#f9d9b8,#cfe6ef);padding:56px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#7a4a2a}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:.3em 0}
.hero p{max-width:60ch;margin:.4em 0 1.2em}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;padding:.8em 1.4em;border-radius:999px;font-weight:700}
.btn:hover{background:#000}
.btn.alt{background:#fff;color:var(--ink);border:2px solid var(--ink);margin-left:.5rem}
.motto{margin-top:1.4rem;font-weight:600;font-style:italic}

nav.toc{position:sticky;top:0;z-index:20;background:rgba(255,250,243,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
nav.toc .bar{max-width:1100px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between}
nav.toc .brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:.98rem}
nav.toc button{display:none;align-items:center;gap:.6em;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.55em 1.1em;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.burger{position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
nav.toc.open .burger{background:transparent}
nav.toc.open .burger::before{top:0;transform:rotate(45deg)}
nav.toc.open .burger::after{top:0;transform:rotate(-45deg)}
nav.toc ul{list-style:none;margin:0;padding:0;display:flex;gap:.3rem}
nav.toc ul a{display:flex;align-items:center;gap:.6em;text-decoration:none;color:var(--ink);padding:.45em .9em;border-radius:999px;font-size:.92rem;font-weight:600;white-space:nowrap}
nav.toc ul a b{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--ink);color:#fff;font-size:.8em}
nav.toc ul a:hover{background:#f2e6d3}
nav.toc{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 max(20px,calc((100vw - 1100px)/2 + 20px))}
nav.toc .bar{padding:8px 0;max-width:none;margin:0}
section,header{scroll-margin-top:64px}
section{padding:56px 0 8px;scroll-margin-top:64px}
section>.wrap>h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin:0 0 .2em}
.num{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--ink);color:#fff;font-size:.8em;margin-right:.4em}
.lead{color:var(--muted);max-width:70ch}
h3{margin:2em 0 .5em;font-size:1.25rem}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:.92rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f6ecdc;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;white-space:nowrap}
.note{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.blank td{height:2.4em}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.card h4{margin:0 0 .4em;font-size:1rem}
.card p{margin:.3em 0;font-size:.92rem}
.signals .card{border-top:5px solid var(--c1)}
.signals .card:nth-child(2){border-top-color:var(--c2)}
.signals .card:nth-child(3){border-top-color:var(--c3)}
.signals .card:nth-child(4){border-top-color:var(--c4)}
.signals .card:nth-child(5){border-top-color:var(--c5)}
.signals .card:nth-child(6){border-top-color:var(--ink)}
.warn{background:#fff3e0;border-left:6px solid var(--c1);padding:14px 18px;border-radius:12px;margin:1.2rem 0}
ol.steps{padding-left:1.2em}
ol.steps li{margin:.4em 0}

.compare{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.compare .bad{border-left:6px solid #d9534f}
.compare .good{border-left:6px solid var(--c3)}

details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:12px 0;padding:0 18px}
details summary{cursor:pointer;font-weight:700;padding:14px 0}
details[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}
details>*:last-child{margin-bottom:18px}

.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.tabs button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:.5em 1.1em;font:inherit;font-weight:700;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.act{border-top:5px solid var(--c3)}
.act dt{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:.6em}
.act dd{margin:0;font-size:.92rem}
.act h4{font-size:1.05rem}

.pics{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.pic{background:#fff;border:3px solid var(--ink);border-radius:18px;text-align:center;padding:14px 8px;font-weight:800;letter-spacing:.04em}
.pic .ico{display:block;font-size:2.6rem;line-height:1.2}
.pic.blank-card{border-style:dashed;color:var(--muted)}
.velcro{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1rem 0}
.velcro div{padding:18px;border-radius:14px;text-align:center;font-weight:800;border:3px dashed var(--ink)}
.velcro .now{background:#fde8d2}.velcro .done{background:#dcefe6}

.emos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.emo{border-radius:20px;text-align:center;padding:22px 8px;font-weight:800;color:#2b2a33;border:3px solid var(--ink)}
.emo .ico{display:block;font-size:3.4rem;line-height:1.1}
.emo.e1{background:#fff2b3}.emo.e2{background:#cfe3f7}.emo.e3{background:#f9c4bd}.emo.e4{background:#dcc9f0}.emo.e5{background:#cdebd9}
.emo.free{background:#fff;border-style:dashed}

.templates .card h4{display:flex;gap:.5em;align-items:baseline}
.badge{font-size:.75rem;background:var(--ink);color:#fff;border-radius:6px;padding:.1em .5em}

footer{margin-top:64px;padding:32px 0;background:var(--ink);color:#e8e4dc;font-size:.9rem}
footer a{color:#fff}

.linkbtn{background:none;border:0;padding:0;font:inherit;color:#fff;text-decoration:underline;cursor:pointer}
button.btn{border:0;font:inherit;font-weight:700;cursor:pointer}

/* ===== Puzle de verificación ===== */
.noscroll{overflow:hidden}
.pz[hidden]{display:none}
.pz{position:fixed;inset:0;z-index:100;background:rgba(43,42,51,.6);display:grid;place-items:center;padding:16px}
.pz-box{position:relative;background:#fff;border-radius:22px;width:100%;max-width:440px;padding:26px 22px 20px;box-shadow:0 20px 60px rgba(0,0,0,.35);max-height:calc(100dvh - 32px);overflow-y:auto}
.pz-box h2{font-size:1.2rem;margin:0 2rem .4em 0;line-height:1.25}
.pz-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:#f2e6d3;font-size:1.1rem;cursor:pointer}
.pz-q{font-weight:700;font-size:1.1rem;margin:.6em 0 1em;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.dot{display:inline-block;width:2em;height:2em;border-radius:50%;border:3px solid var(--ink)}
.pz-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pz-opt{min-height:60px;font:inherit;font-weight:800;font-size:1.3rem;text-transform:capitalize;background:#fff7ea;border:3px solid var(--ink);border-radius:16px;cursor:pointer;touch-action:manipulation}
.pz-opts.emoji .pz-opt{font-size:2.4rem;min-height:84px}
.pz-opt:active{transform:scale(.97)}
.pz-opt.picked{background:#dcefe6;border-color:var(--c3);opacity:.7}
.pz-count{font-size:2rem;letter-spacing:.1em;line-height:1.4;margin:0 0 1rem;word-break:break-all}
.pz-slide{position:relative;padding:22px 4px}
.pz-slide .tgt{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--c3);border:3px solid var(--ink);transform:translate(-50%,-50%);pointer-events:none}
.pz-slide input{width:100%;height:44px;margin:0;accent-color:var(--c1);position:relative}
.pz-msg{min-height:1.6em;font-weight:700;margin:1rem 0 .4rem}
.pz-msg.err{color:#c0392b}.pz-msg.good{color:#2f8a5b}
.pz-new{background:none;border:0;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:.6em 0;min-height:44px}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}

@media print{
  .pz{display:none!important}
  nav.toc,.tabs,.btn{display:none}
  body{background:#fff;font-size:12px}
  section{page-break-before:always;padding-top:0}
  details{display:block}
}

/* ===== Móvil ===== */
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  header.hero{padding:32px 0 28px}
  .hero .btn{display:block;text-align:center;margin:0 0 .6rem}
  .btn.alt{margin-left:0}
  section{padding:40px 0 4px}

  nav.toc{display:block;padding:0}
  nav.toc .bar{padding:8px 16px}
  nav.toc button{display:inline-flex}
  nav.toc ul{display:none;flex-direction:column;gap:0;padding:6px 12px 14px;border-top:1px solid var(--line);max-height:calc(100vh - 60px);overflow-y:auto}
  nav.toc.open ul{display:flex}
  nav.toc ul a{padding:.85em .8em;font-size:1.02rem;border-radius:12px;white-space:normal}

  /* Tablas -> tarjetas apiladas */
  .table-wrap{border:0;background:none;overflow:visible}
  table{min-width:0;display:block}
  thead{display:none}
  tbody{display:block}
  tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 12px;padding:4px 14px 10px}
  th,td{display:block;border:0;padding:6px 0}
  td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:1px}
  td:first-child{white-space:normal;font-size:1.05rem;border-bottom:2px solid var(--line);padding:8px 0;margin-bottom:4px}
  td:first-child::before{display:none}
  tr:has(> th[colspan]){background:#f6ecdc;padding:2px 14px}
  /* Plantillas en blanco: casillas para escribir */
  .blank td:not(:first-child){border-bottom:1px dashed var(--line);min-height:2.2em}
  .blank td:not(:first-child):empty::after{content:"\00a0"}
  .blank tr:not(:has(> td:first-child:not(:empty))){min-height:5em}

  .grid{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .pics{grid-template-columns:repeat(2,1fr)}
  .emos{grid-template-columns:repeat(2,1fr)}
  .velcro{grid-template-columns:1fr}
  .tabs button{flex:1 1 100%;text-align:center}
  details{padding:0 14px}
  h3{margin-top:1.6em}
}