/*!
Theme Name: ASOFRIO
Theme URI: https://asofrio.com
Description: ¡Vamos a revolucionar el sector HVACR!
Version: 0.1.0
Author: Jose Miguel Molina Jiménez
Author URI: https://seo13.es
Text Domain: asofrio
Requires at least: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ASOFRIO is based on _tw https://underscoretw.com/, (C) 2021-2026 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2026 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/

/* =====================================================
   ASOFRÍO — DESIGN TOKENS
   Fuente: Manual de Marca Asofrío v1.0 (2026)
   ===================================================== */
:root{
	/* Paleta institucional */
	--brand:#01088C;         /* Azul Asofrío — logo, títulos especiales */
	--lavender:#8C8FF6;      /* Lavanda Asofrío — acentos, fondos suaves */
	--lavender-bg:#EEF0FB;   /* tint de lavanda para fondos suaves */
	--nav:#061B5F;           /* Azul navegación — cabeceras, fondos oscuros, portadas */
	--action:#0057E7;        /* Azul acción — botones, enlaces, foco */

	/* Paleta funcional / datos */
	--accent:#16C7E8;        /* Cian acento — iconos, indicadores */
	--success:#0B8278;
	--success-bg:#E1F3EF;
	--warning:#F5A524;
	--warning-bg:#FDF0D9;
	--error:#D93030;
	--error-bg:#FBE6E6;

	/* Texto y neutros */
	--text:#0B1F4D;
	--text-secondary:#60708A;
	--bg:#F7F9FC;
	--white:#FFFFFF;
	--border:#E2E8F0;

	/* Forma */
	--r-sm:6px;   /* botones, inputs */
	--r-md:8px;   /* cards, tablas, menús */
	--r-lg:10px;  /* grandes contenedores */
	--r-full:999px; /* chips, badges, avatares */
}

/* ============ Reset / base ============ */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
	font-family:'Inter', 'Segoe UI', Arial, sans-serif;
	background:var(--bg);
	color:var(--text);
	font-size:15px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none;}

.material-symbols-outlined{
	font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
	font-size:24px;
	line-height:1;
	display:inline-block;
}

/* Accesibilidad: enlace "saltar al contenido" en header.php */
.sr-only{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sr-only:focus{
	position:fixed; top:8px; left:8px; width:auto; height:auto;
	margin:0; overflow:visible; clip:auto; white-space:normal;
	background:var(--action); color:var(--white);
	padding:10px 16px; border-radius:var(--r-sm); z-index:1000;
}

/* ============ Animaciones de aparición al hacer scroll ============ */
/*
 * Sistema genérico reutilizado en toda la web (ver js/components.js):
 * el JS añade .reveal a tarjetas, cabeceras de sección y bloques de hero,
 * y .is-visible cuando entran en el viewport. El retraso escalonado
 * (--reveal-delay) lo calcula el propio JS por grupo de hermanos.
 */
.reveal{
	opacity:0; transform:translateY(26px);
	transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
	transition-delay:var(--reveal-delay, 0s);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
	.reveal{opacity:1; transform:none; transition:none;}
}

/* Zoom lento ("Ken Burns") de las fotos de fondo de los hero interiores */
@keyframes heroPhotoZoom{ from{transform:scale(1);} to{transform:scale(1.12);} }
@media(prefers-reduced-motion:reduce){
	.hero-directorio::after, .hero-instalador::after, .hero-blog::after{animation:none;}
}

/* ============ Layout helpers ============ */
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.section{padding:72px 24px;}
.section-tight{padding:48px 24px;}
@media(max-width:720px){
	.section{padding:48px 20px;}
	.section-tight{padding:32px 20px;}
}

.eyebrow{
	font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color:var(--action); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}

/* Cabecera de sección genérica (título + texto introductorio) reutilizada
   en todas las páginas; cada sección la afina con estilos puntuales inline. */
.section-head{margin-bottom:36px; max-width:640px;}

/* Compensa la cabecera fija al hacer scroll a un ancla dentro de la página.
   (En el prototipo original este selector apuntaba a "section[id^=...]",
   pero los bloques con ese id son <div>, así que nunca llegaba a aplicarse;
   aquí se corrige para que el ancla sí tenga en cuenta el header sticky.) */
[id^="section-"]{scroll-margin-top:76px;}

h1,h2,h3,h4{font-weight:700; color:var(--text); letter-spacing:-0.01em;}
h1{font-size:40px; line-height:1.12;}
h2{font-size:28px; line-height:1.2;}
h3{font-size:18px; line-height:1.3;}
p{color:var(--text-secondary);}
.lede{font-size:17px; color:var(--text-secondary); max-width:640px;}

@media(max-width:720px){
	h1{font-size:30px;}
	h2{font-size:23px;}
}

/* ============ Buttons ============ */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:12px 20px; border-radius:var(--r-sm);
	font-weight:600; font-size:14px; border:1px solid transparent;
	transition:opacity .15s ease, background .15s ease;
	white-space:nowrap;
}
.btn:hover{opacity:.9;}
.btn-primary{background:var(--action); color:var(--white);}
.btn-outline{background:transparent; color:var(--nav); border-color:var(--border);}
.btn-outline:hover{background:var(--white); opacity:1; border-color:var(--nav);}
.btn-ghost-white{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35);}
.btn-ghost-white:hover{background:rgba(255,255,255,.1); opacity:1;}
.btn-success{background:var(--success); color:var(--white);}
.btn-sm{padding:9px 14px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}

/* ============ Chips / badges ============ */
.chip{
	display:inline-flex; align-items:center; gap:6px;
	padding:6px 12px; border-radius:var(--r-full);
	font-size:12px; font-weight:700; letter-spacing:.02em;
	background:var(--lavender-bg); color:var(--brand);
}
.chip .material-symbols-outlined{font-size:16px;}
.badge-success{background:var(--success-bg); color:var(--success);}
.badge-warning{background:var(--warning-bg); color:var(--warning);}
.badge-error{background:var(--error-bg); color:var(--error);}

/* ============ CTA banner (reutilizado en todas las páginas) ============ */
.cta-banner{
	background:var(--nav); border-radius:var(--r-lg); padding:44px;
	display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	color:var(--white);
}
.cta-banner h2{color:var(--white); margin-bottom:6px;}
.cta-banner p{color:#B9C3DC;}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* ============ Grid helpers ============ */
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){
	.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
	.grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;}
}

