/*
Theme Name: Campo y Corral
Theme URI: https://campoycorral.es/
Author: Carlos
Description: Tema ligero para una web de guías sobre animales de granja con comparativas de productos. Silos por especie, fichas de raza, cajas de afiliado Amazon / Mercado Libre por país y SEO técnico integrado.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: campoycorral
*/

/* ---------- Fuentes (alojadas en el propio servidor) ---------- */
@font-face{font-family:"Bitter";src:url("assets/fonts/bitter-var.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson";src:url("assets/fonts/atkinson-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson";src:url("assets/fonts/atkinson-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson";src:url("assets/fonts/atkinson-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- Tokens: colores del logo ---------- */
:root{
  --pino:#1d5c2e;          /* aro del logo: estructura, enlaces */
  --pino-oscuro:#163f22;
  --hoja:#4f8a37;          /* hojas: acentos secundarios */
  --hoja-clara:#eef4e8;    /* fondos de tabla y fichas */
  --vaca:#5e3420;          /* marrón: texto de títulos de ficha */
  --cresta:#c3301f;        /* rojo de la cresta: SOLO botones de compra */
  --cresta-oscura:#9e2416;
  --piel:#f6d5c6;          /* rosa del cerdo: avisos */
  --pico:#e9a23b;          /* naranja del pico: valoraciones */
  --tinta:#1b261d;
  --tinta-suave:#4a5a4d;
  --linea:#d9e2d4;
  --papel:#ffffff;
  --paja:#f7f1e3;          /* etiqueta de saco */

  --f-titulo:"Bitter",Georgia,"Times New Roman",serif;
  --f-texto:"Atkinson",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --medida:68ch;
  --ancho:1180px;
  --r:6px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-size:1.125rem;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--pino);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--pino-oscuro);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--pico);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--f-titulo);color:var(--tinta);line-height:1.18;letter-spacing:-.01em;margin:2em 0 .55em;font-weight:700}
h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;margin-top:.3em}
h2{font-size:clamp(1.5rem,3vw,1.95rem)}
h3{font-size:1.3rem}
h4{font-size:1.1rem}
p,ul,ol,table,figure{margin:0 0 1.2em}
li{margin:.25em 0}
hr{border:0;border-top:1px solid var(--linea);margin:2.5em 0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:-999px;top:0;background:var(--pino);color:#fff;padding:.6em 1em;z-index:100}
.salto:focus{left:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* ---------- Cabecera ---------- */
.cabecera{border-bottom:4px solid var(--pino);background:var(--papel)}
.cabecera .envoltorio{display:flex;align-items:center;gap:24px;min-height:76px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta);margin-right:auto}
.marca img{width:52px;height:52px}
.marca span{font-family:var(--f-titulo);font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.marca:hover{color:var(--pino)}
.menu-principal ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.menu-principal a{display:block;padding:.5em .8em;text-decoration:none;font-weight:700;color:var(--tinta);border-radius:var(--r)}
.menu-principal a:hover,.menu-principal .current-menu-item>a,.menu-principal .current-menu-ancestor>a{background:var(--hoja-clara);color:var(--pino)}
.menu-principal li{position:relative;margin:0}
.menu-principal .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:6px;min-width:200px;z-index:20;flex-direction:column;box-shadow:0 8px 24px rgba(22,63,34,.12)}
.menu-principal li:hover>.sub-menu,.menu-principal li:focus-within>.sub-menu{display:flex}
.boton-menu{display:none;background:none;border:2px solid var(--pino);color:var(--pino);font:inherit;font-weight:700;padding:.35em .8em;border-radius:var(--r);cursor:pointer}
.buscador-cabecera{display:flex}
.buscador-cabecera input{font:inherit;font-size:1rem;padding:.45em .7em;border:1px solid var(--linea);border-radius:var(--r) 0 0 var(--r);width:12em}
.buscador-cabecera button{font:inherit;font-size:1rem;background:var(--pino);color:#fff;border:0;padding:0 .9em;border-radius:0 var(--r) var(--r) 0;cursor:pointer}
@media (max-width:860px){
  .boton-menu{display:block}
  .menu-principal{display:none;width:100%;order:3;padding-bottom:12px}
  .menu-principal.abierto{display:block}
  .menu-principal ul{flex-direction:column}
  .menu-principal .sub-menu{display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 14px}
  .buscador-cabecera{width:100%;order:4;padding-bottom:12px}
  .buscador-cabecera input{flex:1;width:auto}
}

/* ---------- Migas ---------- */
.migas{font-size:.92rem;color:var(--tinta-suave);margin:22px 0 0}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.migas li{margin:0}
.migas li+li::before{content:"/";margin:0 .5em;color:var(--linea)}
.migas a{color:var(--tinta-suave)}

/* ---------- Diseño de contenido ---------- */
.columnas{display:grid;grid-template-columns:minmax(0,var(--medida)) 280px;gap:56px;justify-content:space-between;align-items:start}
.columnas.sin-lateral{grid-template-columns:minmax(0,var(--medida));justify-content:start}
@media (max-width:980px){.columnas{grid-template-columns:minmax(0,1fr)}}
.contenido{padding-bottom:64px}
.entradilla{font-size:1.25rem;color:var(--tinta-suave);margin-top:-.2em}
.meta{font-size:.92rem;color:var(--tinta-suave);margin:0 0 1.6em}
.contenido-texto>*:first-child{margin-top:0}
.contenido-texto img{border-radius:var(--r)}
.contenido-texto figcaption{font-size:.9rem;color:var(--tinta-suave);margin-top:.4em}
.contenido-texto blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.1em;border-left:4px solid var(--hoja);color:var(--tinta-suave)}
.contenido-texto table{width:100%;border-collapse:collapse;font-size:1rem;display:block;overflow-x:auto}
.contenido-texto th,.contenido-texto td{padding:.6em .75em;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.contenido-texto thead th{background:var(--hoja-clara);font-family:var(--f-titulo);border-bottom:2px solid var(--pino)}

/* Índice */
.indice{background:var(--hoja-clara);border-radius:var(--r);padding:16px 20px;margin:0 0 2em;font-size:1rem}
.indice summary{font-family:var(--f-titulo);font-weight:700;cursor:pointer}
.indice ol{margin:.6em 0 0;padding-left:1.3em}

/* Lateral */
.lateral{position:sticky;top:20px;font-size:1rem}
.lateral h2{font-size:1.1rem;margin:0 0 .6em}
.lateral ul{list-style:none;padding:0;margin:0 0 2em}
.lateral li{border-bottom:1px solid var(--linea);margin:0}
.lateral li a{display:block;padding:.45em 0;text-decoration:none}
.lateral li.actual a{font-weight:700;color:var(--tinta)}
@media (max-width:980px){.lateral{position:static;border-top:4px solid var(--hoja-clara);padding-top:24px}}

/* ---------- Avisos ---------- */
.aviso{border-radius:var(--r);padding:14px 18px;margin:1.6em 0;font-size:1rem}
.aviso p:last-child{margin:0}
.aviso-vet{background:var(--piel);border-left:5px solid var(--cresta)}
.aviso-afiliados{background:var(--paja);font-size:.92rem;color:var(--tinta-suave)}

/* ---------- Ficha de raza: etiqueta de saco de pienso ---------- */
.etiqueta{background:var(--paja);border:2px solid var(--vaca);border-radius:4px;margin:0 0 2.2em;position:relative;box-shadow:6px 6px 0 var(--hoja-clara)}
.etiqueta::before{content:"";position:absolute;top:18px;right:18px;width:14px;height:14px;border-radius:50%;border:2px solid var(--vaca);background:var(--papel)}
.etiqueta-cabeza{padding:16px 22px 12px;border-bottom:2px dashed var(--vaca)}
.etiqueta-cabeza p{margin:0;font-family:var(--f-titulo);font-size:.95rem;color:var(--vaca)}
.etiqueta-cabeza strong{display:block;font-size:1.6rem;line-height:1.15;color:var(--tinta)}
.etiqueta-cifras{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px dashed var(--vaca)}
.etiqueta-cifras div{padding:14px 18px}
.etiqueta-cifras div+div{border-left:1px solid rgba(94,52,32,.35)}
.etiqueta-cifras b{display:block;font-family:var(--f-titulo);font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;color:var(--vaca);line-height:1.05}
.etiqueta-cifras span{font-size:.9rem;color:var(--tinta-suave)}
.etiqueta dl{display:grid;grid-template-columns:max-content 1fr;margin:0;padding:12px 22px 16px;gap:4px 18px;font-size:1rem}
.etiqueta dt{color:var(--tinta-suave)}
.etiqueta dd{margin:0;font-weight:700}
.huevo{display:inline-block;width:.8em;height:1em;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;vertical-align:-.1em;margin-right:.35em;border:1px solid rgba(0,0,0,.25)}
@media (max-width:560px){.etiqueta-cifras{grid-template-columns:1fr}.etiqueta-cifras div+div{border-left:0;border-top:1px solid rgba(94,52,32,.35)}}

/* Pros y contras */
.pros-contras{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.6em 0}
.pros-contras>div{border-top:4px solid var(--hoja);padding-top:8px}
.pros-contras>div.contras{border-top-color:var(--cresta)}
.pros-contras h3{margin:0 0 .4em;font-size:1.1rem}
.pros-contras ul{padding-left:1.1em;margin:0;font-size:1rem}
@media (max-width:560px){.pros-contras{grid-template-columns:1fr}}

/* ---------- Cajas de producto (afiliados) ---------- */
.producto{display:grid;grid-template-columns:150px 1fr;gap:20px;border:1px solid var(--linea);border-radius:var(--r);padding:18px;margin:1.6em 0;background:#fff}
.producto-img img{width:150px;height:150px;object-fit:contain}
.producto h3{margin:0 0 .25em;font-size:1.2rem}
.producto-insignia{display:inline-block;background:var(--pino);color:#fff;font-size:.82rem;font-weight:700;padding:.15em .6em;border-radius:3px;margin-bottom:.5em}
.producto p{font-size:1rem;margin:0 0 .7em}
.producto ul{font-size:.98rem;padding-left:1.1em;margin:0 0 .8em}
.boton-compra{display:inline-block;background:var(--cresta);color:#fff;font-weight:700;text-decoration:none;padding:.65em 1.2em;border-radius:var(--r);line-height:1.2}
.boton-compra:hover{background:var(--cresta-oscura);color:#fff}
.producto-tiendas{font-size:.88rem;color:var(--tinta-suave);margin-top:.5em}
.producto-tiendas a{color:var(--tinta-suave)}
@media (max-width:560px){.producto{grid-template-columns:1fr}.producto-img img{width:100%;height:180px}}

.tabla-resumen td:last-child{white-space:nowrap}
.tabla-resumen .boton-compra{padding:.45em .8em;font-size:.95rem}

/* ---------- Tarjetas de navegación (hubs) ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:1.2em 0 2.4em;padding:0;list-style:none}
.rejilla li{margin:0}
.rejilla a{display:block;height:100%;padding:14px 16px;border:1px solid var(--linea);border-left:4px solid var(--hoja);border-radius:var(--r);text-decoration:none;color:var(--tinta)}
.rejilla a:hover{border-left-color:var(--pino);background:var(--hoja-clara)}
.rejilla strong{display:block;font-family:var(--f-titulo);font-size:1.08rem;color:var(--pino)}
.rejilla span{font-size:.95rem;color:var(--tinta-suave)}
.seccion-hub{border-top:1px solid var(--linea);padding-top:.4em}

/* ---------- Portada ---------- */
.portada-cabeza{padding:56px 0 40px;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}
.portada-cabeza h1{font-size:clamp(2.2rem,5.4vw,3.8rem);margin:0 0 .3em;max-width:16ch}
.portada-cabeza p{font-size:1.25rem;color:var(--tinta-suave);max-width:46ch}
.portada-cabeza img{width:100%;max-width:300px;justify-self:end}
@media (max-width:760px){.portada-cabeza{grid-template-columns:1fr;padding-top:28px}.portada-cabeza img{display:none}}
.portada-buscar{display:flex;max-width:520px;margin-top:1.4em}
.portada-buscar input{flex:1;font:inherit;padding:.75em 1em;border:2px solid var(--pino);border-right:0;border-radius:var(--r) 0 0 var(--r)}
.portada-buscar button{font:inherit;font-weight:700;background:var(--pino);color:#fff;border:0;padding:0 1.3em;border-radius:0 var(--r) var(--r) 0;cursor:pointer}
.especies{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0;border-top:2px solid var(--tinta);border-left:1px solid var(--linea);margin:0 0 56px;padding:0;list-style:none}
.especies li{margin:0;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.especies a{display:block;padding:18px 16px 20px;text-decoration:none;color:var(--tinta);height:100%}
.especies a:hover{background:var(--hoja-clara)}
.especies b{display:block;font-family:var(--f-titulo);font-size:1.35rem}
.especies span{font-size:.92rem;color:var(--tinta-suave)}
.portada-bloque{margin:0 0 56px}
.portada-bloque h2{margin-top:0}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:760px){.dos-col{grid-template-columns:1fr}}
.lista-simple{list-style:none;padding:0;margin:0}
.lista-simple li{border-bottom:1px solid var(--linea);margin:0}
.lista-simple a{display:block;padding:.6em 0;text-decoration:none;font-weight:700}
.lista-simple small{display:block;font-weight:400;color:var(--tinta-suave)}

/* ---------- Herramientas ---------- */
.herramienta{border:2px solid var(--pino);border-radius:var(--r);padding:20px;margin:0 0 2em;background:var(--hoja-clara)}
.herramienta label{display:block;font-weight:700;margin:0 0 .3em}
.herramienta select,.herramienta input{font:inherit;padding:.5em .7em;border:1px solid var(--linea);border-radius:var(--r);background:#fff;width:100%;max-width:320px}
.herramienta .campos{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.herramienta .campos>div{flex:1 1 220px}
.calendario-resultado ol{list-style:none;padding:0;margin:0;border-left:3px solid var(--pino)}
.calendario-resultado li{position:relative;padding:.35em 0 .7em 1.2em;margin:0}
.calendario-resultado li::before{content:"";position:absolute;left:-8px;top:.75em;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--pino)}
.calendario-resultado li.hito::before{background:var(--cresta);border-color:var(--cresta)}
.calendario-resultado time{font-weight:700;display:block}
.calendario-resultado span{font-size:1rem;color:var(--tinta-suave)}

/* ---------- Listados / archivo ---------- */
.lista-entradas{list-style:none;padding:0;margin:0}
.lista-entradas li{padding:1.1em 0;border-bottom:1px solid var(--linea);margin:0}
.lista-entradas h2{font-size:1.3rem;margin:0 0 .25em}
.lista-entradas h2 a{text-decoration:none}
.lista-entradas p{margin:0;font-size:1rem;color:var(--tinta-suave)}
.paginacion{display:flex;gap:6px;margin:2em 0;flex-wrap:wrap}
.paginacion .page-numbers{padding:.35em .8em;border:1px solid var(--linea);border-radius:var(--r);text-decoration:none}
.paginacion .current{background:var(--pino);color:#fff;border-color:var(--pino)}

/* Relacionadas */
.relacionadas{border-top:4px solid var(--hoja-clara);margin-top:3em;padding-top:.5em}
.relacionadas h2{font-size:1.35rem}

/* Autor */
.autor{display:flex;gap:16px;align-items:flex-start;background:var(--hoja-clara);padding:18px;border-radius:var(--r);margin-top:3em;font-size:1rem}
.autor img{border-radius:50%;width:64px;height:64px}
.autor p{margin:0}

/* ---------- Pie ---------- */
.pie{background:var(--pino-oscuro);color:#dfe9db;padding:44px 0 28px;font-size:.95rem}
.pie a{color:#fff}
.pie .envoltorio{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.pie h2{color:#fff;font-size:1.05rem;margin:0 0 .6em}
.pie ul{list-style:none;padding:0;margin:0}
.pie-legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-top:18px;font-size:.85rem;color:#b9c9b4}
@media (max-width:760px){.pie .envoltorio{grid-template-columns:1fr}}

/* ---------- Editor de bloques: alineaciones ---------- */
.alignwide{max-width:100%}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-block-image figcaption{font-size:.9rem;color:var(--tinta-suave)}

/* Ajustes tras revisión */
.producto.sin-img{grid-template-columns:1fr}
.especies{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-bottom:14px}
.especies a{padding:22px 20px 24px}
.especies b{font-size:1.6rem}
.especies span{font-size:1rem}
.especies-pronto{color:var(--tinta-suave);font-size:1rem;margin:0}
.etiqueta-cabeza strong{font-size:1.25rem}
.especies{border-top:0;border-left:0;gap:14px}
.especies li{border:1px solid var(--linea);border-top:3px solid var(--pino);border-radius:var(--r)}

/* Aviso de cookies */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:720px;margin:0 auto;background:#fff;border:2px solid var(--pino);border-radius:var(--r);padding:16px 18px;box-shadow:0 10px 30px rgba(22,63,34,.18);display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:1rem}
.cookies[hidden]{display:none}
.cookies p{margin:0;flex:1 1 320px}
.cookies-botones{display:flex;gap:10px}
.cookies button{font:inherit;font-weight:700;padding:.55em 1.2em;border-radius:var(--r);cursor:pointer;border:2px solid var(--pino);background:#fff;color:var(--pino)}
.cookies button:hover{background:var(--pino);color:#fff}