/* Hoja compartida del blog. Vive aparte —y no inline como el resto del sitio—
   porque son N entradas con la misma piel: duplicarla por artículo garantiza
   que a la tercera entrada dejen de parecerse. Los tokens son los MISMOS de la
   portada: la ornamentación de marca (cereza→morado, burbuja del hero, chips)
   se conserva; lo que cambia es la medida de lectura, que manda en un texto
   largo. */
:root{
  --cherry:#c2185b; --cherry-dark:#9c134a; --cherry-soft:rgba(194,24,91,.08); --cherry-glow:rgba(194,24,91,.14);
  --purple:#7b1fa2; --grad:linear-gradient(135deg,#c2185b,#7b1fa2);
  --bg:#fbf9fa; --surface:#fff; --surface-2:#f7f4f6;
  --line:#eee7ea; --line-2:#e2d9de;
  --ink:#2a1f25; --ink-2:#584a52; --ink-3:#8b7d85;
  --green:#1f8a5b; --green-soft:#e7f6ef;
  --r:16px; --r-sm:11px;
  --shadow:0 1px 2px rgba(42,31,37,.05), 0 8px 26px -10px rgba(42,31,37,.14);
  --shadow-lg:0 30px 70px -22px rgba(42,31,37,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Poppins',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--cherry-glow);color:var(--cherry-dark)}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.2}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* marca */
.brand{display:flex;align-items:center;gap:11px}
.logo{height:34px;width:auto;display:block}
footer.site .logo{height:30px}

/* botones (mismos de la portada) */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;padding:13px 24px;border-radius:var(--r-sm);font-weight:600;font-size:15px;border:none;cursor:pointer;transition:.18s;box-shadow:0 10px 24px -10px rgba(194,24,91,.7);white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(194,24,91,.6)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--line-2);font-weight:500}
.btn.ghost:hover{border-color:var(--cherry);color:var(--cherry);background:var(--cherry-soft)}
.btn.lg{padding:15px 30px;font-size:16px}

/* cabecera */
header.site{position:sticky;top:0;z-index:50;background:rgba(251,249,250,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
header.site nav{display:flex;align-items:center;gap:26px}
header.site nav a.lk{font-size:14.5px;color:var(--ink-2);font-weight:500;transition:.15s}
header.site nav a.lk:hover{color:var(--cherry)}
header.site nav a.lk.on{color:var(--cherry)}
@media(max-width:760px){ header.site nav a.lk{display:none} }

/* eyebrow y burbuja: la ornamentación de la portada */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cherry);background:var(--cherry-soft);border:1px solid rgba(194,24,91,.16);padding:6px 14px;border-radius:99px}
.blob{position:relative;overflow:hidden}
.blob::before{content:'';position:absolute;width:58vmax;height:58vmax;right:-26vmax;top:-32vmax;border-radius:46% 54% 52% 48%/44% 52% 48% 56%;background:radial-gradient(closest-side,var(--cherry-glow),transparent 70%);pointer-events:none}
.blob>*{position:relative}

/* migas */
.migas{font-size:13.5px;color:var(--ink-3);margin-bottom:20px}
.migas a{color:var(--ink-3)} .migas a:hover{color:var(--cherry)}

/* ───────── índice ───────── */
.bhero{padding:72px 0 44px}
.bhero h1{font-size:clamp(32px,4.4vw,48px);margin:20px 0 16px}
.bhero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bhero p{font-size:19px;color:var(--ink-2);max-width:620px}
@media(max-width:860px){ .bhero{padding:48px 0 32px} }

.posts{padding:12px 0 80px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--line-2)}
.card .top{height:6px;background:var(--grad)}
.card .in{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cherry);background:var(--cherry-soft);border:1px solid rgba(194,24,91,.16);padding:4px 10px;border-radius:99px}
.card h2{font-size:20px;line-height:1.3}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.65;flex:1}
.card .go{font-size:14px;font-weight:600;color:var(--cherry);display:inline-flex;align-items:center;gap:7px}
.card:hover .go svg{transform:translateX(3px)}
.card .go svg{width:16px;height:16px;transition:.18s}

