/*!
Theme Name: ASOFRIO 
Theme URI: https://asofrio.com
Description: ¡Vamos a revolucionar el sector HVACR!
Version: 2.0.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{flex:1; 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('https://www.asofrio.com/wp-content/uploads/2026/08/hero-instalador-2.webp') 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-title{
	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; display:block;
	text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hero-v2-title 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;}
}

/* Quiénes somos: capa azul sólida en vez del degradado del hero compartido */
#section-inicio.hero-v2::before{
	background-image:none;
	background-color:rgba(6,27,95,.85);
}

.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; }
.audience-panel-cta{
	display: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 + .audience-panel-cta{ margin-top:8px; }
.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; }
}

/* ============ Sectores que representan: versión simplificada en móvil ============
   En móvil ocultamos el párrafo y la lista de especialidades: solo se
   muestran icono, título y enlace, siempre visibles, sin necesidad de
   tocar/mantener pulsado para revelar contenido. La altura de la tarjeta
   se mantiene igual que en el resto de usos de .audience-panel (280px). */
@media(max-width:860px){
	.audience-panels--stacked-mobile{ gap:12px; }
	.audience-panels--stacked-mobile .audience-panel-content{
		justify-content:center; padding:0 20px;
	}
	.audience-panels--stacked-mobile .audience-panel-heading{ margin-bottom:0; }
	.audience-panels--stacked-mobile .audience-panel-heading h3{ white-space:normal; }
	.audience-panels--stacked-mobile .audience-panel-detail p,
	.audience-panels--stacked-mobile .audience-panel-list{
		display:none;
	}
	.audience-panels--stacked-mobile .audience-panel-detail{
		max-height:none; opacity:1; overflow:visible; margin-top:8px;
	}
	.audience-panels--stacked-mobile .audience-panel:active .audience-panel-detail{
		max-height:none; opacity:1;
	}
}

/* ============ Lista de especialidades dentro de audience-panel ============ */
.audience-panel-list{
	margin:12px 0 0; padding:0; list-style:none;
	display:flex; flex-direction:column; gap:6px;
}
.audience-panel-list li{
	position:relative; padding-left:16px;
	font-size:13px; color:rgba(255,255,255,.88); line-height:1.5;
}
.audience-panel-list li::before{
	content:''; position:absolute; left:0; top:8px;
	width:5px; height:5px; border-radius:50%; background:var(--accent);
}

/* ============ Nuevas tecnologías (audience-panels--tech) ============ */
@media(min-width:861px){
	.audience-panels--tech{ height:420px; }
}
@media(max-width:860px){
	.audience-panels--tech{ gap:12px; }
	.audience-panels--tech .audience-panel{
		height:auto; min-height:280px; display:flex;
	}
	/* El contenido pasa a ocupar espacio real: la tarjeta crece si el texto lo necesita */
	.audience-panels--tech .audience-panel-content{
		position:relative; inset:auto; width:100%; padding:24px 20px;
	}
	/* En móvil no hay hover: el texto se muestra siempre */
	.audience-panels--tech .audience-panel .audience-panel-detail{
		max-height:none; opacity:1; overflow:visible;
	}
	.audience-panels--tech .audience-panel h3{ white-space:normal; }
}

/* ============ Tarjetas separadas en móvil: esquinas redondeadas propias ============
   Solo para las variantes que apilan las tarjetas con separación (--tech y
   --stacked-mobile). El resto de usos de .audience-panel no se ve afectado:
   siguen con el redondeo del contenedor. */
@media(max-width:860px){
	.audience-panels--tech,
	.audience-panels--stacked-mobile{
		border-radius:0; overflow:visible;
	}
	.audience-panels--tech .audience-panel,
	.audience-panels--stacked-mobile .audience-panel{
		border-radius:20px; isolation:isolate; /* isolation evita fallos de recorte en Safari */
	}
}

