/* ==========================================================================
   COAMB Colombia — hoja de estilos
   Sistema "Verde premium" (ver DESIGN.md). Solo verdes + neutros cálidos.
   Glassmorphism puntual con fallback sólido. Tipografía Inter + Montserrat.
   ========================================================================== */

:root{
  /* Verde vivo institucional — color PRINCIPAL (paleta viva, ref. Airwa) */
  --verde-900:#16340f;   /* más oscuro: pie y tarjeta de contacto */
  --verde-800:#295119;
  --verde-700:#417322;   /* fondo de botones: contraste AA con blanco */
  --verde-600:#7ba321;   /* lima vivo de marca: acentos */
  --verde-500:#93c531;   /* lima brillante: hovers, brillos */
  --verde-100:#e9f3d2;
  --verde-50:#f4f9e8;
  /* Azul institucional — del globo del logo COAMB */
  --azul:#007BC2;        /* azul real del globo del logo */
  --azul-oscuro:#005A9E;
  --azul-claro:#daeeff;
  --acento:#7ba321;
  --tinta:#14241a;
  --texto:#414b3d;
  --suave:#6f7b67;
  --linea:#e4e7dc;       /* hairline cálido */
  --gris:#f4f6ee;        /* fondo de sección alterna, cálido */
  --crema:#fafbf5;       /* superficie cálida */
  --blanco:#fff;
  --radio:16px;
  --sombra:0 1px 2px rgba(20,40,13,.04),0 10px 30px rgba(20,40,13,.06);
  --sombra-fuerte:0 4px 12px rgba(20,40,13,.07),0 26px 60px rgba(20,40,13,.13);
  --ancho:1140px;
  --trans:.25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.65;color:var(--texto);background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:'Montserrat','Inter',system-ui,sans-serif;color:var(--tinta);line-height:1.2;font-weight:800}
