/*
Theme Name: Ahorro con Solar
Theme URI: https://ahorroconsolar.es
Author: Ahorro con Solar
Author URI: https://ahorroconsolar.es
Description: Tema de bloques a medida para Ahorro con Solar, guías y ayudas de autoconsumo solar para particulares en España. Dirección visual "Cuadrícula Solar": fondo casi blanco, verde profundo, dorado solar y acentos en terracota.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ahorro-con-solar
*/

/* ── Tipografías auto-alojadas ─────────────────────────────────────────────────
   Antes se cargaban desde fonts.googleapis.com: una petición a un tercer dominio
   que bloqueaba el primer render (SEO audit, Performance / render-blocking).
   Ahora viven en el tema. Cada familia es un woff2 variable — un solo archivo
   por subconjunto (latin / latin-ext) cubre todos los pesos usados. El navegador
   solo descarga latin-ext si la página contiene alguno de sus caracteres.
   font-display:swap: se pinta ya con la fuente del sistema y se cambia al cargar.
   ──────────────────────────────────────────────────────────────────────────── */
@font-face{
	font-family:'Manrope'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/manrope-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Manrope'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Karla'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/karla-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Karla'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/karla-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Baloo 2'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/baloo2-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Baloo 2'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/baloo2-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/fraunces-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap;
	src:url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
	--verde: #16302B;
	--verde-2: #1F433C;
	--dorado: #F0AC3A;
	--dorado-2: #D99424;
	--crema: #FDFCFA;
	--crema-2: #F4F1EA;
	--terracota: #C97B4A;
	--terracota-2: #B3663A;
	--tinta: #16302B;
	--radius: 20px;
	--radius-sm: 12px;
	--shadow: 0 12px 30px -14px rgba(22,48,43,0.35);
}

a{ text-decoration:none; }
img{ max-width:100%; display:block; }

/* ==========================================================================
   Layout containers — replaces WordPress `alignwide` so widths match the
   approved mockup exactly (.wide-width = max 1280px + 1.5rem side padding).
   ========================================================================== */
.wide-width{
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
	padding-left:1.5rem;
	padding-right:1.5rem;
}
.content-width{
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding-left:1.5rem;
	padding-right:1.5rem;
}
/* Neutralise the max-width/auto-margins WP's constrained layout injects. */
.wide-width.is-layout-constrained > *,
.content-width.is-layout-constrained > *{
	max-width:none;
	margin-left:0;
	margin-right:0;
}
/* We control vertical rhythm between top-level sections ourselves. */
.wp-site-blocks > *{ margin-block-start:0; margin-block-end:0; }

/* WP core emits `:root :where(.is-layout-flow) > :first-child{margin-block-start:0}`,
   which outranks a bare class selector and zeroes the top margin of whichever element
   opens a container. The leaderboard and the bento grid are both first children, so the
   mockup's 1.5rem/2.5rem gaps were being flattened. Re-assert them above that specificity.
   Margins still collapse between siblings exactly as they do in the mockup. */
:root .wide-width > .ad-slot--leaderboard{ margin-block-start:1.5rem; margin-block-end:1.5rem; }
:root main.wide-width > .bento{ margin-block-start:2.5rem; margin-block-end:3rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
	position:sticky; top:0; z-index:50;
	background:var(--verde);
	border-bottom:3px solid var(--dorado);
}
.header-inner{
	display:flex; align-items:center; justify-content:space-between;
	flex-wrap:nowrap;
	/* Was 3rem. With the search added as a third item that gap applied twice
	   over, leaving a conspicuous void between the last nav link and the
	   magnifier. Tightening it also hands the spare width back to the nav,
	   which is what pushes the links away from the logo. */
	gap:1.5rem;
	padding-top:1rem; padding-bottom:1rem;
	/* Keep the bar itself clickable above the search backdrop. */
	position:relative; z-index:2;
}
.logo{
	font-family:'Fraunces', serif;
	font-weight:700;
	font-size:1.05rem;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:#FFFFFF;
	display:flex; align-items:center; gap:.95rem;
	text-decoration:none;
	white-space:nowrap;
	flex-shrink:0;
}
.logo-icon{
	width:26px; aspect-ratio:24/11; flex-shrink:0;
	display:flex; align-items:center; justify-content:center;
}
.logo-icon svg{ width:100%; height:100%; display:block; }
.logo-text{ position:relative; top:1px; }

/* WP forces `color:inherit` on nav links with high specificity, so the colour
   has to be set on the nav itself or the links inherit the dark body colour
   and vanish against the dark green header. */
.main-nav{ flex-shrink:1; color:var(--crema); }
.main-nav .wp-block-navigation__container{
	/* Slightly tighter than the original 1.4rem: seven links plus the search
	   magnifier is a lot to fit before the 1280px cap, and the width saved
	   here is what stops the first link from crowding the logo. */
	gap:1.2rem;
	flex-wrap:nowrap;
}
.main-nav .wp-block-navigation-item__content,
.main-nav a{
	color:var(--crema);
	font-size:.86rem;
	font-weight:500;
	opacity:.88;
	position:relative;
	padding:.25rem 0;
	white-space:nowrap;
	transition:opacity .2s ease;
}
.main-nav .wp-block-navigation-item__content::after{
	content:''; position:absolute; left:0; bottom:-2px;
	width:0; height:2px; background:var(--dorado);
	transition:width .25s ease;
}
.main-nav .wp-block-navigation-item__content:hover{ opacity:1; color:var(--crema); }
.main-nav .wp-block-navigation-item__content:hover::after{ width:100%; }

/* On desktop WP's overlay container keeps `width:100%`, which collapses to zero
   inside a shrink-to-fit flex item and hides the whole menu. Lay it out normally.
   All nine links (seven categories + Sobre nosotros + Contacto) fit on one line
   from 1280px up — that's also where .wide-width (the header's own container)
   hits its 1280px design cap, so there's no more room to gain by going wider.
   Below that the header box is narrower than the viewport itself and the links
   no longer fit, so the hamburger takes over. */
@media (min-width: 1280px){
	.main-nav .wp-block-navigation__responsive-container{
		display:flex !important;
		position:relative !important;
		width:auto !important;
	}
	.main-nav .wp-block-navigation__responsive-container-open{ display:none !important; }
}

/* Below 1280px force the hamburger, overriding core's own `min-width:600px` rules. */
@media (max-width: 1279px){
	.main-nav .wp-block-navigation__responsive-container-open:not(.always-shown){
		display:flex !important;
		color:var(--crema);
		padding:.6rem;
		margin-right:-.6rem;
		min-width:44px; min-height:44px;
		align-items:center; justify-content:center;
	}
	.main-nav .wp-block-navigation__responsive-container-open svg{ fill:currentColor; width:26px; height:26px; }
	.main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
		display:none !important;
	}
	/* The open overlay inherits `background-color:inherit` from core, which resolves to
	   transparent here, so paint it with the brand green explicitly. */
	.main-nav .wp-block-navigation__responsive-container.is-menu-open{
		background-color:var(--verde) !important;
		color:var(--crema);
		padding:1.5rem;
	}
	/* The desktop nav is justified right; core maps that to align-items:flex-end on both
	   the content wrapper and the list inside the overlay, which shoves every link
	   against the edge. Force left alignment on both. */
	.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
		align-items:flex-start !important;
		width:100%;
	}
	.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
		gap:.35rem;
		flex-direction:column;
		align-items:flex-start !important;
		justify-content:flex-start !important;
	}
	.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
		color:var(--crema);
		font-size:1.05rem;
		padding:.7rem 0;
		opacity:1;
	}
	.main-nav .wp-block-navigation__responsive-container-close{
		color:var(--crema);
		min-width:44px; min-height:44px;
	}
	.main-nav .wp-block-navigation__responsive-container-close svg{ fill:currentColor; width:26px; height:26px; }
}

/* ==========================================================================
   Ad slots
   ========================================================================== */
.ad-slot{
	position:relative;
	border-radius:var(--radius);
	display:flex; flex-direction:column;
	align-items:center; justify-content:center;
	text-align:center;
	color:var(--crema);
	font-family:'Manrope', sans-serif;
	font-weight:700;
	letter-spacing:.02em;
	overflow:hidden;
	padding:1.5rem;
}
.ad-slot .ad-chip{
	position:absolute; top:.7rem; right:.7rem;
	background:rgba(248,242,231,0.92);
	color:var(--verde);
	font-family:'Karla', sans-serif;
	font-weight:700;
	font-size:.62rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	padding:.3rem .6rem;
	border-radius:999px;
}
.ad-slot__label{ font-size:.95rem; opacity:.85; }
.ad-slot--leaderboard{
	background:linear-gradient(120deg, var(--verde) 0%, var(--verde-2) 100%);
	min-height:110px;
	margin:1.5rem 0;
}
.ad-slot--gold{ background:linear-gradient(120deg, var(--dorado-2), var(--dorado)); color:var(--verde); }
.ad-slot--gold .ad-chip{ background:rgba(22,48,43,0.85); color:var(--crema); }
.ad-slot--terracota{ background:linear-gradient(120deg, var(--terracota-2), var(--terracota)); }
.ad-slot--verde{ background:linear-gradient(120deg, var(--verde-2), var(--verde)); }
.ad-slot--intro, .ad-slot--mid, .ad-slot--end{ min-height:130px; margin:2.2rem 0; }
.ad-slot--sidebar{ min-height:250px; border-radius:var(--radius); }

/* ==========================================================================
   Category pills
   ========================================================================== */
.pill{
	display:inline-flex; align-items:center; gap:.4rem;
	padding:.35rem .8rem;
	border-radius:999px;
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
	font-family:'Manrope', sans-serif;
	line-height:1.3;
}
/* The category link inside must inherit the pill's colour, otherwise the
   global link colour (dark green) renders invisible on the dark green pill. */
