/*
Theme Name: Pastor Alemán Manual
Theme URI: https://example.com
Author: Aitha
Description: Tema a medida para un sitio de referencia en español sobre el Pastor Alemán. Arquitectura por clusters temáticos (pilares + artículos), pensado para SEO, EEAT en salud, y monetización con AdSense sin sacrificar la experiencia de usuario.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pastor-aleman
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --paper:#F7F5F0;
  --paper-alt:#E4E1D8;
  --ink:#1F2420;
  --ink-soft:#4B524D;
  --pine:#35503E;
  --pine-dark:#233529;
  --saddle:#A85832;
  --steel:#4A5A63;
  --line:#D8D4C8;
  --white:#FFFFFF;

  --font-display:'Zilla Slab', Georgia, serif;
  --font-body:'Source Serif 4', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radius:4px;
  --container:1180px;
  --gap:1.5rem;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--steel);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--pine);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--saddle);
  outline-offset:2px;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 .6em;
}
h1{font-size:clamp(1.9rem,3.2vw,2.8rem);}
h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:2.2em;}
h3{font-size:1.2rem;margin-top:1.6em;}
p{margin:0 0 1.2em;}
ul,ol{padding-left:1.3em;}
table{width:100%;border-collapse:collapse;margin:1.5em 0;}
th,td{padding:.6em .8em;border:1px solid var(--line);text-align:left;font-size:.95rem;}
th{background:var(--paper-alt);font-family:var(--font-mono);font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.04em;}
blockquote{border-left:3px solid var(--saddle);margin:1.5em 0;padding:.2em 0 .2em 1.2em;color:var(--ink-soft);font-style:italic;}
hr{border:none;border-top:1px solid var(--line);margin:2.5em 0;}
code{font-family:var(--font-mono);background:var(--paper-alt);padding:.1em .35em;border-radius:2px;font-size:.9em;}

.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
/* Header en 3 bloques: logo (izq, ancho fijo) | nav (centro, ocupa el resto)
   | acciones (dcha, ancho fijo). Así el logo no queda pegado al borde y el
   menú se reparte con aire en vez de amontonarse a la izquierda. */
.site-header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.5rem;
  padding:1rem 0;
}
.site-logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  color:var(--ink);
  text-decoration:none;
  display:flex;align-items:center;gap:.5rem;
  white-space:nowrap;
}
.site-logo span{color:var(--pine);}

.primary-nav ul{
  list-style:none;display:flex;justify-content:center;
  gap:1.8rem;margin:0;padding:0;flex-wrap:wrap;
}
.primary-nav a{
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-soft);
  text-decoration:none;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.primary-nav a:hover{color:var(--ink);border-bottom-color:var(--line);}
.primary-nav a.current-menu-item{color:var(--saddle);border-bottom-color:var(--saddle);}

.header-actions{display:flex;align-items:center;gap:1rem;}
.btn--sm{
  font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;
  padding:.5rem 1rem;white-space:nowrap;
}

/* Botón hamburguesa de 3 líneas en vez de la palabra "Menú": más compacto
   y estándar en móvil, se transforma en "X" al abrir el menú. */
.menu-toggle{
  display:none;background:none;border:none;padding:.3rem;cursor:pointer;
  width:2rem;height:2rem;flex-direction:column;justify-content:center;gap:.28rem;
}
.menu-toggle span{
  display:block;width:100%;height:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.menu-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:820px){
  .site-header__inner{
    grid-template-columns:auto auto;
    flex-wrap:wrap;
  }
  .primary-nav{
    display:none;order:3;grid-column:1 / -1;width:100%;
  }
  .primary-nav.is-open{display:block;}
  .primary-nav ul{
    flex-direction:column;align-items:flex-start;gap:0;
    border-top:1px solid var(--line);margin-top:.8rem;
  }
  .primary-nav a{display:block;padding:.85rem 0;width:100%;}
  .header-actions{gap:.7rem;}
  /* Selector reforzado (".header-actions .btn--sm") para ganar en
     especificidad a la regla ".btn{display:inline-block}" definida más
     abajo en la hoja, que si no anula este ocultamiento en móvil. */
  .header-actions .btn--sm{display:none;}
  .menu-toggle{display:flex;}
}

/* ==========================================================================
   4. BREADCRUMBS
   ========================================================================== */
.breadcrumbs{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink-soft);
  padding:.9rem 0;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.breadcrumbs a{color:var(--ink-soft);}
.breadcrumbs .sep{margin:0 .5em;color:var(--line);}

/* ==========================================================================
   5. HERO / SPEC SHEET (signature element)
   ========================================================================== */