a{color:var(--verde-700);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--azul)}
/* Enlace de la resolución vigente: hereda el color del contexto, subrayado sutil */
.enlace-res{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.enlace-res:hover{color:var(--azul)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px}

.saltar{position:absolute;left:-9999px;top:0;background:var(--verde-800);color:#fff;padding:12px 20px;z-index:200}
.saltar:focus{left:12px;top:12px;color:#fff}

:focus-visible{outline:3px solid var(--verde-500);outline-offset:3px;border-radius:4px}

/* ---------- Chips de icono (cuadro redondeado con tinte) ---------- */
.ico{width:30px;height:30px;flex:0 0 30px;fill:none;stroke:var(--verde-600);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.servicio .ico,.ventaja .ico{width:54px;height:54px;flex:0 0 54px;padding:13px;border-radius:15px;
  background:linear-gradient(145deg,var(--verde-100),var(--verde-50));
  stroke:var(--verde-700);box-shadow:inset 0 0 0 1px var(--linea)}

/* ---------- Navegación (vidrio esmerilado) ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--linea)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3)}
}
.nav__caja{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px}
.nav__marca{display:flex;align-items:center;gap:11px}
.nav__marca img{width:auto;height:72px;object-fit:contain}
.nav__marca-texto{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.16rem;
  letter-spacing:-.01em;color:var(--tinta);line-height:1;white-space:nowrap}
.nav__marca-texto b{color:var(--verde-600);font-weight:800}
.nav__menu{display:flex;align-items:center;gap:30px}
.nav__menu a{color:var(--tinta);font-size:15px;font-weight:500;white-space:nowrap}
.nav__menu a.activo{color:var(--verde-600)}
.nav__menu a:hover{color:var(--azul)}
.nav__cta{background:var(--verde-700);color:#fff!important;padding:11px 22px;border-radius:999px;
  font-weight:600;box-shadow:0 4px 12px rgba(74,115,20,.24)}
.nav__cta:hover{background:var(--verde-800)}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--tinta);border-radius:2px;transition:var(--trans)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(820px 560px at 85% 6%,rgba(131,167,36,.36),transparent 66%),
    radial-gradient(680px 520px at 6% 94%,rgba(65,115,34,.22),transparent 64%),
    linear-gradient(180deg,#dcefbe,var(--blanco));
  padding:104px 0 88px;border-bottom:1px solid var(--linea);
}
/* Malla de puntos tenue que se desvanece hacia abajo: da textura sin peso. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(74,115,20,.07) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%)}
.hero__rejilla{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:56px;align-items:center}
.hero__texto-col{max-width:660px}

.hero__credencial{position:relative;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.7);
  border-radius:20px;padding:32px 34px 30px;box-shadow:var(--sombra-fuerte)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero__credencial{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4)}
}
.hero__credencial::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--azul),#79C2EF)}
.hero__credencial-titulo{font-size:12px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--verde-600);margin-bottom:20px}
.hero__credencial-pdf{display:inline-block;margin-top:20px;font-size:14px;font-weight:600;color:var(--verde-700)}
.hero__sello{display:inline-flex;align-items:center;gap:8px;background:var(--azul-claro);color:var(--azul-oscuro);
  font-size:13px;font-weight:600;letter-spacing:.4px;padding:8px 16px;border-radius:999px;margin-bottom:26px}
.hero__sello::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--azul)}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.02em;margin-bottom:22px}
.hero__texto{font-size:clamp(1.02rem,2vw,1.19rem);color:var(--texto);max-width:640px;margin-bottom:34px}
.hero__acciones{display:flex;flex-wrap:wrap;gap:14px}

.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:999px;
  font-weight:600;font-size:15px;line-height:1;border:1.5px solid transparent;cursor:pointer;
  transition:var(--trans);font-family:inherit}
.btn--primario{background:linear-gradient(135deg,var(--verde-600),var(--verde-700));color:#fff;
  box-shadow:0 6px 18px rgba(74,115,20,.28)}
.btn--primario::after{content:"→";font-size:1.05em;transition:transform var(--trans)}
.btn--primario:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(74,115,20,.38)}
.btn--primario:hover::after{transform:translateX(3px)}
.btn--fantasma{border-color:var(--verde-600);color:var(--verde-700);background:transparent}
.btn--fantasma:hover{background:var(--verde-600);color:#fff}

.hero__datos{display:flex;flex-direction:column}
.hero__datos li{display:flex;flex-direction:column;padding:14px 0;border-top:1px solid var(--linea)}
.hero__datos li:first-child{border-top:0;padding-top:0}
.hero__datos strong{font-family:'Montserrat',sans-serif;font-size:1.16rem;color:var(--azul);line-height:1.2}
.hero__datos span{font-size:13.5px;color:var(--suave);margin-top:3px}

/* ---------- Secciones ---------- */
.seccion{padding:94px 0}
.seccion--gris{background:var(--gris)}
.seccion__eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--verde-600);
  font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:16px}
.seccion__eyebrow::before{content:"";width:26px;height:2px;background:var(--verde-500);border-radius:2px}
.seccion__titulo{font-size:clamp(1.6rem,3.4vw,2.35rem);letter-spacing:-.015em;margin-bottom:18px;max-width:760px}
.seccion__intro{max-width:640px;color:var(--suave);margin-bottom:48px}
/* "¿Por qué elegirnos?" es la sección institucional: su rótulo va en azul del logo */
#porque .seccion__eyebrow{color:var(--azul)}
#porque .seccion__eyebrow::before{background:var(--azul)}

/* ---------- Quiénes somos ---------- */
.nosotros{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:34px}
.nosotros__texto{padding-top:24px}
.nosotros__texto p+p{margin-top:18px}
/* Composición dinámica de imágenes en Quiénes somos */
.nosotros__collage{position:relative;margin:8px 46px 66px 14px}
.nosotros__foto-a{width:80%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:18px;box-shadow:var(--sombra-fuerte)}
.nosotros__foto-b{position:absolute;right:-30px;bottom:-40px;width:46%;aspect-ratio:4/3;object-fit:cover;
  display:block;border-radius:16px;border:5px solid #fff;box-shadow:var(--sombra-fuerte)}
.nosotros__acento{position:absolute;left:-14px;top:-14px;width:88px;height:88px;border-radius:16px;z-index:-1;
  background:linear-gradient(135deg,var(--verde-500),var(--azul))}
.nosotros__punto{position:absolute;left:-22px;bottom:24px;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--azul),var(--azul-oscuro));opacity:.16}
/* Collage de una sola imagen (foto del técnico, sin la superpuesta) */
.nosotros__collage--sola{margin:8px 14px 18px 14px}
.nosotros__collage--sola .nosotros__foto-a{width:100%;aspect-ratio:3/2}

/* ---------- Galería "burbujas": carrusel de fotos con máscara SVG ---------- */
.galeria-wrap{position:relative;margin-top:26px}
.galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:14px 0 6px;cursor:grab;-ms-overflow-style:none;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 70px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 70px),transparent)}
.galeria::-webkit-scrollbar{display:none}
.galeria.arrastrando{cursor:grabbing}
.galeria:focus-visible{outline:3px solid var(--verde-500);outline-offset:4px;border-radius:8px}
.galeria__pista{display:flex;gap:20px;margin:0;padding:0 24px;list-style:none}
.gtile{flex:0 0 auto;width:360px;scroll-snap-align:center;margin:0;text-align:center}
.gtile img{width:360px;height:340px;object-fit:cover;display:block;
  -webkit-mask-image:url(../images/burbujas-mask.svg);mask-image:url(../images/burbujas-mask.svg);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.gtile:hover img{transform:scale(1.04)}
.gtile figcaption{margin-top:2px;font-size:15px;font-weight:600;color:var(--tinta)}
/* Flechas */
.galeria__flecha{position:absolute;top:46%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);
  background:var(--blanco);color:var(--verde-700);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra);transition:var(--trans)}
