/* =============================================================
   Nombra — «El registro, en voz alta»
   1. Tokens  2. Reset  3. Shell  4. Cabecera  5. Herramienta
   6. Resultados  7. Rail  8. Barra de lista  9. Contenido/SEO
   10. Legal  11. Anuncios  12. Responsive  13. Reduced motion
   ============================================================= */

/* 1. Tokens ---------------------------------------------------- */
:root{
  --paper:#F6F1E7;
  --paper-2:#FFFDF8;
  --rail:#EFE8D9;
  --ink:#17150F;
  --ink-soft:#57503F;
  --ink-mute:#6E6656;        /* 5.04:1 sobre papel — texto pequeño (significados, chips, etiquetas) */
  --ink-faint:#857B68;       /* solo decorativo: placeholder del hueco de anuncio */
  --line:#DED5C4;
  --line-2:#E6DCC9;
  --line-3:#C3B8A3;
  --accent:#E4501E;          /* relleno: tinta encima = 4.75:1 */
  --accent-strong:#C43D0C;   /* el mismo naranja para TEXTO sobre papel = 4.64:1 */
  --accent-soft:#FFF3E7;
  --teal:#2A7264;            /* 5.06:1 en ambos sentidos */
  --plum:#6A4FA3;
  --tone:var(--accent);      /* rellenos */
  --tone-text:var(--accent-strong); /* textos del mismo tono */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:'Bricolage Grotesque',var(--sans);
  color-scheme:light;
}
body[data-tone="teal"]{--tone:var(--teal);--tone-text:var(--teal)}
body[data-tone="plum"]{--tone:var(--plum);--tone-text:var(--plum)}

/* 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:#E4E2DC;color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding:0 0 72px;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-strong)}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:16px;z-index:99;background:var(--accent);color:var(--ink);padding:10px 16px;font-weight:700}
.skip-link:focus{top:16px}

/* 3. Shell ----------------------------------------------------- */
.shell{max-width:1180px;margin:0 auto;background:var(--paper);border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.cols{display:grid;grid-template-columns:1fr 340px}
.col-main{border-right:1px solid var(--ink);min-width:0}
.pad{padding:0 40px}

/* 4. Cabecera -------------------------------------------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 40px;background:var(--ink);color:var(--paper)}
.brand{display:flex;align-items:baseline;gap:12px}
.brand b{font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8D8272}
.nav{display:flex;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.nav a{padding:8px 14px;border:1px solid #3D362C;color:#CFC5B2}
.nav a:hover{border-color:var(--paper);color:var(--paper)}
.nav a[aria-current="page"]{background:var(--tone);border-color:var(--tone);color:var(--ink);font-weight:600}
body[data-tone="teal"] .nav a[aria-current="page"],
body[data-tone="plum"] .nav a[aria-current="page"]{color:var(--paper)}

/* 5. Herramienta ----------------------------------------------- */
.hero{padding:40px 40px 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tone-text)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4.1rem);line-height:.98;letter-spacing:-.02em;margin-top:14px;max-width:15ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.subtitle{margin-top:14px;max-width:54ch;font-size:16.5px;color:var(--ink-soft)}

