/* ═══════════════════════════════════════════════════════════
   PAWPY · Blog
   Mismo sistema de la landing (verde bosque + crema, Jost + Cormorant).
   BLOQUES EDITABLES
   1. Tokens              7. Tabla de contenidos / callout / tabla
   2. Base                8. CTA intermedia
   3. Barra superior       9. Preguntas frecuentes
   4. Hero del blog       10. Relacionados
   5. Categorías          11. Pie de página
   6. Listado de artículos 12. Responsive   13. Animaciones
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS — iguales a los de la landing, no los dupliques con otros valores ── */
:root{
  --verde-bosque:  #13251C;
  --crema:         #EFEAE1;
  --crema-media:   rgba(239,234,225,.60);
  --crema-tenue:   rgba(239,234,225,.34);
  --crema-fantasma: rgba(239,234,225,.14);
  --hairline:      rgba(239,234,225,.22);
  --hairline-alta: rgba(239,234,225,.55);

  --display:   'Jost', system-ui, sans-serif;
  --editorial: 'Cormorant Garamond', Georgia, serif;

  --marco:  clamp(24px, 5vw, 72px);
  --ancho-max:     1200px;
  --ancho-lectura: 660px;
}

/* ── 2. BASE ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background: var(--verde-bosque);
  color: var(--crema);
  font-family: var(--display);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
:focus-visible{ outline:1px solid var(--crema); outline-offset:4px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.contenedor{ max-width: var(--ancho-max); margin:0 auto; padding: 0 var(--marco); }
.linea{ border:none; border-top:1px solid var(--hairline); margin:0; }

.simbolo{ display:block; width:34px; height:34px; overflow:visible; }
.simbolo circle{ fill:none; stroke:var(--crema-tenue); stroke-width:1; vector-effect:non-scaling-stroke; }

.etiqueta{
  font-size:.62rem;
  letter-spacing:.32em;
  padding-left:.32em;
  text-transform:uppercase;
  color: var(--crema-tenue);
}

.btn-pill{
  display:inline-block;
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--crema);
  font-family:var(--display);
  font-weight:300;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:15px 34px;
  cursor:pointer;
  transition: border-color .5s ease, letter-spacing .5s ease;
}
.btn-pill:hover{ border-color:var(--hairline-alta); letter-spacing:.26em; }

/* ── 3. BARRA SUPERIOR ────────────────────────────────────── */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px var(--marco);
  border-bottom: 1px solid var(--hairline);
}
.topbar__logo img{ width: clamp(96px,9vw,130px); height:auto; }
.topbar nav a{
  font-size:.62rem;
  letter-spacing:.28em;
  padding-left:.28em;
  text-transform:uppercase;
  color: var(--crema-media);
  transition: color .35s ease;
}
.topbar nav a:hover,
.topbar nav a[aria-current="page"]{ color: var(--crema); }

/* ── 4. HERO DEL BLOG (solo en /blog/) ────────────────────── */
.blog-hero{
  padding: clamp(56px,10vh,120px) var(--marco) clamp(48px,8vh,88px);
  text-align:center;
}
.blog-hero .simbolo{ margin: 0 auto clamp(22px,3.2vh,32px); }
.blog-hero__titulo{
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--editorial);
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.25;
  letter-spacing:.01em;
  color: var(--crema);
}
.blog-hero__intro{
  margin: 20px auto 0;
  max-width: 46ch;
  font-size:.92rem;
  line-height:1.7;
  color: var(--crema-media);
}

/* ── 5. CATEGORÍAS ────────────────────────────────────────── */
.categorias{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  padding: 0 var(--marco) clamp(48px,7vh,72px);
}
.categorias a{
  font-size:.6rem;
  letter-spacing:.22em;
  padding-left:.22em;
  text-transform:uppercase;
  color: var(--crema-tenue);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding-top:.55rem; padding-bottom:.55rem;
  padding-right:1.1rem; padding-left:1.32rem;
  transition: color .3s ease, border-color .3s ease;
}
.categorias a:hover,
.categorias a.activa{ color:var(--crema); border-color:var(--hairline-alta); }

/* ── 6. LISTADO DE ARTÍCULOS ──────────────────────────────── */
.destacado{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px,5vw,72px);
  align-items:center;
  padding: clamp(40px,6vh,64px) var(--marco);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.destacado__media{ display:block; aspect-ratio:4/3; overflow:hidden; }
.destacado__media img{ width:100%; height:100%; object-fit:cover; }
.destacado__categoria{ display:block; margin-bottom:.9rem; }
.destacado__titulo{
  font-family: var(--editorial);
  font-weight:300;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height:1.25;
  color: var(--crema);
  margin: 0 0 14px;
}
.destacado__resumen{
  max-width:44ch;
  font-size:.92rem;
  line-height:1.7;
  color: var(--crema-media);
  margin:0 0 18px;
}
.destacado__meta{
  font-size:.6rem;
  letter-spacing:.22em;
  padding-left:.22em;
  text-transform:uppercase;
  color: var(--crema-tenue);
}
.enlace-texto{
  display:inline-block;
  margin-top:20px;
  font-size:.66rem;
  letter-spacing:.2em;
  padding-left:.2em;
  text-transform:uppercase;
  color:var(--crema);
  border-bottom:1px solid var(--hairline-alta);
  padding-bottom:4px;
}