.galeria__flecha:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.galeria__flecha:focus-visible{outline:3px solid var(--verde-500);outline-offset:2px}
.galeria__flecha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.galeria__flecha--prev{left:-12px}
.galeria__flecha--next{right:-12px}

/* ---------- Ensamblaje con scroll (scroll-scrubbing) ---------- */
.ensamblaje{position:relative;height:320vh;
  background:radial-gradient(78% 96% at 66% 40%,#ededed 0%,#dedede 44%,#bfbfbf 100%)}
.ensamblaje__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.ensamblaje .contenedor{max-width:1320px}
.ensamblaje__grid{display:grid;grid-template-columns:.58fr 1.42fr;gap:24px;align-items:center;width:100%}
.ensamblaje__intro{color:var(--suave);margin:14px 0 28px;max-width:42ch}
.ensamblaje__lista{display:flex;flex-direction:column;gap:11px}
.ensamblaje__lista li{position:relative;padding-left:32px;font-weight:600;font-size:15.5px;
  color:var(--suave);opacity:.55;transition:opacity .35s,color .35s}
.ensamblaje__lista li::before{content:"";position:absolute;left:0;top:.35em;width:15px;height:15px;
  border-radius:50%;border:2px solid var(--linea);transition:var(--trans)}
.ensamblaje__lista li.activo{opacity:1;color:var(--tinta)}
.ensamblaje__lista li.activo::before{background:var(--azul);border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(0,123,194,.16)}
.ensamblaje__visor{position:relative;display:flex;align-items:center;justify-content:center}
.ensamblaje__frame{width:100%;max-width:1120px;height:auto;display:block;
  -webkit-mask-image:radial-gradient(ellipse 50% 94% at 50% 48%,#000 66%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 94% at 50% 48%,#000 66%,transparent 100%)}
.ensamblaje__logo{position:absolute;right:6px;bottom:2px;width:100px;height:auto;opacity:.92;pointer-events:none}
/* Pista de scroll: mueve la rueda del mouse para ver la animación */
.ensamblaje__hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--azul);
  font-size:13px;font-weight:600;letter-spacing:.3px;pointer-events:none;transition:opacity .5s}
.ensamblaje__mouse{width:26px;height:42px}
.ensamblaje__rueda{animation:ruedaScroll 1.6s ease-in-out infinite}
@keyframes ruedaScroll{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(9px);opacity:.15}}
/* El hint permanece visible mientras la sección está fija (se va con el
   scroll al terminar el ensamblaje). Antes se ocultaba al empezar a deslizar. */

@media (max-width:900px){
  /* En móvil/tablet el scroll-scrubbing con sticky es delicado: mostramos
     el equipo ya ensamblado (último frame) en una sección normal. */
  .ensamblaje{height:auto;padding:64px 0}
  .ensamblaje__sticky{position:static;height:auto}
  .ensamblaje__grid{grid-template-columns:1fr;gap:28px}
  .ensamblaje__frame{max-width:460px;margin-inline:auto}
  .ensamblaje__lista li.activo{opacity:1;color:var(--tinta)}
  .ensamblaje__hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ensamblaje{height:auto;padding:64px 0}
  .ensamblaje__sticky{position:static;height:auto}
  .ensamblaje__hint{display:none}
  .ensamblaje__rueda{animation:none}
}
.pilares{display:flex;flex-direction:column;gap:18px}
.pilar{background:var(--verde-50);border:1px solid var(--linea);
  border-left:4px solid var(--azul);border-radius:var(--radio);padding:24px 26px;transition:var(--trans)}
.pilar:hover{box-shadow:var(--sombra);transform:translateX(3px)}
.pilar h3{font-size:1.02rem;color:var(--verde-800);margin-bottom:8px}
.pilar p{font-size:15px;color:var(--texto)}

/* ---------- Servicios ---------- */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.servicio{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:32px;box-shadow:var(--sombra);transition:var(--trans);overflow:hidden}
.servicio::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--azul),#79C2EF);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.servicio:hover{transform:translateY(-4px);border-color:var(--azul-claro);box-shadow:var(--sombra-fuerte)}
.servicio:hover::before{transform:scaleX(1)}
.servicio--ancho{grid-column:1/-1}
.servicio__cabeza{display:flex;gap:20px;align-items:flex-start}
.servicio h3{font-size:1.14rem;margin:16px 0 10px}
.servicio__cabeza h3{margin-top:2px}
.servicio p{font-size:15px;color:var(--texto)}

