/* ==========================================================================
   Yanytoons · Blog
   Portada, archivos, artículo, compartir. Usa los tokens de style.css.
   ========================================================================== */

.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Cabecera del blog ---------- */
.blog-cab{position:relative;padding:56px 0 64px;overflow:hidden}
.blog-cab>.wrap{position:relative;z-index:2}
.blog-cab h1{font-size:clamp(34px,5vw,52px);font-weight:800;margin:6px 0 0;max-width:20ch}
.blog-cab .blog-intro{margin-top:16px;font-size:19px;color:var(--tinta-suave);max-width:60ch}
.blog-cab .blog-intro p{margin:0}
.blog-cab .blog-intro p+p{margin-top:10px}

.miga{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--tinta-suave);margin-bottom:14px}
.miga a{color:var(--tinta-suave);text-decoration:none}
.miga a:hover{color:var(--chicle-oscuro);text-decoration:underline}
.miga span{opacity:.5}

/* ---------- Buscador ---------- */
.buscador{display:flex;gap:10px;margin-top:26px;max-width:460px}
.buscador input[type=search]{
  flex:1;min-width:0;padding:13px 18px;border-radius:999px;border:2px solid #fff;
  background:#fff;font-family:var(--body);font-size:16px;color:var(--tinta);
  box-shadow:0 6px 16px -10px rgba(42,26,46,.4);
}
.buscador input[type=search]:focus{outline:3px solid var(--chicle);outline-offset:2px}
.buscador button{
  border:0;cursor:pointer;padding:13px 24px;border-radius:999px;background:var(--chicle);color:#fff;
  font-family:var(--display);font-weight:700;font-size:16px;box-shadow:0 4px 0 var(--chicle-oscuro);
  transition:transform var(--rapido);
}
.buscador button:hover{transform:translateY(-2px)}
.buscador button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--chicle-oscuro)}

