/*
Theme Name: Cerro y Voz
Theme URI: https://vocesdelabufa.com
Author: Factoría Digital
Author URI: https://factoriadigital.store
Description: Tema periodístico de opinión y análisis para Voces de la Bufa. Barra única con logotipo a la izquierda, hero a sangre con titular sobrepuesto, listados de miniatura lateral y barra lateral izquierda. Paleta verde pizarra y óxido, tipografía Alegreya Sans. Incluye JSON-LD NewsArticle, tres zonas publicitarias a media página y nueve páginas institucionales autogeneradas.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cerro-y-voz
Tags: news, magazine, opinion, boxed, custom-menu, featured-images
*/

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root{
	--bf-verde:#1B3A32;
	--bf-verde-2:#255146;
	--bf-verde-3:#31685A;
	--bf-oxido:#C1502E;
	--bf-oxido-osc:#9E3F22;
	--bf-ocre:#D8A244;
	--bf-arena:#FAF6EE;
	--bf-arena-2:#F2ECE0;
	--bf-blanco:#FFFFFF;
	--bf-texto:#22201D;
	--bf-texto-2:#57534C;
	--bf-linea:#DED5C6;
	--bf-max:1300px;
	--bf-titular:"Alegreya Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	--bf-cuerpo:"Alegreya", Georgia, "Times New Roman", serif;
	--bf-sombra:0 1px 3px rgba(27,58,50,.10);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
	margin:0;
	background:#E4DCCC;
	color:var(--bf-texto);
	font-family:var(--bf-cuerpo);
	font-size:18px;
	line-height:1.66;
}
img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:var(--bf-verde);text-decoration:none;}
a:hover{color:var(--bf-oxido);}
h1,h2,h3,h4,h5,h6{font-family:var(--bf-titular);font-weight:800;line-height:1.16;margin:0 0 .5em;color:var(--bf-verde);}
p{margin:0 0 1.1em;}
figure{margin:0;}
.bf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

/* Miniaturas: siempre bloque, nunca inline. */
.bf-thumb{
	display:block;position:relative;width:100%;
	overflow:hidden;background:var(--bf-verde);line-height:0;
}
.bf-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.bf-body{min-width:0;overflow-wrap:break-word;word-wrap:break-word;}
h1,h2,h3,h4{overflow-wrap:break-word;word-wrap:break-word;}

/* ============================================================
   2. CONTENEDOR
   ============================================================ */
.bf-shell{
	max-width:var(--bf-max);
	margin:0 auto;
	background:var(--bf-arena);
	box-shadow:0 0 40px rgba(27,58,50,.20);
}
.bf-wrap{max-width:1210px;margin:0 auto;padding:0 24px;}

/* ============================================================
   3. CABECERA DE BARRA ÚNICA
   ============================================================ */