.pill a,
.pill a:hover{ color:inherit; text-decoration:none; }
.pill--verde{ background:var(--verde); color:var(--crema); }
.pill--dorado{ background:var(--dorado); color:var(--verde); }
.pill--terracota{ background:var(--terracota); color:var(--crema); }

/* Pill colour is driven by the post's category class so every card across the
   site is consistent, instead of hardcoding a colour per template slot. */
.category-ayudas-y-subvenciones .pill,
.category-guias-autoconsumo .pill,
.category-casos-practicos .pill{ background:var(--verde); color:var(--crema); }
.category-equipos-y-componentes .pill,
.category-tramites-y-normativa .pill{ background:var(--dorado); color:var(--verde); }
.category-ahorro-y-rentabilidad .pill,
.category-coche-electrico-y-carga .pill{ background:var(--terracota); color:var(--crema); }
/* Fallback for posts with no mapped category. */
.pill{ background:var(--verde); color:var(--crema); }

.trust-line{
	font-size:.82rem;
	color:var(--verde-2);
	opacity:.75;
	font-weight:500;
	margin-top:.4rem;
	display:block;
}

/* ==========================================================================
   Bento grid (front page)
   Each .card is a single-post Query Loop; display:contents collapses the
   <ul>/<li> WordPress always emits so card-media/card-body become the
   direct flex children of .card.
   ========================================================================== */
.bento{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-auto-flow:dense;
	gap:1.1rem;
	margin:2.5rem 0 3rem;
}
.bento > *{ margin-block-start:0 !important; margin-block-end:0 !important; }

.card{
	background:#fff;
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow);
	display:flex; flex-direction:column;
	border:1px solid rgba(22,48,43,0.06);
	transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{
	transform:translateY(-5px);
	box-shadow:0 20px 40px -16px rgba(22,48,43,0.4);
}
.card > .wp-block-post-template,
.card > .wp-block-post-template > li.wp-block-post{ display:contents; }

