/*
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
*/

: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;
	gap:1.5rem;
	padding-top:1rem; padding-bottom:1rem;
}
.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{
	gap:1.35rem;
	flex-wrap:nowrap;
}
.main-nav .wp-block-navigation-item__content,
.main-nav a{
	color:var(--crema);
	font-size:.88rem;
	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.
   Seven categories only fit on one line from ~1100px up; core would otherwise expand
   the inline menu from 600px and push the last items off-screen on tablets. */
@media (min-width: 1100px){
	.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 1100px force the hamburger, overriding core's own `min-width:600px` rules. */
@media (max-width: 1099px){
	.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:.9rem 0 2rem; }
.article-hero > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
.article-hero .pill{ margin-bottom:.9rem; }
.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; }
.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; }

.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:3rem; 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:2.5rem;
		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 0 .6rem !important; }
.archive-header .term-description{ font-size:1rem; color:#3d4f4a; max-width:720px; }
.archive-header .term-description p{ margin:0 0 1rem; }

.wp-block-query-pagination{ margin-top:2.5rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.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,
.breadcrumb,
.mini-list .wp-block-post-title{ overflow-wrap:break-word; }
.article-body 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:2rem; }
	/* 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. */
@media (min-width: 1100px){
	.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,
.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,
.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. */
.card .wp-block-post-terms a,
.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; }
: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;
}

/* ==========================================================================
   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); }
.acs-calc__result{
	margin:1rem 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;
}