.hero{
  background:var(--pine);
  color:var(--paper);
  padding:3rem 0 3.5rem;
  overflow:hidden;
}
.hero__inner{display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:center;}
.hero h1{color:var(--white);font-size:clamp(1.9rem,3.6vw,2.7rem);}
.hero p.lede{font-size:1.1rem;color:#E7EDE8;max-width:46ch;}
.hero .eyebrow{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
  font-size:.78rem;color:#B9CDBB;margin-bottom:.8rem;display:block;
}
.hero__cta{margin-top:1.2rem;display:flex;gap:.8rem;flex-wrap:wrap;}

/* Bloque visual: foto real del perro a tamaño completo, sin elementos
   superpuestos (la ficha técnica va aparte, debajo, como banda horizontal). */
.hero__visual{position:relative;}
.hero__photo{
  width:100%;height:340px;object-fit:cover;border-radius:var(--radius);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
}

@media (max-width:820px){
  .hero__inner{grid-template-columns:1fr;}
  .hero__visual{margin-top:.5rem;}
  .hero__photo{height:220px;}
}

/* Ficha técnica como banda horizontal debajo del hero: no se superpone a
   ninguna imagen ni se corta, y se lee de un vistazo en una sola fila.
   Nota: se usa el selector compuesto ".spec-sheet.spec-sheet--band" para
   ganar en especificidad a la regla genérica ".spec-sheet dl" (grid) que
   aparece más abajo en la hoja y, si no, sobreescribe este layout. */
.spec-sheet--band{
  background:var(--paper-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem 1.5rem;
}
.spec-sheet--band .spec-sheet__title{margin-bottom:.9rem;}
.spec-sheet.spec-sheet--band dl{
  display:flex;flex-wrap:wrap;margin:0;padding:0;gap:1.1rem 2.6rem;
}
.spec-sheet.spec-sheet--band .spec-sheet__item{
  display:flex;flex-direction:column;margin:0;min-width:9rem;flex:0 1 auto;
}
.spec-sheet.spec-sheet--band dt{
  font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.03em;order:1;
}
.spec-sheet.spec-sheet--band dd{
  font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--ink);
  margin:.25rem 0 0;text-align:left;order:2;
}
@media (max-width:600px){
  .spec-sheet.spec-sheet--band dl{gap:.9rem 1.4rem;}
  .spec-sheet.spec-sheet--band .spec-sheet__item{min-width:calc(50% - .7rem);flex:0 1 calc(50% - .7rem);}
}

.spec-sheet{
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  border:1px solid var(--line);
}
.spec-sheet__title{
  font-family:var(--font-mono);text-transform:uppercase;font-size:.72rem;
  letter-spacing:.06em;color:var(--saddle);margin-bottom:.7rem;
  border-bottom:1px solid var(--line);padding-bottom:.5rem;
}
.spec-sheet dl{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;margin:0;}
.spec-sheet dt{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft);}
.spec-sheet dd{margin:0;font-family:var(--font-mono);font-size:.76rem;font-weight:600;text-align:right;}

/* ==========================================================================
   6. CARDS / GRIDS
   ========================================================================== */
.section{padding:3rem 0;}
.section--tight{padding:1.8rem 0 2.6rem;}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;}
.section__head h2{margin-top:0;}
.section__head .see-all{font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}

/* Grid de clusters: más compacto (tarjetas horizontales de baja altura)
   para que las 15 categorías se lean de un vistazo sin ocupar media pantalla. */
.cluster-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.7rem;
}
.cluster-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  transition:border-color .15s ease, background-color .15s ease;
}
.cluster-card:hover{border-color:var(--pine);background:var(--paper-alt);}
.cluster-card__num{
  font-family:var(--font-mono);font-size:.68rem;color:var(--saddle);
  flex-shrink:0;padding-top:.15rem;
}
.cluster-card__body{min-width:0;}
.cluster-card h3{margin:0 0 .2rem;font-size:.92rem;line-height:1.25;}
.cluster-card p{font-size:.8rem;color:var(--ink-soft);margin:0;line-height:1.35;}

@media (max-width:900px){
  .cluster-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px){
  .cluster-grid{grid-template-columns:1fr;}
}

.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.post-card img{aspect-ratio:16/10;object-fit:cover;}
.post-card__body{padding:1.1rem 1.2rem 1.3rem;}
.post-card .cat{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pine);}
.post-card h3{font-size:1.05rem;margin:.4rem 0 .5rem;}
.post-card h3 a{color:var(--ink);text-decoration:none;}
.post-card p{font-size:.9rem;color:var(--ink-soft);}

/* ==========================================================================
   7. ARTICLE / PILLAR CONTENT
   ========================================================================== */
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;padding:2.5rem 0 4rem;align-items:start;}
@media (max-width:960px){.content-layout{grid-template-columns:1fr;}}

.answer-box{
  background:var(--paper-alt);
  border-left:3px solid var(--pine);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1rem 1.3rem;
  margin:1.4rem 0 2rem;
  font-size:1.02rem;
}
.answer-box strong{color:var(--pine-dark);}

.toc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  margin:1.5rem 0 2rem;
}
.toc__title{font-family:var(--font-mono);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;color:var(--saddle);margin-bottom:.6rem;}
.toc ol{margin:0;padding-left:1.2em;font-size:.92rem;}