/* ============ 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;
}

@media (max-width: 640px) {
	.member-logo-tile,
	.supplier-logo-tile {
		width: min(78vw, 280px);
		height: 92px;
		padding: 0 16px;
	}

	.marquee-track {
		gap: 16px;
	}
}

/* ============ 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); }

/* ============ Carrusel vertical de ofertas de empleo (home) ============ */
/* El resto de estilos del carrusel (.jobs-viewport, .jobs-track, .jobs-controls)
 * vive en css/frontpage.css, cargado solo en portada junto con js/frontpage.js. */
.jobs-control-btn:disabled{ cursor:default; opacity:.4; }

/* ============ 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:8px;}
.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:8px;}
.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: 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-title{
	font-size:clamp(30px, 2.8vw + 1.2vh, 48px); line-height:1.1; letter-spacing:-.02em; color:var(--white);
	font-weight:700; text-shadow:0 4px 24px rgba(0,0,0,.3); display:block;
}
.hero-directorio-title 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; }

/* ============ Hero "empleo" (interior de sección: asociaciones...) ============ */
.hero-empleo{
	--hero-photo:url('assets/images/empleo-asofrio.webp');
	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-empleo
 * 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-empleo::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-empleo::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-empleo-inner{ position:relative; z-index:1; max-width:640px; }
.hero-empleo-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-empleo-eyebrow .material-symbols-outlined{font-size:15px; color:var(--accent);}
.hero-empleo-title{
	font-size:clamp(30px, 2.8vw + 1.2vh, 48px); line-height:1.1; letter-spacing:-.02em; color:var(--white);
	font-weight:700; text-shadow:0 4px 24px rgba(0,0,0,.3); display:block;
}
.hero-empleo-title em{ font-style:normal; color:var(--accent); }
.hero-empleo .lede{
	color:#DCE2F2; font-size:clamp(15px,.4vw + .8vh,17px); margin-top:18px;
}
.hero-empleo-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/servicios-asofrio.webp');
	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-title{
	font-size:clamp(30px, 2.6vw + 1.2vh, 50px); line-height:1.1; letter-spacing:-.02em; color:var(--brand); font-weight:700; display:block;
}
.hero-instalador-title 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; }