.lista-check{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.lista-check li{position:relative;padding-left:26px;font-size:14.5px}
.lista-check li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;
  border-radius:50%;background:var(--verde-500);box-shadow:0 0 0 3px var(--verde-100)}

/* Acordeón de métodos EPA — <details> nativo, sin JavaScript */
.metodos{margin-top:24px;border-top:1px solid var(--linea);padding-top:20px}
.metodos summary{cursor:pointer;font-weight:600;color:var(--verde-700);font-size:15px;
  list-style:none;display:flex;align-items:center;gap:10px;user-select:none}
.metodos summary::-webkit-details-marker{display:none}
.metodos summary::before{content:"";width:9px;height:9px;border-right:2px solid var(--verde-600);
  border-bottom:2px solid var(--verde-600);transform:rotate(-45deg);transition:transform var(--trans);flex:0 0 auto}
.metodos[open] summary::before{transform:rotate(45deg)}
.metodos summary:hover{color:var(--azul)}
.metodos__lista{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 28px;margin-top:20px}
.metodos__lista li{display:flex;gap:14px;padding:11px 4px;border-bottom:1px solid var(--linea);font-size:14.5px}
.metodos__lista b{color:var(--verde-800);flex:0 0 148px;font-weight:600}
.metodos__lista span{color:var(--texto)}

/* Servicios adicionales — callout verde con acento lima */
.adicionales{margin-top:26px;background:var(--verde-50);border:1px solid var(--linea);
  border-left:4px solid var(--azul);border-radius:var(--radio);padding:28px 32px}
.adicionales h3{font-size:1.05rem;color:var(--verde-800);margin-bottom:8px}
.adicionales p{font-size:15px;color:var(--verde-900);max-width:760px}