/* ============ Header ============ */
header.site{
	position:sticky; top:0; z-index:100;
	background:var(--white); border-bottom:1px solid var(--border);
	transition:box-shadow .2s ease;
}
header.site.is-scrolled{ box-shadow:0 8px 24px rgba(11,31,77,.10); }
/* Anclas internas (#section-...): que no queden tapadas por la cabecera fija */
[id^="section-"]{ scroll-margin-top:88px; }
.nav-inner{
	display:flex; align-items:center; justify-content:space-between;
	height:72px;
}
.logo-link{display:inline-flex; align-items:center;}
.logo-mark{height:38px; width:auto;}
nav.main-nav{display:flex; align-items:center;}
.nav-menu{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;}
nav.main-nav .nav-link{
	background:none; border:none; font-size:14px; font-weight:600;
	color:var(--text-secondary); padding:6px 0; border-bottom:2px solid transparent;
	text-decoration:none; display:inline-flex; align-items:center; cursor:pointer; font-family:inherit;
}
nav.main-nav .nav-link:hover{color:var(--text);}
nav.main-nav .nav-link.active{color:var(--brand); border-bottom-color:var(--action);}
.nav-item{position:relative; display:flex; align-items:center;}
.nav-caret{
	background:none; border:none; padding:4px; margin-left:-4px; cursor:pointer;
	color:var(--text-secondary); display:inline-flex; align-items:center;
}
.nav-caret .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.nav-item:hover .nav-caret, .nav-item.open .nav-caret{color:var(--text);}
.nav-item.open .nav-caret .material-symbols-outlined{transform:rotate(180deg);}
.nav-dropdown{
	position:absolute; top:calc(100% + 14px); left:0; min-width:190px;
	background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
	box-shadow:0 12px 28px rgba(11,31,77,.14); padding:8px; margin:0; list-style:none;
	opacity:0; visibility:hidden; transform:translateY(4px);
	transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index:200;
}
.nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown{
	opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown-link{
	display:block; padding:9px 12px; border-radius:var(--r-sm); font-size:14px;
	font-weight:600; color:var(--text-secondary); text-decoration:none; white-space:nowrap;
}
.nav-dropdown-link:hover{background:var(--lavender-bg); color:var(--brand);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.burger{display:none; background:none; border:none; padding:8px;}
.burger .material-symbols-outlined{color:var(--nav);}

@media(max-width:980px){
	nav.main-nav{
		position:fixed; top:72px; left:0; right:0; bottom:0;
		background:var(--white); align-items:flex-start;
		padding:24px; transform:translateX(100%); transition:transform .2s ease;
		overflow-y:auto;
	}
	nav.main-nav.open{transform:translateX(0);}
	.nav-menu{flex-direction:column; align-items:flex-start; gap:4px; width:100%;}
	nav.main-nav .nav-link{width:100%; padding:14px 4px; border-bottom:1px solid var(--border);}
	.nav-item{width:100%; flex-wrap:wrap; justify-content:space-between; border-bottom:1px solid var(--border);}
	nav.main-nav .nav-item .nav-link{width:auto; border-bottom:none;}
	.nav-caret{padding:14px 4px;}
	.nav-dropdown{
		position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
		border:none; padding:0 0 10px 14px; width:100%; display:none;
	}
	.nav-item.open .nav-dropdown{display:block;}
	.nav-dropdown-link{padding:10px 4px;}
	.nav-actions .btn-outline{display:none;}
	.burger{display:inline-flex;}
}

/* ============ Footer ============ */
footer.site{background:var(--nav); color:#C3CCE3; padding:56px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-grid h4{color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px;}
.footer-grid ul li{margin-bottom:10px; font-size:14px;}
.footer-grid ul li a:hover{color:var(--white);}
.footer-logo{height:52px; margin-bottom:20px;}
.footer-brand-text{color:var(--white);}
.footer-social{display:flex; align-items:center; gap:14px; margin-top:20px;}
.footer-social a{
	display:inline-flex; align-items:center; justify-content:center;
	width:36px; height:36px; border-radius:50%;
	background:rgba(255,255,255,.08); color:var(--white);
	transition:background .15s ease, color .15s ease;
}
.footer-social a:hover{background:var(--action); color:var(--white);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:13px; color:#8E9AC0; flex-wrap:wrap; gap:10px;}
.footer-legal{display:flex; gap:24px; flex-wrap:nowrap;}
.footer-legal a:hover{color:var(--white);}
@media(max-width:640px){
	.footer-bottom{flex-direction:column; align-items:flex-start;}
	.footer-legal{flex-wrap:wrap; gap:8px 20px;}
}
@media(max-width:800px){
	.footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
}
@media(max-width:980px){
	.footer-grid > *{min-width:0;}
}
@media(max-width:480px){
	.footer-grid{grid-template-columns:1fr !important;}
}

/* =====================================================
   COMPONENTES COMPARTIDOS ENTRE PÁGINAS
   (hero grande, tarjetas, paneles de audiencia, vídeo,
   datos de mercado, marquee, blog, reseñas, FAQ...)
   ===================================================== */

/* ============ Hero grande ============ */
.hero-v2{
	position:relative; color:var(--white); overflow:hidden;
	padding:0;
	background:var(--nav) url('assets/images/slider.png') center 30%/cover no-repeat;
	min-height:calc(100vh - 72px); min-height:calc(100svh - 72px);
	display:flex; align-items:center;
}
.hero-v2::before{
	content:''; position:absolute; inset:0;
	background-image:
		linear-gradient(180deg, rgba(3,12,54,.90) 0%, rgba(6,27,95,.82) 45%, rgba(3,12,54,.94) 100%),
		linear-gradient(90deg, rgba(6,27,95,.90) 0%, rgba(6,27,95,.90) 55%, rgba(6,27,95,0) 75%),
		radial-gradient(circle at 15% 20%, rgba(140,143,246,.30), transparent 45%),
		radial-gradient(circle at 85% 15%, rgba(22,199,232,.26), transparent 40%),
		radial-gradient(circle at 60% 90%, rgba(0,87,231,.30), transparent 45%);
}
.hero-v2::after{
	content:''; position:absolute; inset:0; opacity:.5;
	background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
	background-size:22px 22px;
	mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
}
.hero-v2-inner{position:relative; z-index:1; width:100%; padding:clamp(40px,8vh,108px) 24px;}
.hero-v2-eyebrow{
	display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
	border:1px solid rgba(255,255,255,.28); border-radius:var(--r-full);
	font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
	color:var(--white); background:rgba(255,255,255,.08); margin-bottom:clamp(16px,3vh,26px);
	backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-v2-eyebrow .material-symbols-outlined{font-size:15px; color:var(--accent);}
.hero-v2 h1{
	color:var(--white); font-size:clamp(32px, 3.4vw + 1.6vh, 68px); line-height:1.06; letter-spacing:-.02em;
	max-width:900px; font-weight:700;
	text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hero-v2 h1 em{ font-style:normal; color:var(--accent); }
.hero-v2 .lede{
	color:#DCE2F2; font-size:clamp(15px, .5vw + .9vh, 19px); max-width:600px; margin-top:clamp(14px,2.5vh,24px);
	text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.hero-v2-ctas{display:flex; gap:14px; margin-top:clamp(20px,4vh,36px); flex-wrap:wrap;}
.btn-lg{padding:15px 26px; font-size:15px; border-radius:var(--r-sm);}
.hero-v2-stats{
	display:flex; gap:0; margin-top:clamp(28px,6vh,68px); flex-wrap:wrap;
	border-top:1px solid rgba(255,255,255,.15); padding-top:clamp(16px,3vh,30px);
}
.hero-v2-stats .stat{padding-right:48px; margin-right:48px; border-right:1px solid rgba(255,255,255,.15);}
.hero-v2-stats .stat:last-child{border-right:none;}
.hero-v2-stats .stat .num{font-size:clamp(22px, 1.6vw + 1vh, 34px); font-weight:700; color:var(--white); line-height:1;}
.hero-v2-stats .stat .lbl{font-size:13px; color:#9AA7CC; margin-top:8px; font-weight:600;}
@media(max-width:720px){
	.hero-v2::before{
		background-image:
			linear-gradient(180deg, rgba(3,12,54,.90) 0%, rgba(6,27,95,.82) 45%, rgba(3,12,54,.94) 100%),
			radial-gradient(circle at 15% 20%, rgba(140,143,246,.30), transparent 45%),
			radial-gradient(circle at 85% 15%, rgba(22,199,232,.26), transparent 40%),
			radial-gradient(circle at 60% 90%, rgba(0,87,231,.30), transparent 45%);
	}
	.hero-v2-stats .stat{padding-right:28px; margin-right:28px;}
	.hero-v2-stats .stat .num{font-size:26px;}
	.hero-v2-stats{display:none;}
}

.hero-ctas{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}

/* ============ Tarjetas de introducción (intro-card) ============ */
.intro-card{
	background:var(--white); border:1px solid var(--border); border-radius:18px;
	padding:36px 30px; box-shadow:0 1px 3px rgba(11,31,77,.06);
	transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
	display:flex; flex-direction:column;
}
.intro-card:hover{
	box-shadow:0 18px 40px rgba(1,8,140,.16); transform:translateY(-4px); border-color:transparent;
}
.intro-card-icon{
	width:56px; height:56px; border-radius:14px;
	display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.intro-card-icon .material-symbols-outlined{font-size:26px; color:#fff;}
.intro-card:nth-child(1) .intro-card-icon{background:linear-gradient(135deg, var(--brand), var(--nav));}
.intro-card:nth-child(2) .intro-card-icon{background:linear-gradient(135deg, var(--action), var(--brand));}
.intro-card:nth-child(3) .intro-card-icon{background:linear-gradient(135deg, var(--accent), var(--action));}
.intro-card h3{color:var(--text); font-size:19px; margin-bottom:10px; line-height:1.3;}
.intro-card p{color:var(--text-secondary); line-height:1.65; font-size:14.5px; flex:1;}
.intro-card-cta{
	display:inline-flex; align-items:center; gap:6px; margin-top:22px;
	background:none; border:none; padding:0; font-size:14px; font-weight:700;
	color:var(--action); cursor:pointer; text-decoration:none; align-self:flex-start; font-family:inherit;
}
.intro-card-cta .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.intro-card-cta:hover .material-symbols-outlined{transform:translateX(4px);}
.intro-card-cta:hover{color:var(--brand);}

/* ============ Paneles de imagen con acordeón (audience-panel) ============ */
.audience-panels{
	display:flex; gap:6px; height:520px; border-radius:20px; overflow:hidden;
}
.audience-panel{
	position:relative; flex:1; min-width:64px; cursor:pointer;
	transition:flex .55s cubic-bezier(.22,.61,.36,1);
	overflow:hidden;
}
.audience-panel:hover, .audience-panel:focus-within{ flex:2.3; }
.audience-panel-bg{
	position:absolute; inset:0; background-size:cover; background-position:center;
	transform:scale(1.08); transition:transform .8s ease;
}
.audience-panel:hover .audience-panel-bg{ transform:scale(1); }
.audience-panel-overlay{
	position:absolute; inset:0;
	background:linear-gradient(0deg, rgba(1,8,45,.98) 0%, rgba(1,8,60,.88) 24%, rgba(1,8,80,.4) 55%, rgba(1,8,80,0) 85%);
}
.audience-panel-content{
	position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
	padding:26px 22px; color:#fff;
}
.audience-panel-heading{ display:flex; align-items:center; gap:14px; }
.audience-panel-icon{
	width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.audience-panel-icon .material-symbols-outlined{ font-size:22px; color:#fff; }
.audience-panel h3{ color:#fff; font-size:22px; white-space:nowrap; }
.audience-panel-detail{
	max-height:0; opacity:0; overflow:hidden; margin-top:12px;
	transition:max-height .5s ease, opacity .4s ease;
}
.audience-panel:hover .audience-panel-detail, .audience-panel:focus-within .audience-panel-detail{
	max-height:160px; opacity:1;
}
.audience-panel-detail p{ color:rgba(255,255,255,.88); font-size:14px; line-height:1.6; max-width:280px; }
.audience-panel-cta{
	display:inline-flex; align-items:center; gap:4px; margin-top:14px;
	background:none; border:none; padding:0; cursor:pointer;
	color:#fff; font-weight:700; font-size:13px; text-decoration:none;
}
.audience-panel-cta .material-symbols-outlined{ font-size:16px; }
.audience-panel-cta:hover{ text-decoration:underline; }
@media(max-width:860px){
	.audience-panels{ flex-direction:column; height:auto; }
	.audience-panel{ flex:none !important; height:280px; }
	.audience-panel:active .audience-panel-detail{ opacity:1; max-height:160px; }
	.audience-panel-bg{ transform:scale(1) !important; }
}

/* ============ Vídeo institucional (facade de YouTube) ============ */
.video-card{
	position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
	box-shadow:0 1px 3px rgba(11,31,77,.06);
	transition:box-shadow .2s ease, transform .2s ease;
	will-change:transform;
}
.video-card:hover{ box-shadow:0 14px 32px rgba(1,8,140,.14); }
.video-poster-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.video-card-shade{
	position:absolute; inset:0;
	background:linear-gradient(0deg, rgba(1,8,45,.5) 0%, rgba(1,8,45,.05) 45%, rgba(1,8,45,.25) 100%);
	transition:opacity .3s ease;
}
.video-card:hover .video-card-shade{ opacity:.75; }
.video-play-btn{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:80px; height:80px; border-radius:50%;
	background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
	border:1.5px solid rgba(255,255,255,.6);
	display:flex; align-items:center; justify-content:center;
	transition:transform .25s ease, background .25s ease;
}
.video-card:hover .video-play-btn{ transform:translate(-50%,-50%) scale(1.08); background:rgba(255,255,255,.26); }
.video-play-btn .material-symbols-outlined{ font-size:32px; color:#fff; margin-left:4px; }
.video-play-ripple{
	position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
	animation:videoRipple 2.6s ease-out infinite;
}
.video-play-ripple.delay{ animation-delay:1.3s; }
@keyframes videoRipple{
	0%{ transform:scale(1); opacity:.7; }
	100%{ transform:scale(1.9); opacity:0; }
}
.video-card.is-playing .video-play-btn,
.video-card.is-playing .video-play-ripple,
.video-card.is-playing .video-card-shade{ display:none; }
.video-card.is-playing{ cursor:default; box-shadow:0 1px 3px rgba(11,31,77,.06); }
.video-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============ Datos de Asofrío (market stats) ============ */
.market-stats{
	position:relative; color:var(--white); overflow:hidden;
	background:var(--nav) url('assets/images/refrigeracion.webp') center 35%/cover no-repeat;
	min-height:clamp(520px,72vh,760px);
	display:flex; align-items:center;
}
.market-stats::before{
	content:''; position:absolute; inset:0;
	background:linear-gradient(to left, rgba(1,8,60,.92) 0%, rgba(1,8,60,.70) 100%, rgba(1,8,60,.28) 100%);
}
.market-stats .eyebrow{color:var(--accent); justify-content:center;}
.market-stats-inner{position:relative; z-index:1;}
.market-stats-head{text-align:center; max-width:560px; margin:0 auto clamp(36px,6vh,56px);}
.market-stats-head h2{color:var(--white);}
.market-stats-head p{color:#DCE2F2; margin-top:8px;}
.market-stats-grid{display:flex; justify-content:center; align-items:flex-start; flex-wrap:nowrap;}
.market-stat{padding:0 clamp(10px,1.8vw,28px); text-align:center; border-right:1px solid rgba(255,255,255,.18); flex:1 1 0; min-width:0;}
.market-stat:last-child{border-right:none;}
.market-stat .num{
	font-size:clamp(22px, 1.6vw + 1.2vh, 44px); font-weight:700; color:var(--white); line-height:1;
	font-variant-numeric:tabular-nums; white-space:nowrap;
}
.market-stat .lbl{font-size:12.5px; color:#9AA7CC; margin-top:10px; font-weight:600; line-height:1.4; min-height:2.8em;}
@media(max-width:720px){
	.market-stats{
		min-height:0;
		padding:48px 0 40px;
	}
	.market-stats .scroll-hint{
		display:none;
	}
	.market-stats-grid{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		row-gap:28px;
	}
	.market-stat{
		flex:0 1 33.333%;
		max-width:33.333%;
		padding:0 10px;
		border-right:none;
	}
	/* Separador solo entre columnas dentro de la misma fila
	   (todas menos la 3ª de cada fila y el último elemento) */
	.market-stat:not(:nth-child(3n)):not(:last-child){
		border-right:1px solid rgba(255,255,255,.18);
	}
	.market-stat .num{font-size:26px;}
	.market-stat .lbl{font-size:11px; white-space:normal; min-height:2.6em;}
}

/* ============ Marquee de empresas socias y proveedores ============ */
.marquee-wrap{
	max-width:1180px; margin:0 auto; overflow:hidden; position:relative; padding:44px 0;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/*
 * El desplazamiento automático y el arrastre táctil/con ratón los lleva
 * js/components.js (initMarquee): mueve la tira con transform:translateX
 * en vez de una animación CSS, para poder pausarla y seguir el dedo del
 * usuario sin que ambos mecanismos se peleen por la misma propiedad.
 */
.marquee-track{
	display:flex; gap:24px; width:max-content;
	touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
}
.marquee-track.is-dragging{ cursor:grabbing; }
.marquee-track img{ -webkit-user-drag:none; user-drag:none; }
.member-logo-tile,
.supplier-logo-tile{
	flex:0 0 auto; width:150px; height:76px; display:flex; align-items:center; justify-content:center;
	padding:0 10px;
}
.member-logo-tile img,
.supplier-logo-tile img{
	max-width:100%; max-height:100%; object-fit:contain;
	filter:brightness(0) invert(65%);
	opacity:.55;
	transition:filter .25s ease, opacity .25s ease;
}
.member-logo-tile img:hover,
.supplier-logo-tile img:hover{
	filter:none;
	opacity:1;
}

/* ============ Tarjetas de blog / prensa (post-card) ============ */
.post-card{display:block; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; cursor:pointer; transition:border-color .15s ease, transform .15s ease; text-decoration:none;}
.post-card:hover{border-color:var(--action); transform:translateY(-2px);}
.post-thumb{ height:150px; position:relative; overflow:hidden; }
.post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-thumb--icon{
	background:var(--nav);
	display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85);
}
.post-thumb--icon .material-symbols-outlined{font-size:40px;}
.post-thumb--icon::after{
	content:''; position:absolute; inset:0;
	background:radial-gradient(circle at 75% 30%, rgba(22,199,232,.35), transparent 55%);
}
.post-body{padding:18px;}
.post-meta{font-size:12px; color:var(--text-secondary); margin-top:10px; display:flex; gap:10px; align-items:center;}

/* ============ Reseñas ============ */
.review-card{
	background:#ffffff; border:1px solid var(--border); border-radius:16px;
	padding:32px 28px; box-shadow:0 1px 3px rgba(11,31,77,.06);
	transition:box-shadow .2s ease, transform .2s ease;
	display:flex; flex-direction:column; height:100%;
}
.review-card:hover{ box-shadow:0 14px 32px rgba(1,8,140,.14); transform:translateY(-2px); }
.review-stars{ display:flex; gap:2px; margin-bottom:16px; }
.review-stars .material-symbols-outlined{ font-size:18px; color:#F5A524; font-variation-settings:'FILL' 1; }
.review-quote{ color:var(--text); font-size:15px; line-height:1.65; flex:1; }
.review-author{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.review-avatar{
	width:44px; height:44px; border-radius:50%; flex-shrink:0;
	display:flex; align-items:center; justify-content:center;
	background:var(--brand); color:#fff; font-weight:700; font-size:15px;
}
.review-author-name{ font-weight:700; font-size:14px; color:var(--text); }
.review-author-role{ font-size:12.5px; color:var(--text-secondary); margin-top:2px; }

/* ============ Mapa estático con badge (installer-map) ============ */
.installer-map{
	position:relative; min-height:420px; height:100%; border-radius:16px; overflow:hidden; border:1px solid var(--border);
	background:#1B2036 url('assets/images/mapa.png') center/cover no-repeat;
}
.map-badge{
	position:absolute; top:16px; left:16px; background:var(--white); border-radius:var(--r-full);
	padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--brand);
	box-shadow:0 4px 14px rgba(1,8,140,.14); display:flex; align-items:center; gap:6px;
}
.map-badge .material-symbols-outlined{ font-size:16px; color:var(--action); }

/* ============ Botón circular de control de carrusel ============ */
.jobs-control-btn{
	width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:#fff;
	display:flex; align-items:center; justify-content:center; color:var(--brand); cursor:pointer;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.jobs-control-btn:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ============ FAQ ============ */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:first-child{ border-top:1px solid var(--border); }
.faq-question{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:22px 4px; cursor:pointer; list-style:none;
	font-weight:700; font-size:16px; color:var(--text);
}
.faq-question::-webkit-details-marker{ display:none; }
.faq-question .material-symbols-outlined{ color:var(--brand); transition:transform .25s ease; flex-shrink:0; }
.faq-item[open] .faq-question .material-symbols-outlined{ transform:rotate(45deg); }
.faq-answer{ padding:0 4px 22px; color:var(--text-secondary); font-size:14.5px; line-height:1.65; max-width:640px; }

/* ============ Ajustes responsive de refuerzo (< 980px) ============ */
@media(max-width:980px){
	.grid > *,
	.audience-panels > *,
	.hero-v2-inner > *{
		min-width:0;
	}
	.jobs-control-btn{width:44px; height:44px;}
}

/* ============ Carruseles horizontales en móvil (< 720px) ============ */
@media(max-width:720px){
	#section-blog .grid-3,
	#section-resenas .grid-3{
		display:flex; flex-wrap:nowrap; gap:16px !important;
		overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
		padding-bottom:6px; scrollbar-width:none;
		-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);
		mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);
	}
	#section-blog .grid-3::-webkit-scrollbar,
	#section-resenas .grid-3::-webkit-scrollbar{ display:none; }
	#section-blog .grid-3 > .post-card,
	#section-resenas .grid-3 > .review-card{
		flex:0 0 86%; scroll-snap-align:start;
	}
	.scroll-hint{
		display:flex; align-items:center; gap:6px;
		font-size:12.5px; font-weight:700; color:var(--brand);
		margin:-6px 0 16px;
	}
	.scroll-hint .material-symbols-outlined{font-size:18px;}
}
.scroll-hint{display:none;}

/* ============ Cards y tiles genéricos ============ */
.card{
	background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
	padding:24px;
}
.icon-tile{
	width:48px; height:48px; border-radius:var(--r-md);
	background:var(--lavender-bg); color:var(--brand);
	display:flex; align-items:center; justify-content:center;
	margin-bottom:16px;
}
.icon-tile.cyan{background:#E3FAFD; color:#0B7E92;}

/* ============ Panel (recuadro con cabecera oscura) ============ */
.panel{
	background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
	overflow:hidden; box-shadow:0 1px 2px rgba(11,31,77,.04);
}
.panel-head{
	background:var(--nav); color:var(--white); padding:14px 18px;
	display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
}
.panel-head .material-symbols-outlined{font-size:18px; color:var(--accent);}
.panel-body{padding:20px;}

/* ============ Estadística suelta (stat) ============ */
.stat .num{font-size:32px; font-weight:700; color:var(--brand);}
.stat .lbl{font-size:13px; color:var(--text-secondary); font-weight:600; margin-top:4px;}

/* ============ Línea de tiempo (timeline) ============ */
.timeline{border-left:2px solid var(--border); padding-left:24px; display:flex; flex-direction:column; gap:28px; margin-left:6px;}
.timeline .item{position:relative;}
.timeline .item::before{
	content:''; position:absolute; left:-30px; top:4px; width:12px; height:12px;
	border-radius:50%; background:var(--action); border:3px solid var(--lavender-bg);
}
.timeline .yr{font-family:'Inter'; font-weight:700; color:var(--brand); font-size:13px; letter-spacing:.04em;}

/* ============ Formularios ============ */
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text);}
.field input, .field select, .field textarea{
	width:100%; border:1px solid var(--border); border-radius:var(--r-sm);
	padding:11px 13px; font-size:14px; font-family:inherit; color:var(--text); background:var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus{
	outline:2px solid var(--action); outline-offset:1px; border-color:var(--action);
}
.field textarea{resize:vertical; min-height:110px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:600px){.field-row{grid-template-columns:1fr;}}
.field-check{display:flex; align-items:flex-start; gap:10px; margin-bottom:18px;}
.field-check input{margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--action);}
.field-check label{font-size:12.5px; color:var(--text-secondary); line-height:1.55;}
.field-check a{color:var(--action); font-weight:600;}

/* ============ Propósito, misión y valores (value-item) ============ */
.value-item{
	background:#ffffff; border:1px solid var(--border); border-radius:16px;
	box-shadow:0 1px 3px rgba(11,31,77,.06);
	transition:box-shadow .2s ease, transform .2s ease;
	padding:32px 28px;
}
.value-item:hover{
	box-shadow:0 14px 32px rgba(1,8,140,.14);
	transform:translateY(-2px);
}
.value-item .icon-badge{
	width:52px; height:52px; border-radius:50%;
	background:var(--brand);
	display:flex; align-items:center; justify-content:center;
	margin-bottom:18px;
}
.value-item .icon-badge .material-symbols-outlined{
	color:#ffffff; font-size:24px;
}
.value-item h3{
	color:var(--text); font-size:16.5px; margin-bottom:8px;
}
.value-item p{
	color:var(--text-secondary); line-height:1.6; font-size:14px;
}

/* ============ Tarjeta de oferta de empleo (job-card) ============ */
.job-card{
	border:1px solid var(--border); border-radius:16px; padding:20px 22px;
	display:flex; gap:16px; align-items:flex-start; background:#fff;
	box-sizing:border-box; margin-bottom:16px; overflow:hidden;
}
.job-icon{
	width:44px; height:44px; border-radius:50%; background:var(--lavender-bg);
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.job-icon .material-symbols-outlined{ color:var(--brand); font-size:22px; }
.job-label{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--action); }
.job-card h3{
	font-size:16px; font-weight:700; color:var(--text); margin-top:5px;
	text-transform:none; letter-spacing:normal; line-height:1.35;
}
.job-desc{
	font-size:13.5px; color:var(--text-secondary); line-height:1.55; margin-top:5px;
	display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.job-date{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12px; color:var(--text-secondary); }
.job-date .material-symbols-outlined{ font-size:14px; }

/* ============ Hero "directorio" (interior de sección: empleo, asociaciones...) ============ */
.hero-directorio{
	--hero-photo:url('assets/images/tecnica-stats.png');
	position:relative; overflow:hidden; color:var(--white);
	padding:clamp(64px,12vh,128px) 0 clamp(56px,10vh,104px);
}
/*
 * La foto vive en ::after con z-index:-1 en vez de en el "background"
 * del propio elemento: así se puede animar con transform (Ken Burns)
 * sin arrastrar el degradado ni el contenido. OJO — si .hero-directorio
 * tuviera su propio "background" (color sólido), ese color se pintaría
 * POR ENCIMA de este ::after y taparía la foto entera; el color de
 * respaldo va aquí, en el propio ::after.
 */
.hero-directorio::after{
	content:''; position:absolute; inset:0; z-index:-1;
	background:var(--nav) var(--hero-photo) center 35%/cover no-repeat;
	animation:heroPhotoZoom 22s ease-out forwards;
}
.hero-directorio::before{
	content:''; position:absolute; inset:0;
	background-image:
		linear-gradient(180deg, rgba(3,12,54,.88) 0%, rgba(6,27,95,.82) 45%, rgba(3,12,54,.93) 100%),
		radial-gradient(circle at 18% 20%, rgba(140,143,246,.28), transparent 45%),
		radial-gradient(circle at 85% 85%, rgba(22,199,232,.22), transparent 45%);
}
.hero-directorio-inner{ position:relative; z-index:1; max-width:640px; }
.hero-directorio-eyebrow{
	display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
	border:1px solid rgba(255,255,255,.28); border-radius:var(--r-full);
	font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	color:var(--white); background:rgba(255,255,255,.08); margin-bottom:20px;
	backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-directorio-eyebrow .material-symbols-outlined{font-size:15px; color:var(--accent);}
.hero-directorio h1{
	font-size:clamp(30px, 2.8vw + 1.2vh, 48px); line-height:1.1; letter-spacing:-.02em; color:var(--white);
	text-shadow:0 4px 24px rgba(0,0,0,.3);
}
.hero-directorio h1 em{ font-style:normal; color:var(--accent); }
.hero-directorio .lede{
	color:#DCE2F2; font-size:clamp(15px,.4vw + .8vh,17px); margin-top:18px;
}
.hero-directorio-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

/* ============ Grid de logos/entidades (partner-card) ============ */
.partner-card{
	background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
	padding:24px 20px; display:flex; flex-direction:column; align-items:center; gap:16px;
	text-align:center; transition:box-shadow .2s ease, transform .2s ease;
}
.partner-card:hover{ box-shadow:0 10px 24px rgba(1,8,140,.10); transform:translateY(-2px); }
.partner-card-logo{ width:100%; height:88px; display:flex; align-items:center; justify-content:center; }
.partner-card-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.partner-card h4{ font-size:14px; color:var(--text); }
.partner-logo-placeholder{
	width:100%; height:100%; border-radius:var(--r-sm);
	background:var(--lavender-bg); color:var(--brand);
	display:flex; align-items:center; justify-content:center;
	font-weight:800; font-size:15px; letter-spacing:.02em;
}

/* ============ Sello de calidad: imagen (quality-seal-frame) ============ */
.quality-seal-frame{ display:flex; align-items:center; justify-content:center; }
.quality-seal-frame img{ max-width:280px; width:100%; }

/* ============ Cards de color según perfil (tone-card / refrigerant-card) ============
   Mismo componente visual, dos alias de nombre de clase según la página
   (climatización usa "tone-*", refrigeración usa "refrigerant-*"). */
.tone-grid,
.refrigerant-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px; }
@media(max-width:600px){
	.tone-grid,
	.refrigerant-grid{ grid-template-columns:1fr; }
}
.tone-card,
.refrigerant-card{
	border-radius:18px; padding:28px 26px; display:flex; flex-direction:column;
	transition:transform .2s ease, box-shadow .2s ease;
}
.tone-card:hover,
.refrigerant-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(1,8,140,.12); }
.tone-icon,
.refrigerant-icon{
	width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	margin-bottom:16px;
}
.tone-icon .material-symbols-outlined,
.refrigerant-icon .material-symbols-outlined{ font-size:24px; color:#fff; }
.tone-badge,
.refrigerant-badge{
	display:inline-flex; align-self:flex-start; padding:4px 10px; border-radius:var(--r-full);
	font-size:11px; font-weight:700; letter-spacing:.02em; margin-bottom:12px; color:#fff;
}
.tone-card h3,
.refrigerant-card h3{ font-size:17px; margin-bottom:8px; color:var(--text); }
.tone-card p,
.refrigerant-card p{ font-size:13.5px; color:var(--text-secondary); line-height:1.65; }

.tone-card--green{ background:var(--success-bg); }
.tone-card--green .tone-icon, .tone-card--green .tone-badge{ background:var(--success); }
.tone-card--cyan{ background:#E3FAFD; }
.tone-card--cyan .tone-icon, .tone-card--cyan .tone-badge{ background:var(--accent); }
.tone-card--cyan .tone-badge{ color:#04424B; }
.tone-card--amber{ background:var(--warning-bg); }
.tone-card--amber .tone-icon, .tone-card--amber .tone-badge{ background:var(--warning); }
.tone-card--lavender{ background:var(--lavender-bg); }
.tone-card--lavender .tone-icon, .tone-card--lavender .tone-badge{ background:var(--lavender); }

.refrigerant-card--co2{ background:var(--success-bg); }
.refrigerant-card--co2 .refrigerant-icon, .refrigerant-card--co2 .refrigerant-badge{ background:var(--success); }
.refrigerant-card--r290{ background:#E3FAFD; }
.refrigerant-card--r290 .refrigerant-icon, .refrigerant-card--r290 .refrigerant-badge{ background:var(--accent); }
.refrigerant-card--r290 .refrigerant-badge{ color:#04424B; }
.refrigerant-card--amoniaco{ background:var(--warning-bg); }
.refrigerant-card--amoniaco .refrigerant-icon, .refrigerant-card--amoniaco .refrigerant-badge{ background:var(--warning); }
.refrigerant-card--a2l{ background:var(--lavender-bg); }
.refrigerant-card--a2l .refrigerant-icon, .refrigerant-card--a2l .refrigerant-badge{ background:var(--lavender); }

/* ============ Hero "instalador" (split con imagen flotante) ============ */
.hero-instalador{
	--hero-photo:url('assets/images/industry.png');
	position:relative; overflow:hidden;
	padding:clamp(48px,9vh,96px) 0 clamp(56px,10vh,108px);
}
.hero-instalador::after{
	content:''; position:absolute; inset:0; z-index:-1;
	background:var(--bg) var(--hero-photo) center/cover no-repeat;
	animation:heroPhotoZoom 22s ease-out forwards;
}
.hero-instalador::before{
	content:''; position:absolute; inset:0;
	background-image:
		linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 32%, rgba(238,240,251,.72) 58%, rgba(238,240,251,.40) 100%);
}
.hero-instalador-inner{
	position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
	gap:clamp(32px,5vw,64px); align-items:center;
}
.hero-instalador-eyebrow{
	display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
	border:1px solid var(--border); border-radius:var(--r-full);
	font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	color:var(--brand); background:var(--white); margin-bottom:20px;
}
.hero-instalador-eyebrow .material-symbols-outlined{font-size:15px; color:var(--action);}
.hero-instalador h1{
	font-size:clamp(30px, 2.6vw + 1.2vh, 50px); line-height:1.1; letter-spacing:-.02em; color:var(--brand);
}
.hero-instalador h1 em{ font-style:normal; color:var(--action); }
.hero-instalador .lede{
	color:#4A5B8C; font-size:clamp(15px,.4vw + .8vh,17px); max-width:520px; margin-top:18px;
}
.hero-instalador-ctas{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-instalador-media{ position:relative; }
.hero-instalador-media-frame{
	border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(1,8,140,.20);
	aspect-ratio:4/3; border:1px solid var(--white);
}
.hero-instalador-media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-instalador-badge{
	position:absolute; left:24px; bottom:-26px; z-index:2;
	background:var(--white); border-radius:var(--r-full); padding:10px 20px 10px 10px;
	box-shadow:0 14px 32px rgba(1,8,140,.18); display:flex; align-items:center; gap:12px;
}
.hero-instalador-avatars{ display:flex; flex-shrink:0; }
.hero-instalador-avatars span{
	width:34px; height:34px; border-radius:50%; background:var(--lavender-bg); color:var(--brand);
	display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
	border:2px solid var(--white); margin-left:-10px;
}
.hero-instalador-avatars span:first-child{ margin-left:0; }
.hero-instalador-avatars span.more{ background:var(--action); color:var(--white); font-size:11px; }
.hero-instalador-badge-text{ display:flex; flex-direction:column; }
.hero-instalador-badge-text strong{ font-size:13.5px; color:var(--text); line-height:1.25; }
.hero-instalador-badge-text span{ font-size:12px; color:var(--text-secondary); }
@media(max-width:900px){
	.hero-instalador-inner{ grid-template-columns:1fr; }
	.hero-instalador-media{ order:-1; }
}
@media(max-width:560px){
	.hero-instalador-badge{ left:12px; bottom:-20px; padding:8px 16px 8px 8px; }
}

/* ============ Intranet: valor para el asociado ============ */
.intranet-section{
	position:relative; overflow:hidden; color:var(--white);
	background:
		linear-gradient(160deg, rgba(6,27,95,.94) 0%, rgba(8,31,114,.90) 55%, rgba(6,27,95,.96) 100%),
		var(--nav) url('assets/images/slider.png') center/cover no-repeat;
	padding:clamp(56px,9vh,100px) 0;
}
.intranet-section::before{
	content:''; position:absolute; top:-140px; left:-120px; width:460px; height:460px;
	background:radial-gradient(circle, rgba(140,143,246,.30), transparent 68%); border-radius:50%; pointer-events:none;
}
.intranet-section::after{
	content:''; position:absolute; bottom:-160px; right:-140px; width:480px; height:480px;
	background:radial-gradient(circle, rgba(22,199,232,.22), transparent 68%); border-radius:50%; pointer-events:none;
}
.intranet-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.intranet-section .eyebrow{ color:var(--accent); }
.intranet-section h2{ color:var(--white); }
.intranet-section .lede{ color:#DCE2F2; margin-top:14px; max-width:480px; }
.intranet-list{ display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.intranet-list li{ display:flex; align-items:flex-start; gap:14px; }
.intranet-list li .material-symbols-outlined{
	font-size:17px; color:var(--accent); background:rgba(255,255,255,.1); border-radius:50%; padding:5px; flex-shrink:0;
}
.intranet-item{ display:flex; flex-direction:column; gap:4px; }
.intranet-item-title{ font-size:15px; font-weight:700; color:#fff; }
.intranet-item p{ margin:0; font-size:14px; color:#DCE2F2; line-height:1.55; }
.intranet-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.intranet-mock{
	background:var(--white); border-radius:16px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.intranet-mock-bar{ display:flex; align-items:center; gap:6px; padding:12px 14px; background:#F1F4F9; border-bottom:1px solid var(--border); }
.intranet-mock-bar span{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.intranet-mock-bar span:nth-child(1){ background:#F5A524; }
.intranet-mock-bar span:nth-child(2){ background:#0B8278; }
.intranet-mock-bar span:nth-child(3){ background:#D93030; }
.intranet-mock-url{
	margin-left:10px; font-size:11.5px; color:var(--text-secondary); background:var(--white);
	border:1px solid var(--border); border-radius:var(--r-full); padding:3px 12px;
}
.intranet-mock-body{ display:flex; min-height:280px; }
.intranet-mock-sidebar{
	width:56px; background:var(--nav); display:flex; flex-direction:column; align-items:center;
	gap:22px; padding:20px 0;
}
.intranet-mock-sidebar .material-symbols-outlined{ color:#8C9AD1; font-size:20px; }
.intranet-mock-sidebar .material-symbols-outlined:first-child{ color:var(--accent); }
.intranet-mock-main{ flex:1; padding:20px; background:var(--bg); }
.intranet-mock-stats{ display:flex; gap:12px; margin-bottom:18px; }
.intranet-mock-stat{
	flex:1; background:var(--white); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
}
.intranet-mock-stat span{ display:block; font-size:11px; color:var(--text-secondary); margin-bottom:6px; }
.intranet-mock-stat strong{ font-size:17px; color:var(--brand); }
.intranet-mock-rows{ background:var(--white); border:1px solid var(--border); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:14px; }
.intranet-mock-row{ display:flex; align-items:center; gap:10px; }
.intranet-mock-row .dotcol{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.intranet-mock-row .bar{ height:8px; border-radius:var(--r-full); background:var(--action); }
@media(max-width:900px){
	.intranet-inner{ grid-template-columns:1fr; }
}

/* ============ Pilares de valor (servicios al instalador/proveedor) ============ */
.pillars-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch;}
@media(max-width:900px){.pillars-grid{grid-template-columns:1fr;}}
.pillar-card{
	background:var(--white); border:1px solid var(--border); border-radius:20px;
	padding:30px 28px 32px;
	transition:box-shadow .25s ease, transform .25s ease;
}
.pillar-card:hover{box-shadow:0 18px 40px rgba(1,8,140,.14); transform:translateY(-4px);}
.pillar-head{display:flex; align-items:center; gap:16px;}
.pillar-icon{
	flex-shrink:0; width:56px; height:56px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
}
.pillar-icon .material-symbols-outlined{font-size:26px; color:#fff;}
.pillar-card h3{
	font-size:16.5px; color:var(--text); line-height:1.35;
	text-transform:uppercase; letter-spacing:.03em;
}
.pillar-divider{height:3px; width:56px; border-radius:2px; margin:20px 0 24px;}
.pillar-card:nth-child(1) .pillar-icon{background:var(--brand);}
.pillar-card:nth-child(1) .pillar-divider{background:var(--brand);}
.pillar-card:nth-child(1) .pillar-item-num{color:var(--brand);}
.pillar-card:nth-child(2) .pillar-icon{background:var(--action);}
.pillar-card:nth-child(2) .pillar-divider{background:var(--action);}
.pillar-card:nth-child(2) .pillar-item-num{color:var(--action);}
.pillar-card:nth-child(3) .pillar-icon{background:var(--accent);}
.pillar-card:nth-child(3) .pillar-divider{background:var(--accent);}
.pillar-card:nth-child(3) .pillar-item-num{color:var(--accent);}
.pillar-items{display:flex; flex-direction:column;}
.pillar-item{padding:16px 0; border-top:1px solid var(--border);}
.pillar-item:first-child{border-top:none; padding-top:0;}
.pillar-item h4{
	display:flex; align-items:baseline; gap:10px;
	font-size:15.5px; color:var(--text); font-weight:800; margin-bottom:7px;
}
.pillar-item-num{font-size:23px; font-weight:800; opacity:.4; line-height:1; font-variant-numeric:tabular-nums;}
.pillar-item p{font-size:13.5px; color:var(--text-secondary); line-height:1.6;}

/* ============ Proceso en pasos (requisito-step) ============ */
.requisitos-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.requisito-step{ position:relative; background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px 24px; }
.requisito-step:not(:last-child)::after{
	content:''; position:absolute; top:34px; right:-24px; width:24px; height:2px;
	background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 10px);
}
.requisito-step-num{
	width:40px; height:40px; border-radius:50%; background:var(--brand); color:var(--white);
	display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; margin-bottom:18px;
}
.requisito-step h3{ font-size:16px; margin-bottom:8px; }
.requisito-step p{ font-size:13.5px; color:var(--text-secondary); line-height:1.55; }
@media(max-width:900px){
	.requisitos-steps{ grid-template-columns:repeat(2,1fr); }
	.requisito-step:not(:last-child)::after{ display:none; }
}
@media(max-width:560px){
	.requisitos-steps{ grid-template-columns:1fr; }
}

/* ============ Niveles de participación: cards de precios (pricing-card) ============ */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; margin-top:8px;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr; max-width:420px; margin:8px auto 0;}}
.pricing-card{
	position:relative; background:var(--white); border:2px solid #BFE0FA; border-radius:24px;
	padding:36px 28px 32px; display:flex; flex-direction:column;
	transition:box-shadow .25s ease, transform .25s ease;
}
.pricing-card:hover{ box-shadow:0 18px 40px rgba(1,8,140,.14); transform:translateY(-4px); }
.pricing-card--featured{ border-color:var(--brand); }
.pricing-badge{
	position:absolute; top:-13px; left:50%; transform:translateX(-50%);
	background:var(--brand); color:#fff; font-size:11px; font-weight:700;
	letter-spacing:.04em; text-transform:uppercase; padding:5px 14px; border-radius:var(--r-full);
	white-space:nowrap;
}
.pricing-card-icon{
	width:52px; height:52px; border-radius:50%; margin:0 auto 18px;
	display:flex; align-items:center; justify-content:center;
}
.pricing-card-icon .material-symbols-outlined{font-size:24px; color:#fff;}
.pricing-card:nth-child(1) .pricing-card-icon{background:var(--lavender);}
.pricing-card:nth-child(2) .pricing-card-icon{background:var(--action);}
.pricing-card:nth-child(3) .pricing-card-icon{background:var(--brand);}
.pricing-card h3{text-align:center; font-size:19px; margin-bottom:12px;}
.pricing-card > p{color:var(--text-secondary); font-size:14px; line-height:1.6; margin-bottom:22px; min-height:66px; text-align:center;}
.pricing-divider{height:1px; background:var(--border); margin:0 0 22px;}
.pricing-features{display:flex; flex-direction:column; gap:13px;}
.pricing-feature{display:flex; align-items:center; gap:10px; font-size:14.5px;}
.pricing-feature .material-symbols-outlined{
	font-size:14px; flex-shrink:0; width:20px; height:20px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
}
.pricing-feature.is-yes{color:var(--text);}
.pricing-feature.is-yes .material-symbols-outlined{background:var(--success-bg); color:var(--success);}
.pricing-feature.is-no{color:#A9B2C3;}
.pricing-feature.is-no .material-symbols-outlined{background:var(--error-bg); color:var(--error);}

/* ============ Blog: hero (home.php / archive.php / single.php) ============ */
.hero-blog{
	--hero-photo:url('assets/images/slider.png');
	position:relative; overflow:hidden;
	padding:clamp(56px,10vh,104px) 0 clamp(48px,8vh,76px);
}
.hero-blog::after{
	content:''; position:absolute; inset:0; z-index:-1;
	background:var(--bg) var(--hero-photo) center/cover no-repeat;
	animation:heroPhotoZoom 22s ease-out forwards;
}
.hero-blog::before{
	content:''; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(238,240,251,.90) 55%, rgba(247,249,252,.96) 100%);
}
.hero-blog-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; text-align:center; }
.hero-blog-eyebrow{
	display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px;
	border:1px solid var(--border); border-radius:var(--r-full);
	font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	color:var(--brand); background:var(--white); margin-bottom:20px;
}
.hero-blog-eyebrow .material-symbols-outlined{ font-size:15px; color:var(--action); }
.hero-blog h1{ font-size:clamp(30px, 2.6vw + 1.2vh, 46px); line-height:1.12; letter-spacing:-.02em; color:var(--brand); }
.hero-blog h1 em{ font-style:normal; color:var(--action); }
.hero-blog .lede{ color:#4A5B8C; font-size:clamp(15px,.4vw + .8vh,17px); max-width:560px; margin:18px auto 0; }

/* ============ Blog: layout (artículos + barra lateral) ============ */
.blog-layout{ display:grid; grid-template-columns:4fr 1fr; gap:40px; align-items:start; }
.blog-sidebar{ display:flex; flex-direction:column; gap:24px; position:sticky; top:88px; }
.sidebar-banner{
	position:relative; overflow:hidden; border-radius:var(--r-lg); padding:26px 22px; color:var(--white);
	background:
		linear-gradient(160deg, rgba(6,27,95,.94) 0%, rgba(8,31,114,.90) 60%, rgba(6,27,95,.96) 100%),
		var(--nav) url('assets/images/slider.png') center/cover no-repeat;
}
.sidebar-banner h4{ color:var(--white); font-size:16px; margin-bottom:8px; }
.sidebar-banner p{ color:#DCE2F2; font-size:13px; line-height:1.55; margin-bottom:16px; }
.sidebar-block{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:22px; }
.sidebar-block h4{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text); margin-bottom:6px; }
.sidebar-categories{ display:flex; flex-direction:column; margin-top:8px; }
.sidebar-categories a{
	display:flex; align-items:center; justify-content:space-between; width:100%;
	background:none; border:none; padding:11px 2px; font-size:14px; font-weight:600; color:var(--text-secondary);
	border-bottom:1px solid var(--border); text-align:left; text-decoration:none;
}
.sidebar-categories li:last-child a{ border-bottom:none; }
.sidebar-categories a:hover{ color:var(--action); }
.sidebar-categories a.active{ color:var(--action); }
.sidebar-categories a .material-symbols-outlined{ font-size:16px; color:var(--text-secondary); }
.sidebar-categories a:hover .material-symbols-outlined,
.sidebar-categories a.active .material-symbols-outlined{ color:var(--action); }
@media(max-width:900px){
	.blog-layout{ grid-template-columns:1fr; }
	.blog-sidebar{ position:static; }
}

/* ============ Blog: paginación (the_posts_pagination) ============ */
.blog-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; }
.blog-pagination .nav-links{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.blog-pagination .page-numbers{
	min-width:38px; height:38px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--border);
	background:var(--white); color:var(--text-secondary); font-size:14px; font-weight:600;
	display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.blog-pagination .page-numbers:hover{ border-color:var(--action); color:var(--action); }
.blog-pagination .page-numbers.current{ background:var(--action); border-color:var(--action); color:var(--white); }
.blog-pagination .page-numbers.dots{ border:none; background:none; }

/* ============ Blog: newsletter ============ */
.newsletter-banner{
	display:flex; align-items:center; gap:28px; flex-wrap:wrap;
	background:var(--lavender-bg); border-radius:var(--r-lg); padding:36px 40px;
}
.newsletter-icon{
	width:56px; height:56px; border-radius:50%; background:var(--white); color:var(--brand);
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	box-shadow:0 4px 14px rgba(1,8,140,.10);
}
.newsletter-copy{ flex:1; min-width:220px; }
.newsletter-copy h3{ margin-bottom:6px; }
.newsletter-copy p{ font-size:14px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{
	border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 14px; font-size:14px;
	font-family:inherit; min-width:240px; background:var(--white); color:var(--text);
}
.newsletter-form input:focus{ outline:2px solid var(--action); outline-offset:1px; border-color:var(--action); }
@media(max-width:720px){
	.newsletter-banner{ flex-direction:column; text-align:center; padding:28px 20px; }
	.newsletter-copy{ min-width:0; }
	.newsletter-form{ width:100%; justify-content:center; }
	.newsletter-form input{ flex:1; min-width:0; }
}