@media(max-width:900px){
	.intranet-inner{ grid-template-columns:1fr; }
}
/* ============ Intranet: capturas superpuestas con rotación ============ */
.intranet-shots{
	position:relative;
	min-height:420px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.intranet-shot{
	position:absolute;
	max-width:88%;
	border-radius:var(--r-lg, 14px);
	box-shadow:0 24px 60px -12px rgba(3,12,54,.45), 0 4px 16px rgba(3,12,54,.18);
	border:1px solid rgba(255,255,255,.5);
	display:block;
	transition:transform .4s ease;
}
.intranet-shot-back{
	top:8%;
	left:2%;
	z-index:1;
	transform:rotate(-6deg);
}
.intranet-shot-front{
	bottom:4%;
	right:0;
	z-index:2;
	max-width:80%;
	transform:rotate(4deg);
}
.intranet-shots:hover .intranet-shot-back{
	transform:rotate(-9deg) translate(-6px, 4px);
}
.intranet-shots:hover .intranet-shot-front{
	transform:rotate(1deg) translate(6px, -4px);
}
@media (max-width:780px){
	.intranet-shots{ min-height:320px; }
	.intranet-shot{ max-width:94%; }
	.intranet-shot-front{ max-width:84%; }
}
/* ============ 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:var(--brand);
}
.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-title{ font-size:clamp(30px, 2.6vw + 1.2vh, 46px); line-height:1.12; letter-spacing:-.02em; color:var(--brand); display:block; }
.hero-blog-title 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; }
}

/* ============ Instaladores: modal de contacto y resultados del buscador ============ */
.modal-instalador{ position:fixed; inset:0; z-index:1000; display:none; }
.modal-instalador.is-open{ display:block; }
.modal-instalador-backdrop{ position:absolute; inset:0; background:rgba(3,12,54,.6); }
.modal-instalador-panel{
	position:relative; z-index:1; max-width:520px; width:calc(100% - 32px);
	margin:60px auto; background:var(--white); border-radius:var(--r-lg,14px);
	padding:28px; max-height:calc(100vh - 120px); overflow-y:auto;
}
.modal-instalador-close{
	position:absolute; top:16px; right:16px; background:none; border:none; cursor:pointer;
	color:var(--text-secondary);
}

.installer-result-chips{ display:flex; flex-wrap:wrap; gap:6px; }

.installer-result-top{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.installer-result-logo{
	flex-shrink:0;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:auto;
}
.installer-result-logo img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
}

/* Estado inicial / sin resultados del buscador */
.finder-empty-state{
	text-align:center; padding:48px 20px; color:var(--text-secondary);
}
.finder-empty-state .material-symbols-outlined{
	font-size:40px; color:var(--border); margin-bottom:12px; display:block;
}
.finder-empty-state h4{ color:var(--text); margin-bottom:6px; }
.finder-empty-state p{ font-size:14px; max-width:320px; margin:0 auto 16px; }

.place .distance{
	margin-left:8px; font-weight:600; color:var(--action, #2563eb);
}
.installer-map{
	position:relative;
	overflow:hidden;
	border-radius:var(--r-lg, 14px);
}
.installer-map-canvas{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}
.installer-map .map-badge{
	position:relative;
	z-index:2;
	pointer-events:none;
}

/* ============ Contenido legal (Aviso legal, Privacidad, Cookies) ============ */
.legal-content{ line-height:1.75; color:var(--text); font-size:15px; }
.legal-content h2{ margin-top:36px; margin-bottom:12px; font-size:20px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ margin-top:24px; margin-bottom:8px; font-size:16px; }
.legal-content p{ margin-bottom:16px; }
.legal-content ul, .legal-content ol{ margin:0 0 16px 20px; }
.legal-content li{ margin-bottom:6px; }
.legal-content a{ color:var(--action); font-weight:600; }
.legal-content table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px; }
.legal-content th, .legal-content td{ border:1px solid var(--border); padding:8px 10px; text-align:left; }

/* ============ Soluciones (Servicios al cliente) ============ */
.solutions-services{
	position:relative; background:var(--nav) url('https://www.asofrio.com/wp-content/uploads/2026/08/hero-instaladores.webp') center 30%/cover no-repeat;
	color:var(--text); overflow:hidden; padding:clamp(56px,8vh,88px) 0;
}
.solutions-services::before{
	content:''; position:absolute; inset:0; pointer-events:none;
	background-image:
		linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.96) 100%),
		radial-gradient(circle at 8% 12%, rgba(140,143,246,.20), transparent 45%),
		radial-gradient(circle at 92% 88%, rgba(22,199,232,.16), transparent 45%);
}
.solutions-services > .wrap{position:relative; z-index:1;}
.solutions-services .eyebrow{color:var(--accent); justify-content:center;}
.solutions-services h2{color:var(--brand);}
.solutions-grid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:0;
	margin-top:40px; border-top:1px solid var(--border);
}
.solution-item{
	padding:36px 32px; border-right:1px solid var(--border);
	display:flex; flex-direction:column;
}
.solution-item:last-child{border-right:none;}
.solution-num{ font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--accent); margin-bottom:16px; }
.solution-item h3{color:var(--brand); font-size:20px; margin-bottom:12px;}
.solution-item p{color:var(--text-secondary); line-height:1.65; font-size:14.5px; flex:1;}
.solution-cta{
	display:inline-flex; align-items:center; gap:6px; margin-top:24px;
	background:none; border:none; padding:0 0 3px; font-size:14px; font-weight:700;
	color:var(--brand); cursor:pointer; text-decoration:none; align-self:flex-start; font-family:inherit;
	border-bottom:2px solid var(--accent);
}
.solution-cta .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.solution-cta:hover{color:var(--action);}
.solution-cta:hover .material-symbols-outlined{transform:translateX(4px);}
.solutions-bottom{
	position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px;
	align-items:center; margin:clamp(40px,6vh,64px) 0 0;
}
.solutions-testimonial-quote{ font-style:italic; font-weight:500; font-size:22px; line-height:1.5; color:var(--brand); }
.solutions-testimonial-author{margin-top:22px; display:flex; flex-direction:column; gap:3px;}
.solutions-testimonial-name{font-weight:700; color:var(--brand); font-size:15px; font-style:normal;}
.solutions-testimonial-role{color:var(--text-secondary); font-size:13.5px; font-style:normal;}
.solutions-video{position:relative;}
.solutions-video .video-card{
	aspect-ratio:16/9; border-radius:var(--r-lg); box-shadow:0 20px 48px rgba(1,8,45,.20);
}
@media(max-width:860px){
	.solutions-grid{grid-template-columns:1fr; border-top:none; margin-top:32px;}
	.solution-item{border-right:none; border-top:1px solid var(--border); padding:28px 4px;}
	.solutions-bottom{grid-template-columns:1fr; gap:32px;}
}