.bf-cinta{
	background:var(--bf-oxido);color:#FDEFE7;font-family:var(--bf-titular);
	font-size:13.5px;letter-spacing:.05em;
}
.bf-cinta .bf-wrap{display:flex;align-items:center;gap:16px;min-height:34px;flex-wrap:wrap;}
.bf-cinta-tag{font-weight:800;text-transform:uppercase;white-space:nowrap;}
.bf-cinta a{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bf-cinta a:hover{color:var(--bf-ocre);}
.bf-cinta .bf-fecha{margin-left:auto;white-space:nowrap;opacity:.9;}

.bf-cabecera{background:var(--bf-verde);}
.bf-cabecera .bf-wrap{
	display:flex;align-items:center;justify-content:space-between;
	gap:24px;min-height:96px;position:relative;
}
.bf-logo{display:block;flex-shrink:0;}
.bf-logo svg{height:62px;width:auto;max-width:100%;}
.bf-logo img{max-height:74px;width:auto;}

.bf-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;}
.bf-menu li{position:relative;}
.bf-menu > li > a{
	display:block;padding:12px 13px;font-family:var(--bf-titular);
	font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	color:#E4DFD2;border-bottom:3px solid transparent;
}
.bf-menu > li > a:hover,
.bf-menu > li.current-menu-item > a{color:#fff;border-bottom-color:var(--bf-oxido);}
.bf-menu .sub-menu{
	list-style:none;margin:0;padding:6px 0;position:absolute;right:0;top:100%;
	background:var(--bf-verde-2);min-width:220px;display:none;z-index:60;
	box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.bf-menu li:hover > .sub-menu{display:block;}
.bf-menu .sub-menu a{display:block;padding:9px 16px;color:#E4DFD2;font-family:var(--bf-titular);font-size:14.5px;text-transform:none;}
.bf-menu .sub-menu a:hover{background:var(--bf-verde-3);color:var(--bf-ocre);}

.bf-herr{display:flex;align-items:center;gap:10px;}
.bf-buscador form{display:flex;align-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);}
.bf-buscador input[type="search"]{
	border:0;background:transparent;padding:8px 10px;font-family:var(--bf-titular);
	font-size:14.5px;width:132px;outline:none;color:#fff;
}
.bf-buscador input[type="search"]::placeholder{color:#A9BCB4;}
.bf-buscador button{
	border:0;background:var(--bf-oxido);color:#fff;font-weight:800;
	padding:9px 12px;cursor:pointer;font-family:var(--bf-titular);font-size:13.5px;text-transform:uppercase;
}
.bf-buscador button:hover{background:var(--bf-oxido-osc);}
.bf-toggle{
	display:none;background:transparent;border:1px solid rgba(255,255,255,.30);
	color:#fff;padding:9px 13px;cursor:pointer;font-family:var(--bf-titular);
	font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
}

/* ============================================================
   4. ZONAS PUBLICITARIAS
   ============================================================ */
.bf-ad{margin:34px 0;text-align:center;clear:both;}
.bf-ad-inner{
	border:1px solid var(--bf-linea);
	background:var(--bf-arena-2);
	min-height:100px;display:flex;align-items:center;justify-content:center;
	font-family:var(--bf-titular);font-weight:800;letter-spacing:.2em;
	text-transform:uppercase;color:var(--bf-verde-3);font-size:14px;padding:18px;
	position:relative;
}
.bf-ad-inner::before,.bf-ad-inner::after{
	content:"";position:absolute;left:14px;right:14px;height:2px;background:var(--bf-oxido);opacity:.5;
}
.bf-ad-inner::before{top:12px;}
.bf-ad-inner::after{bottom:12px;}
.bf-ad-inner a{color:var(--bf-verde-3);}
.bf-ad-inner a:hover{color:var(--bf-oxido);}
.bf-ad--lateral .bf-ad-inner{min-height:250px;}

/* ============================================================
   5. HERO A SANGRE CON TITULAR SOBREPUESTO
   ============================================================ */
.bf-hero{position:relative;margin:0 0 8px;background:var(--bf-verde);}
.bf-hero-media{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--bf-verde);}
.bf-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
.bf-hero-velo{
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(27,58,50,0) 25%,rgba(27,58,50,.72) 62%,rgba(27,58,50,.94) 100%);
}
.bf-hero-texto{
	position:absolute;left:0;right:0;bottom:0;padding:34px 40px 34px;
	max-width:920px;
}
.bf-hero-texto h2{font-size:40px;line-height:1.08;color:#fff;margin:10px 0 12px;}
.bf-hero-texto h2 a{color:#fff;}
.bf-hero-texto h2 a:hover{color:var(--bf-ocre);}
.bf-hero-sum{color:#DCE5E0;font-size:18px;margin:0 0 10px;max-width:760px;}
.bf-hero-texto .bf-meta{color:#A9BCB4;}

.bf-kicker{
	display:inline-block;font-family:var(--bf-titular);font-weight:800;font-size:12.5px;
	letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--bf-oxido);
	padding:4px 10px;
}
.bf-kicker--claro{background:transparent;color:var(--bf-oxido);padding:0;}
.bf-meta{
	font-family:var(--bf-titular);font-size:13px;color:#8A857B;
	letter-spacing:.05em;text-transform:uppercase;font-weight:600;
}

/* ============================================================
   6. FRANJA "EN PORTADA": 4 tarjetas horizontales
   ============================================================ */
.bf-portada{
	display:grid;grid-template-columns:repeat(4,1fr);gap:0;
	background:var(--bf-blanco);border-bottom:3px solid var(--bf-verde);
}
.bf-portada article{padding:20px 22px;border-left:1px solid var(--bf-linea);}
.bf-portada article:first-child{border-left:0;}
.bf-portada .bf-thumb{aspect-ratio:3/2;margin-bottom:12px;}
.bf-portada h3{font-size:19px;line-height:1.2;margin-bottom:8px;}

/* ============================================================
   7. BLOQUE DE OPINIÓN (fondo verde)
   ============================================================ */
.bf-opinion{background:var(--bf-verde);padding:30px 34px 34px;margin:34px 0;}
.bf-opinion .bf-seccion-head{border-bottom-color:rgba(255,255,255,.22);}
.bf-opinion .bf-seccion-head h2{color:#fff;}
.bf-opinion .bf-seccion-head h2::before{background:var(--bf-ocre);}
.bf-opinion .bf-verlas{color:var(--bf-ocre);}
.bf-voces{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.bf-voz{border-top:3px solid var(--bf-oxido);padding-top:14px;}
.bf-voz .bf-firma{
	font-family:var(--bf-titular);font-size:13px;font-weight:800;letter-spacing:.12em;
	text-transform:uppercase;color:var(--bf-ocre);margin-bottom:8px;
}
.bf-voz h3{font-size:21px;line-height:1.2;}
.bf-voz h3 a{color:#fff;}
.bf-voz h3 a:hover{color:var(--bf-ocre);}
.bf-voz p{color:#C4D0CA;font-size:16px;margin:0;}

/* ============================================================
   8. SECCIONES Y LISTADO DE MINIATURA LATERAL
   ============================================================ */
.bf-seccion{margin:34px 0;position:relative;clear:both;}
.bf-seccion-head{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;
	border-bottom:2px solid var(--bf-verde);padding-bottom:8px;margin-bottom:18px;
	position:relative;
}
.bf-seccion-head h2{
	font-size:22px;margin:0;letter-spacing:.06em;text-transform:uppercase;
	padding-left:15px;position:relative;
}
.bf-seccion-head h2::before{
	content:"";position:absolute;left:0;top:3px;bottom:1px;width:6px;background:var(--bf-oxido);
}
.bf-seccion-head .bf-verlas{
	font-family:var(--bf-titular);font-size:13px;font-weight:800;letter-spacing:.1em;
	text-transform:uppercase;color:var(--bf-oxido);white-space:nowrap;
}

/* Nota destacada de la sección */
.bf-destacada{margin-bottom:20px;}
.bf-destacada .bf-thumb{aspect-ratio:16/9;margin-bottom:14px;}
.bf-destacada h3{font-size:28px;line-height:1.14;margin-bottom:8px;}

/* Listado horizontal */
.bf-listado{list-style:none;margin:0;padding:0;}
.bf-listado li{
	display:grid;grid-template-columns:190px 1fr;gap:20px;
	padding:18px 0;border-top:1px solid var(--bf-linea);align-items:start;
}
.bf-listado li:first-child{border-top:0;}
.bf-listado .bf-thumb{aspect-ratio:3/2;}
.bf-listado h3{font-size:21px;line-height:1.2;margin-bottom:6px;}
.bf-resumen{color:var(--bf-texto-2);font-size:16.5px;margin-bottom:7px;}

/* ============================================================
   9. LAYOUT: BARRA LATERAL A LA IZQUIERDA
   ============================================================ */
.bf-cols{display:grid;grid-template-columns:310px 1fr;gap:38px;padding:28px 0 44px;align-items:start;}
.bf-sidebar{order:1;}
.bf-principal{order:2;min-width:0;}
.bf-sidebar .widget{
	background:var(--bf-blanco);border:1px solid var(--bf-linea);
	padding:18px 20px;margin-bottom:24px;
}
.bf-sidebar .widget-title{
	font-size:15px;text-transform:uppercase;letter-spacing:.12em;
	border-bottom:2px solid var(--bf-oxido);padding-bottom:8px;margin-bottom:14px;
}
.bf-sidebar ul{list-style:none;margin:0;padding:0;}
.bf-sidebar li{padding:9px 0;border-bottom:1px solid var(--bf-linea);font-size:16.5px;}
.bf-sidebar li:last-child{border-bottom:0;}
.bf-ranking{list-style:none;margin:0;padding:0;}
.bf-ranking li{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--bf-linea);}
.bf-ranking li:last-child{border-bottom:0;}
.bf-ranking .bf-num{
	font-family:var(--bf-titular);font-weight:800;font-size:24px;color:var(--bf-oxido);
	line-height:1;min-width:28px;
}
.bf-ranking h4{font-size:17px;line-height:1.24;margin:0;}

/* ============================================================
   10. NOTA INDIVIDUAL
   ============================================================ */
.bf-entrada{background:var(--bf-blanco);border:1px solid var(--bf-linea);padding:36px 44px 44px;}
.bf-entrada-head{border-bottom:3px solid var(--bf-verde);padding-bottom:18px;margin-bottom:24px;}
.bf-entrada h1{font-size:40px;line-height:1.1;margin:12px 0 14px;}
.bf-entrada .bf-sumario{
	font-size:20px;color:var(--bf-texto-2);line-height:1.48;margin-bottom:14px;
	border-left:4px solid var(--bf-ocre);padding-left:16px;
}
.bf-entrada-meta{
	display:flex;flex-wrap:wrap;gap:16px;font-family:var(--bf-titular);font-size:13px;
	text-transform:uppercase;letter-spacing:.06em;color:#8A857B;font-weight:600;
}
.bf-portada-nota{margin:0 0 26px;}
.bf-portada-nota figcaption{
	font-family:var(--bf-titular);font-size:13.5px;color:#8A857B;padding:8px 2px;
	border-bottom:1px solid var(--bf-linea);
}
.bf-contenido{font-size:19px;line-height:1.75;}
.bf-contenido h2{font-size:26px;margin:1.5em 0 .5em;}
.bf-contenido h3{font-size:22px;margin:1.4em 0 .5em;}
.bf-contenido blockquote{
	margin:1.6em 0;padding:18px 24px;background:var(--bf-arena-2);
	border-left:5px solid var(--bf-oxido);font-family:var(--bf-titular);
	font-size:21px;font-weight:600;line-height:1.36;color:var(--bf-verde);
}
.bf-contenido blockquote p:last-child{margin-bottom:0;}
.bf-contenido img{margin:1.4em 0;}
.bf-contenido a{color:var(--bf-oxido-osc);text-decoration:underline;text-underline-offset:3px;}
.bf-contenido ul,.bf-contenido ol{padding-left:1.3em;margin:0 0 1.2em;}
.bf-contenido li{margin-bottom:.45em;}
.bf-tags{margin-top:28px;padding-top:18px;border-top:1px solid var(--bf-linea);}
.bf-tags a{
	display:inline-block;background:var(--bf-arena-2);border:1px solid var(--bf-linea);
	padding:5px 12px;margin:0 6px 6px 0;font-family:var(--bf-titular);font-size:14px;
}
.bf-tags a:hover{background:var(--bf-oxido);color:#fff;border-color:var(--bf-oxido);}
.bf-relacionadas{margin-top:36px;}
.bf-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.bf-grid3 .bf-thumb{aspect-ratio:16/9;margin-bottom:10px;}
.bf-grid3 h4{font-size:17px;line-height:1.22;margin:0;}

/* ============================================================
   11. ARCHIVOS Y PÁGINAS
   ============================================================ */
.bf-archivo-head{
	background:var(--bf-blanco);border-left:8px solid var(--bf-oxido);
	border-top:1px solid var(--bf-linea);border-right:1px solid var(--bf-linea);
	border-bottom:1px solid var(--bf-linea);
	padding:26px 30px;margin:28px 0 0;
}
.bf-archivo-head h1{font-size:32px;margin:0;text-transform:uppercase;letter-spacing:.04em;}
.bf-archivo-head p{margin:8px 0 0;color:var(--bf-texto-2);font-size:16.5px;}

.bf-pagina{background:var(--bf-blanco);border:1px solid var(--bf-linea);padding:36px 46px 46px;}
.bf-pagina h1{
	font-size:35px;border-bottom:3px solid var(--bf-oxido);
	padding-bottom:12px;margin-bottom:24px;display:inline-block;
}
.bf-pagina table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:16.5px;}
.bf-pagina th{
	background:var(--bf-verde);color:#fff;text-align:left;padding:11px 14px;
	font-family:var(--bf-titular);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
}
.bf-pagina td{border-bottom:1px solid var(--bf-linea);padding:11px 14px;vertical-align:top;}
.bf-pagina tr:nth-child(even) td{background:var(--bf-arena);}

.bf-paginacion{margin:34px 0 10px;text-align:center;}
.bf-paginacion .page-numbers{
	display:inline-block;padding:9px 15px;margin:0 3px;background:var(--bf-blanco);
	border:1px solid var(--bf-linea);font-family:var(--bf-titular);font-weight:700;
}
.bf-paginacion .page-numbers.current,
.bf-paginacion .page-numbers:hover{background:var(--bf-oxido);color:#fff;border-color:var(--bf-oxido);}

/* ============================================================
   12. PIE
   ============================================================ */
.bf-footer{background:var(--bf-verde);color:#B8C6BF;margin-top:12px;}
.bf-footer-top{padding:40px 0 32px;border-bottom:1px solid rgba(255,255,255,.10);}
.bf-footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:32px;}
.bf-footer h4{
	color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.12em;
	margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--bf-oxido);display:inline-block;
}
.bf-footer a{color:#B8C6BF;}
.bf-footer a:hover{color:var(--bf-ocre);}
.bf-footer ul{list-style:none;margin:0;padding:0;}
.bf-footer li{padding:5px 0;font-size:16px;}
.bf-footer-logo{line-height:0;margin-bottom:16px;}
.bf-footer-logo svg{display:block;height:56px;width:auto;max-width:100%;}
.bf-footer-desc{font-size:16px;line-height:1.6;}
.bf-footer-bottom{padding:16px 0;font-family:var(--bf-titular);font-size:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.bf-footer-bottom .bf-credito a{color:var(--bf-ocre);font-weight:700;}

/* ============================================================
   13. RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
	.bf-cols{grid-template-columns:1fr;}
	.bf-sidebar{order:2;}
	.bf-principal{order:1;}
	.bf-portada{grid-template-columns:1fr 1fr;}
	.bf-portada article:nth-child(3){border-left:0;}
	.bf-portada article:nth-child(n+3){border-top:1px solid var(--bf-linea);}
	.bf-voces{grid-template-columns:1fr;}
	.bf-footer-grid{grid-template-columns:1fr 1fr;}
	.bf-entrada,.bf-pagina{padding:28px 26px 34px;}
	.bf-hero-media{aspect-ratio:16/9;}
	.bf-hero-texto h2{font-size:31px;}
}
@media (max-width:860px){
	.bf-toggle{display:block;}
	.bf-cabecera .bf-wrap{min-height:78px;}
	.bf-menu{
		display:none;position:absolute;left:0;right:0;top:100%;background:var(--bf-verde-2);
		flex-direction:column;z-index:70;padding:8px 0;justify-content:flex-start;
	}
	.bf-menu.bf-abierto{display:flex;}
	.bf-menu > li > a{padding:13px 24px;border-bottom:1px solid rgba(255,255,255,.08);}
	.bf-menu .sub-menu{position:static;display:block;background:var(--bf-verde-3);}
	.bf-buscador{display:none;}
	.bf-grid3{grid-template-columns:1fr 1fr;}
	.bf-cinta a{max-width:52%;}
}
@media (max-width:560px){
	body{font-size:17px;}
	.bf-wrap{padding:0 16px;}
	.bf-logo svg{height:46px;}
	.bf-portada,.bf-grid3{grid-template-columns:1fr;}
	.bf-portada article{border-left:0;border-top:1px solid var(--bf-linea);}
	.bf-portada article:first-child{border-top:0;}
	.bf-listado li{grid-template-columns:1fr;gap:12px;}
	.bf-hero-media{aspect-ratio:4/3;}
	.bf-hero-texto{padding:20px 18px 22px;}
	.bf-hero-texto h2{font-size:24px;}
	.bf-hero-sum{display:none;}
	.bf-entrada h1{font-size:27px;}
	.bf-destacada h3{font-size:23px;}
	.bf-opinion{padding:22px 20px 26px;}
	.bf-contenido{font-size:18px;}
	.bf-footer-grid{grid-template-columns:1fr;}
}

/* Alineaciones nativas de WordPress */
.alignleft{float:left;margin:6px 22px 14px 0;}
.alignright{float:right;margin:6px 0 14px 22px;}
.aligncenter{margin-left:auto;margin-right:auto;}
.wp-caption-text,.wp-element-caption{font-family:var(--bf-titular);font-size:14px;color:#8A857B;padding-top:6px;}
.sticky,.gallery-caption,.bypostauthor{display:block;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}