.card-media{
	aspect-ratio:16/9;
	background:linear-gradient(135deg, var(--verde) 0%, var(--verde-2) 55%, var(--dorado) 130%);
	overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-media figure{ margin:0; height:100%; }
.card-body{
	padding:1.1rem 1.2rem 1.3rem;
	display:flex; flex-direction:column; gap:.5rem;
	flex:1;
}
/* Strip the constrained-layout width caps and block-gap margins WP adds. */
.card .card-media,
.card .card-body,
.card-body > *{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.card-body > *{ margin-block-start:0 !important; margin-block-end:0 !important; }

.card h2, .card h3{ margin:0; }
.card h3, .card h3 a{ font-size:1.05rem; }
.card .excerpt,
.card .excerpt p{ font-size:.88rem; color:#3d4f4a; margin:0; }
.card .excerpt{ flex:1; }
.wp-block-post-excerpt__more-text{ display:none; }

.card--featured{ grid-column:span 4; grid-row:span 2; }
.card--featured .card-media{ aspect-ratio:16/8; }
.card--featured h2, .card--featured h2 a{ font-size:1.7rem; }
.card--featured .card-body{ padding:1.6rem 1.8rem 1.8rem; gap:.7rem; }

.card--tall{ grid-column:span 2; grid-row:span 2; }
.card--tall .card-media{ aspect-ratio:1/1; }

.card--wide{ grid-column:span 3; }
.card--med{ grid-column:span 2; }
.card--small{ grid-column:span 2; }
.card--full{ grid-column:span 6; }
.card--full .card-media{ aspect-ratio:21/6; }

.card--ad{ grid-column:span 2; display:flex; align-items:stretch; padding:0; border:none; box-shadow:none; background:none; }
.card--ad:hover{ transform:none; box-shadow:none; }
.card--ad .ad-slot{ width:100%; border-radius:var(--radius); min-height:100%; padding:1.5rem; margin:0; }

/* Tablet: a real two-column grid. Only the featured and full-width cards keep the
   whole row; everything else pairs up, otherwise the cards become enormous. */
@media (max-width: 980px){
	.bento{ grid-template-columns:repeat(2, 1fr); }
	.card--tall, .card--wide, .card--med,
	.card--small, .card--ad{ grid-column:span 1; grid-row:auto; }
	.card--featured, .card--full{ grid-column:span 2; grid-row:auto; }
	.card--featured .card-media{ aspect-ratio:16/9; }
	.card--tall .card-media{ aspect-ratio:16/9; }
	.card--full .card-media{ aspect-ratio:21/8; }
	.card--featured h2, .card--featured h2 a{ font-size:1.45rem; }
	.card--featured .card-body{ padding:1.3rem 1.4rem 1.5rem; }
	.card--ad .ad-slot{ min-height:250px; }
}

/* Phone: single column. */
@media (max-width: 700px){
	.bento{ grid-template-columns:1fr; gap:1rem; }
	.card--featured, .card--tall, .card--wide, .card--med,
	.card--small, .card--ad, .card--full{ grid-column:span 1; grid-row:auto; }
	.card--full .card-media,
	.card--tall .card-media{ aspect-ratio:16/9; }
	.card--featured h2, .card--featured h2 a{ font-size:1.3rem; }
	.card--featured .card-body{ padding:1.1rem 1.2rem 1.3rem; }
}

/* ==========================================================================
   Multi-post grids (trending, related, archive) — here the Post Template
   <ul> itself becomes the grid and each <li> is a card.
   ========================================================================== */
.post-grid > .wp-block-post-template{
	display:grid;
	gap:1.1rem;
	margin:0; padding:0;
	list-style:none;
}
.post-grid > .wp-block-post-template > li.wp-block-post{
	background:#fff;
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow);
	display:flex; flex-direction:column;
	border:1px solid rgba(22,48,43,0.06);
	list-style:none;
	margin:0;
	transition:transform .3s ease, box-shadow .3s ease;
}
.post-grid > .wp-block-post-template > li.wp-block-post:hover{
	transform:translateY(-5px);
	box-shadow:0 20px 40px -16px rgba(22,48,43,0.4);
}
.post-grid li.wp-block-post > .card-media,
.post-grid li.wp-block-post > .card-body,
.post-grid li.wp-block-post .card-body > *{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.post-grid li.wp-block-post h3,
.post-grid li.wp-block-post h3 a{ font-size:1.05rem; margin:0; }
.post-grid li.wp-block-post .excerpt,
.post-grid li.wp-block-post .excerpt p{ font-size:.88rem; color:#3d4f4a; margin:0; }
.post-grid--4 > .wp-block-post-template{ grid-template-columns:repeat(4, 1fr); }
.post-grid--3 > .wp-block-post-template{ grid-template-columns:repeat(3, 1fr); }
@media (max-width: 980px){
	.post-grid--4 > .wp-block-post-template,
	.post-grid--3 > .wp-block-post-template{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
	.post-grid--4 > .wp-block-post-template,
	.post-grid--3 > .wp-block-post-template{ grid-template-columns:1fr; }
}

.section-heading{
	display:flex; align-items:baseline; justify-content:space-between;
	margin-top:3rem; margin-bottom:1rem;
	flex-wrap:wrap; gap:.5rem;
}
.section-heading h2{ font-size:1.5rem; margin:0; }
.section-heading p{ margin:0; }
.section-heading a{ font-size:.85rem; font-weight:700; color:var(--terracota); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb{
	font-size:.85rem;
	padding:1.3rem 0 0;
	color:var(--verde-2);
	opacity:.75;
	display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
}
.breadcrumb p,
.breadcrumb div{ margin:0; font-size:.85rem; }
.breadcrumb a{ opacity:.9; color:var(--verde-2); }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .sep{ opacity:.5; }

/* ==========================================================================
   Article hero
   ========================================================================== */
.article-hero{ padding:.5rem 0 2rem; }
.article-hero > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
.article-hero .pill{ margin-bottom:1rem !important; }
.article-hero h1{ font-size:2.3rem; max-width:900px; margin:0 0 .5em; }
/* The blanket margin reset above also flattens the h1's own bottom margin, which is the
   only thing separating the title from the date line in the mockup. Re-assert it. */
:root .article-hero > h1{ margin-block-end:.5em !important; }
.hero-media{
	margin-top:1.6rem !important;
	aspect-ratio:21/8;
	border-radius:var(--radius);
	background:linear-gradient(120deg, var(--verde) 0%, var(--verde-2) 45%, var(--dorado) 140%);
	overflow:hidden;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media figure{ margin:0; height:100%; }

/* ==========================================================================
   Two column article layout
   ========================================================================== */
.article-layout{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 320px;
	gap:2.8rem;
	align-items:start;
	padding-bottom:3rem;
}
.article-layout > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
@media (max-width: 900px){
	.article-layout{ grid-template-columns:1fr; }
}
.article-body{ font-size:1.05rem; color:#233833; min-width:0; }
.article-body > *,
.article-body .wp-block-post-content{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.article-body p{ margin:0 0 1.3rem; }
/* WordPress's block-gap rule gives every block a top margin and zeroes the
   bottom one, so lists ended up with a big gap above and none below (the next
   paragraph hugged the last item). Set both sides explicitly, like paragraphs. */
.article-body :is(ul,ol){ margin:0 0 1.3rem; padding-left:1.4rem; }
.article-body :is(ul,ol) :is(ul,ol){ margin:.5rem 0 0; }
.article-body li{ margin:0 0 .45rem; line-height:1.6; }
.article-body li:last-child{ margin-bottom:0; }
.article-body .acs-fuentes :is(ul,ol){ margin-bottom:0; }
/* Wide tables scroll inside their own box on narrow phones instead of
   pushing the whole page layout sideways. table-layout:auto still lets a
   table exceed a width:100% cap if cell content wants more room, so on
   narrow screens we switch to table-layout:fixed, which makes width:100%
   an actual hard limit, and let cell text wrap instead of pushing out. */
.article-body .wp-block-table,
.page-content .wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.8rem; }
.article-body .wp-block-table table,
.page-content .wp-block-table table{ min-width:420px; }
@media (max-width:460px){
	.article-body .wp-block-table table,
	.page-content .wp-block-table table{
		min-width:0; width:100%; table-layout:fixed;
	}
	.article-body .wp-block-table td,
	.article-body .wp-block-table th,
	.page-content .wp-block-table td,
	.page-content .wp-block-table th{ word-break:break-word; }
}
.article-body strong{ color:var(--verde); }
/* WordPress's own block-gap rules zero out each heading's natural bottom
   margin, so the title landed almost flush against the next paragraph while
   the top gap (which we set explicitly) looked fine. Setting margin-bottom
   here directly, instead of relying on the block gap, makes the space below
   a heading consistent across every article. */
.article-body h2{ font-size:1.5rem; margin-top:2rem; margin-bottom:1rem; }
.article-body h3{ font-size:1.2rem; margin-top:1.6rem; margin-bottom:.85rem; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar{
	position:sticky;
	top:6.5rem;
	display:flex;
	flex-direction:column;
	gap:1.2rem;
	min-width:0;
}
.sidebar > *{ margin-block-start:0 !important; margin-block-end:0 !important; max-width:none !important; }
.sidebar-panel{
	background:var(--crema-2);
	border-radius:var(--radius);
	padding:1.3rem 1.4rem;
	border:1px solid rgba(22,48,43,0.08);
}
.sidebar-panel > *{ margin-block-start:0 !important; margin-block-end:0 !important; max-width:none !important; }
.sidebar-panel h4{
	font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
	color:var(--verde); margin:0 0 1rem !important;
}
.sidebar-panel--ad{ padding:0; overflow:hidden; background:none; border:none; }

.search-box .wp-block-search__inside-wrapper{
	background:#fff; border-radius:999px; border:1px solid rgba(22,48,43,0.15);
	padding:.25rem .3rem .25rem .9rem;
}
.search-box .wp-block-search__input{
	border:none; background:transparent;
	font-family:'Karla', sans-serif; font-size:.9rem; color:var(--tinta);
}
.search-box .wp-block-search__input:focus{ outline:none; }
/* The mockup puts a plain magnifier at the left of the pill, not a filled button.
   WP renders the icon button last, so flip the row to bring it to the front. */
.search-box .wp-block-search__inside-wrapper{ flex-direction:row-reverse; }
.search-box .wp-block-search__button{
	background:transparent; border:none; color:var(--verde);
	padding:0 .1rem 0 0; min-width:0; opacity:.7;
}
.search-box .wp-block-search__button svg{ width:18px; height:18px; fill:currentColor; }
.search-box .wp-block-search__button:hover{ opacity:1; background:transparent; }

/* ==========================================================================
   Header search
   The header bar is already tight at its 1280px cap (logo + seven nav links),
   so the search lives as a magnifier that opens a panel underneath the bar
   rather than as an input squeezed into the row. That keeps the bar's
   proportions untouched at every breakpoint and gives the field room to be
   comfortably sized on phones.
   ========================================================================== */
.screen-reader-text{
	position:absolute; width:1px; height:1px;
	margin:-1px; padding:0; overflow:hidden;
	clip-path:inset(50%); border:0; white-space:nowrap;
}

.header-search{ display:flex; align-items:center; flex-shrink:0; }
.header-search__toggle{
	display:flex; align-items:center; justify-content:center;
	/* Kept compact on desktop: every pixel here is a pixel the seven nav
	   links don't have, and they are what crowd against the logo first.
	   The touch-sized 44px version is restored at the mobile breakpoint. */
	width:36px; height:36px; margin-right:-.4rem;
	padding:0; background:transparent; border:none; border-radius:50%;
	color:#FFFFFF; cursor:pointer;
	transition:background .2s ease, transform .2s ease;
}
.header-search__toggle svg{ width:18px; height:18px; display:block; }
.header-search__toggle:hover{ background:rgba(255,255,255,0.13); }
.header-search__toggle:active{ transform:scale(.92); }
.header-search__toggle:focus-visible{ outline:2px solid var(--dorado); outline-offset:2px; }
/* Rotate the icon a touch when open, so the button reads as "active" without
   swapping it for a close icon the user then has to re-parse. */
.header-search__toggle[aria-expanded="true"]{ background:rgba(255,255,255,0.16); }

/* The nav block sits between logo and search; letting it grow keeps the links
   hard right on desktop with the magnifier pinned after them. */
.header-inner > .wp-block-navigation{ flex:1 1 auto; }

.header-search-panel{
	position:relative;
	/* Must sit above .header-search-backdrop, which is a later sibling and
	   would otherwise paint over the panel and swallow every click meant for
	   the input or the submit button. */
	z-index:2;
	max-height:0;
	overflow:hidden;
	background:var(--verde-2, #1F433C);
	transition:max-height .26s cubic-bezier(.22,.61,.36,1);
}
.header-search-panel.is-open{ max-height:200px; }
.header-search-panel__inner{
	max-width:1280px; margin:0 auto;
	padding:1rem 1.5rem 1.2rem;
}
.header-search-form{
	display:flex; align-items:center; gap:.5rem;
	max-width:620px; margin:0 auto;
	background:#fff;
	border-radius:999px;
	padding:.3rem .35rem .3rem 1.15rem;
	border:1px solid rgba(22,48,43,0.15);
}
.header-search-form input[type="search"]{
	flex:1 1 auto; min-width:0;
	border:none; background:transparent;
	font-family:'Karla', sans-serif;
	/* Never below 16px: iOS Safari zooms the page in on smaller inputs. */
	font-size:1rem; color:var(--tinta);
	padding:.5rem 0;
}
.header-search-form input[type="search"]:focus{ outline:none; }
.header-search-form input[type="search"]::-webkit-search-cancel-button{ cursor:pointer; }
.header-search-form__submit{
	flex-shrink:0;
	display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; padding:0;
	background:var(--verde); color:#fff;
	border:none; border-radius:50%;
	cursor:pointer;
	transition:background .2s ease, transform .2s ease;
}
.header-search-form__submit svg{ width:18px; height:18px; display:block; }
.header-search-form__submit:hover{ background:var(--verde-claro, #1F433C); }
.header-search-form__submit:active{ transform:scale(.92); }
.header-search-form__submit:focus-visible{ outline:2px solid var(--dorado); outline-offset:2px; }

/* An explicit backdrop, rather than a bare document click handler: a click
   meant only to dismiss the panel lands here and stops, instead of falling
   through onto whatever sits below — which on this site is frequently an ad
   unit, and an accidental ad click is exactly what AdSense counts as invalid
   traffic (CLAUDE.md point 10). */
.header-search-backdrop{
	position:fixed; inset:0;
	z-index:1; /* below the panel and the header bar, above page content */
	background:transparent;
	border:0;
}
.header-search-backdrop[hidden]{ display:none; }

@media (max-width: 1279px){
	/* Phones and tablets expect the magnifier before the hamburger, and a
	   full 44px touch target now that there is room for one. */
	.header-search{ order:2; }
	.header-inner > .wp-block-navigation{ order:3; flex:0 0 auto; }
	.header-search__toggle{ width:44px; height:44px; margin-right:0; }
	.header-search__toggle svg{ width:20px; height:20px; }

	/* With only three items left, `justify-content:space-between` split the
	   leftover width evenly on both sides of the magnifier and left it
	   stranded mid-bar. Letting the logo swallow that space with an auto
	   margin pins the magnifier and the hamburger together at the right
	   edge, which is where the eye looks for them on a phone. Auto margins
	   beat space-between, so no free space is left for it to distribute.
	   Using a margin rather than flex-grow keeps the logo's own no-shrink,
	   no-wrap behaviour intact on the narrowest screens. */
	.header-inner{ gap:.4rem; }
	.header-inner > .logo{ margin-right:auto; }
}
@media (max-width: 600px){
	.header-search-panel__inner{ padding:.85rem 1.1rem 1rem; }
	.header-search-form{ padding:.28rem .3rem .28rem 1rem; }
	.header-search-form__submit{ width:38px; height:38px; }
}
/* Smallest phones still in use (iPhone SE and similar, 320-375px): the logo,
   magnifier and hamburger have to coexist on one line without wrapping. */
@media (max-width: 380px){
	.header-inner{ gap:.25rem; }
	/* Last-resort guarantee that the bar can never overflow sideways: the logo
	   is normally no-shrink + nowrap, which on a very narrow screen — or on a
	   normal one with the system font size cranked up for accessibility —
	   would push the magnifier and hamburger off the viewport. Here it is
	   allowed to give way and ellipsize instead, so the two controls always
	   stay reachable whatever the width. */
	.header-inner > .logo{ flex-shrink:1; min-width:0; }
	.logo-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.header-search__toggle{ width:40px; height:40px; }
	.header-search-panel__inner{ padding:.75rem .9rem .9rem; }
	.header-search-form{ padding:.25rem .25rem .25rem .85rem; }
	.header-search-form input[type="search"]{ padding:.45rem 0; }
	.header-search-form__submit{ width:36px; height:36px; }
	.header-search-form__submit svg{ width:16px; height:16px; }
}

.mini-list{ list-style:none; margin:0 !important; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.mini-list li{ list-style:none; margin:0; }
.mini-list .wp-block-post-terms{
	display:block; font-size:.72rem; color:var(--terracota);
	font-weight:700; text-transform:uppercase; letter-spacing:.05em;
	margin-bottom:.25rem;
}
.mini-list .wp-block-post-terms a{ color:inherit; }
.mini-list .wp-block-post-title,
.mini-list .wp-block-post-title a{
	display:block; font-size:.9rem; font-weight:600;
	color:var(--verde); line-height:1.4; margin:0;
	font-family:'Manrope', sans-serif;
}
.mini-list .wp-block-post-title a:hover{ color:var(--terracota-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
	background:var(--verde);
	color:var(--crema);
	margin-top:4rem;
	padding:3rem 0 2rem;
}
/* WP's flex layout defaults to align-items:center; the mockup aligns to top. */
.footer-grid.wp-block-group{
	display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
	align-items:flex-start;
	padding-bottom:2rem;
	border-bottom:1px solid rgba(248,242,231,0.15);
}
.footer-links.wp-block-group{ align-items:flex-start; }
.footer-grid > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
.footer-brand{ max-width:320px; }
.footer-brand > *{ margin-block-start:0 !important; margin-block-end:0 !important; max-width:none !important; }
.footer-brand .logo{ color:var(--crema); margin-bottom:.7rem !important; }
.footer-brand p{ font-size:.88rem; opacity:.7; color:var(--crema); }
.footer-links{ display:flex; gap:4.5rem; flex-wrap:wrap; }
.footer-links > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
.footer-links h4{
	font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
	color:var(--dorado); margin:0 0 .8rem !important;
}
.footer-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
/* Seven categories stacked in one column made the desktop footer far taller than the
   brand block beside it. Flow them into two columns (4 + 3) so the footer stays compact.
   Column flow keeps the reading order vertical within each column. Mobile keeps the
   single-column stack defined above. */
@media (min-width: 900px){
	.footer-cats ul{
		display:grid;
		grid-auto-flow:column;
		grid-template-rows:repeat(4, auto);
		column-gap:1.4rem;
		row-gap:.5rem;
		justify-content:start;
	}
	/* Legal: seis enlaces en dos columnas de tres (orden vertical por columna).
	   Selector .footer-legal ul (no .footer-legal__list) para ganar en
	   especificidad a .footer-links ul, igual que hace .footer-cats ul. */
	.footer-legal ul{
		display:grid;
		grid-auto-flow:column;
		grid-template-rows:repeat(3, auto);
		column-gap:1.4rem;
		row-gap:.5rem;
		justify-content:start;
	}
}
.footer-links li{ list-style:none; }
.footer-links a{ font-size:.88rem; opacity:.82; color:var(--crema); }
.footer-links a:hover{ opacity:1; text-decoration:underline; color:var(--crema); }
.footer-bottom{
	padding-top:1.5rem; font-size:.78rem; opacity:.6;
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
	color:var(--crema);
}
.footer-bottom p{ margin:0; font-size:.78rem; }

/* ==========================================================================
   Archive header
   ========================================================================== */
.archive-header{ padding:1.6rem 0 .7rem; }
.archive-header > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
.archive-header h1{ font-size:2.3rem; margin:0 !important; }

/* Category intro: deliberately placed after the article listing (see
   archive.html) so the articles are the first thing visible on entering a
   section. Full content width, set off with a rule instead of a box. */
.archive-about{
	margin-top:3rem;
	padding-top:2rem;
	padding-bottom:2.5rem;
	border-top:1px solid rgba(22,48,43,0.14);
}
.archive-about > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
.archive-about h2{ font-size:1.3rem; margin:0 0 .9rem !important; }
.archive-about .term-description{ font-size:1.02rem; color:#3d4f4a; line-height:1.7; }
.archive-about .term-description p{ margin:0 0 1rem; }
.archive-about .term-description p:last-child{ margin-bottom:0; }

/* Centred in the stylesheet rather than per template: archive.html and
   index.html carried no layout attribute and so defaulted to flex-start,
   which is why the category listings had their pagination hard left while
   search looked right. One rule keeps every listing consistent. */
.wp-block-query-pagination{
	margin-top:2.5rem;
	display:flex; gap:.6rem; flex-wrap:wrap;
	justify-content:center;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers{ color:var(--verde); font-weight:600; font-size:.9rem; }

/* ==========================================================================
   Simple page (legal pages — no ad slots)
   ========================================================================== */
.page-content{ padding:2.5rem 0 3rem; }
.page-content h1{ margin-bottom:1.5rem; }

/* ==========================================================================
   Responsive — everything below only applies under 1100px, so the approved
   desktop layout is untouched.
   ========================================================================== */

/* Long headings, breadcrumbs and pasted URLs must never force sideways scroll. */
h1, h2, h3, h4,
.card h3, .card h2,
.article-body,
.page-content,
.breadcrumb,
.mini-list .wp-block-post-title{ overflow-wrap:break-word; }
.article-body a,
.page-content a{ word-break:break-word; }

@media (max-width: 900px){
	/* Once the sidebar stacks under the article, sticky would pin it mid-scroll. */
	.sidebar{ position:static; top:auto; }
	.article-layout{ gap:2rem; }
}

@media (max-width: 780px){
	.article-hero h1{ font-size:1.9rem; }
	.archive-header h1{ font-size:1.9rem; }
	.hero-media{ aspect-ratio:16/9; }
	.article-body{ font-size:1rem; }
	.article-body h2{ font-size:1.3rem; }
	.article-body h3{ font-size:1.1rem; }
	.section-heading h2{ font-size:1.3rem; }
	/* Give tap targets real height in the footer and nav lists. */
	.footer-links a,
	.footer-bottom a{ display:inline-block; padding:.35rem 0; }
}

@media (max-width: 600px){
	.wide-width,
	.content-width{ padding-left:1rem; padding-right:1rem; }
	.site-header .header-inner{ padding-top:.75rem; padding-bottom:.75rem; }
	.logo{ font-size:.95rem; gap:.7rem; }
	.logo-icon{ width:23px; }

	.article-hero{ padding:1.2rem 0 1.5rem; }
	.article-hero h1{ font-size:1.6rem; }
	.archive-header h1{ font-size:1.6rem; }
	.article-layout{ padding-bottom:2rem; }

	.ad-slot{ padding:1.2rem; }
	.ad-slot__label{ font-size:.85rem; }
	.ad-slot--leaderboard{ min-height:90px; }
	.ad-slot--intro, .ad-slot--mid, .ad-slot--end{ min-height:110px; margin:1.8rem 0; }
	:root .wide-width > .ad-slot--leaderboard{ margin-block-start:1rem; margin-block-end:1rem; }
	:root main.wide-width > .bento{ margin-block-start:1.5rem; margin-block-end:2rem; }

	.section-heading{ margin-top:2rem; }
	.site-footer{ margin-top:2.5rem; padding:2.5rem 0 1.5rem; }
	.footer-grid.wp-block-group{ gap:1.75rem; }
	.footer-brand{ max-width:none; }
	.footer-links{ gap:3rem; }
	/* WP's flex layout sets align-items:center; once this stacks into a column that
	   centres the text horizontally, leaving it indented against the rest of the footer. */
	.footer-bottom{ flex-direction:column; gap:.35rem; align-items:flex-start; }
}

@media (max-width: 380px){
	/* At 320px the nav labels and footer columns need to stack rather than squeeze. */
	.footer-links{ flex-direction:column; gap:1.5rem; }
	.article-hero h1{ font-size:1.45rem; }
	.card--featured h2, .card--featured h2 a{ font-size:1.2rem; }
	.ad-slot__label{ font-size:.8rem; }
}

/* ==========================================================================
   Mobile menu overlay — brand-aligned structure.
   Refines the overlay rules further up the file (later declarations win), so the
   panel reads as part of the site instead of a bare list of links.
   ========================================================================== */
@media (max-width: 1099px){

	/* Shell: full-height flex column. Core's clamp() padding is dropped so the
	   dialog itself can own the padding and match the header exactly. */
	.main-nav .wp-block-navigation__responsive-container.is-menu-open{
		padding:0 !important;
		display:flex;
		flex-direction:column;
	}
	.main-nav .is-menu-open .wp-block-navigation__responsive-close{
		width:100%; max-width:none;
		flex:1 1 auto; display:flex; flex-direction:column;
	}
	.main-nav .is-menu-open .wp-block-navigation__responsive-dialog{
		position:relative;
		flex:1 1 auto; display:flex; flex-direction:column;
		padding:1rem 1.5rem 1.5rem;
	}

	/* Brand bar: same sun mark, wordmark, size and side padding as the site
	   header, so opening the menu does not make the logo jump. */
	.main-nav .is-menu-open .wp-block-navigation__responsive-dialog::before{
		content:"Ahorro con Solar";
		display:flex; align-items:center;
		min-height:44px;
		padding-left:calc(26px + .95rem);
		font-family:'Fraunces', serif;
		font-weight:700; font-size:1.05rem;
		letter-spacing:.03em; text-transform:uppercase;
		color:#FFFFFF;
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3.5 24 11'%3E%3Cdefs%3E%3ClinearGradient id='acsSun' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23F6C858'/%3E%3Cstop offset='100%25' stop-color='%23D9861F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 13a8 8 0 0 1 16 0z' fill='url(%23acsSun)'/%3E%3Cline x1='1' y1='13' x2='23' y2='13' stroke='%23F0AC3A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat:no-repeat;
		background-position:left center;
		background-size:26px auto;
	}

	/* Close button sits on the same line as the brand bar. */
	.main-nav .is-menu-open .wp-block-navigation__responsive-container-close{
		top:1rem; right:1.5rem;
		width:44px; height:44px;
		display:flex; align-items:center; justify-content:center;
		color:var(--crema);
	}

	.main-nav .is-menu-open .wp-block-navigation__responsive-container-content{
		padding-top:1.75rem !important;
		width:100%; flex:1 1 auto;
		display:flex; flex-direction:column;
		align-items:stretch !important;
	}

	/* Categories read as tappable rows, not floating words. */
	.main-nav .is-menu-open .wp-block-navigation__container{
		flex-direction:column;
		align-items:stretch !important;
		gap:0 !important;
		width:100%;
	}
	.main-nav .is-menu-open .wp-block-navigation-item{
		width:100%;
		align-items:center;
		border-bottom:1px solid rgba(248,242,231,0.12);
	}
	.main-nav .is-menu-open .wp-block-navigation-item:last-child{ border-bottom:none; }
	.main-nav .is-menu-open .wp-block-navigation-item__content{
		flex:1 1 auto;
		color:var(--crema);
		font-size:1.02rem; font-weight:600;
		padding:.95rem 0 !important;
		opacity:1;
	}
	/* The gold underline is a desktop-bar affordance only. */
	.main-nav .is-menu-open .wp-block-navigation-item__content::after{ display:none; }
	.main-nav .is-menu-open .wp-block-navigation-item::after{
		content:'\203A';
		margin-left:auto; padding-left:1rem;
		color:var(--dorado);
		font-size:1.5rem; line-height:1; opacity:.85;
	}

	@media (max-width: 599px){
		.main-nav .is-menu-open .wp-block-navigation__responsive-dialog{ padding:1rem 1rem 1.25rem; }
		.main-nav .is-menu-open .wp-block-navigation__responsive-container-close{ right:1rem; }
	}
}

/* Eyebrow + legal block injected server-side into the overlay (see functions.php). */
.acs-menu-eyebrow{
	margin:0 0 .6rem;
	font-family:'Manrope', sans-serif;
	font-size:.72rem; font-weight:700;
	letter-spacing:.12em; text-transform:uppercase;
	color:var(--dorado);
}
/* Desktop keeps the plain horizontal bar. Must match the nav's own
   inline/hamburger switch above, or this stays hidden while the hamburger
   overlay is still in use between the two breakpoints. */
@media (min-width: 1280px){
	.acs-menu-eyebrow{ display:none !important; }
}

/* ==========================================================================
   Motion — overlay entrance, scroll reveal and micro-interactions
   ========================================================================== */
@keyframes acsOverlayIn{
	from{ opacity:0; transform:translateY(-10px); }
	to{ opacity:1; transform:none; }
}
@keyframes acsMenuItemIn{
	from{ opacity:0; transform:translateY(10px); }
	to{ opacity:1; transform:none; }
}

/* Core ships a 0.1s fade; replace it with a calmer 260ms slide. */
.main-nav .wp-block-navigation__responsive-container.is-menu-open{
	animation:acsOverlayIn 260ms cubic-bezier(.22,.61,.36,1) both !important;
}
.main-nav .is-menu-open .acs-menu-eyebrow,
.main-nav .is-menu-open .wp-block-navigation-item,
.main-nav .is-menu-open .acs-menu-legal{
	animation:acsMenuItemIn 320ms cubic-bezier(.22,.61,.36,1) both;
}
.main-nav .is-menu-open .acs-menu-eyebrow{ animation-delay:60ms; }
.main-nav .is-menu-open .wp-block-navigation-item:nth-child(1){ animation-delay:95ms; }
.main-nav .is-menu-open .wp-block-navigation-item:nth-child(2){ animation-delay:130ms; }
.main-nav .is-menu-open .wp-block-navigation-item:nth-child(3){ animation-delay:165ms; }
.main-nav .is-menu-open .wp-block-navigation-item:nth-child(4){ animation-delay:200ms; }
.main-nav .is-menu-open .wp-block-navigation-item:nth-child(5){ animation-delay:235ms; }
.main-nav .is-menu-open .wp-block-navigation-item:nth-child(6){ animation-delay:270ms; }
.main-nav .is-menu-open .wp-block-navigation-item:nth-child(7){ animation-delay:305ms; }
.main-nav .is-menu-open .acs-menu-legal{ animation-delay:340ms; }

.main-nav .wp-block-navigation__responsive-container-open,
.main-nav .wp-block-navigation__responsive-container-close{
	transition:opacity .2s ease, transform .2s ease;
}
.main-nav .wp-block-navigation__responsive-container-open:hover,
.main-nav .wp-block-navigation__responsive-container-close:hover{ opacity:.75; }
.main-nav .wp-block-navigation__responsive-container-open:active,
.main-nav .wp-block-navigation__responsive-container-close:active{ transform:scale(.92); }

/* Micro-interactions: only transform/opacity, so nothing triggers reflow. */
.card{ transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.card:hover{ will-change:transform; }

/* ==========================================================================
   Whole-card click target
   The title's own <a> is stretched across the card, so the image, the excerpt and
   the surrounding padding all activate it. Using one real link per card (the image
   links were removed in the templates) keeps a single tab stop and a meaningful
   accessible name, which a wrapping <a> around the image would not. Works the same
   on touch, where the whole card becomes one large tap target.
   ========================================================================== */
/* Covers both card flavours: the bento boxes on the front page (.card) and the looped
   <li> cards used by every .post-grid (trending, category archives, related articles). */
.card,
.post-grid > .wp-block-post-template > li.wp-block-post{
	position:relative;
	cursor:pointer;
}
.card .wp-block-post-title a::after,
.card h3 a::after,
.post-grid li.wp-block-post .wp-block-post-title a::after,
.post-grid li.wp-block-post h3 a::after{
	content:'';
	position:absolute;
	inset:0;
	z-index:1;
}
/* Hovering anywhere on the card echoes the title hover, so the target reads as one piece. */
.card:hover .wp-block-post-title a,
.card:hover h3 a,
.post-grid li.wp-block-post:hover .wp-block-post-title a,
.post-grid li.wp-block-post:hover h3 a{
	color:var(--terracota-oscuro, #B3663A);
}
/* The category pill keeps its own destination, so it sits above the overlay — but only
   the anchor itself. Raising the whole .wp-block-post-terms container would punch a dead
   zone across the card, because that box stretches the full width while just its inner
   link is clickable. Covers both the block-generated pill (wrapped in
   .wp-block-post-terms) and the hand-built fallback card's <a class="pill"> without a
   wrapper (acs_render_grid_post_card() in functions.php). */
.card .wp-block-post-terms a,
.card > .card-body > a.pill,
.post-grid li.wp-block-post .wp-block-post-terms a{
	position:relative;
	z-index:2;
}
/* Ad panels are not articles: no stretched link, no pointer. */
.card--ad{ cursor:default; }
.footer-links a,
.mini-list a,
.breadcrumb a,
.section-heading a{ transition:color .22s ease, opacity .22s ease; }
.search-box .wp-block-search__button{ transition:opacity .2s ease, transform .2s ease; }
.search-box .wp-block-search__button:active{ transform:scale(.9); }

/* Smooth anchor jumps clear of the sticky header. */
html{ scroll-behavior:smooth; }

/* Rubber-band overscroll past the footer reveals the <html> background, not <body>'s.
   Match it to the footer color so there's no white gap (and no visible slot for
   ad networks) below the footer on desktop or mobile. */
html{ background-color:var(--verde); }
:where(h1, h2, h3, h4, [id]){ scroll-margin-top:96px; }

/* Focus ring in brand gold, replacing the browser's default blue box. */
:focus-visible{
	outline:2px solid var(--dorado);
	outline-offset:3px;
	border-radius:4px;
}

/* ==========================================================================
   Article callout — highlighted tip/key-fact/warning block, used sparingly
   inside article bodies to break up long stretches of plain paragraphs.
   ========================================================================== */
.acs-callout{
	display:flex; gap:.9rem; align-items:flex-start;
	background:var(--crema-2);
	border-left:4px solid var(--dorado);
	border-radius:var(--radius-sm);
	padding:1.1rem 1.3rem;
	margin:1.8rem 0;
}
.acs-callout__icon{
	flex:0 0 auto; width:26px; height:26px; margin-top:.1rem;
	color:var(--terracota);
}
.acs-callout__icon svg{ width:100%; height:100%; }
.acs-callout p{ margin:0; font-size:.98rem; line-height:1.6; }
.acs-callout--warning{ border-left-color:var(--terracota); }
.acs-callout--warning .acs-callout__icon{ color:var(--terracota-2); }

/* Pull-quote — a second, distinct reading element (large short statement),
   for variety instead of always reaching for the same callout box. */
.article-body blockquote.wp-block-quote{
	margin:2rem 0; padding:0 0 0 1.4rem;
	border-left:4px solid var(--verde-2);
}
.article-body blockquote.wp-block-quote p{
	font-family:'Manrope', sans-serif;
	font-size:1.3rem; line-height:1.45; font-weight:700;
	color:var(--verde); margin:0;
}
.article-body blockquote.wp-block-quote cite{
	display:block; margin-top:.6rem;
	font-family:'Karla', sans-serif; font-size:.85rem; font-style:normal;
	opacity:.65;
}

/* ==========================================================================
   Cookie consent — bottom-left corner panel + minimized bubble.
   No overlay: the point is to not interrupt the page, so it never dims or
   locks scroll behind it.
   ========================================================================== */
.acs-cookie-panel{
	box-sizing:border-box;
	position:fixed; z-index:9999;
	left:1.2rem; bottom:1.2rem;
	width:360px; max-width:calc(100vw - 2.4rem);
	max-height:calc(100vh - 2.4rem); overflow-y:auto;
	max-height:calc(100dvh - 2.4rem);
	background:var(--crema);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:1.6rem 1.6rem 1.3rem;
	font-family:'Karla', sans-serif;
	color:var(--tinta);
	opacity:0; transform:translateY(16px) scale(.98);
	transition:opacity .22s ease, transform .22s ease;
}
.acs-cookie-panel--visible{ opacity:1; transform:translateY(0) scale(1); }
.acs-cookie-close{
	position:absolute; top:.9rem; right:.9rem;
	width:28px; height:28px; border-radius:50%;
	border:none; background:var(--crema-2);
	color:var(--verde); font-size:1.2rem; line-height:1;
	cursor:pointer; transition:background .2s ease;
}
.acs-cookie-close:hover{ background:var(--dorado); color:var(--verde); }
.acs-cookie-panel h2{
	font-family:'Manrope', sans-serif;
	font-size:1.15rem; margin:0 1.6rem .55rem 0;
	color:var(--verde);
}
.acs-cookie-text{
	font-size:.85rem; line-height:1.5; opacity:.85; margin:0 0 .9rem;
}
.acs-cookie-prefs:not([hidden]){
	border-top:1px solid rgba(22,48,43,0.12);
	border-bottom:1px solid rgba(22,48,43,0.12);
	margin:0 0 .9rem; padding:.8rem 0;
	display:flex; flex-direction:column; gap:.8rem;
}
.acs-cookie-pref-row{
	display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.acs-cookie-pref-row strong{ display:block; font-size:.85rem; color:var(--verde); }
.acs-cookie-pref-row span{ display:block; font-size:.75rem; opacity:.7; margin-top:.1rem; }
.acs-toggle{ position:relative; display:inline-block; width:38px; height:22px; flex:0 0 auto; }
.acs-toggle input{ opacity:0; width:0; height:0; }
.acs-toggle span{
	position:absolute; inset:0; border-radius:999px;
	background:rgba(22,48,43,0.2); transition:background .2s ease;
}
.acs-toggle span::before{
	content:""; position:absolute; top:3px; left:3px;
	width:16px; height:16px; border-radius:50%;
	background:#fff; transition:transform .2s ease;
}
.acs-toggle input:checked + span{ background:var(--terracota); }
.acs-toggle input:checked + span::before{ transform:translateX(16px); }
.acs-toggle--disabled{ opacity:.6; }
.acs-toggle--disabled input:checked + span{ background:var(--verde-2); }
.acs-cookie-manage-link{
	background:none; border:none; padding:0; margin:0 0 1rem;
	font-family:'Karla', sans-serif; font-size:.8rem; font-weight:700;
	color:var(--verde-2); text-decoration:underline; cursor:pointer;
}
.acs-cookie-buttons{
	display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:.9rem;
}
.acs-cookie-btn{
	flex:1 1 auto; min-width:100px;
	border-radius:var(--radius-sm);
	padding:.65rem .9rem;
	font-family:'Karla', sans-serif; font-weight:700; font-size:.82rem;
	border:none; cursor:pointer; transition:opacity .2s ease, transform .15s ease;
}
.acs-cookie-btn:active{ transform:scale(.97); }
.acs-cookie-btn--accept{ background:var(--verde); color:var(--crema); order:1; flex-basis:100%; }
.acs-cookie-btn--accept:hover{ opacity:.9; }
.acs-cookie-btn--reject{ background:var(--crema-2); color:var(--verde); order:2; }
.acs-cookie-btn--reject:hover{ background:#ece7db; }
.acs-cookie-btn--save{ background:var(--dorado); color:var(--verde); order:1; flex-basis:100%; }
.acs-cookie-btn--save:hover{ background:var(--dorado-2); }
.acs-cookie-links{
	display:flex; gap:1rem; flex-wrap:wrap;
	font-size:.72rem;
}
.acs-cookie-links a{ color:var(--verde-2); text-decoration:underline; }
.acs-cookie-links a:hover{ color:var(--terracota); }

.acs-cookie-bubble{
	position:fixed; z-index:9999;
	left:1.2rem; bottom:1.2rem;
	width:52px; height:52px; border-radius:50%;
	background:var(--crema);
	border:none; box-shadow:var(--shadow);
	display:flex; align-items:center; justify-content:center;
	color:var(--dorado);
	cursor:pointer;
	transition:transform .18s ease;
}
.acs-cookie-bubble:hover{ transform:scale(1.08); }

@media (max-width:520px){
	.acs-cookie-panel{ left:.7rem; bottom:.7rem; width:300px; max-width:calc(100vw - 1.4rem); }
	.acs-cookie-bubble{ left:.9rem; bottom:.9rem; }
}

/* ==========================================================================
   Reduced motion — must stay last so it wins over everything above.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	*, *::before, *::after{
		animation-duration:.001ms !important;
		animation-delay:0ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
		scroll-behavior:auto !important;
	}
}

/* Core lays each overlay row out as a column inheriting the desktop bar's right
   justification, which pushes labels right and drops the chevron onto its own
   line. Force a single left-aligned row per category. */
@media (max-width: 1099px){
	.main-nav .is-menu-open .wp-block-navigation-item{
		flex-direction:row !important;
		align-items:center !important;
		justify-content:flex-start !important;
	}
	.main-nav .is-menu-open .wp-block-navigation-item__content{ text-align:left; }
	.main-nav .is-menu-open .wp-block-navigation__responsive-container-content,
	.main-nav .is-menu-open .wp-block-navigation__container{ align-items:stretch !important; }
}

/* Injected overlay blocks are flex items; pin them to the full column width so
   their rules line up with the category separators. */
.acs-menu-eyebrow, .acs-menu-legal{ width:100%; }

/* ==========================================================================
   In-article calculators
   ========================================================================== */
.acs-calc{
	background:var(--superficie, #F4F1EA);
	border:1px solid rgba(22,48,43,0.1);
	border-radius:var(--radius, 20px);
	padding:1.5rem;
	margin:1.5rem 0;
}
.acs-calc__row{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.acs-calc__row label{ font-weight:700; font-size:.92rem; color:var(--verde, #16302B); }
.acs-calc__input{
	font-family:inherit; font-size:1rem;
	padding:.6rem .8rem;
	border-radius:10px;
	border:1px solid rgba(22,48,43,0.25);
	background:#fff;
	max-width:280px;
}
.acs-calc__button{
	font-family:'Manrope', sans-serif; font-weight:700; font-size:.9rem;
	background:var(--verde, #16302B); color:#fff;
	border:none; border-radius:999px;
	padding:.7rem 1.4rem;
	cursor:pointer;
	transition:background .2s ease, transform .2s ease;
}
.acs-calc__button:hover{ background:var(--verde-claro, #1F433C); }
.acs-calc__button:active{ transform:scale(.97); }
/* Deliberately two classes deep. `.article-body p` (0-1-1) outranks a lone
   `.acs-calc__result` (0-1-0), so the single-class version had its margin-top
   silently replaced by that rule's `margin:0 0 1.3rem` — which is why the
   result text sat flush against the button. Qualifying it with the wrapper
   (0-2-0) wins cleanly, with no !important needed. Covers the savings
   calculators too, since those carry both .acs-calc and .acs-calc-savings. */
.acs-calc .acs-calc__result{
	margin:1.5rem 0 0;
	font-weight:700;
	color:var(--verde, #16302B);
}

/* ==========================================================================
   In-article image placeholders (Fase 5)
   The aspect-ratio is set inline per placeholder so the space is reserved
   exactly at the real image's final dimensions — swapping the placeholder for
   a real <img> later does not shift any layout below it. The dashed border
   and muted style read as "pending", unlike the decorative gradient used for
   the featured image, so nobody mistakes it for finished design.
   ========================================================================== */
.acs-image-placeholder{
	margin:1.8rem 0;
	border-radius:var(--radius);
	border:2px dashed rgba(22,48,43,0.25);
	background:var(--superficie, #F4F1EA);
	display:flex; align-items:center; justify-content:center;
	text-align:center;
	padding:1.5rem;
}
.acs-image-placeholder span{
	font-family:'Karla', sans-serif;
	font-size:.85rem; font-weight:600;
	color:var(--verde-claro, #1F433C);
	opacity:.75;
	max-width:32em;
}
/* Real in-article image, once uploaded: same footprint as the placeholder it
   replaces (margin, radius, aspect-ratio), so swapping one for the other never
   shifts anything below it. object-fit:cover absorbs small differences between
   the uploaded file's native ratio and the reserved slot. */
.acs-inline-image{
	margin:1.8rem 0;
	border-radius:var(--radius);
	overflow:hidden;
}
.acs-inline-image img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
}

/* ------------------------------------------------------------------ *
 * Fase A / 2.6 — firma de autor, caja de autor, fuentes, portada     *
 * ------------------------------------------------------------------ */

/* Byline under the article H1: "Por Autor | Publicado el … | Actualizado el …"
   One row, thin rules between the three items, stacks on narrow screens.
   No photo. */
.article-byline{
	margin-block:1rem 0 !important;
	gap:.35rem 0;
	align-items:baseline;
	font-family:'Manrope', sans-serif;
	font-size:.82rem;
	color:#6f7d78;
}
.article-byline > *{
	margin:0 !important;
	padding:0 .85rem;
	border-left:1px solid rgba(22,48,43,0.2);
	line-height:1.3;
}
.article-byline > *:first-child{ padding-left:0; border-left:none; }

.article-byline__author{ color:#233833; }
.article-byline__author .wp-block-post-author{ display:inline; font-size:inherit; }
.article-byline__author .wp-block-post-author__byline{
	display:inline; font-size:inherit; font-weight:400; color:#6f7d78; margin-right:.35ch;
}
.article-byline__author .wp-block-post-author__content{ display:inline; }
.article-byline__author .wp-block-post-author__name{
	display:inline; margin:0; font-weight:400; font-size:inherit;
}
.article-byline__author .wp-block-post-author__name a,
.article-byline__author a{ color:inherit; text-decoration:none; }
.article-byline__author .wp-block-post-author__name a:hover,
.article-byline__author a:hover{ text-decoration:underline; }

.article-byline__date{ margin:0; font-weight:400; }
.article-byline__date::before{ content:"Publicado el "; }
.article-byline__date--mod::before{ content:"Actualizado el "; }
.article-byline__date time{ font-weight:400; color:inherit; }

@media (max-width:560px){
	.article-byline{ flex-direction:column; align-items:flex-start; gap:.2rem 0; }
	.article-byline > *{ padding:0; border-left:none; }
}

/* Author box at the foot of every article — name + bio + method note,
   stacked, full content width. */
.article-body .acs-author-box{
	margin:2.8rem 0 0;
	padding:1.7rem 1.6rem;
	border:1px solid rgba(22,48,43,0.14);
	border-left:4px solid var(--verde);
	border-radius:var(--radius-sm);
	background:var(--crema-2);
}
.acs-author-box > *{ margin-block:0 !important; }
.acs-author-box__eyebrow{
	font-family:'Manrope', sans-serif;
	font-size:.72rem; font-weight:800;
	letter-spacing:.08em; text-transform:uppercase;
	color:var(--verde-2);
	margin-bottom:.6rem !important;
}
.acs-author-box__name{ font-weight:800; font-size:1.05rem; }
.acs-author-box__name a{ color:inherit; text-decoration:none; }
.acs-author-box__name a:hover{ text-decoration:underline; }
.acs-author-box__bio{
	margin-top:.45rem !important;
	font-size:.95rem; line-height:1.65; color:#3d4f4a;
}
.acs-author-box__method{
	margin-top:1rem !important;
	padding-top:1rem;
	border-top:1px solid rgba(22,48,43,0.12);
	font-size:.9rem; line-height:1.65; color:#3d4f4a;
}

/* "Fuentes oficiales para contrastar" box inside articles — full width,
   generous padding, list that breathes. */
.article-body .acs-fuentes{
	margin:2.6rem 0 1.6rem;
	padding:1.5rem 1.6rem 1.6rem;
	background:var(--crema-2);
	border:1px solid rgba(22,48,43,0.14);
	border-radius:var(--radius-sm);
}
.article-body .acs-fuentes > *{ margin-block:0 !important; max-width:none !important; }
.article-body .acs-fuentes h2{
	font-family:'Manrope', sans-serif;
	font-size:1.15rem;
	margin:0 0 .9rem !important;
}
.article-body .acs-fuentes ul{
	margin:0;
	padding-left:1.15rem;
	display:grid;
	gap:.6rem;
}
.article-body .acs-fuentes li{
	margin:0;
	font-size:1rem;
	line-height:1.6;
}
.article-body .acs-fuentes a{ font-weight:600; }
@media (max-width:600px){
	.article-body .acs-fuentes,
	.article-body .acs-author-box{ padding:1.2rem 1.1rem; }
}

/* ==========================================================================
   Home page editorial band (below the bento grid). Every module here is
   full-width inside .wide-width (1280px) — no capped-measure paragraphs —
   and the three repeating grids (trust row, essentials, category index)
   share the same column count and breakpoints so the page reads as one
   consistent system, not a pile of differently-sized boxes.
   ========================================================================== */
.home-editorial{ margin-top:3.5rem; padding-bottom:1rem; }
.home-editorial > * + *{ margin-top:3.2rem; }
.home-editorial .section-heading{ margin-bottom:1.5rem !important; }
/* A section heading owns the spacing above it; the block right after it
   (the list, the grid) sits flush below the heading instead of stacking
   its own top margin on top of the heading's bottom margin. */
.home-editorial .section-heading + *{ margin-top:0 !important; }

.home-intro h2{ font-size:1.7rem; margin:0 0 1.1rem; }
.home-intro p{
	margin:0 0 1rem;
	color:#33413d;
	line-height:1.75;
}
.home-intro__lead{ font-size:1.15rem; color:#1d2e2a; }

/* Trust line: three short facts read as small print under the intro, in the
   same register as .trust-line elsewhere on the site — a thin rule and a
   left border between items, no icon cards. */
.home-trust{
	margin-top:1.6rem !important;
	padding-top:1.1rem;
	border-top:1px solid rgba(22,48,43,0.15);
	gap:0 !important;
	row-gap:.8rem !important;
}
.home-trust__item{
	flex:1 1 220px;
	margin:0 !important;
	padding-left:1.1rem;
	border-left:2px solid var(--dorado);
	font-size:.87rem;
	line-height:1.55;
	color:#3d4f4a;
}
.home-trust__item:first-child{ border-left:none; padding-left:0; }
.home-trust__item strong{ color:var(--verde); }
@media (max-width:820px){
	.home-trust{ flex-direction:column; }
	.home-trust__item{
		/* En columna, "flex:1 1 220px" convertía el 220px en ALTURA mínima
		   de cada bloque (de ahí los huecos enormes en móvil). */
		flex:0 0 auto;
		border-left:none; padding-left:0;
		border-top:1px solid rgba(22,48,43,0.12); padding-top:.8rem;
	}
	.home-trust__item:first-child{ border-top:none; padding-top:0; }
}

/* Empieza por aquí — same two-column rhythm as the category index below. */
.link-list{
	list-style:none;
	margin:0 !important;
	padding:0;
	display:grid;
	gap:.6rem;
}
.link-list li{ margin:0; padding:0; line-height:1.5; }
.link-list li::before{
	content:"→";
	color:var(--dorado-2);
	font-weight:700;
	margin-right:.5rem;
}
.link-list a{ font-weight:600; }
.link-list--essentials{
	grid-template-columns:repeat(2, 1fr);
	gap:.8rem 3rem;
}
.link-list--essentials a{ font-size:1.02rem; }

/* Explora por temas — a clean two-column index instead of mismatched cards:
   every row is a heading + one description line + three links, all at full
   column width, separated by a rule instead of a box. */
.cat-index{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:2.4rem 3rem;
}
.cat-index__item{
	margin:0 !important;   /* WP inyecta margin-top a partir del 2º hijo y en la
	                          rejilla eso baja "Guías" respecto a "Ayudas" */
	padding-top:1.4rem;
	border-top:2px solid rgba(22,48,43,0.1);
}
.cat-index__item > *{ margin-block:0 !important; max-width:none !important; }
.cat-index__item h3{ font-size:1.15rem; margin:0 0 .5rem !important; }
.cat-index__item h3 a{ color:var(--verde); }
.cat-index__item h3 a:hover{ color:var(--terracota); }
.cat-index__item > p{ font-size:.96rem; color:#3d4f4a; line-height:1.6; margin:0 0 .8rem !important; }
.cat-index__item .link-list{ gap:.5rem; }
.cat-index__item .link-list a{ font-weight:500; font-size:.94rem; }

@media (max-width:820px){
	.home-editorial{ margin-top:2.6rem; }
	.home-editorial > * + *{ margin-top:2.4rem; }
	.link-list--essentials,
	.cat-index{ grid-template-columns:1fr; gap:1.6rem; }
}
@media (max-width:560px){
	.home-intro h2{ font-size:1.4rem; }
	.home-intro__lead{ font-size:1.05rem; }
}

/* ==========================================================================
   Portada estilo revista — 3 destacados a sangre + rejilla de artículos.
   Sustituye a la retícula .bento en la home.
   ========================================================================== */
.home-hero{ margin:2.4rem 0 0; }
.home-hero > .wp-block-post-template{
	list-style:none; margin:0; padding:0;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:4px;
}
.home-hero > .wp-block-post-template > li.wp-block-post{
	position:relative;
	list-style:none; margin:0;
	aspect-ratio:5 / 6;   /* misma anchura + mismo ratio = misma altura exacta,
	                          se nivela sola pase lo que pase con el titular */
	overflow:hidden;
	border-radius:var(--radius-sm);
	background:var(--verde-2);
}
.home-hero li.wp-block-post > .wp-block-post-featured-image{
	position:absolute; inset:0; margin:0; height:100%;
}
.home-hero li.wp-block-post > .wp-block-post-featured-image a,
.home-hero li.wp-block-post > .wp-block-post-featured-image img{
	display:block; width:100%; height:100%; object-fit:cover;
}
.home-hero li.wp-block-post::after{
	content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:linear-gradient(to top, rgba(11,24,20,0.94) 0%, rgba(11,24,20,0.55) 42%, rgba(11,24,20,0.04) 74%);
}
.home-hero__cap{
	position:absolute; left:0; right:0; bottom:0; z-index:2;
	margin:0 !important;
	padding:1.6rem 1.6rem 1.5rem;
	color:#fff;
}
.home-hero__cap > *{ margin-block:0 !important; }
.home-hero__kicker{ margin-bottom:.55rem !important; font-size:.72rem; }
.home-hero__kicker a{
	font-family:'Manrope', sans-serif; font-weight:800;
	letter-spacing:.1em; text-transform:uppercase;
	color:var(--dorado);
}
.home-hero__cap .wp-block-post-title{
	font-family:'Manrope', sans-serif; font-weight:800;
	font-size:1.6rem; line-height:1.14; text-wrap:balance;
}
.home-hero__cap .wp-block-post-title a{ color:#fff; }
.home-hero__cap .wp-block-post-title a:hover{ color:var(--dorado); }

/* Rejilla de artículos: sin recuadro, línea de meta (fecha + sección) sobre la imagen */
.feed{ margin:1.4rem 0 0; }
.feed > .wp-block-post-template{
	list-style:none; margin:0; padding:0;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:2.6rem 2rem;
}
.feed > .wp-block-post-template > li.wp-block-post{
	list-style:none; margin:0;
	display:flex; flex-direction:column;
}
.feed .feed__meta{
	display:flex; justify-content:space-between; align-items:baseline;
	flex-wrap:wrap; gap:.2rem .8rem;
	margin:0 0 .6rem !important;
}
.feed .feed__meta > *{ margin:0 !important; }
.feed .feed__date{ font-size:.78rem; color:#6f7d78; }
.feed .feed__cat a{
	font-family:'Manrope', sans-serif; font-weight:700;
	font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--verde-2);
}
.feed .feed__cat a:hover{ color:var(--terracota); }
.feed .wp-block-post-featured-image{
	margin:0 0 .85rem; border-radius:10px; overflow:hidden;
	aspect-ratio:16 / 10; background:var(--crema-2);
}
.feed .wp-block-post-featured-image a,
.feed .wp-block-post-featured-image img{
	display:block; width:100%; height:100%; object-fit:cover;
}
.feed .wp-block-post-title{
	font-family:'Manrope', sans-serif; font-weight:700;
	font-size:1.02rem; line-height:1.32; margin:0 0 .35rem;
}
.feed .wp-block-post-title a{ color:#233833; }
.feed .wp-block-post-title a:hover{ color:var(--terracota); }
.feed .excerpt,
.feed .excerpt p{ margin:0; font-size:.86rem; line-height:1.5; color:#6f7d78; }

@media (max-width:960px){
	.home-hero > .wp-block-post-template{ grid-template-columns:1fr; gap:0; }
	.home-hero > .wp-block-post-template > li.wp-block-post{ aspect-ratio:3 / 2; border-radius:0; }
	.home-hero__cap .wp-block-post-title{ font-size:1.45rem; }
	.feed > .wp-block-post-template{ grid-template-columns:repeat(2, 1fr); gap:2.2rem 1.6rem; }
}
@media (max-width:560px){
	.feed > .wp-block-post-template{ grid-template-columns:1fr; }
}

/* "Te puede interesar" — versión compacta: las 4 tarjetas SIEMPRE en una fila
   en escritorio (más pequeñas y sin extracto para que quepan). */
.feed--interes > .wp-block-post-template{
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:1.4rem;
}
.feed--interes .wp-block-post-excerpt{ display:none; }
.feed--interes .feed__meta{ margin:0 0 .45rem !important; }
.feed--interes .feed__date{ font-size:.72rem; }
.feed--interes .feed__cat a{ font-size:.66rem; letter-spacing:.06em; }
.feed--interes .wp-block-post-featured-image{ margin:0 0 .6rem; }
.feed--interes .wp-block-post-title{ font-size:.9rem; line-height:1.28; }
@media (max-width:820px){
	.feed--interes > .wp-block-post-template{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:460px){
	.feed--interes > .wp-block-post-template{ grid-template-columns:1fr; }
}

/* ── Página de autor (templates/author.html) ─────────────────────────────────
   E-E-A-T: página propia del autor con bio y credenciales, a la que apunta el
   schema Person y la firma de cada artículo (SEO audit). */
.author-page{
	max-width:760px;
	margin:2.5rem auto 3rem;
	padding:0 1.5rem;
}
.author-page h1{
	font-family:'Manrope', sans-serif; font-weight:800;
	font-size:clamp(1.8rem, 4vw, 2.4rem);
	color:var(--verde); margin:.6rem 0 .2rem;
}
.author-page__role{
	font-family:'Karla', sans-serif; font-weight:700;
	color:var(--dorado-2); font-size:.95rem;
	text-transform:uppercase; letter-spacing:.04em;
	margin:0 0 1.4rem;
}
.author-page__bio{
	font-family:'Karla', sans-serif;
	font-size:1.02rem; line-height:1.7;
	color:var(--tinta); margin:0 0 1.1rem;
}
.author-page__bio a{ color:var(--verde-2); text-decoration:underline; }
.author-page + .section-heading,
.author-page ~ .section-heading{
	max-width:1280px; margin:1rem auto .5rem;
}

/* Enlace a perfil externo (rel=me) en la caja de autor y la página de autor:
   la contrapartida visible del sameAs del schema Person (SEO audit, E-E-A-T). */
.acs-author-box__links{ margin:.6rem 0 0; font-family:'Karla', sans-serif; font-size:.9rem; }
.acs-author-box__links a{ color:var(--verde-2); text-decoration:underline; }
.author-page__links{ margin:.2rem 0 0; font-family:'Karla', sans-serif; font-size:.95rem; }
.author-page__links a{ color:var(--verde-2); text-decoration:underline; }

/* ==========================================================================
   FASE 2 — SEO audit 2026-09-07 (ACTION-PLAN Fase 2, tema)
   ========================================================================== */

/* El título de la tarjeta del hero no se recorta contra el borde del recuadro:
   se limita a 3 líneas con puntos suspensivos. */
.home-hero__cap .wp-block-post-title{
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

/* 2.5 — Reserva de altura de los anuncios in-article por breakpoint, para que
   AdSense no provoque saltos de maquetación (CLS) al inyectar (audit). */
.ad-slot--intro, .ad-slot--mid{ min-height:280px; margin:2.2rem 0; }
.ad-slot--end{ min-height:110px; margin:2.2rem 0; }
@media (min-width: 782px){
	.ad-slot--intro, .ad-slot--mid{ min-height:260px; }
	.ad-slot--end{ min-height:100px; }
}

/* 2.3 — Ninguna tarjeta se queda como un rectángulo vacío: si el artículo aún
   no tiene imagen destacada, el hueco lleva la marca (sol) sobre el degradado
   verde en vez de un bloque plano (audit, Imágenes / Visual). */
.card-media:not(:has(img)),
.hero-media:not(:has(img)),
.home-hero li.wp-block-post:not(:has(img)){
	position:relative;
}
.card-media:not(:has(img))::after,
.hero-media:not(:has(img))::after{
	content:"";
	position:absolute; inset:0;
	background:center / 44% no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23F0AC3A' stroke-width='3' stroke-linecap='round' opacity='0.55'%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Cpath d='M50 20V9M50 91V80M78 22l-7 7M29 71l-7 7M78 78l-7-7M29 29l-7-7M80 50h11M9 50h11'/%3E%3C/g%3E%3C/svg%3E");
	pointer-events:none;
}
.home-hero li.wp-block-post:not(:has(img))::before{
	content:"";
	position:absolute; inset:0; z-index:0;
	background:center 38% / 38% no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23F0AC3A' stroke-width='3' stroke-linecap='round' opacity='0.5'%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Cpath d='M50 20V9M50 91V80M78 22l-7 7M29 71l-7 7M78 78l-7-7M29 29l-7-7M80 50h11M9 50h11'/%3E%3C/g%3E%3C/svg%3E");
	pointer-events:none;
}

/* 2.6 — Banner de cookies: en móvil pasa a hoja inferior a lo ancho, centrada
   y de altura contenida (audit: tapaba ~60% del viewport y salía recortado). */
@media (max-width: 560px){
	.acs-cookie-panel{
		left:0; right:0; bottom:0;
		width:100%; max-width:100%;
		border-radius:var(--radius) var(--radius) 0 0;
		padding:1.3rem 1.2rem 1.1rem;
		max-height:80vh; max-height:80dvh;
	}
	.acs-cookie-text{ margin-bottom:.7rem; }
}

/* ==========================================================================
   FASE 3 — SEO audit (contenido / enlazado interno)
   ========================================================================== */

/* 3.9 — Respuesta rápida al inicio del artículo (sin caja de "en resumen" ni
   índice: es un párrafo destacado + tabla, regla del proyecto). */
.article-body .acs-respuesta-rapida{
	font-size:1.08rem;
	line-height:1.65;
	border-left:4px solid var(--dorado);
	padding:.2rem 0 .2rem 1.1rem;
	margin:0 0 1.6rem;
}
.article-body .acs-respuesta-rapida strong:first-child{ color:var(--verde); }
.article-body .acs-tabla-rapida{ margin-top:0; }

/* 3.3 — Enlace contextual "siguiente paso" (A→E) al pie de las fichas de
   ayudas por CCAA, antes de las preguntas frecuentes. */
.article-body .acs-siguiente-paso{
	background:var(--crema-2);
	border-radius:var(--radius-sm);
	padding:1rem 1.2rem;
	margin:2rem 0 1.4rem;
	font-size:.97rem;
	line-height:1.6;
}

/* 3.4 — Tabla estándar "de un vistazo" al inicio de cada ficha de ayudas por
   CCAA (Programa · Organismo · Estado · Cuantía · Plazo · Dónde confirmarlo).
   Formato clave-valor: se lee bien en móvil sin scroll horizontal. */
.article-body .acs-tabla-ayuda{ margin:0 0 1.8rem; overflow:visible; }
.article-body .acs-tabla-ayuda table{ min-width:0; width:100%; border-collapse:collapse; }
.article-body .acs-tabla-ayuda th,
.article-body .acs-tabla-ayuda td{
	display:block; width:100%; text-align:left;
	padding:.55rem .9rem; border:0;
}
.article-body .acs-tabla-ayuda th{
	background:var(--verde); color:var(--crema);
	font-family:'Manrope', sans-serif; font-size:.78rem;
	text-transform:uppercase; letter-spacing:.04em;
	border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.article-body .acs-tabla-ayuda td{
	background:var(--crema-2);
	font-size:.95rem; line-height:1.55;
	border-radius:0 0 var(--radius-sm) var(--radius-sm);
	margin-bottom:.4rem;
}
.article-body .acs-tabla-ayuda tr:last-child td{ margin-bottom:0; }
@media (min-width: 720px){
	.article-body .acs-tabla-ayuda th,
	.article-body .acs-tabla-ayuda td{
		display:table-cell; width:auto;
		border-bottom:1px solid rgba(22,48,43,0.1);
		border-radius:0;
	}
	.article-body .acs-tabla-ayuda th{ width:170px; vertical-align:top; border-radius:0; }
	.article-body .acs-tabla-ayuda td{ margin:0; background:#fff; }
}

/* 3.1 — Tabla resumen de las 17 comunidades en la guía pilar de ayudas de España. */
.article-body .acs-tabla-ccaa td:first-child{ font-weight:700; }
.article-body .acs-tabla-ccaa td:first-child a{ color:var(--verde-2); }