/* =========================================================
   PRÓXIMOS EVENTOS Y WEBINARS — calendario + carrusel
   ========================================================= */

:root {
	--color-evento: var(--primary, #0b63ce);
	--color-evento-soft: var(--primary-soft, #eef6ff);
	--color-webinar: #7c3aed;
	--color-webinar-soft: #f3ecfe;
}

.eventos-proximos {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	margin-top: 32px;
}

/* ---------- Leyenda de colores ---------- */

.eventos-leyenda {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.eventos-leyenda-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary, #667085);
}

.eventos-leyenda-punto {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: none;
}

.eventos-leyenda-punto.is-evento {
	background: var(--color-evento);
}

.eventos-leyenda-punto.is-webinar {
	background: var(--color-webinar);
}

/* ---------- Calendario ---------- */

.eventos-calendario {
	background: #fff;
	border: 1px solid var(--border, #e4e7ec);
	border-radius: var(--r-md, 14px);
	padding: 20px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
}

.eventos-calendario-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.eventos-calendario-mes {
	font-weight: 700;
	font-size: 15px;
	text-transform: capitalize;
	color: var(--text, #101828);
}

.eventos-calendario-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 8px;
	background: #f2f4f7;
	color: var(--text, #101828);
	cursor: pointer;
	transition: background 0.15s ease;
}

.eventos-calendario-nav:hover {
	background: #e4e7ec;
}

.eventos-calendario-dow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 6px;
}

.eventos-calendario-dow span {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-secondary, #667085);
	text-transform: uppercase;
}

.eventos-calendario-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.eventos-calendario-dia {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 8px;
	font-size: 13px;
	color: var(--text, #101828);
	cursor: default;
}

.eventos-calendario-dia--vacio {
	visibility: hidden;
}

/* Un solo tipo: color sólido de ese tipo. */
.eventos-calendario-dia.tiene-evento.is-evento:not(.is-webinar) {
	cursor: pointer;
	font-weight: 700;
	color: #fff;
	background: var(--color-evento);
}

.eventos-calendario-dia.tiene-evento.is-webinar:not(.is-evento) {
	cursor: pointer;
	font-weight: 700;
	color: #fff;
	background: var(--color-webinar);
}

/* Los dos tipos el mismo día: mitad y mitad en diagonal. */
.eventos-calendario-dia.tiene-evento.is-evento.is-webinar {
	cursor: pointer;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--color-evento) 50%, var(--color-webinar) 50%);
}

.eventos-calendario-dia.tiene-evento:hover {
	filter: brightness(0.9);
}

.eventos-calendario-dia:disabled {
	color: var(--text-secondary, #98a2b3);
}

/* ---------- Carrusel vertical con degradado ---------- */

.eventos-carrusel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.eventos-carrusel-viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md, 14px);
	/* La altura la fija el JS dinámicamente (altura real de la tarjeta
	   activa + un asomo de la siguiente), para que funcione igual con
	   tarjetas de distinta altura en cualquier ancho de pantalla. Este
	   valor es solo un fallback antes de que el JS calcule el real. */
	height: 300px;
}

.eventos-carrusel-track {
	display: flex;
	flex-direction: column;
	gap: 20px;
	transition: transform 0.4s ease;
}

/* Mismo tamaño de tarjeta en cualquier ancho: ya NO se fuerza una
   altura fija en escritorio ni "auto" distinto en móvil. El alto lo
   determina el contenido (imagen con min-height + texto), igual en
   todos los tamaños, así el JS mide una altura consistente y real. */
.eventos-carrusel-slide {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 0;
	background: #fff;
	border: 1px solid var(--border, #e4e7ec);
	border-radius: var(--r-md, 14px);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
	position: relative;
}

.eventos-carrusel-img {
	background-size: cover;
	background-position: center;
	background-color: #eef1f5;
	min-height: 220px;
}

.eventos-carrusel-body {
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
}

.eventos-carrusel-tipo {
	display: inline-flex;
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.eventos-carrusel-tipo.is-evento {
	background: var(--color-evento-soft);
	color: var(--color-evento);
}

.eventos-carrusel-tipo.is-webinar {
	background: var(--color-webinar-soft);
	color: var(--color-webinar);
}

.eventos-carrusel-fecha {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--primary-soft, #eef6ff);
	color: var(--primary, #0b63ce);
	font-size: 12.5px;
	font-weight: 700;
}

.eventos-carrusel-titulo {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: var(--text, #101828);
}

.eventos-carrusel-extracto {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-secondary, #667085);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.eventos-carrusel-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--primary, #0b63ce);
}

/* Capa de degradado que tapa el evento que asoma debajo */
.eventos-carrusel-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(247, 248, 251, 0) 0%, var(--bg-section, #f7f8fb) 85%);
	pointer-events: none;
}

.eventos-carrusel-controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.eventos-carrusel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--border, #e4e7ec);
	border-radius: 50%;
	background: #fff;
	color: var(--text, #101828);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.eventos-carrusel-arrow:hover {
	background: #f2f4f7;
	border-color: #d0d5dd;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.eventos-proximos {
		grid-template-columns: 1fr;
	}

	/* Solo cambia la disposición interna (imagen encima, texto debajo);
	   ya NO se fuerza una altura distinta a la de escritorio — eso era
	   la causa de que el carrusel se desincronizara en móvil. */
	.eventos-carrusel-slide {
		grid-template-columns: 1fr;
	}

	.eventos-carrusel-img {
		min-height: 160px;
	}

	.eventos-carrusel-body {
		padding: 20px;
	}
}

/* ---------- Próximo evento ---------- */
.badge-proximo-evento-row {
	display: flex;
	justify-content: center;
}

.badge-proximo-evento {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: 999px;
	background: #fbbf24;
	color: #78350f;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ============================================================
   SECCIÓN: Inscripción a evento
   ============================================================ */

.evento-inscripcion {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.evento-inscripcion {
		grid-template-columns: 1fr;
	}
}

/* ---------- Columna del formulario ---------- */

.evento-form-col {
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 16px;
	padding: 12px;
}

.evento-form-titulo {
	font-size: 1.4rem;
	font-weight: 700;
	color: #16305c;
	margin: 0 0 4px;
}

.evento-form-nota {
	font-size: 0.85rem;
	color: #8a94a6;
	margin: 0 0 24px;
}

.evento-form-nota .obligatorio {
	color: #e0234e;
}

/* Layout de los campos CF7 en filas de 2 columnas */
.evento-form-col .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.evento-form-col .form-row-full {
	grid-template-columns: 1fr;
}

.evento-form-col .form-group label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: #16305c;
	margin-bottom: 6px;
}

.evento-form-col input[type="text"],
.evento-form-col input[type="email"],
.evento-form-col select,
.evento-form-col textarea {
	width: 100%;
	border: 1px solid #d7dce3;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 0.95rem;
	font-family: inherit;
	color: #16305c;
	background: #fff;
	transition: border-color 0.2s ease;
}

.evento-form-col input[readonly] {
	background: #f3f5f8;
	color: #6b7688;
	cursor: not-allowed;
}

.evento-form-col input:focus,
.evento-form-col select:focus,
.evento-form-col textarea:focus {
	outline: none;
	border-color: #1c5fd6;
}

.evento-form-col textarea {
	min-height: 90px;
	resize: vertical;
}

.evento-form-col select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%2316305C' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

/* Checkbox de política de privacidad (wpcf7-acceptance) */
.evento-form-col .form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.85rem;
	color: #4a5568;
	line-height: 1.5;
}

.evento-form-col .form-check input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.evento-form-col .form-check a {
	color: #1c5fd6;
	text-decoration: underline;
}

/* Botón de envío */
.evento-form-col input[type="submit"] {
	width: 100%;
	background: #1c5fd6;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 14px 20px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.evento-form-col input[type="submit"]:hover {
	background: #164cb0;
}

/* Estados de validación/envío de CF7 */
.evento-form-col .wpcf7-not-valid-tip {
	font-size: 0.8rem;
	color: #e0234e;
	margin-top: 4px;
}

.evento-form-col .wpcf7-response-output {
	border-radius: 10px;
	margin-top: 20px;
	padding: 12px 16px;
	font-size: 0.9rem;
}

/* ---------- Columna de detalles del evento ---------- */

.evento-detalle-col {
	background: linear-gradient(180deg, #eef3fb 0%, #e9eefa 100%);
	border-radius: 16px;
	padding: 28px;
}

.evento-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #dcebff;
	color: #1c5fd6;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.evento-badge .material-symbols-outlined {
	font-size: 16px;
}

.evento-detalle-titulo {
	font-size: 1.6rem;
	font-weight: 800;
	color: #16305c;
	line-height: 1.25;
	margin: 0 0 10px;
}

.evento-detalle-intro {
	font-size: 0.95rem;
	color: #4a5568;
	line-height: 1.5;
	margin: 0;
}

.evento-separador {
	border: none;
	border-top: 1px solid #d3ddef;
	margin: 22px 0;
}

.evento-detalle-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 18px;
}

.evento-detalle-item .evento-icono {
	color: #1c5fd6;
	font-size: 20px;
	line-height: 1;
	margin-top: 2px;
	flex-shrink: 0;
}

.evento-detalle-item strong {
	display: block;
	color: #16305c;
	font-size: 0.95rem;
}

.evento-detalle-item span {
	display: block;
	color: #4a5568;
	font-size: 0.88rem;
}

/* Bloque de confirmación (verde) */
.evento-confirmacion {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #e5f7ec;
	border-radius: 12px;
	padding: 16px;
	margin: 22px 0;
}

.evento-confirmacion .evento-icono-check {
	color: #1a9d55;
	font-size: 22px;
	line-height: 1;
	margin-top: 2px;
	flex-shrink: 0;
}

.evento-confirmacion strong {
	display: block;
	color: #14532d;
	font-size: 0.92rem;
	margin-bottom: 4px;
}

.evento-confirmacion p {
	color: #2f5541;
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0;
}

/* Cita final */
.evento-cita {
	border-left: 3px solid #1c5fd6;
	margin: 22px 0 0;
	padding-left: 16px;
	font-style: italic;
	color: #4a5568;
	font-size: 0.92rem;
	line-height: 1.6;
}

/* ============ Gestión de CAEs ============ */
.cae-layout{ gap:56px; align-items:center; }
.cae-stats{
	display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.cae-stat{
	text-align:left; padding:20px;
	border:1px solid var(--border); border-radius:var(--r-md);
}
.cae-stat-num{
	font-size:26px; font-weight:700; line-height:1.1;
	color:var(--brand); font-variant-numeric:tabular-nums;
}
.cae-stat-lbl{
	font-size:12.5px; font-weight:600; line-height:1.4;
	color:var(--text-secondary); margin-top:10px;
}
@media(max-width:860px){
	.cae-layout{ gap:32px; }
}
@media(max-width:480px){
	.cae-stats{ grid-template-columns:1fr; }
}

/* =====================================================================
   NUEVAS TECNOLOGÍAS  (.tech-panels)
   Móvil: tarjetas apiladas, descripción siempre visible.
   Escritorio (≥861px): acordeón horizontal con hover.
   ===================================================================== */

/* ---- Móvil (base) ---- */
.tech-panels{
	display:flex; flex-direction:column; gap:12px;
}
.tech-panel{
	position:relative; display:flex; align-items:flex-end;
	min-height:280px; border-radius:20px; overflow:hidden;
	isolation:isolate; /* evita fallos de recorte de esquinas en Safari */
	color:#fff; text-decoration:none;
}
.tech-panel-bg{
	position:absolute; inset:0;
	background-size:cover; background-position:center;
}
.tech-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%);
}
.tech-panel-content{
	position:relative; width:100%; padding:24px 20px;
}
.tech-panel-heading{
	display:flex; align-items:center; gap:14px;
}
.tech-panel-icon{
	width:44px; height:44px; flex-shrink:0; border-radius:50%;
	border:1.5px solid rgba(255,255,255,.5);
	display:flex; align-items:center; justify-content:center;
}
.tech-panel-icon .material-symbols-outlined{ font-size:22px; color:#fff; }
.tech-panel-title{
	margin:0; color:#fff; font-size:22px; line-height:1.2;
}
.tech-panel-detail{ margin-top:12px; }
.tech-panel-text{
	margin:0; color:rgba(255,255,255,.88); font-size:14px; line-height:1.6;
}

/* ---- Escritorio: acordeón ---- */
@media(min-width:861px){
	.tech-panels{
		flex-direction:row; gap:6px; height:420px;
		border-radius:20px; overflow:hidden;
	}
	.tech-panel{
		flex:1; min-width:64px; min-height:0; border-radius:0; cursor:pointer;
		transition:flex .55s cubic-bezier(.22,.61,.36,1);
	}
	.tech-panel:hover,
	.tech-panel:focus-within{ flex:2.3; }
	.tech-panel-bg{
		transform:scale(1.08); transition:transform .8s ease;
	}
	.tech-panel:hover .tech-panel-bg{ transform:scale(1); }
	.tech-panel-content{
		position:absolute; inset:0; width:auto; padding:26px 22px;
		display:flex; flex-direction:column; justify-content:flex-end;
	}
	.tech-panel-title{ white-space:nowrap; }
	.tech-panel-detail{
		max-height:0; opacity:0; overflow:hidden;
		transition:max-height .5s ease, opacity .4s ease;
	}
	.tech-panel:hover .tech-panel-detail,
	.tech-panel:focus-within .tech-panel-detail{
		max-height:200px; opacity:1;
	}
}


/* =====================================================================
   SECTORES EN LOS QUE TRABAJAMOS  (.sector-panels)
   Móvil: tarjetas apiladas con solo icono y título.
   Escritorio (≥861px): acordeón horizontal con descripción y lista.
   ===================================================================== */

/* ---- Móvil (base) ---- */
.sector-panels{
	display:flex; flex-direction:column; gap:12px;
}
.sector-panel{
	position:relative; display:flex; align-items:center;
	min-height:280px; border-radius:20px; overflow:hidden;
	isolation:isolate;
	color:#fff; text-decoration:none;
}
.sector-panel-bg{
	position:absolute; inset:0;
	background-size:cover; background-position:center;
}
.sector-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%);
}
.sector-panel-content{
	position:relative; width:100%; padding:24px 20px;
}
.sector-panel-heading{
	display:flex; align-items:center; gap:14px;
}
.sector-panel-icon{
	width:44px; height:44px; flex-shrink:0; border-radius:50%;
	border:1.5px solid rgba(255,255,255,.5);
	display:flex; align-items:center; justify-content:center;
}
.sector-panel-icon .material-symbols-outlined{ font-size:22px; color:#fff; }
.sector-panel-title{
	margin:0; color:#fff; font-size:22px; line-height:1.2;
}
/* En móvil el detalle no se muestra */
.sector-panel-detail{ display:none; }
.sector-panel-text{
	margin:0; color:rgba(255,255,255,.88); font-size:14px; line-height:1.6;
}
.sector-panel-list{
	margin:12px 0 0; padding:0; list-style:none;
	display:flex; flex-direction:column; gap:6px;
}
.sector-panel-list li{
	position:relative; padding-left:16px;
	font-size:13px; line-height:1.5; color:rgba(255,255,255,.88);
}
.sector-panel-list li::before{
	content:''; position:absolute; left:0; top:8px;
	width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.sector-panel-cta{
	display:flex; align-items:center; gap:4px; margin-top:14px;
	color:#fff; font-weight:700; font-size:13px; text-decoration:none;
}
.sector-panel-cta .material-symbols-outlined{ font-size:16px; }
.sector-panel-cta:hover{ text-decoration:underline; }

/* ---- Escritorio: acordeón ---- */
@media(min-width:861px){
	.sector-panels{
		flex-direction:row; gap:6px; height:520px;
		border-radius:20px; overflow:hidden;
	}
	.sector-panel{
		flex:1; min-width:64px; min-height:0; border-radius:0; cursor:pointer;
		align-items:stretch;
		transition:flex .55s cubic-bezier(.22,.61,.36,1);
	}
	.sector-panel:hover,
	.sector-panel:focus-within{ flex:2.3; }
	.sector-panel-bg{
		transform:scale(1.08); transition:transform .8s ease;
	}
	.sector-panel:hover .sector-panel-bg{ transform:scale(1); }
	.sector-panel-content{
		position:absolute; inset:0; width:auto; padding:26px 22px;
		display:flex; flex-direction:column; justify-content:flex-end;
	}
	.sector-panel-title{ white-space:nowrap; }
	.sector-panel-detail{
		display:block; margin-top:12px;
		max-height:0; opacity:0; overflow:hidden;
		transition:max-height .5s ease, opacity .4s ease;
	}
	.sector-panel:hover .sector-panel-detail,
	.sector-panel:focus-within .sector-panel-detail{
		max-height:240px; opacity:1;
	}
}


/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media(prefers-reduced-motion:reduce){
	.tech-panel, .tech-panel-bg, .tech-panel-detail,
	.sector-panel, .sector-panel-bg, .sector-panel-detail{
		transition:none;
	}
}

.asf-newsletter,
.asf-newsletter > p {
  display: flex;
  gap: 12px;
  margin: 0;
  max-width: 620px;
}
.asf-newsletter .wpcf7-form-control-wrap {
  flex: 1;
}
.asf-newsletter input[type="email"] {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #D5DCEB;
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 16px;
  color: #0B1F4D;
  box-sizing: border-box;
}
.asf-newsletter input[type="email"]:focus {
  outline: none;
  border-color: #0057E7;
  box-shadow: 0 0 0 3px rgba(0, 87, 231, .15);
}
.asf-newsletter input[type="submit"] {
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 10px;
  background: #0057E7;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.asf-newsletter input[type="submit"]:hover {
  background: #061B5F;
}
.asf-consent {
  margin-top: 14px;
  font-size: 14px;
  color: #60708A;
}
.asf-consent a {
  color: #0057E7;
}
.asf-newsletter .wpcf7-spinner {
  display: none;
}

/* Móvil: campo y botón uno debajo del otro */
@media (max-width: 600px) {
  .asf-newsletter,
  .asf-newsletter > p {
    flex-direction: column;
  }
  .asf-newsletter input[type="submit"] {
    width: 100%;
  }
}