/* =====================================================================
   Estilo unificado de los posts maquetados (yennyastrid.com/blog/*).

   Se carga DESPUÉS del <style> propio de cada post y solo cambia la piel:
   tipografía (Instrument Serif + Geist, las mismas del sitio), paleta
   (crema + fucsia) y detalles de interacción. NO toca ningún texto.

   Sirve a las dos maquetas que existen: la «A» (topbar, .snippet, .toc con
   <ol>) y la «B» (.short-answer, .toc-grid, .reading). Ambas quedan iguales.
   ===================================================================== */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Paleta del sitio: crema + fucsia. Cada maqueta nombró sus acentos a su
     manera (--cobre, --rose, --vino, --mauve, --agua, --oro, --gold…): todos
     apuntan aquí al mismo fucsia. El texto pequeño usa el fucsia profundo
     (contraste AA); el claro queda para detalles grandes. Las dos maquetas
     que nacieron oscuras (--cream = texto claro) pasan al tema claro del sitio. */
  --bg:#fbf7f2; --bg-2:#f5ede3; --bg2:#f5ede3; --paper:#fffdf8; --panel:#fffdf8;
  --ink:#241812; --ink-2:#4a382f; --ink2:#4a382f; --muted:#6f5d4f;
  --line:#e6d9ca; --duraz:#fde3ee; --soft:#ffb3d1;
  /* Texto pequeño y enlaces: fucsia profundo (≥ 5:1 sobre el crema). */
  --cobre:#c4135e; --cobre-2:#d41668;
  --accent:#c4135e; --accent-2:#c4135e; --accent2:#c4135e;
  --fucsia:#c4135e; --arena:#c4135e; --f-claro:#f0197a; --rosado:#ff4f9f;
  --rose:#c4135e; --rose-soft:#ffb3d1; --rose-pale:#fde3ee;
  --vino:#c4135e; --vino-2:#d41668; --rosa:#fde3ee;
  --mauve:#c4135e; --mauve-2:#d41668; --mauve-pale:#fde3ee;
  --agua:#c4135e; --agua-2:#d41668; --agua-pale:#fde3ee;
  --oro:#c4135e; --oro-2:#d41668; --oro-pale:#fde3ee;
  --gold:#c4135e; --gold-2:#d41668; --gold-deep:#b10f55; --red:#c4135e;
  --cream:#241812; --cream-2:#4a382f;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{font-synthesis:none}
body{font-family:var(--sans);background:var(--bg);color:var(--ink-2);font-size:18px;line-height:1.8}
body::before{
  background:
    radial-gradient(760px 520px at 88% -6%, rgba(255,79,159,.13), transparent 62%),
    radial-gradient(620px 460px at 2% 14%, rgba(245,237,227,.9), transparent 62%),
    var(--bg) !important;
}
a{color:var(--cobre)}
strong,b{font-weight:600}

/* ---- Titulares: Instrument Serif, un solo peso; la jerarquía sale de la escala ---- */
h1,h2,h3,.brand,.dek,.deck,blockquote,.final,.bigline,.script,
.card h3,.autora h3,.news h3,.relcard span,.preg li,.trad .real,
details summary,.comprar h2,.sub-title{
  font-family:var(--serif) !important; font-weight:400 !important;
}
h1{
  font-size:clamp(2.5rem,1.6rem + 4.6vw,4.9rem) !important;
  line-height:.98 !important; letter-spacing:-.03em !important;
  text-wrap:balance; margin:0 0 .35em !important; color:var(--ink);
}
/* Títulos largos (más de ~48 caracteres): escala menor para que no ocupen la pantalla. */
h1.largo{font-size:clamp(2.1rem,1.5rem + 3vw,3.6rem) !important;line-height:1.02 !important}
h2{
  font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem) !important;
  line-height:1.05 !important; letter-spacing:-.022em !important;
  text-wrap:balance; color:var(--ink); scroll-margin-top:86px;
}
h3{letter-spacing:-.012em}

/* Palabra destacada: cursiva + degradado fucsia → rosado con un brillo leve.
   Solo donde el post ya la marcaba (.script / .accent / .c). */