/* ---------- Ventajas ---------- */
.ventajas{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
/* Íconos institucionales (acreditación y cobertura global) en azul del logo */
.ventaja:nth-child(1) .ico,.ventaja:nth-child(4) .ico{stroke:var(--azul);
  background:linear-gradient(145deg,var(--azul-claro),#eef7ff)}
.ventaja{padding:30px 26px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--blanco);transition:var(--trans)}
.ventaja:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--azul-claro)}
.ventaja h3{font-size:1.02rem;margin:16px 0 8px}
.ventaja p{font-size:14.5px}

/* ---------- Clientes ---------- */
.clientes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.clientes li{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  padding:22px 18px;text-align:center;font-size:14.5px;font-weight:500;color:var(--tinta);
  display:flex;align-items:center;justify-content:center;min-height:82px;transition:var(--trans)}
.clientes li:hover{border-color:var(--verde-500);color:var(--verde-700)}

/* ==========================================================================
   Contacto — tarjeta verde con formulario de VIDRIO flotante
   ========================================================================== */
.contacto{position:relative;margin-top:44px;border-radius:26px;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,#3a7024,#295119);
  box-shadow:var(--sombra-fuerte)}
/* Malla de puntos sutil sobre el verde */
.contacto::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
/* Fila superior: formulario (vidrio) + datos */
.contacto__top{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr}

/* Tarjeta de vidrio del formulario */
.contacto .form{position:relative;z-index:1;margin:18px;padding:34px 32px;border-radius:20px;
  display:flex;flex-direction:column;gap:18px;
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px rgba(0,0,0,.22)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .contacto .form{background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}
}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.form label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--tinta)}
.form .etq{display:block;line-height:1.3}
.req{color:var(--azul);font-weight:700}
.form input,.form select,.form textarea{
  font-family:inherit;font-size:15px;font-weight:400;color:var(--tinta);
  padding:14px 15px;border:1.5px solid var(--linea);border-radius:11px;
  background:var(--blanco);transition:var(--trans);width:100%}