.lista-articulos{ padding: clamp(12px,3vh,24px) var(--marco) clamp(56px,8vh,96px); }

/* Fila de artículo SIN imagen — para todo lo que todavía no tiene
   foto propia. No inventamos ni repetimos imágenes que no le
   corresponden a ese artículo. */
.fila-articulo{ padding: clamp(26px,4vh,36px) 0; border-bottom:1px solid var(--hairline); }
.fila-articulo__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.fila-articulo__titulo{
  font-family: var(--editorial);
  font-weight:300;
  font-size: clamp(1.2rem,2vw,1.5rem);
  line-height:1.3;
  color: var(--crema);
  margin:6px 0 8px;
}
.fila-articulo__resumen{
  max-width:60ch;
  font-size:.86rem;
  line-height:1.65;
  color: var(--crema-media);
  margin:0;
}
.fila-articulo__estado{
  flex-shrink:0;
  font-size:.56rem;
  letter-spacing:.22em;
  padding-left:.22em;
  text-transform:uppercase;
  color: var(--crema-tenue);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding: .42rem 1rem .42rem 1.2rem;
  white-space:nowrap;
}

/* ── 7. TOC / CALLOUT / TABLA ─────────────────────────────── */
.migas{
  padding: 18px var(--marco) 0;
  font-size:.6rem;
  letter-spacing:.22em;
  padding-left:.22em;
  text-transform:uppercase;
  color: var(--crema-tenue);
}
.migas a{ color:var(--crema-tenue); }
.migas a:hover{ color:var(--crema); }

.cabecera-articulo{
  max-width: var(--ancho-lectura);
  margin:0 auto;
  padding: 28px var(--marco) clamp(40px,6vh,56px);
  text-align:center;
}
.cabecera-articulo__categoria{ display:block; margin-bottom:1rem; }
.cabecera-articulo h1{
  font-family: var(--editorial);
  font-weight:300;
  font-size: clamp(2rem,4.2vw,2.8rem);
  line-height:1.2;
  color: var(--crema);
  margin:0 0 16px;
}
.bajada{
  font-family: var(--editorial);
  font-style:italic;
  font-weight:300;
  font-size:1.2rem;
  line-height:1.55;
  color: var(--crema-media);
  max-width:46ch;
  margin: 0 auto 18px;
}
.cabecera-articulo__meta{
  font-size:.6rem;
  letter-spacing:.22em;
  padding-left:.22em;
  text-transform:uppercase;
  color: var(--crema-tenue);
}

.hero-articulo{ max-width: var(--ancho-max); margin: 0 auto clamp(40px,6vh,64px); padding: 0 var(--marco); }
.hero-articulo img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.cuerpo-articulo{ max-width: var(--ancho-lectura); margin:0 auto; padding: 0 var(--marco) clamp(48px,7vh,72px); }

/* Cuadro de respuesta rápida — el bloque pensado para GEO/AEO.
   Tiene que verse como un cuadro aparte, no como un párrafo más. */
.cuadro-respuesta{
  border: 1px solid var(--hairline);
  padding: 28px clamp(22px,4vw,36px);
  margin: 0 0 48px;
}
.cuadro-respuesta .etiqueta{ display:block; margin-bottom:14px; }
.cuadro-respuesta p{
  font-family: var(--editorial);
  font-style:italic;
  font-weight:300;
  font-size:1.15rem;
  line-height:1.7;
  color: var(--crema);
  margin:0;
}

.tabla-contenidos{ margin: 0 0 48px; padding: 0 0 24px; border-bottom:1px solid var(--hairline); }
.tabla-contenidos p.etiqueta{ margin: 0 0 14px; }
.tabla-contenidos ol{ margin:0; padding-left:1.2em; columns: 2; column-gap: 32px; }
.tabla-contenidos li{ margin-bottom:.5em; font-size:.88rem; break-inside: avoid; }
.tabla-contenidos a{ color: var(--crema-media); border-bottom:1px solid transparent; }
.tabla-contenidos a:hover{ color: var(--crema); border-bottom-color: var(--hairline-alta); }

.cuerpo-articulo h2{
  font-family: var(--editorial);
  font-weight:300;
  font-size: 1.7rem;
  line-height:1.3;
  color: var(--crema);
  margin: 52px 0 18px;
}
.cuerpo-articulo h3{
  font-family: var(--display);
  font-weight:400;
  font-size: .82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--crema-media);
  margin: 32px 0 12px;
}
.cuerpo-articulo p{
  font-family: var(--editorial);
  font-weight:400;
  font-size: 1.14rem;
  line-height:1.8;
  color: rgba(239,234,225,.9);
  margin: 0 0 20px;
}
.cuerpo-articulo p strong{ color: var(--crema); font-weight:500; }
.cuerpo-articulo em{ color: var(--crema); }