h1 .script,h2 .accent,h2 .c,h2 .g,.bigline,.final .accent{
  font-family:var(--serif) !important; font-style:italic !important; font-weight:400 !important;
  font-size:1em !important; line-height:inherit !important;
  background:linear-gradient(95deg,var(--f-claro),var(--rosado));
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(240,25,122,.22));
  padding-right:.06em;
}
.bigline{
  display:block;font-size:clamp(2.1rem,1.4rem + 3.4vw,4rem) !important;line-height:1.05 !important;
  letter-spacing:-.025em;text-wrap:balance;
}
h2::after,.h2line{
  content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--f-claro),var(--rosado)) !important;margin:16px 0 18px;
}
.h2line{margin-top:10px}

.dek,.deck{
  font-style:italic;font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem) !important;line-height:1.4 !important;
  color:var(--ink-2);
}
blockquote{
  font-style:italic;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem) !important;line-height:1.15 !important;
  letter-spacing:-.015em;border-left:3px solid var(--f-claro) !important;color:var(--ink);
}
.lede::first-letter,.dropcap{
  font-family:var(--serif) !important;font-weight:400 !important;color:var(--f-claro) !important;
}

/* ---- Barra de progreso de lectura ---- */
.progress{height:3px !important;background:linear-gradient(90deg,var(--f-claro),var(--rosado)) !important}

/* ---- Barra superior: igual que la del sitio ---- */
.topbar{background:rgba(251,247,242,.88) !important;border-bottom:1px solid var(--line) !important;backdrop-filter:blur(14px)}
.topbar{position:sticky;top:0;z-index:60}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:0 24px;height:64px}
.brand{text-decoration:none !important}
@media (max-width:860px){.topbar .nav{display:none}}
.brand{font-size:1.65rem !important;letter-spacing:-.01em;color:var(--ink) !important;white-space:nowrap}
.brand span{color:var(--ink) !important}
.brand::after{content:".";color:var(--f-claro)}
.nav{display:flex;gap:2rem}
.nav a{
  position:relative;font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:.005em;
  text-transform:none !important;color:var(--ink-2) !important;text-decoration:none;padding:4px 0;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--f-claro);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--ink) !important}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a:focus-visible,.brand:focus-visible{outline:2px solid var(--cobre);outline-offset:4px;border-radius:2px}

/* ---- Cabecera ---- */
.crumbs,.breadcrumbs{font-size:13.5px;color:var(--muted)}
.crumbs a,.breadcrumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover,.breadcrumbs a:hover{color:var(--cobre)}
.cat,.chip{
  display:inline-block;font-family:var(--sans);font-size:.75rem !important;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cobre) !important;
  background:transparent !important;border:1px solid var(--line) !important;border-radius:999px;padding:6px 14px;
}
.meta{color:var(--muted)}
.meta b{color:var(--ink)}
.hero-fig img,.hero img,figure img,.fig-in img{
  border-radius:var(--radius-card,1rem) !important;box-shadow:0 26px 60px -34px rgba(36,24,18,.45) !important;
}
figcaption,.fig-in .cap{color:var(--muted)}

/* ---- Respuesta corta ---- */
.snippet,.short-answer{
  background:var(--paper) !important;border:1px solid var(--line) !important;border-left:4px solid var(--f-claro) !important;
  border-radius:12px !important;box-shadow:0 18px 40px -30px rgba(36,24,18,.3) !important;
}
.snippet .tag,.short-answer .label,.toc .tag,.toc .label,.card .tag,.autora .tag,.relcard b,.label,.eyebrow{
  font-family:var(--sans);font-size:.75rem !important;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cobre) !important;
}
.snippet p,.short-answer p{color:var(--ink)}

/* ---- Tabla de contenidos («De qué va esto») ---- */
.toc{
  background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:12px !important;
  box-shadow:0 18px 40px -34px rgba(36,24,18,.3);
}
.toc ol{counter-reset:toc;list-style:none;padding-left:0 !important;margin:0}
.toc li{counter-increment:toc;display:flex;gap:.8rem;align-items:baseline}
.toc li::before{
  content:counter(toc,decimal-leading-zero);font-family:var(--serif);font-size:1.05rem;
  color:var(--f-claro);min-width:1.6rem;
}
.toc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 2rem}
.toc-grid a{display:block}

.toc a,.toc-grid a{
  color:var(--ink-2) !important;text-decoration:none !important;border-bottom:0 !important;
  background-image:linear-gradient(var(--f-claro),var(--f-claro));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;transition:background-size .45s var(--ease),color .25s var(--ease);
}
.toc a:hover,.toc a:focus-visible,.toc-grid a:hover,.toc-grid a:focus-visible{color:var(--ink) !important;background-size:100% 1px}
.toc a:focus-visible,.toc-grid a:focus-visible{outline:2px solid var(--cobre);outline-offset:3px;border-radius:2px}
@media (max-width:720px){.toc-grid{grid-template-columns:1fr}}