.form input::placeholder,.form textarea::placeholder{color:#a7b09d}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(0,123,194,.18)}
.form textarea{resize:vertical;min-height:118px}
.form button{align-self:flex-start;margin-top:6px}
/* Botón de envío del formulario en azul del logo (juega con el globo) */
.contacto .form .btn--primario{background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
  box-shadow:0 6px 18px rgba(0,123,194,.30)}
.contacto .form .btn--primario:hover{box-shadow:0 12px 28px rgba(0,123,194,.42)}
.form__aviso{font-size:14.5px;font-weight:500;min-height:1.2em}
.form__aviso.ok{color:var(--verde-700)}
.form__aviso.error{color:#c0392b}

/* Confirmación para visitantes sin JS (PHP redirige a /#gracias). Oculta salvo
   cuando la URL la apunta como destino; con JS la confirmación va en el aviso. */
.gracias{display:none}
.gracias:target{display:block;margin:0 0 24px;padding:14px 20px;border-radius:12px;
  background:var(--verde-100);border:1px solid var(--verde-500);
  color:var(--verde-900);font-weight:600}

/* Honeypot fuera de pantalla (nunca display:none) */
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Panel de datos sobre el verde */
.datos{position:relative;z-index:1;padding:40px 38px;display:flex;flex-direction:column;
  justify-content:center;color:#eaf3dc}
.datos h3{color:#fff;font-size:1.3rem;margin-bottom:10px}
.datos__intro{font-size:14.5px;color:#cfe0b8;margin-bottom:28px;max-width:36ch}
.datos__lista{display:flex;flex-direction:column;gap:20px}
.datos__lista li{display:flex;gap:15px;align-items:flex-start}
.datos__ico{width:40px;height:40px;flex:0 0 40px;padding:10px;border-radius:12px;
  background:rgba(255,255,255,.1);fill:none;stroke:var(--verde-500);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.datos__lista li > div{display:flex;flex-direction:column;font-size:15px;color:#eef5e4}
.datos__etq{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--verde-500);margin-bottom:2px}
.datos__lista a{color:#eef5e4}
.datos__lista a:hover{color:#fff}
.datos__linkedin{display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font-size:14px;font-weight:600;color:#fff;align-self:flex-start}
.datos__linkedin svg{width:19px;height:19px;fill:currentColor}
.datos__linkedin:hover{color:var(--verde-500)}
/* Mapa como franja de ancho completo al fondo de la tarjeta */
.mapa{position:relative;z-index:1;height:240px;background:rgba(255,255,255,.06);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#bccfa5;border-top:1px solid rgba(255,255,255,.12)}

/* ---------- Pie ---------- */
.pie{position:relative;overflow:hidden;background:var(--verde-900);color:#c4d3ab;padding-top:0;margin-top:0}
.pie::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--verde-600),var(--azul),var(--verde-500))}
/* Arcos concéntricos suaves de fondo (estilo Airwa) */
.pie::after{content:"";position:absolute;left:50%;bottom:-70%;width:130%;aspect-ratio:1;z-index:0;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:
    radial-gradient(closest-side,transparent 79%,rgba(147,197,49,.10) 80%,transparent 83%),
    radial-gradient(closest-side,transparent 62%,rgba(147,197,49,.08) 63%,transparent 66%),
    radial-gradient(closest-side,transparent 45%,rgba(0,123,194,.09) 46%,transparent 49%)}
.pie__lema{position:relative;z-index:1;text-align:center;padding:56px 24px 40px;
  margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.pie__lema p{font-family:'Montserrat',sans-serif;font-weight:800;color:#fff;
  font-size:clamp(1.15rem,2.6vw,1.6rem);line-height:1.3;max-width:820px;margin-inline:auto}
.pie__lema span{color:var(--verde-500)}
.pie__caja{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1.2fr;gap:40px;padding-bottom:48px}
.pie__logo{display:inline-flex;align-items:center;gap:10px}
.pie__logo img{height:76px;width:auto;object-fit:contain}
.pie__marca p{font-size:14.5px;margin-top:16px;max-width:280px}
.pie h4{color:#fff;font-size:14px;letter-spacing:.5px;margin-bottom:16px}
.pie ul{display:flex;flex-direction:column;gap:9px}
.pie li,.pie a{font-size:14.5px;color:#c4d3ab}
.pie a:hover{color:#fff}
.pie__legal{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);padding:22px 0}
.pie__legal p{font-size:13.5px;color:#8a9a72}

/* ---------- Barra flotante de redes sociales ---------- */
.redes{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:4px;
  background:var(--verde-800);border-radius:14px 0 0 14px;padding:7px;
  box-shadow:0 6px 22px rgba(20,40,13,.28)}
.redes__link{width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background var(--trans),transform var(--trans)}
.redes__link:hover{background:var(--azul);color:#fff;transform:translateX(-3px)}
.redes__link svg{width:22px;height:22px;fill:currentColor}
@media (max-width:760px){.redes{display:none}}

/* ---------- Chat helper flotante (WhatsApp) ---------- */
.chat{position:fixed;right:22px;bottom:22px;z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.chat__fab{position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(37,211,102,.45);transition:transform var(--trans)}
.chat__fab:hover{transform:scale(1.06)}
.chat__fab svg{width:32px;height:32px;fill:#fff}
.chat__badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;
  background:#ff3b30;color:#fff;font-size:11.5px;font-weight:700;line-height:20px;text-align:center;
  padding:0 5px;box-shadow:0 0 0 2px #fff}
.chat__fab[aria-expanded="true"] .chat__badge{display:none}

.chat__panel{width:310px;max-width:calc(100vw - 44px);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 18px 55px rgba(0,0,0,.28);
  transform-origin:bottom right;animation:chatIn .26s cubic-bezier(.22,.61,.36,1)}
.chat__panel[hidden]{display:none}
@keyframes chatIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.chat__head{position:relative;display:flex;align-items:center;gap:12px;padding:16px;
  background:linear-gradient(135deg,#128C7E,#25d366);color:#fff}
.chat__avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center}
.chat__avatar svg{width:24px;height:24px;fill:#fff}
.chat__id{display:flex;flex-direction:column;line-height:1.35}
.chat__id strong{font-family:'Montserrat',sans-serif;font-size:15px}
.chat__id span{font-size:12px;opacity:.92}
.chat__close{position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;
  font-size:24px;line-height:1;cursor:pointer;opacity:.85;padding:2px 7px}
.chat__close:hover{opacity:1}
.chat__body{padding:20px 16px 6px;background:#eae6df}
.chat__msg{position:relative;background:#fff;border-radius:4px 14px 14px 14px;padding:12px 15px;
  font-size:14px;color:var(--texto);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.chat__cta{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px;padding:13px;
  border-radius:12px;background:#25d366;color:#fff!important;font-weight:600;font-size:15px;
  transition:background var(--trans)}
.chat__cta svg{width:20px;height:20px;fill:#fff}
.chat__cta:hover{background:#1ebe5b;color:#fff}
@media (max-width:760px){.chat{right:16px;bottom:16px}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .hero__rejilla{grid-template-columns:1fr;gap:40px}
  .hero__texto-col{max-width:none}
  .nosotros{grid-template-columns:1fr;gap:34px}
  .nosotros__texto{padding-top:0}
  .servicios{grid-template-columns:repeat(2,1fr)}
  .ventajas{grid-template-columns:repeat(2,1fr)}
  .clientes{grid-template-columns:repeat(3,1fr)}
  .contacto__top{grid-template-columns:1fr}
  .pie__caja{grid-template-columns:1fr 1fr;gap:34px}
}

/* Menú hamburguesa: colapsa antes (el menú horizontal + wordmark no cabe en tablet) */
@media (max-width:920px){
  .nav__burger{display:flex}
  .nav__menu{
    position:fixed;inset:96px 0 auto 0;background:var(--blanco);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:var(--trans);max-height:calc(100vh - 96px);overflow-y:auto}
  .nav__menu.abierto{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__menu a{padding:15px 0;border-bottom:1px solid var(--linea);font-size:16px}
  .nav__cta{text-align:center;margin-top:14px;border-bottom:0!important}
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media (max-width:920px){
    .nav__menu{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  }
}

@media (max-width:760px){
  body{font-size:16px}
  .seccion{padding:64px 0}
  .hero{padding:70px 0 60px}
  .hero__datos{gap:30px}

  .servicios{grid-template-columns:1fr}
  .metodos__lista{grid-template-columns:1fr}
  .metodos__lista b{flex-basis:132px}
  .ventajas{grid-template-columns:1fr}
  .clientes{grid-template-columns:repeat(2,1fr)}
  .gtile{width:280px}
  .gtile img{width:280px;height:270px}
  .nosotros__collage{margin:8px 34px 52px 10px}
  .nosotros__foto-b{right:-18px;bottom:-28px}
  .nosotros__acento{width:66px;height:66px}
  .form__fila{grid-template-columns:1fr}
  .contacto .form{margin:12px;padding:26px 22px}
  .datos{padding:30px 26px}
  .pie__caja{grid-template-columns:1fr;gap:30px}
  .wa{right:16px;bottom:16px}
  .pie__legal{padding-bottom:84px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media print{
  .nav,.wa,.form,.saltar{display:none}
  body{font-size:12pt;color:#000}
  .contacto{background:none;box-shadow:none}
  .datos,.datos h3,.datos__lista li > div,.datos__etq{color:#000}
}

/* ==========================================================================
   Movimiento — aparición al hacer scroll, deriva del hero, cinta y cifras.
   Todo se desactiva con prefers-reduced-motion (al final).
   ========================================================================== */
html.js [data-revelar]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.js [data-revelar].visible{opacity:1;transform:none}
html.js [data-revelar]{transition-delay:calc(var(--i,0) * 90ms)}

/* Manchas en deriva dentro del hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .contenedor{position:relative;z-index:2}
.hero__arte{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:0;pointer-events:none;
  background:url(../images/hero-strata.svg) center bottom/cover no-repeat}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;pointer-events:none}
.aurora--1{width:560px;height:560px;top:-190px;right:-120px;
  background:radial-gradient(circle,rgba(147,197,49,.58),transparent 70%);
  animation:deriva 19s ease-in-out infinite alternate}
.aurora--2{width:440px;height:440px;bottom:-210px;left:-140px;
  background:radial-gradient(circle,rgba(0,123,194,.34),transparent 70%);
  animation:deriva 24s ease-in-out infinite alternate-reverse}
@keyframes deriva{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-40px,32px,0) scale(1.09)}
  100%{transform:translate3d(30px,-26px,0) scale(.96)}
}

/* Franja de cifras — verde profundo → azul del globo (eco del logo), banda en ángulo con foto */
.cifras{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--verde-900) 0%,var(--verde-700) 42%,var(--azul-oscuro) 100%);
  padding:96px 0;color:#fff;
  clip-path:polygon(0 36px,100% 0,100% calc(100% - 36px),0 100%)}
.cifras::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px}
.cifras__caja{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center;text-align:center}
.cifras__foto{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.32)}
.cifras__foto img{width:100%;height:300px;object-fit:cover;display:block}
.cifras__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cifra{display:flex;flex-direction:column;align-items:center;gap:8px}
.cifra .ico{width:52px;height:52px;flex:0 0 52px;padding:13px;border-radius:15px;
  background:rgba(255,255,255,.13);stroke:#fff;margin-bottom:6px}
.cifra__valor{font-family:'Montserrat',sans-serif;font-size:clamp(2.3rem,5vw,3.2rem);
  font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cifra__texto{font-size:14.5px;color:rgba(255,255,255,.86)}

/* Cinta de clientes — se desliza sola y tambien a mano (flechas, arrastre, swipe) */
.cinta-wrap{position:relative;margin-top:34px}
.cinta{overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;cursor:grab;
  -ms-overflow-style:none;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
.cinta::-webkit-scrollbar{display:none}
.cinta.arrastrando{cursor:grabbing}
.cinta:focus-visible{outline:3px solid var(--verde-500);outline-offset:4px;border-radius:8px}
.cinta__pista{display:flex;gap:14px;width:max-content;padding:2px 0}
.cinta__pista li{flex:0 0 auto;background:var(--blanco);border:1px solid var(--linea);
  border-radius:10px;padding:20px 28px;font-size:14.5px;font-weight:500;color:var(--tinta);
  display:flex;align-items:center;justify-content:center;min-height:82px;white-space:nowrap;transition:var(--trans)}
.cinta__pista li:hover{border-color:var(--azul)}
.cinta__pista img{max-height:46px;width:auto;object-fit:contain;pointer-events:none;
  filter:grayscale(1);opacity:.6;transition:filter var(--trans),opacity var(--trans)}
.cinta__pista li:hover img{filter:grayscale(0);opacity:1}

/* Flechas de navegacion */
.cinta__flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);
  background:var(--blanco);color:var(--verde-700);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra);transition:var(--trans)}
.cinta__flecha:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.cinta__flecha:focus-visible{outline:3px solid var(--verde-500);outline-offset:2px}
.cinta__flecha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cinta__flecha--prev{left:-6px}
.cinta__flecha--next{right:-6px}

@media (max-width:760px){
  .cifras{padding:58px 0;clip-path:polygon(0 20px,100% 0,100% calc(100% - 20px),0 100%)}
  .cifras__caja{grid-template-columns:1fr;gap:34px}
  .cifras__foto img{height:220px}
  .aurora{filter:blur(52px);opacity:.42}
  .aurora--1{width:340px;height:340px;top:-130px;right:-90px}
  .aurora--2{width:280px;height:280px;bottom:-150px;left:-100px}
}

@media (prefers-reduced-motion:reduce){
  html.js [data-revelar]{opacity:1;transform:none;transition:none}
  .aurora{animation:none}
  /* La cinta no se mueve sola, pero sigue siendo navegable con flechas/arrastre. */
}