.cuerpo-articulo ul,
.cuerpo-articulo ol{
  font-family: var(--editorial);
  font-size:1.08rem;
  line-height:1.75;
  color: rgba(239,234,225,.9);
  padding-left:0;
  margin: 0 0 20px;
  list-style:none;
}
.cuerpo-articulo li{ margin-bottom:.55em; padding-left:1.4em; position:relative; }
.cuerpo-articulo li::before{
  content:'';
  position:absolute; left:0; top:.5em;
  width:6px; height:6px;
  border:1px solid var(--hairline-alta);
  transform: rotate(45deg);
}
.cuerpo-articulo li strong{ color: var(--crema); font-weight:500; }

.tabla-arneses{
  width:100%;
  border-collapse:collapse;
  margin: 8px 0 36px;
  font-family: var(--display);
  font-size:.82rem;
}
.tabla-arneses th,
.tabla-arneses td{
  text-align:left;
  padding: 14px 16px 14px 0;
  border-bottom:1px solid var(--crema-fantasma);
  vertical-align:top;
  color: var(--crema-media);
}
.tabla-arneses th{
  color: var(--crema);
  font-weight:400;
  letter-spacing:.03em;
  border-bottom:1px solid var(--hairline-alta);
}

/* ── 8. CTA INTERMEDIA ────────────────────────────────────── */
.cta-intermedia{
  text-align:center;
  padding: 44px var(--marco);
  margin: 48px calc(var(--marco) * -1) 48px;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.cta-intermedia .etiqueta{ display:block; margin-bottom:14px; }
.cta-intermedia h3{
  font-family: var(--editorial);
  font-weight:300;
  font-size: 1.5rem;
  line-height:1.4;
  color: var(--crema);
  max-width:32ch;
  margin: 0 auto 12px;
}
.cta-intermedia p{
  font-family: var(--display);
  font-size:.86rem;
  line-height:1.6;
  color: var(--crema-media);
  max-width:38ch;
  margin: 0 auto 24px;
}

/* ── 9. PREGUNTAS FRECUENTES ──────────────────────────────── */
.pregunta{ border-bottom:1px solid var(--hairline); padding: 20px 0; }
.pregunta summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  cursor:pointer; list-style:none;
  font-family: var(--editorial);
  font-weight:300;
  font-size:1.12rem;
  color: var(--crema);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:'+';
  font-family: var(--display);
  font-weight:300;
  font-size:1.2rem;
  color: var(--crema-tenue);
  flex-shrink:0;
}
.pregunta[open] summary::after{ content:'–'; }
.pregunta p{
  margin: 14px 0 0;
  font-family: var(--display);
  font-size:.92rem;
  line-height:1.7;
  color: var(--crema-media);
}

/* ── 10. RELACIONADOS — misma fila sin imagen que el listado del blog ── */
.relacionados{ max-width: var(--ancho-lectura); margin:0 auto; padding: clamp(40px,6vh,56px) var(--marco); border-top:1px solid var(--hairline); }
.relacionados > p.etiqueta{ display:block; margin-bottom:8px; }

/* ── 11. PIE DE PÁGINA ────────────────────────────────────── */
.pie{
  padding: clamp(40px,6vh,56px) var(--marco);
  border-top:1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.pie__marca{ display:flex; align-items:center; gap:14px; }
.pie__marca img{ width:88px; height:auto; }
.pie a.instagram{ color: var(--crema-media); transition:color .4s ease; }
.pie a.instagram:hover{ color: var(--crema); }
.pie a.instagram svg{ width:17px; height:17px; display:block; }
.pie__datos{
  font-size:.6rem;
  letter-spacing:.28em;
  padding-left:.28em;
  text-transform:uppercase;
  color: var(--crema-tenue);
  display:flex; gap:22px;
}

/* ── 12. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 900px){
  .destacado{ grid-template-columns:1fr; }
  .tabla-contenidos ol{ columns:1; }
}
@media (max-width: 640px){
  .topbar{ padding: 18px var(--marco); }
  .fila-articulo__top{ flex-direction:column; align-items:flex-start; gap:8px; }
  .cuerpo-articulo p,
  .cuerpo-articulo ul,
  .cuerpo-articulo ol{ font-size:1.05rem; }
  .tabla-arneses{ display:block; overflow-x:auto; white-space:nowrap; }
  .pie{ flex-direction:column; align-items:flex-start; }
  .cta-intermedia{ margin-left: calc(var(--marco) * -1); margin-right: calc(var(--marco) * -1); }
}

/* ── 13. ANIMACIONES — un único gesto de entrada en el hero, nada más ── */
@keyframes aparecer{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.rev{ opacity:0; animation: aparecer 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
.blog-hero .simbolo{ animation-delay:.1s; }
.blog-hero__titulo{ animation-delay:.25s; }
.blog-hero__intro{ animation-delay:.4s; }
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; animation:none; } }