.tool-card{margin:28px 40px 0;border:1px solid var(--ink);background:var(--paper-2)}
.tool-head{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.tool-body{padding:20px 18px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end}
.fields{display:flex;flex-direction:column;gap:14px}
.field{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:14px}
.field-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.chip-group{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;padding:9px 15px;border:1px solid var(--line-3);background:transparent;color:var(--ink-mute);transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-generate{
  display:flex;align-items:center;gap:12px;background:var(--tone);color:var(--paper);
  border:1px solid var(--ink);padding:20px 26px;font-family:var(--display);font-weight:800;
  font-size:22px;letter-spacing:-.02em;box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
}
body[data-tone="accent"] .btn-generate{color:var(--ink)}
.btn-generate:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn-generate:active{transform:translate(5px,5px);box-shadow:1px 1px 0 var(--ink)}
.btn-generate svg{width:20px;height:20px}

/* 6. Resultados ------------------------------------------------ */
.results-head{margin:30px 40px 0;display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:1px solid var(--ink);padding-bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.results{margin:0 40px;display:grid;grid-template-columns:1fr 1fr;column-gap:34px}
.result{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2);animation:enter .3s cubic-bezier(.16,1,.3,1) backwards}
.result:hover{background:var(--paper-2)}
.result.is-fav{background:var(--accent-soft)}
@keyframes enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.r-num{font-family:var(--mono);font-size:11px;color:var(--ink-mute);width:18px;flex:none}
.r-body{flex:1;min-width:0}
.r-name,.r-meaning{display:block}
.fav-row .fn,.fav-row .fm{display:block}
.r-name{font-family:var(--serif);font-size:28px;line-height:1.05;word-break:break-word}
.r-meaning{font-size:12.5px;color:var(--ink-mute)}
.r-copy{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-mute);
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:4px 6px}
.r-copy:hover{color:var(--ink)}
.r-fav{font-size:14px;color:var(--ink-mute);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:4px}
.r-fav:hover{color:var(--accent-strong)}
.result.is-fav .r-fav{color:var(--accent-strong)}
.privacy{display:flex;align-items:flex-start;gap:10px;margin:20px 40px 34px;font-size:13px;color:var(--ink-mute);max-width:66ch}
.privacy svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--accent)}

/* 7. Rail ------------------------------------------------------ */
.rail{padding:26px 22px;background:var(--rail);display:flex;flex-direction:column;gap:22px}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:7px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.fav-list{display:flex;flex-direction:column}
.fav-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.fav-row .fn{font-family:var(--serif);font-size:21px;line-height:1.1;word-break:break-word}
.fav-row .fm{font-size:11.5px;color:var(--ink-mute)}
.fav-row button{color:var(--accent-strong);font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.fav-empty{padding:14px 0;font-size:13px;color:var(--ink-mute)}
.rail-actions{display:flex;gap:7px;margin-top:14px}
.btn-line{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px;border:1px solid var(--ink);background:transparent;flex:1}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-line.is-muted{flex:none;padding:9px 11px;border-color:var(--line-3);color:var(--ink-mute)}
.btn-line.is-muted:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* 8. Barra de lista -------------------------------------------- */
.favbar[hidden]{display:none}
.favbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);padding:11px 24px;border-top:1px solid #3D362C}
.favbar-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8D8272;flex:none}
.favbar-items{display:flex;gap:7px;flex:1;overflow-x:auto;scrollbar-width:none}
.favbar-items::-webkit-scrollbar{display:none}
.favbar-items span{display:flex;align-items:center;gap:8px;border:1px solid #3D362C;padding:6px 11px;font-family:var(--serif);font-size:17px;white-space:nowrap}
.favbar-items button{font-family:var(--mono);font-size:11px;color:#8D8272;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.favbar-items button:hover{color:var(--accent)}
.favbar-copy{background:var(--accent);color:var(--ink);padding:9px 15px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;flex:none}

/* 8b. Aviso de acción (visible + anunciado) ---------------------- */
.toast{
  position:fixed;right:18px;bottom:88px;z-index:30;
  background:var(--ink);color:var(--paper);
  padding:11px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  box-shadow:5px 5px 0 var(--accent);max-width:min(78vw,340px);
}
.toast[hidden]{display:none}

/* 9. Contenido / SEO ------------------------------------------- */
.content{padding:36px 40px;border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:40px}
h2{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.01em}
.steps{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.step{display:grid;grid-template-columns:34px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:13px}
.step-num{font-family:var(--display);font-weight:800;font-size:15px;color:var(--accent-strong)}
.step h3{font-size:15px;font-weight:600}
.step p{font-size:14px;color:var(--ink-soft);margin-top:3px}
details{border-top:1px solid var(--line);padding:12px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
details summary{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:14.5px;cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--ink-mute)}
details[open] summary::after{content:"−";color:var(--accent-strong)}
details p{margin-top:8px;font-size:14px;color:var(--ink-soft);max-width:60ch}
.seo-text{padding:0 40px 8px;max-width:70ch}
.seo-text p{font-size:15px;color:var(--ink-soft);margin-top:12px}
.more{padding:0 40px 40px}
.tool-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.tool-link{border:1px solid var(--ink);padding:20px;background:var(--paper-2);transition:box-shadow .15s ease,transform .15s ease}
.tool-link:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-1px,-1px);color:inherit}
.tool-link .tl-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tl-tone,var(--accent-strong))}
.tool-link h3{font-family:var(--serif);font-weight:400;font-size:25px;margin-top:5px}
.tool-link p{font-size:14px;color:var(--ink-soft);margin-top:4px}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 40px;background:var(--ink);color:#8D8272;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
footer a{color:var(--paper)}
footer .foot-links{display:flex;gap:18px}

