/* ============================================================
   Fuentes: Montserrat (títulos y cuerpo) autohospedada en /fonts.
   Exo (labels/nav) se sirve desde Google Fonts.
   ============================================================ */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-normal-400.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-normal-500.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 500; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-normal-700.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-italic-400.woff2") format("woff2"); font-display: swap; font-style: italic; font-weight: 400; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-italic-700.woff2") format("woff2"); font-display: swap; font-style: italic; font-weight: 700; }
@font-face { font-family: "Exo"; src: url(https://fonts.gstatic.com/s/exo/v25/4UaOrEtFpBISc36j.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo"; src: url(https://fonts.gstatic.com/s/exo/v25/4UaOrEtFpBISfX6jyDM.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo"; src: url(https://fonts.gstatic.com/s/exo/v25/4UaZrEtFpBI4f1ZSIK9d4LjJ4vowOwRmOw.woff2) format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root{
	--bg:#000;
	--surface:#1c1c1c;
	--accent:#AEFD7F; /* verde lima, color de marca real */
	--text:#fff;
	--text-muted:#828e9d;
	--text-dim:#999;

	/* Escala tipográfica (7 pasos) — antes había 19+ tamaños sueltos sin
	   relación entre sí; esto consolida todo el texto de lectura/UI del
	   sitio en 7 escalones reutilizables. Los valores parten de los
	   tamaños que YA dominaban el archivo (18px y 58px eran, por lejos,
	   los más repetidos), así que casi ningún tamaño visible cambia más
	   de 1-2px — el objetivo es que compartan un token, no rediseñar. */
	--fs-1:14px;  /* micro: labels de formulario, letra pequeña/legal */
	--fs-2:16px;  /* small: botones, píldoras, texto de inputs */
	--fs-3:18px;  /* body: todo el texto de párrafo del sitio */
	--fs-4:22px;  /* subhead: títulos de tarjeta/bloque (h3 de componente) */
	--fs-5:23px;  /* lead: párrafos introductorios (hero, stats) */
	--fs-6:36px;  /* title-sm: título de la página 404 */
	--fs-7:58px;  /* title: h2 de sección (stats, servicios, contacto) */

	/* Tamaños "display": apariciones únicas y muy grandes (hero, cifras
	   destacadas, marquee, el "404") que no forman parte de la escala de
	   lectura de arriba — no tiene sentido que un momento gráfico de una
	   sola vez comparta escalón con texto que se repite por el sitio. */
	--fs-hero:70px;
	--fs-stat:60px;
	--fs-marquee:48px;
	--fs-jumbo:120px;

	/* Escala de radios (3 pasos) — antes había 4 valores sueltos (10px, 12px,
	   23px, 999px) sin relación entre sí. sm es para elementos chicos
	   interactivos (botones, inputs), lg para superficies grandes
	   (tarjetas, contenedores), full para píldoras/círculos. */
	--radius-sm:12px;
	--radius-lg:20px;
	--radius-full:999px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Montserrat",sans-serif;}
h1,h2,h3,h4,h5,h6{margin:0;font-family:"Montserrat",sans-serif;font-weight:500;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1228px;margin:0 auto;padding:0 20px;}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);padding:22px 0;}
/* El nav es sticky y flota SOBRE el contenido; sin esto, saltar a un ancla
   (#nosotros, #servicios, #contacto) deja el título de la sección tapado
   detrás del nav. 110px cubre el alto real del nav (~98px en desktop) con
   margen de sobra incluso en los breakpoints donde el nav es más bajo. */
#nosotros, #servicios, #contacto{scroll-margin-top:110px;}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;}
.nav img{height:54px;width:auto;}
.nav a:first-child img{transition:opacity .15s ease;}
.nav a:first-child:hover img{opacity:.8;}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;}
.nav-links a{
	font-family:"Exo",sans-serif;font-weight:700;font-size:var(--fs-2);
	letter-spacing:1px;text-transform:uppercase;color:#fff;
	transition:color .15s ease;
}
.nav-links a:hover{color:var(--accent);}
/* aria-current ya existía en el HTML (noticias.html) pero no se traducía en
   nada visible; el subrayado persiste incluso al pasar el mouse por otros
   links, para que siempre quede claro en qué página está el visitante. */