/* ───────── artículo ───────── */
.art{padding:48px 0 24px}
.art .wrap{max-width:780px}
.art h1{font-size:clamp(28px,4.2vw,42px);margin:16px 0 18px}
.art .sub{font-size:19px;color:var(--ink-2);margin-bottom:22px}
.art .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3);padding-bottom:26px;border-bottom:1px solid var(--line)}

.cuerpo{padding:0 0 64px}
.cuerpo .wrap{max-width:780px}
/* La medida manda: ~70 caracteres por línea es lo que hace legible un texto
   largo, y es la única regla que se impone sobre la estética de la portada. */
.cuerpo p,.cuerpo ul,.cuerpo ol{font-size:17px;color:var(--ink-2);margin-bottom:18px}
.cuerpo ul,.cuerpo ol{margin-left:24px}
.cuerpo li{margin-bottom:10px}
.cuerpo h2{font-size:26px;margin:46px 0 14px;padding-top:30px;border-top:1px solid var(--line)}
.cuerpo h3{font-size:19px;margin:30px 0 10px}
.cuerpo strong{color:var(--ink);font-weight:600}
.cuerpo a{color:var(--cherry);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(194,24,91,.35)}
.cuerpo a:hover{text-decoration-color:var(--cherry)}
.cuerpo blockquote{margin:24px 0;padding:20px 24px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cherry);border-radius:0 var(--r-sm) var(--r-sm) 0}
.cuerpo blockquote p{margin:0;font-size:16.5px;color:var(--ink)}
.cuerpo blockquote cite{display:block;margin-top:10px;font-size:13.5px;font-style:normal;color:var(--ink-3)}
.cuerpo figure{margin:26px 0}
.cuerpo figcaption{font-size:13.5px;color:var(--ink-3);margin-top:10px;text-align:center}

/* tabla: se desplaza sola, nunca empuja la página */
.tabla{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.tabla table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.tabla th,.tabla td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tabla th{font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.tabla tr:last-child td{border-bottom:0}
.tabla td{color:var(--ink-2)}

/* nota al margen con ornamentación de marca */
.nota{margin:28px 0;padding:22px 24px;background:var(--cherry-soft);border:1px solid rgba(194,24,91,.16);border-radius:var(--r)}
.nota b{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cherry);margin-bottom:8px}
.nota p{font-size:16px;margin:0;color:var(--ink-2)}

/* cierre comercial */
.cierre{margin:52px 0 0;padding:36px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.cierre h3{font-size:23px;margin-bottom:10px}
.cierre p{font-size:16px;color:var(--ink-2);max-width:520px;margin:0 auto 22px}
.cierre .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* más entradas */
.mas{background:var(--surface);border-top:1px solid var(--line);padding:56px 0}
.mas h3{font-size:20px;margin-bottom:22px}

/* pie */
footer.site{background:var(--surface);border-top:1px solid var(--line);padding:40px 0}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:18px 26px;justify-content:space-between;align-items:center}
footer.site a{font-size:14px;color:var(--ink-2)}
footer.site a:hover{color:var(--cherry)}
footer.site .cr{font-size:13px;color:var(--ink-3)}
footer.site .lks{display:flex;gap:20px;flex-wrap:wrap}

/* WhatsApp flotante: mismo de las páginas legales */
.wa{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:0;background:#25d366;color:#fff;border-radius:999px;padding:15px;box-shadow:0 10px 26px -8px rgba(37,211,102,.75),0 2px 8px rgba(0,0,0,.12);transition:.22s cubic-bezier(.2,.8,.3,1)}
.wa svg{width:28px;height:28px;flex:none}
.wa .wat{max-width:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:15px;opacity:0;transition:.22s cubic-bezier(.2,.8,.3,1)}
.wa:hover{transform:translateY(-2px)}
.wa:hover .wat{max-width:210px;opacity:1;margin-left:11px;margin-right:4px}
.wa:focus-visible{outline:3px solid rgba(37,211,102,.45);outline-offset:3px}
@media(max-width:620px){ .wa{right:16px;bottom:16px;padding:14px} .wa svg{width:26px;height:26px} .wa:hover .wat{max-width:0;opacity:0;margin:0} footer.site{padding-bottom:92px} }
@media(prefers-reduced-motion:reduce){ *{transition:none!important} }