/* 10. Legal ---------------------------------------------------- */
.legal{padding:34px 40px 40px;max-width:74ch}
.legal h1{font-size:clamp(2.2rem,4vw,2.9rem);max-width:20ch}
.legal h2{font-size:24px;margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.legal h2:first-of-type{border-top-color:var(--ink)}
.legal p,.legal li{font-size:15px;color:var(--ink-soft);margin-top:10px}
.legal ul{margin-top:6px;padding-left:18px}
.legal code{font-family:var(--mono);font-size:13px;background:var(--rail);padding:1px 5px}
.legal .mark{border-bottom:1px solid var(--accent)}
.data-grid{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:14.5px;color:var(--ink-soft);margin-top:12px}
.data-grid dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.data-grid dd{margin:0}
.todo{margin-top:22px;border:1px dashed var(--line-3);background:var(--paper-2);padding:12px 14px;font-family:var(--mono);font-size:11px;color:var(--ink-mute)}
.legal-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn-solid{background:var(--accent);color:var(--ink);border:1px solid var(--ink);padding:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn-solid:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

/* 11. Anuncios ------------------------------------------------- */
/* Mientras no haya un anuncio real dentro, el hueco no se ve ni ocupa sitio:
   un visitante no debe encontrarse recuadros vacíos con medidas escritas. */
.ad-label{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.ad-slot{margin-top:5px;display:flex;align-items:center;justify-content:center}

/* En cuanto AdSense inyecta su bloque, el hueco recupera etiqueta y altura.
   La altura se reserva desde el primer pintado, así el anuncio no descoloca
   nada al terminar de cargar. */
div:has(> .ad-slot .adsbygoogle) > .ad-label{display:block}
.ad-slot--rail:has(.adsbygoogle){min-height:600px}
.ad-slot--incontent:has(.adsbygoogle){min-height:250px}
.ad-wrap{padding:0 40px 8px}

/* 12. Responsive ----------------------------------------------- */
@media (max-width:1000px){
  .cols{grid-template-columns:1fr}
  .col-main{border-right:0}
  .rail{border-top:1px solid var(--ink)}
  .ad-slot--rail{min-height:280px}
  .content{grid-template-columns:1fr;gap:28px}
  .tool-links{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pad,.hero,.privacy,.results,.results-head,.tool-card,.content,.seo-text,.more,.ad-wrap,.legal{padding-left:18px;padding-right:18px}
  .tool-card{margin-left:18px;margin-right:18px;padding:0}
  .results,.results-head,.privacy{margin-left:18px;margin-right:18px;padding-left:0;padding-right:0}
  .hero{padding-top:26px}
  .topbar{padding:12px 18px}
  .nav a{padding:7px 10px}
  .results{grid-template-columns:1fr}
  .tool-body{grid-template-columns:1fr}
  .field{grid-template-columns:1fr;gap:7px}
  .btn-generate{width:100%;justify-content:space-between;font-size:20px;padding:17px 20px}
  footer{padding:16px 18px}
  .favbar{padding:9px 14px;gap:10px}
  .toast{right:12px;left:12px;bottom:80px;max-width:none}
  .favbar-items span{font-size:15px;padding:5px 9px}
  .data-grid{grid-template-columns:1fr;gap:2px 0}
  .data-grid dt{margin-top:10px}
}

/* 13. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .result{animation:none}
  .btn-generate,.btn-solid,.tool-link{transition:none}
  .btn-generate:hover,.btn-generate:active,.btn-solid:hover,.tool-link:hover{transform:none}
}