/* 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;position:relative}
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)}
/* La casilla se oculta a la vista pero NO se retira: con `hidden` deja de
   recibir foco y el menú se vuelve inalcanzable con teclado. Se recorta a un
   píxel —el truco de siempre— y el foco se dibuja sobre el botón. */
header.site .mtoggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
header.site .mtoggle:focus-visible ~ .mbtn{outline:3px solid var(--cherry-glow);outline-offset:2px;border-color:var(--cherry)}
header.site .navlks{display:flex;align-items:center;gap:26px}
header.site .mbtn{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-left:4px;border:1px solid var(--line-2);border-radius:11px;color:var(--ink);cursor:pointer;background:var(--surface)}
header.site .mbtn svg{width:22px;height:22px}
header.site .mbtn svg:last-child{display:none}
header.site .mtoggle:checked ~ .mbtn svg:first-child{display:none}
header.site .mtoggle:checked ~ .mbtn svg:last-child{display:block}
/* Debajo de 760 los enlaces no desaparecen: se van al panel que despliega la
   casilla. Antes se escondían y la barra se quedaba sin navegación —solo el
   logo y el botón—, que es como estuvo hasta hoy. */
@media(max-width:760px){
  header.site .mbtn{display:inline-flex}
  header.site .navlks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -22px rgba(42,31,37,.5)}
  header.site .mtoggle:checked ~ .navlks{display:flex}
  header.site .navlks a.lk{display:block;padding:13px 24px;font-size:15.5px}
  header.site nav .btn{padding:11px 16px;font-size:14px}
}
@media(max-width:380px){ header.site nav .btn{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)}

/* El botón DENTRO del artículo. `.cuerpo a` (0-1-1) le ganaba en especificidad
   a `.btn` (0-1-0), así que el botón heredaba la tinta del enlace —cereza y
   subrayada— sobre su propio degradado cereza: el texto desaparecía. Se le gana
   la especificidad a propósito; sin esta regla el llamado a registrarse es
   ilegible. */
.cuerpo a.btn{color:#fff;font-weight:600;text-decoration:none}
.cuerpo a.btn:hover{text-decoration:none}
.cuerpo a.btn.ghost{color:var(--ink)}
.cuerpo a.btn.ghost:hover{color:var(--cherry)}

/* cierre comercial */
.cierre{position:relative;overflow:hidden;margin:52px 0 0;padding:40px 36px 36px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
/* la franja de marca: el mismo gesto que encabeza las tarjetas del índice,
   para que el letrero final se lea como pieza del sitio y no como un bloque suelto */
.cierre::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--grad)}
.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} }

/* checklist: los artículos traen renglones "[ ] …" que son casillas, no viñetas.
   La casilla se dibuja con un pseudo-elemento para que se pueda imprimir y
   marcar a mano; no es un control, no se pulsa. */
.cuerpo ul.check{list-style:none;margin-left:0;display:grid;gap:2px}
.cuerpo ul.check li{position:relative;padding:10px 14px 10px 44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);margin-bottom:0;font-size:16px}
.cuerpo ul.check li::before{content:'';position:absolute;left:15px;top:13px;width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;background:var(--surface-2)}

/* el deslinde legal del pie del artículo */
.cuerpo .aviso{margin-top:34px;font-size:14px;color:var(--ink-3);line-height:1.6}
.cuerpo .aviso a{color:var(--ink-3)}

/* rejilla de "sigue leyendo": tarjetas más compactas que las del índice */
.mas .card h2{font-size:17px}
.mas .card .in{padding:20px;gap:10px}

/* ───────── barra de compartir ─────────
   Va al final del texto, no al principio: se comparte lo que ya se leyó. Es una
   fila discreta —iconos sin relleno de marca— porque compite con el llamado a
   registrarse que viene justo abajo, y ese es el que debe ganar. */
.compartir{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:40px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.compartir .etq{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.compartir .bts{display:flex;gap:8px;flex-wrap:wrap}
.compartir .sh{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.18s;padding:0}
.compartir .sh svg{width:18px;height:18px}
.compartir .sh:hover{color:var(--cherry);border-color:var(--cherry);background:var(--cherry-soft);transform:translateY(-2px)}
.compartir .sh:focus-visible{outline:3px solid var(--cherry-glow);outline-offset:2px}
.compartir .acuse{font-size:13.5px;color:var(--green);opacity:0;transform:translateY(-3px);transition:.18s;pointer-events:none}
.compartir .acuse.on{opacity:1;transform:none}
@media(max-width:520px){ .compartir{gap:10px} .compartir .etq{width:100%} }

/* ───────── portada de la tarjeta ─────────
   Sustituye a la franja de 6px: el degradado era el gesto que tapaba la falta
   de imagen. La relación es 1200×628 (la de OG) y se impone con aspect-ratio
   para que la rejilla no brinque mientras cargan. */
.card .portada{aspect-ratio:1200/628;background:var(--surface-2);overflow:hidden;border-bottom:1px solid var(--line)}
.card .portada img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s cubic-bezier(.2,.8,.3,1)}
.card:hover .portada img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){ .card:hover .portada img{transform:none} }

/* ───────── gráficos del artículo ─────────
   Son cuadrados de 1080px: a la medida de la columna (780) se comen la pantalla
   y el texto pierde el hilo. Se topan a 540 y se centran. El enlace abre el
   archivo completo —en un teléfono, una tabla de cinco renglones dentro de la
   columna no se lee— y por eso no lleva la tinta cereza ni el subrayado de los
   enlaces de texto: es la imagen, no una referencia. */
.cuerpo figure.grafico{max-width:540px;margin:30px auto 34px}
.cuerpo figure.grafico a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);transition:.2s}
.cuerpo figure.grafico a:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.cuerpo figure.grafico img{width:100%;height:auto;display:block}
.cuerpo figure.grafico figcaption{text-align:center}

/* insignias de las tiendas (pie). La de Google trae un margen transparente
   impreso, así que a igual altura de caja se ve más chica: 48 contra 40 las
   empareja ópticamente. Son arte oficial de cada tienda, sin recolorear. */
.tiendas{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tiendas a{display:block;line-height:0;transition:.18s}
.tiendas a:hover{transform:translateY(-2px)}
.tiendas img{display:block;width:auto}
.tiendas img.gp{height:48px}
.tiendas img.as{height:40px}

/* ───────── portada dentro del artículo ─────────
   El banner a lo ancho de la columna de lectura, pegado al encabezado: cierra
   la cabecera en vez de flotar entre el título y el texto. Lleva la misma
   relación 1200×628 reservada de antemano, así que el cuerpo no brinca cuando
   termina de cargar. */
.cuerpo figure.portada-art{margin:0 0 34px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface-2);aspect-ratio:1200/628}
.cuerpo figure.portada-art img{width:100%;height:100%;object-fit:cover;display:block}

/* La barra de arriba es la MISMA pieza, en otro momento de la lectura: ahí nadie
   ha leído todavía, así que no se anuncia con una línea divisoria ni con el
   rótulo en mayúsculas pesando igual que abajo. Se recarga al pie, que es donde
   de verdad se comparte. */
.compartir.arriba{margin:-6px 0 30px;padding-top:0;border-top:0;gap:10px}
.compartir.arriba .etq{font-size:12px;letter-spacing:.08em;color:var(--ink-3)}
.compartir.arriba .sh{width:36px;height:36px}
.compartir.arriba .sh svg{width:16px;height:16px}