/* ---------- Pastillas de categoría ---------- */
.pastillas{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pastilla{
  display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;
  background:#fff;color:var(--tinta);font-family:var(--display);font-weight:600;font-size:15px;
  text-decoration:none;box-shadow:0 2px 0 #EFD6E2;transition:transform var(--rapido),background var(--rapido),color var(--rapido);
}
.pastilla:hover{transform:translateY(-2px);color:var(--chicle-oscuro)}
.pastilla.activa{background:var(--chicle);color:#fff;box-shadow:0 2px 0 var(--chicle-oscuro)}

/* ---------- Rejilla de artículos ---------- */
.rejilla-articulos{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:640px){.rejilla-articulos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rejilla-articulos{grid-template-columns:repeat(3,1fr)}}

.art{
  background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sombra-sticker);transition:transform var(--suave),box-shadow var(--suave);
}
.art:hover{transform:translateY(-6px);box-shadow:var(--sombra-hover)}
.art-foto{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--papel-2)}
.art-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s ease}
.art:hover .art-foto img{transform:scale(1.05)}
.art-sin-foto{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,#FFE3EE,#FFD3E6)}
.art-sin-foto svg{width:52px;height:52px;color:#fff;opacity:.9}
.art-cat{
  position:absolute;top:12px;left:12px;background:#fff;color:var(--chicle-oscuro);
  font-family:var(--display);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;
  box-shadow:0 2px 0 #E7C9D7;
}
.art-texto{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.art-texto h3{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.15;margin:0}
.art-texto h3 a{color:inherit;text-decoration:none}
.art-texto h3 a:hover{color:var(--chicle-oscuro)}
.art-texto p{margin:10px 0 0;font-size:15px;color:var(--tinta-suave);line-height:1.5}
.art-meta{
  margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:13px;color:var(--tinta-suave);
}
.art-meta .punto{opacity:.5}

/* Tarjeta grande destacada */
.art-grande{border-radius:28px}
@media(min-width:860px){
  .art-grande{flex-direction:row;align-items:stretch}
  .art-grande .art-foto{flex:0 0 55%;aspect-ratio:auto}
  .art-grande .art-texto{padding:36px 40px;justify-content:center}
  .art-grande .art-texto h3{font-size:32px}
  .art-grande .art-texto p{font-size:17px;margin-top:14px}
}

/* ---------- Paginación ---------- */
.navigation.pagination{margin-top:44px}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.navigation.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;
  border-radius:999px;background:#fff;color:var(--tinta);text-decoration:none;
  font-family:var(--display);font-weight:700;box-shadow:0 2px 0 #EFD6E2;
}
.navigation.pagination .page-numbers:hover{color:var(--chicle-oscuro)}
.navigation.pagination .page-numbers.current{background:var(--chicle);color:#fff;box-shadow:0 2px 0 var(--chicle-oscuro)}
.navigation.pagination .page-numbers.dots{background:transparent;box-shadow:none}

/* ---------- Artículo ---------- */
.articulo{display:block}
.art-cabecera{position:relative;padding:44px 0 40px;overflow:hidden}
.art-cabecera>.wrap{position:relative;z-index:2}
.art-cabecera h1{font-size:clamp(30px,4.6vw,48px);font-weight:800;margin:14px 0 0;max-width:24ch}
.art-entrada{margin-top:16px;font-size:19px;color:var(--tinta-suave);max-width:62ch}
.art-firma{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:20px;font-size:14px;color:var(--tinta-suave)}
.art-firma .punto{opacity:.5}
.art-autora{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--chicle-oscuro)}
.art-autora svg{width:16px;height:16px;color:var(--chicle)}

.art-portada{margin-top:-18px;position:relative;z-index:3}
.art-portada figure{margin:0;border-radius:26px;overflow:hidden;border:8px solid #fff;box-shadow:var(--sombra-sticker)}
.art-portada img{width:100%;height:auto;display:block}

.art-cuerpo{padding-top:44px}
.art-contenido{max-width:70ch;margin-inline:auto}
.art-contenido>*+*{margin-top:1.15rem}
.art-contenido h2{font-size:30px;margin-top:2.2em;margin-bottom:.4em}
.art-contenido h3{font-size:23px;margin-top:1.8em;margin-bottom:.3em}
.art-contenido p{font-size:18px;line-height:1.72}
.art-contenido ul,.art-contenido ol{padding-left:24px}
.art-contenido li+li{margin-top:8px}
.art-contenido img{border-radius:18px}
.art-contenido figure{margin:2rem 0}
.art-contenido figcaption{font-family:var(--mano);font-size:20px;color:var(--chicle-oscuro);text-align:center;margin-top:8px}
.art-contenido blockquote{
  margin:2rem 0;padding:22px 26px;background:#fff;border-radius:18px;border-left:6px solid var(--chicle);
  box-shadow:var(--sombra-sticker);font-size:19px;
}
.art-contenido blockquote p{margin:0}
.art-contenido a{color:var(--chicle-oscuro);text-underline-offset:3px}

.paginas-articulo{margin-top:32px;font-weight:700}
.art-etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}

/* ---------- Compartir ---------- */
.compartir{
  margin-top:40px;padding:24px 26px;background:#fff;border-radius:22px;box-shadow:var(--sombra-sticker);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
}
.compartir-titulo{font-family:var(--display);font-weight:700;font-size:19px}
.compartir-botones{display:flex;flex-wrap:wrap;gap:10px}
.compartir-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;cursor:pointer;
  background:var(--papel-2);color:var(--tinta);font-family:var(--display);font-weight:700;font-size:14px;
  text-decoration:none;transition:transform var(--rapido),background var(--rapido),color var(--rapido);
}
.compartir-btn svg{width:18px;height:18px}
.compartir-btn:hover{transform:translateY(-2px);color:#fff}
.compartir-btn.whatsapp:hover{background:#25D366}
.compartir-btn.facebook:hover{background:#1877F2}
.compartir-btn.pinterest:hover{background:#E60023}
.compartir-btn.correo:hover,.compartir-btn.copiar:hover{background:var(--chicle)}
.compartir-btn.copiada{background:var(--menta-claro,#DDF6EE);color:var(--menta-oscuro,#0E7C63)}

/* ---------- Caja de la autora ---------- */
.art-autora-caja{
  margin-top:40px;padding:26px 28px;background:linear-gradient(150deg,#FFEFF4,#FFE3EE);
  border-radius:24px;display:flex;gap:22px;align-items:flex-start;box-shadow:var(--sombra-sticker);
}
.art-autora-foto{
  flex:none;width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;
  padding:14px;box-shadow:0 6px 16px -8px rgba(42,26,46,.4);
}
.art-autora-foto img{width:100%;height:auto;display:block}
.art-autora-caja h3{font-family:var(--display);font-size:22px;font-weight:700;margin:0}
.art-autora-caja p{margin:8px 0 12px;font-size:15.5px;color:var(--tinta-suave)}

/* ---------- Anterior / siguiente ---------- */
.art-vecinos{display:grid;gap:16px;margin:48px auto 0;max-width:70ch}
@media(min-width:720px){.art-vecinos{grid-template-columns:1fr 1fr}}
.vecino{
  display:block;padding:20px 22px;background:#fff;border-radius:20px;text-decoration:none;color:inherit;
  box-shadow:var(--sombra-sticker);transition:transform var(--suave),box-shadow var(--suave);
}
.vecino:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover)}
.vecino span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--chicle-oscuro);font-weight:700}
.vecino svg{width:15px;height:15px}
.vecino b{display:block;margin-top:7px;font-family:var(--display);font-size:17px;line-height:1.2}
.vecino.siguiente{text-align:right}
.vecino.siguiente span{justify-content:flex-end}

.relacionados{padding-top:24px}
.relacionados .encabezado{margin-bottom:28px}