/* ---- Tarjetas y bloques ---- */
.card,.autora,.relcard,.comprar,.news,.nota,.bookbox,.cards .card{
  background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:var(--radius-card,1rem) !important;
}
.news{background:linear-gradient(160deg,#fffdf8,#fdeef5) !important}
.relcard,.cards .card{transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .relcard:hover,.cards a.card:hover{
    transform:translateY(-4px);border-color:rgba(240,25,122,.5) !important;
    box-shadow:0 28px 54px -28px rgba(240,25,122,.4) !important;
  }
}
.nota{background:rgba(255,79,159,.05) !important}
.nota b{color:var(--cobre)}
.trad li,.momentos li,.preg li{border-bottom-color:var(--line) !important}
.trad .flecha,.momentos li::before{color:var(--f-claro) !important}
.preg li::before{background:var(--duraz) !important;color:var(--cobre) !important;font-family:var(--sans) !important}
.noayuda span{background:var(--bg-2) !important;border-color:var(--line) !important;color:var(--ink-2) !important}
/* Letra manuscrita de las maquetas → cursiva de Instrument Serif */
.trad li b,.carta .firma{font-family:var(--serif) !important;font-weight:400 !important;font-style:italic;font-size:1.35rem;color:var(--cobre) !important;white-space:nowrap}
details{border-color:var(--line) !important}
details summary::after,.faq summary::after{color:var(--cobre) !important}
.faq summary{font-family:var(--serif) !important;font-weight:400 !important;font-size:1.3rem}
.final{font-size:clamp(2rem,1.4rem + 3vw,3.6rem) !important;line-height:1.05 !important;letter-spacing:-.025em}

/* ---- Botones: solo dos estilos (sólido fucsia profundo / borde antracita) ---- */
.btn,.comprar-botones a,.volver,.share a,.libros a,.mas-posts .todos a{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:2.9rem;
  padding:.8rem 1.5rem !important;border-radius:4px !important;font-family:var(--sans);font-size:.95rem !important;
  font-weight:600 !important;line-height:1.2;letter-spacing:0 !important;text-transform:none !important;text-decoration:none !important;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn,.comprar-botones a.principal{background:var(--cobre) !important;color:#fffaf3 !important;border:1px solid var(--cobre) !important}
.comprar-botones a,.volver,.share a,.libros a,.mas-posts .todos a{
  background:transparent;color:var(--ink) !important;border:1px solid var(--ink) !important;
}
.comprar-botones a.principal{background:var(--cobre) !important;color:#fffaf3 !important;border-color:var(--cobre) !important}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.comprar-botones a.principal:hover{background:#b10f55 !important;border-color:#b10f55 !important;transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(212,22,104,.7)}
  .comprar-botones a:not(.principal):hover,.volver:hover,.share a:hover,.libros a:hover,.mas-posts .todos a:hover{
    background:var(--ink) !important;color:var(--bg) !important;border-color:var(--ink) !important;transform:translateY(-2px);
  }
}
.btn:focus-visible,.comprar-botones a:focus-visible,.volver:focus-visible,.share a:focus-visible,.libros a:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
/* Botones de compartir: siempre con borde, nunca sólidos. */
.share .btn{background:transparent !important;color:var(--ink) !important;border:1px solid var(--ink) !important}
@media (hover:hover) and (pointer:fine){.share .btn:hover{background:var(--ink) !important;color:var(--bg) !important}}

/* Fichas de libro: dentro de .ctas, solo .primary es sólido; el resto, borde. */
.ctas .btn:not(.primary){background:transparent !important;color:var(--ink) !important;border:1px solid var(--ink) !important}
.formats a{display:inline-flex;align-items:center;justify-content:center;min-height:2.6rem;padding:.6rem 1.1rem;border-radius:4px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;background:transparent}
@media (hover:hover) and (pointer:fine){
  .ctas .btn:not(.primary):hover,.formats a:hover{background:var(--ink) !important;color:var(--bg) !important;border-color:var(--ink) !important;transform:translateY(-2px)}
}
.nl-form button{border-radius:4px !important;background:var(--cobre) !important}
.nl-form input[type=email]{border-radius:4px !important}

footer{border-top-color:var(--line) !important}
footer .c{color:var(--cobre)}

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