.nav-links a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:6px;}

/* Botón hamburguesa: oculto en desktop, solo aparece bajo 809px (ver media
   query) donde .nav-links se oculta y necesita una forma de abrirse. */
.nav-toggle{
	display:none;background:none;border:none;cursor:pointer;padding:8px;
	flex-direction:column;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.btn{
	display:inline-flex;align-items:center;gap:10px;
	background:var(--accent);color:#000;font-family:"Exo",sans-serif;
	font-weight:700;font-size:var(--fs-2);letter-spacing:1px;text-transform:uppercase;
	padding:14px 28px;border-radius:var(--radius-sm);border:none;cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{background:#c3ff9c;transform:translateY(-2px);box-shadow:0 10px 28px rgba(174,253,127,.35);}
.btn:active{transform:translateY(0);box-shadow:0 4px 14px rgba(174,253,127,.3);}
.btn:focus-visible, button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Label pill */
.label{
	display:inline-block;background:var(--accent);color:#000;
	font-family:"Exo",sans-serif;font-weight:700;font-size:var(--fs-2);
	letter-spacing:1px;text-transform:uppercase;padding:6px 20px;border-radius:var(--radius-full);
	margin-bottom:20px;
}

/* Hero */
.hero{
	/* Nav ocupa ~82px (padding 22px*2 + logo 38px); restamos ese alto para
	   que nav + hero llenen exactamente los 100vh de la primera pantalla. */
	min-height:calc(100vh - 82px);
	display:flex;align-items:center;
	padding:70px 0;text-align:left;position:relative;
	/* Destellos verdes: dos círculos grandes y difusos, centrados EN el borde
	   izquierdo/derecho (x:0%/100%) para que solo se vea la mitad del radio
	   dentro de la página, como si el resplandor entrara desde fuera del
	   viewport. Asimétricos en vertical (izquierda más arriba, derecha más
	   abajo). Los centros se mantienen lejos del borde inferior para que el
	   color llegue a 0 de opacidad ANTES de tocar el límite con .stats-band
	   — así no se ve un corte (el hero es alto, 100vh, así que hay margen de
	   sobra para radios grandes sin riesgo de seam). */
	background-image:
		radial-gradient(circle 580px at 0% 18%, rgba(174,253,127,.34) 0%, rgba(174,253,127,.14) 45%, rgba(174,253,127,0) 100%),
		radial-gradient(circle 560px at 100% 52%, rgba(174,253,127,.30) 0%, rgba(174,253,127,.12) 45%, rgba(174,253,127,0) 100%);
	background-color:var(--bg);
}
/* max-width:75% (del ancho total de la página, no del contenedor de 1228px):
   el BLOQUE se centra (margin:0 auto, mismo espacio vacío a cada lado),
   pero el texto adentro sigue alineado a la izquierda, como un párrafo. */
.hero .wrap{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:30px;max-width:75%;margin:0 auto;}
.hero h1{font-size:var(--fs-hero);letter-spacing:-2.5px;line-height:1.1;color:#f2f9fe;}
.hero p{font-family:"Montserrat",sans-serif;font-size:var(--fs-5);line-height:1.5;color:var(--text-muted);max-width:90%;}

/* Stats section */
.stats-band{
	padding:80px 0;text-align:center;position:relative;
	/* Resplandor difuso y orgánico: dos elipses grandes superpuestas con
	   varios "stops" de color para que el desvanecido sea gradual (no un
	   borde limpio), centradas verticalmente para no tocar los bordes
	   superior (límite con .hero) ni inferior (límite con .services). */
	background-image:
		radial-gradient(ellipse 780px 170px at 65% 48%, rgba(192,251,141,.12) 0%, rgba(192,251,141,.05) 50%, rgba(192,251,141,0) 100%),
		radial-gradient(ellipse 620px 160px at 25% 52%, rgba(192,251,141,.07) 0%, rgba(192,251,141,0) 100%);
	background-color:var(--bg);
}
.stats-band h2{font-size:var(--fs-7);letter-spacing:-2px;color:#f2f9fe;max-width:700px;margin:0 auto 20px;}
.stats-band > .wrap > p{font-family:"Montserrat",sans-serif;color:var(--text-muted);font-size:var(--fs-5);line-height:1.5;max-width:75%;margin:0 auto;}
.stats-grid{display:flex;justify-content:center;gap:60px;margin-top:75px;flex-wrap:wrap;}
.stat .num{font-family:"Montserrat",sans-serif;font-size:var(--fs-stat);font-weight:700;letter-spacing:-0.04em;color:#fff;}
.stat .label-sm{font-family:"Montserrat",sans-serif;font-size:var(--fs-4);font-weight:600;color:var(--text-dim);margin-top:5px;}

/* Services */
/* padding-top bajo a propósito: junto con el margin-bottom del marquee,
   busca que el espacio antes y después de la franja quede parejo (antes
   había 140px arriba vs 40px abajo, un salto de ritmo mucho más notorio
   que la franja en sí). */
.services{background:var(--bg);padding:20px 0 120px;text-align:center;}
.services h2{font-size:var(--fs-7);letter-spacing:-2px;color:#fff;max-width:700px;margin:0 auto 32px;}

/* Marquee/ticker: reemplaza la píldora "SERVICIOS". Franja de ancho completo,
   deliberadamente de bajo contraste (gris oscuro sobre gris casi negro) para
   que se sienta casi parte del fondo, no un acento de marca. El contenido se
   duplica en dos grupos idénticos: al animar translateX(-50%) el segundo
   grupo queda exactamente donde empezó el primero, logrando un loop perfecto. */
/* mask-image funde los bordes superior/inferior con el negro del fondo, para
   que la franja no se sienta un rectángulo insertado sino algo que emerge
   y se desvanece del propio fondo (misma técnica que el fade lateral del
   carrusel de testimonios, aquí en vertical). */
.marquee{
	/* gris con un dejo de verde (en vez de un gris neutro puro) para que
	   la franja se sienta parte de la misma paleta que los glows del resto
	   del sitio, no un tono aparte insertado encima. */
	width:100%;overflow:hidden;background:#1c2119;padding:20px 0;margin-bottom:100px;
	-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
	mask-image:linear-gradient(to bottom, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 60s linear infinite;}
.marquee-group{
	display:flex;align-items:center;flex-shrink:0;white-space:nowrap;
	font-family:"Exo",sans-serif;font-weight:700;font-size:var(--fs-marquee);line-height:1;
	letter-spacing:1px;text-transform:uppercase;color:#0d0d0d;
}
@keyframes marquee-scroll{
	from{transform:translateX(0);}
	to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
	.marquee-track{animation:none;}
	.btn, .contact-form input, .contact-form select, .contact-form textarea, .contact-form button, .nav a:first-child img, .nav-toggle span, .testimonial-card, .service-panel-wrap, .service-chevron, .service-icon{transition:none;}
	.btn:hover, .contact-form button:hover{transform:none;}
	.testimonial-card:hover{transform:none;}
	/* Sin el loop automático, mostrar el carrusel completo desplazándose
	   sería confuso: se congela en la primera tanda de tarjetas, sin
	   difuminado, como una fila estática normal. */
	.testimonial-track{animation:none;transform:none;}
	.testimonial-viewport{-webkit-mask-image:none;mask-image:none;}
	.testimonial-group[aria-hidden="true"]{display:none;}
}
/* Acordeón de servicios — reemplaza el grid de 4 tarjetas. La animación de
   alto usa el truco grid-template-rows 0fr→1fr (en vez de max-height o JS
   midiendo scrollHeight) para una transición suave que se adapta sola al
   contenido real de cada panel. */
.service-accordion{max-width:900px;margin:32px auto 0;text-align:left;}
.service-item{border-bottom:1px solid rgba(255,255,255,0.12);}
.service-item:first-child{border-top:1px solid rgba(255,255,255,0.12);}
.service-heading{margin:0;font-family:"Montserrat",sans-serif;font-weight:500;}
.service-toggle{
	width:100%;display:flex;align-items:center;gap:24px;
	background:none;border:none;padding:28px 4px;margin:0;cursor:pointer;text-align:left;
	font:inherit;color:inherit;transition:opacity .15s ease;
}
.service-toggle:hover{opacity:.75;}
.service-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px;}
.service-icon{
	width:76px;height:76px;border-radius:var(--radius-full);flex-shrink:0;
	background:rgba(174,253,127,0.08);box-shadow:0 8px 50px 0 rgba(174,253,127,0.25);
	display:flex;align-items:center;justify-content:center;
	transition:box-shadow .2s ease;
}
.service-item.open .service-icon{box-shadow:0 8px 60px 0 rgba(174,253,127,0.45);}
.service-icon img{width:34px;height:34px;}
.service-title{
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:var(--fs-4);
	color:#fff;letter-spacing:-.5px;flex:1;
}
.service-chevron{
	flex-shrink:0;width:10px;height:10px;margin-right:6px;
	border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
	transform:rotate(45deg);transition:transform .25s ease;
}
.service-item.open .service-chevron{transform:rotate(-135deg);}
.service-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.service-item.open .service-panel-wrap{grid-template-rows:1fr;}
.service-panel-inner{overflow:hidden;}
.service-panel{padding:0 4px 32px 100px;}
.service-panel p{font-family:"Montserrat",sans-serif;color:var(--text-muted);font-size:var(--fs-3);line-height:1.65;max-width:640px;}
.service-checklist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.service-checklist li{
	font-family:"Montserrat",sans-serif;color:#fff;font-size:var(--fs-3);
	display:flex;align-items:center;gap:14px;
}
.service-checklist li img{flex-shrink:0;}

/* Testimonios — carrusel horizontal automático (misma técnica que .marquee:
   el track duplica el grupo de tarjetas y anima translateX(-50%→0%) para
   loop perfecto), pero de izquierda a derecha. El mask-image difumina los
   bordes del viewport para que las tarjetas se desvanezcan en vez de
   aparecer/cortarse de golpe. */
.testimonials{background:var(--bg);padding:100px 0 90px;text-align:center;overflow:hidden;}
.testimonials h2{font-size:var(--fs-7);letter-spacing:-2px;color:#fff;max-width:700px;margin:0 auto 56px;}
/* font-weight:400 explícito para que use el archivo "montserrat-italic-400"
   real en vez de que el navegador sintetice una cursiva falsa a partir
   del weight:500 heredado del h2 (el italic solo existe en 400 y 700). */
.testimonials h2 em{font-style:italic;font-weight:400;}
/* clamp() en vez de un valor fijo: 160px tenía sentido pensado para el
   .wrap de 1228px+, pero en anchos intermedios (~850-1000px, laptops
   chicos, todavía arriba del breakpoint de 809px) se comía una porción
   demasiado grande del ancho visible. Escala con el viewport entre 50px
   (mismo valor que ya usa el breakpoint mobile, sin salto en la frontera
   de 809px) y 160px (el tope original, para 1228px en adelante). */
.testimonial-viewport{
	overflow:hidden;cursor:pointer;
	-webkit-mask-image:linear-gradient(to right, transparent 0, #000 clamp(50px, 30vw - 208px, 160px), #000 calc(100% - clamp(50px, 30vw - 208px, 160px)), transparent 100%);
	mask-image:linear-gradient(to right, transparent 0, #000 clamp(50px, 30vw - 208px, 160px), #000 calc(100% - clamp(50px, 30vw - 208px, 160px)), transparent 100%);
}
.testimonial-track{display:flex;width:max-content;animation:testimonials-scroll 36s linear infinite;}
.testimonial-track:hover, .testimonial-track.paused{animation-play-state:paused;}
.testimonial-group{display:flex;gap:28px;flex-shrink:0;padding:0 14px;}
@keyframes testimonials-scroll{
	from{transform:translateX(-50%);}
	to{transform:translateX(0%);}
}
.testimonial-card{
	width:320px;flex-shrink:0;background:var(--surface);border-radius:var(--radius-lg);padding:40px 32px;
	display:flex;flex-direction:column;gap:18px;text-align:left;
	transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
/* El gap del flex ya maneja el espaciado; sin esto, el margin-bottom:20px
   del .label global se sumaría al gap y dejaría un hueco doble antes de
   las comillas. */
.testimonial-card .label{margin-bottom:0;align-self:flex-start;}
.testimonial-card:hover{background:#232323;transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.testimonial-quote-mark{
	font-family:Georgia,"Times New Roman",serif;font-size:64px;line-height:1;
	color:var(--accent);opacity:.9;height:34px;
}
.testimonial-text{color:#fff;font-family:"Montserrat",sans-serif;font-size:var(--fs-3);line-height:1.65;}
.testimonial-footer{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:4px;}
.testimonial-avatar{
	width:48px;height:48px;border-radius:var(--radius-full);flex-shrink:0;
	background:rgba(174,253,127,0.08);display:flex;align-items:center;justify-content:center;
	box-shadow:0 8px 30px 0 rgba(174,253,127,0.2);
}
.testimonial-avatar img{width:22px;height:22px;}
.testimonial-role{color:#fff;font-family:"Montserrat",sans-serif;font-weight:600;font-size:var(--fs-2);}
.testimonial-sector{color:var(--text-dim);font-family:"Montserrat",sans-serif;font-size:var(--fs-1);}

/* News / Noticias — mismo lenguaje visual que .card (superficie, radio,
   hover), pero en formato de artículo (texto a la izquierda, varios
   párrafos) en vez de la tarjeta centrada con ícono de Servicios. */
.news{background:var(--bg);padding:80px 0;text-align:center;}
.news.news-page{padding:140px 0 100px;}
.news h1{font-size:var(--fs-7);letter-spacing:-2px;color:#fff;max-width:700px;margin:0 auto 20px;}
.news-intro{font-family:"Montserrat",sans-serif;color:var(--text-muted);font-size:var(--fs-5);line-height:1.5;max-width:700px;margin:0 auto;}
.news-list{display:flex;flex-direction:column;gap:24px;max-width:820px;margin:40px auto 0;text-align:left;}
.news-empty{font-family:"Montserrat",sans-serif;color:var(--text-muted);font-size:var(--fs-3);text-align:center;}
.news-card{
	background:var(--surface);border-radius:var(--radius-lg);padding:40px 44px;
	transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{background:#232323;transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.news-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:12px;}
.news-card time{
	font-family:"Exo",sans-serif;font-weight:700;font-size:var(--fs-1);
	letter-spacing:1px;text-transform:uppercase;color:var(--accent);
}
/* Misma píldora que .label (verde lima, Exo, uppercase) pero en tamaño
   reducido para convivir junto a la fecha sin competir con el título. */
.news-tag{
	display:inline-block;background:var(--accent);color:#000;
	font-family:"Exo",sans-serif;font-weight:700;font-size:12px;
	letter-spacing:.5px;text-transform:uppercase;padding:4px 14px;border-radius:var(--radius-full);
}
/* Solo para noticias categoría M&A: dos círculos (logos de las empresas
   de la operación, cuando se agreguen vía noticias.json) separados por
   el ícono de M&A. Círculo vacío = todavía sin logo cargado. */
.news-parties{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
/* overflow:hidden + border-radius:full sobre el contenedor, e img con
   object-fit:cover, hacen que el círculo actúe de máscara: cualquier logo
   que se suba rellena el círculo de borde a borde, sin espacios en blanco
   ni verse el rectángulo original de la imagen. */
.news-party-logo{
	width:52px;height:52px;border-radius:var(--radius-full);flex-shrink:0;
	background:var(--bg);overflow:hidden;
}
.news-party-logo img{width:100%;height:100%;object-fit:cover;object-position:center;}
/* Ícono flotante, sin círculo de fondo (a diferencia de .news-party-logo);
   más grande que antes porque sin el contenedor se sentía chico. */
.news-parties-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.news-parties-icon img{width:24px;height:24px;}
.news-card h3{color:#fff;font-size:var(--fs-4);letter-spacing:-.5px;margin-bottom:16px;}
.news-body p{font-size:var(--fs-3);line-height:1.65;margin-bottom:14px;}
.news-body p:last-child{margin-bottom:0;}
.news-more[hidden]{display:none;}
.news-toggle{
	display:inline-block;margin-top:16px;background:none;border:none;padding:0;cursor:pointer;
	font-family:"Exo",sans-serif;font-weight:700;font-size:var(--fs-2);letter-spacing:1px;text-transform:uppercase;
	color:var(--accent);transition:color .15s ease;
}
.news-toggle:hover{color:#fff;}

/* Contact */
.contact{position:relative;padding:80px 20px 0;}
.contact-inner{
	max-width:1228px;margin:0 auto;
	background:
		radial-gradient(ellipse 500px 220px at 92% 8%, rgba(192,251,141,.18) 0%, rgba(192,251,141,0) 100%),
		linear-gradient(130deg,#000 -9%,#070c14 100%);
	border-radius:var(--radius-lg);padding:80px 64px;display:flex;gap:117px;
}
.contact h2{font-size:var(--fs-7);letter-spacing:-2px;color:#fff;text-align:center;max-width:750px;margin:0 auto 40px;}
.contact-head{text-align:center;max-width:1228px;margin:0 auto 20px;}
.contact-desc{font-family:"Montserrat",sans-serif;color:#fff;font-size:var(--fs-3);max-width:70%;margin:0 auto 32px;}
.contact-info{flex:1;display:flex;flex-direction:column;gap:32px;}
.info-block h3{font-size:var(--fs-4);color:#f2f9fe;margin-bottom:10px;}
.info-block p{font-family:"Montserrat",sans-serif;color:#fff;font-size:var(--fs-3);line-height:1.65;}
.contact-form{flex:1;}
.form-fields{display:flex;flex-direction:column;gap:16px;}
.form-fields[hidden]{display:none;}
.contact-form .field{display:flex;flex-direction:column;gap:6px;}
.contact-form label{
	font-family:"Exo",sans-serif;font-weight:700;font-size:var(--fs-1);
	letter-spacing:.5px;text-transform:uppercase;color:#fff;
}
.contact-form input, .contact-form select, .contact-form textarea{
	width:100%;padding:14px 20px;border-radius:var(--radius-sm);border:2px solid transparent;
	background:#fff;color:#212a40;font-family:"Montserrat",sans-serif;font-size:var(--fs-2);
	transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form select{cursor:pointer;}
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover{box-shadow:0 4px 16px rgba(0,0,0,.18);}
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible{
	outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(174,253,127,.25);
}
.contact-form textarea{min-height:120px;resize:vertical;}
.contact-form button{
	background:var(--accent);color:#000;font-family:"Montserrat",sans-serif;font-weight:700;border:none;border-radius:var(--radius-sm);
	padding:14px;font-size:var(--fs-2);cursor:pointer;box-shadow:0 3px 20px 0 rgba(0,0,0,0.14);
	transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.contact-form button:hover{background:#c3ff9c;transform:translateY(-2px);box-shadow:0 10px 28px rgba(174,253,127,.35);}
.contact-form button:active{transform:translateY(0);}
.contact-form button:disabled{opacity:.7;cursor:default;transform:none;}
.contact-form small{font-family:"Montserrat",sans-serif;color:#fff;font-size:var(--fs-1);}
.form-error{
	font-family:"Montserrat",sans-serif;color:#ff8f7f;font-size:var(--fs-1);margin-top:-6px;
}
.form-error[hidden]{display:none;}

/* Estado de éxito: reemplaza los campos dentro de la misma tarjeta (misma
   .contact-form) en vez de redirigir a la página de Formspree, para no
   sacar al visitante del sitio justo cuando acaba de convertir. */
.form-success{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.form-success[hidden]{display:none;}
.form-success-icon{
	width:56px;height:56px;border-radius:var(--radius-full);
	background:rgba(174,253,127,0.1);display:flex;align-items:center;justify-content:center;
	box-shadow:0 8px 40px 0 rgba(174,253,127,0.25);
}
.form-success h3{color:#fff;font-size:var(--fs-4);letter-spacing:-.5px;}
.form-success p{font-family:"Montserrat",sans-serif;color:var(--text-muted);font-size:var(--fs-3);line-height:1.6;}

/* Footer */
footer{background:var(--surface);padding:32px 60px 28px;}
.footer-top{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;max-width:1228px;margin:0 auto;}
.footer-brand{display:flex;flex-direction:column;gap:20px;max-width:410px;}
.footer-brand img{width:76px;height:auto;}
.footer-brand p{font-family:"Montserrat",sans-serif;color:#fff;font-size:var(--fs-3);line-height:1.6;}
.footer-links h3, .footer-nav h3{color:#f2f9fe;font-size:var(--fs-4);margin-bottom:16px;}
.footer-links p{font-family:"Montserrat",sans-serif;color:#dee8f6;font-size:var(--fs-3);line-height:2.3em;}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer-nav a{font-family:"Montserrat",sans-serif;color:#dee8f6;font-size:var(--fs-3);transition:color .15s ease;}
.footer-nav a:hover{color:var(--accent);}
.footer-nav a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:4px;}
.footer-bottom{font-family:"Montserrat",sans-serif;max-width:1228px;margin:26px auto 0;padding-top:0;border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;color:#828e9d;font-size:var(--fs-2);}

/* 404 */
.notfound{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 20px;}
.notfound .code{font-size:var(--fs-jumbo);font-weight:700;letter-spacing:-4px;color:var(--accent);}
.notfound h1{font-size:var(--fs-6);margin:10px 0 16px;color:#f2f9fe;}
.notfound p{color:var(--text-muted);font-size:var(--fs-3);margin-bottom:32px;}

@media (max-width:809px){
	/* Redefinir el token en vez de tocar cada selector: como --fs-hero,
	   --fs-7 y --fs-jumbo tienen un solo "dueño" cada uno (o varios que ya
	   se movían juntos, como los 3 h2 de sección), cambiar el valor acá
	   cascadea a todos sus usos sin repetir la excepción por selector. */
	:root{
		--fs-hero:46px;
		--fs-7:34px;
		--fs-jumbo:80px;
		--fs-marquee:38px;
	}
	/* 16px de fade tenía sentido con el marquee más alto de desktop; en una
	   franja más baja dejaría casi todo el texto desvanecido. */
	.marquee{
		padding:12px 0;
		-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	}
	.nav img{height:44px;}
	.nav-toggle{display:flex;}
	/* Panel desplegable de ancho completo, anclado al fondo de .nav (que es
	   position:sticky, así que sirve de contenedor para el absolute aunque
	   .nav-links viva dentro de .wrap, no directamente dentro de .nav). */
	.nav-links{
		display:none;position:absolute;top:100%;left:0;right:0;
		flex-direction:column;align-items:stretch;gap:0;
		background:rgba(0,0,0,0.95);backdrop-filter:blur(8px);
		padding:4px 20px 16px;border-top:1px solid rgba(255,255,255,0.08);
	}
	.nav-links.open{display:flex;}
	.nav-links li{width:100%;}
	.nav-links a{display:block;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
	.hero{
		min-height:calc(100vh - 82px);padding:50px 0;
		background-image:
			radial-gradient(circle 420px at 0% 16%, rgba(174,253,127,.32) 0%, rgba(174,253,127,.13) 45%, rgba(174,253,127,0) 100%),
			radial-gradient(circle 430px at 100% 52%, rgba(174,253,127,.28) 0%, rgba(174,253,127,.11) 45%, rgba(174,253,127,0) 100%);
	}
	.hero .wrap{max-width:100%;}
	.hero h1{letter-spacing:-2px;}
	/* .hero p y el párrafo de stats-band comparten --fs-5; ambos se achican
	   igual en mobile, así que el override queda literal en vez de mover
	   el token (que también usa .news-intro, que no debe cambiar aquí). */
	.hero p{font-size:19px;max-width:100%;}
	.stats-band > .wrap > p{font-size:19px;max-width:100%;}
	.stats-band, .services{padding-left:0;padding-right:0;}
	.news.news-page{padding:110px 0 72px;}
	.stats-grid{gap:32px;}
	.service-toggle{gap:16px;padding:22px 4px;}
	.service-icon{width:60px;height:60px;}
	.service-icon img{width:28px;height:28px;}
	.service-title{font-size:var(--fs-3);}
	.service-panel{padding-left:0;}
	.testimonials{padding:64px 0;}
	/* El clamp() de .testimonial-viewport ya llega a 50px justo en este
	   breakpoint (y se queda ahí para anchos menores), así que no hace
	   falta redefinirlo acá aparte. */
	.testimonial-card{width:270px;padding:32px 24px;}
	/* Mismo recorrido pero más lento: en pantallas chicas cada tarjeta pasa
	   demasiado rápido para alcanzar a leerla. */
	.testimonial-track{animation-duration:70s;}
	.contact-inner{flex-direction:column;padding:40px 32px;gap:40px;}
	.contact-desc{max-width:100%;}
	/* Oficinas/Teléfono/Email ya están en el footer; en mobile solo alargan
	   la sección de contacto antes de llegar al formulario. */
	.info-block{display:none;}
	footer{padding:40px 20px;}
	.footer-top{flex-direction:column;gap:40px;}
}

@media (max-width:480px){
	:root{
		--fs-hero:34px;
		--fs-7:26px;
		--fs-stat:44px;
		--fs-jumbo:64px;
		--fs-6:26px;
		--fs-marquee:28px;
	}
	.marquee{
		padding:8px 0;
		-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
		mask-image:linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
	}
	.wrap{padding:0 16px;}
	.hero{
		min-height:calc(100vh - 74px);padding:40px 0;
		background-image:
			radial-gradient(circle 300px at 0% 14%, rgba(174,253,127,.30) 0%, rgba(174,253,127,.12) 45%, rgba(174,253,127,0) 100%),
			radial-gradient(circle 320px at 100% 54%, rgba(174,253,127,.26) 0%, rgba(174,253,127,.10) 45%, rgba(174,253,127,0) 100%);
	}
	.hero .wrap{gap:22px;}
	.hero h1{letter-spacing:-1px;line-height:1.15;}
	.hero p{font-size:17px;}
	.stats-band > .wrap > p{font-size:17px;}
	.stats-band{padding:56px 0;}
	.services{padding:40px 0 72px;}
	/* En una pantalla chica, igualar los 96px de arriba (56 + 40) con otros
	   96px abajo sería demasiado aire; se queda más contenido pero parejo
	   con lo que había antes de este ajuste (40px se sentía casi pegado). */
	.marquee{margin-bottom:56px;}
	.news{padding:56px 0;}
	.news.news-page{padding:90px 0 56px;}
	.news-card{padding:28px 24px;}
	/* .stat .label-sm baja un escalón (--fs-4 → --fs-3) solo en mobile;
	   no es una redefinición de token porque --fs-4 también sostiene los
	   títulos de tarjeta/bloque, que en el original NO se achican acá. */
	.stat .label-sm{font-size:var(--fs-3);}
	.contact{padding:56px 16px 0;}
	.contact-inner{padding:32px 20px;}
	.nav img{height:36px;}
	/* mismo caso: el botón baja de --fs-2 a --fs-1 solo en mobile, sin
	   mover --fs-2 (lo usan inputs, footer, etc. que no cambian acá). */
	.btn{padding:11px 20px;font-size:var(--fs-1);}
}