.article-meta{
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);
  display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.5rem;
  text-transform:uppercase;letter-spacing:.03em;
}

.vet-note{
  background:#F1ECE0;
  border:1px solid var(--saddle);
  border-radius:var(--radius);
  padding:1rem 1.3rem;
  margin:1.6rem 0;
  font-size:.92rem;
}
.vet-note__label{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;color:var(--saddle);display:block;margin-bottom:.3rem;}

.ad-slot{
  margin:2rem 0;
  padding:.4rem;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--ink-soft);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  /* Reserva de espacio para evitar CLS cuando se inserte el anuncio real:
     un anuncio responsive tarda en cargar, y sin altura mínima el layout
     "salta" al aparecer. Ajustar estos valores al tamaño de unidad AdSense
     que se use realmente (ver INSTALACION.md). */
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ad-slot--sidebar{ min-height:250px; }

@media (max-width:600px){
  .ad-slot{ min-height:100px; }
  /* Límite a 2 unidades in-content en móvil (estrategia AdSense del plan
     maestro): el segundo slot in-content de single.php se oculta en pantallas
     pequeñas para no saturar. Marcar ese slot con esta clase desde single.php. */
  .ad-slot--mobile-hide{ display:none; }
}

.related-block{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line);}
.related-block h2{margin-top:0;}

/* sidebar */
.sidebar-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;margin-bottom:1.4rem;}
.sidebar-box h3{font-family:var(--font-mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;color:var(--saddle);margin:0 0 .8rem;}
.sidebar-box ul{list-style:none;margin:0;padding:0;}
.sidebar-box li{padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.92rem;}
.sidebar-box li:last-child{border-bottom:none;}
.sidebar-box a{text-decoration:none;color:var(--ink);}
.sidebar-box a:hover{color:var(--pine);}

/* ==========================================================================
   8. FAQ
   ========================================================================== */
.faq-item{border-bottom:1px solid var(--line);padding:1rem 0;}
.faq-item summary{font-family:var(--font-display);font-weight:600;cursor:pointer;font-size:1.05rem;}
.faq-item p{margin-top:.7rem;}

/* ==========================================================================
   9. CTA / NEWSLETTER
   ========================================================================== */
.cta-band{background:var(--pine-dark);color:var(--paper);border-radius:var(--radius);padding:2.2rem;text-align:center;margin:3rem 0;}
.cta-band h2{color:var(--white);margin-top:0;}
.btn{
  display:inline-block;background:var(--saddle);color:var(--white);
  font-family:var(--font-mono);text-transform:uppercase;font-size:.8rem;letter-spacing:.04em;
  padding:.75rem 1.4rem;border-radius:var(--radius);text-decoration:none;border:none;cursor:pointer;
}
.btn:hover{background:#8f4726;color:var(--white);}
.btn--outline{background:transparent;border:1px solid var(--paper);color:var(--paper);}
/* Botón secundario para el hero: sobre fondo verde oscuro, menos peso visual
   que el primario (saddle) para no competir por la atención del clic principal. */
.btn--ghost{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.4);
  color:var(--white);
}
.btn--ghost:hover{background:rgba(255,255,255,.16);color:var(--white);}

/* ==========================================================================
   13. HOME: EMPIEZA POR AQUÍ
   ========================================================================== */
.start-here{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;}
.start-here li a{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.2rem;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease;
}
.start-here li a:hover{border-color:var(--pine);}
.start-here__num{
  flex-shrink:0;width:2rem;height:2rem;border-radius:50%;background:var(--pine);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:.9rem;
}
.start-here li a strong{font-family:var(--font-display);font-size:1.02rem;}
.start-here li a span:last-child{font-size:.88rem;color:var(--ink-soft);}
.start-here li a strong + br + *{color:var(--ink-soft);}

/* ==========================================================================
   14. HOME: FAQ
   ========================================================================== */
.home-faq{max-width:760px;}
.home-faq .faq-item summary{font-size:1rem;}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:#D8D9D3;padding:3rem 0 1.5rem;margin-top:3rem;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem;margin-bottom:2rem;}
.footer-grid h4{font-family:var(--font-mono);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;color:#9EA69B;margin-bottom:.8rem;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:.5rem;font-size:.9rem;}
.footer-grid a{color:#D8D9D3;text-decoration:none;}
.footer-grid a:hover{color:var(--white);}
.footer-bottom{border-top:1px solid #3A3F3A;padding-top:1.2rem;font-size:.8rem;color:#8B928A;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}

/* ==========================================================================
   11. UTILITIES
   ========================================================================== */
.page-header{padding:2.5rem 0 1rem;}
.page-header .eyebrow{font-family:var(--font-mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;color:var(--pine);}
.wp-pagination{display:flex;gap:.5rem;justify-content:center;margin:2.5rem 0;font-family:var(--font-mono);font-size:.85rem;}
.wp-pagination a,.wp-pagination span{padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);}
.wp-pagination .current{background:var(--pine);color:var(--white);border-color:var(--pine);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .cluster-card{transition:none;}
}