/* =========================================================================
   CHILIONE — Landing Page

   ESCALA
   El archivo de Illustrator mide 1920 x 7501 px, pero es un lienzo 2x:
   reproducido 1:1 la tipografía saldría al doble de tamaño en pantalla real.
   Se conserva TODA la diagramación del diseño con las medidas reescaladas.
   Es el MISMO sistema validado en la landing de ChiliGroup.

     · Tipografía  → escala fluida: 40% del .ai a 768px de ancho,
                     55% al tope de lienzo
     · Lienzo      → 88vw con tope de 1400px (alcanzado a 1591px de viewport)
     · Espaciado vertical: mismo valor arriba y abajo en cada sección

   NOTA SOBRE LA TIPOGRAFÍA
   El diseño usa Nexa Regular, Bold y Black. El kit de Typekit (arl6uiw)
   publica sólo 400 y 700, así que los pesos Black se sirven con Bold.
   Cuando se añada Black al proyecto de Adobe Fonts, basta con cambiar
   --peso-black de 700 a 900. No hay que tocar nada más.
   ========================================================================= */

:root{
  /* ---- Color (muestreado del .ai) ---- */
  --navy:        #0E1520;   /* fondo hero, panel, tarjetas oscuras, footer */
  --navy-card:   #242C3B;   /* tarjetas de ambientes híbridos */
  --claro:       #F0F1EF;   /* fondos claros */
  --card-claro:  #FAFAFA;
  --blanco:      #FFFFFF;

  --azul:        #3D87C7;   /* acento principal */
  --azul-osc:    #30689A;   /* extremo del degradado del botón */
  --azul-claro:  #5BA3DE;
  --rojo:        #ED1C23;
  --rojo-hover:  #FF2A33;

  --texto-suave: rgba(255,255,255,.86);
  --gris:        #5C6169;

  /* ---- Tipografía ---- */
  --peso-black: 700;   /* ← cambiar a 900 cuando Nexa Black esté en el kit */

  --fs-display:    clamp(32px, calc(22.7px + 2.26vw), 59px);
  --fs-h2:         clamp(28px, calc(19.4px + 1.94vw), 51px);
  --fs-num-grande: clamp(26px, calc(16.4px + 1.72vw), 44px);
  --fs-card-title: clamp(17px, calc( 9.4px + 0.92vw), 25px);
  --fs-body:       clamp(15px, calc( 7.3px + 0.72vw), 19px);
  --fs-eyebrow:    clamp(11px, calc( 9.2px + 0.36vw), 15px);
  --fs-link:       clamp(15px, calc( 7.1px + 0.71vw), 18px);
  --fs-strip:      clamp(13px, calc( 6.9px + 0.68vw), 18px);
  --fs-desc:       clamp(12px, calc( 6.1px + 0.60vw), 16px);
  --fs-btn:        clamp(14px, calc( 7.6px + 0.75vw), 20px);
  --fs-copy:       clamp(10px, calc( 4.3px + 0.43vw), 12px);

  /* ---- Layout ---- */
  --cw:          min(88vw, 1400px);
  --pad-seccion: clamp(38px, 4.40vw, 70px);
  --gap-rotulo:  clamp(10px, 1.55vw, 25px);
  --radius:      clamp(10px, 1.20vw, 19px);
  --radius-lg:   clamp(14px, 1.95vw, 31px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------- Reset ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--blanco);
  color:var(--navy);
  font-family:"nexa","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--rojo); color:#fff; padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:0; }
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--azul); outline-offset:3px; border-radius:4px;
}

.container{ width:var(--cw); margin-inline:auto; }

/* --------------------------- Tipografía base --------------------------- */
.display{
  font-size:var(--fs-display);
  font-weight:var(--peso-black);
  line-height:1.16;
  letter-spacing:-.005em;
}
.lead{ font-size:var(--fs-body); line-height:1.5; }
.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.3;
}
.eyebrow--azul{ color:var(--azul); }
.eyebrow--rojo{ color:var(--rojo); }

.rule{
  display:block;
  width:clamp(78px, 9.83vw, 156px);
  height:clamp(4px, .45vw, 7px);
  background:var(--rojo);
}

/* ------------------------------ Botones ------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.85em;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:background-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn--lg{ font-size:var(--fs-btn); padding:clamp(12px,.92vw,15px) clamp(20px,1.74vw,28px); }
.btn__arrow{ display:inline-block; transition:transform .25s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(6px); }

.btn--rojo{ background:var(--rojo); color:var(--blanco); }
.btn--rojo:hover{ background:var(--rojo-hover); transform:translateY(-2px); }
.btn--red{ background:var(--rojo); color:var(--blanco); }
.btn--red:hover{ background:var(--rojo-hover); transform:translateY(-2px); }

/* El CTA del hero lleva degradado azul, como en el diseño */
.btn--azul{
  background:linear-gradient(100deg, var(--azul-osc) 0%, var(--azul) 55%, var(--azul-claro) 100%);
  color:var(--blanco);
}
.btn--azul:hover{ transform:translateY(-2px); box-shadow:0 .5vw 1.2vw rgba(61,135,199,.38); }

/* Variante para fondo claro. El degradado del hero termina en #5BA3DE,
   que con texto blanco cae a 2.8:1 y se pierde sobre la sección clara;
   el azul oscuro sólido sube a 5.6:1 sin salirse de la paleta. */
.btn--azul-solido{ background:var(--azul-osc); color:var(--blanco); }
.btn--azul-solido:hover{
  background:var(--azul); transform:translateY(-2px);
  box-shadow:0 .5vw 1.2vw rgba(48,104,154,.34);
}

/* CTA de la banda roja: contorno blanco sobre rojo */
.btn--linea{ background:var(--blanco); color:var(--rojo); }
.btn--linea:hover{ transform:translateY(-2px); box-shadow:0 .5vw 1.2vw rgba(0,0,0,.18); }

/* ================================ NAV ================================ */
.nav{ background:var(--blanco); }
.nav__inner{
  width:var(--cw); margin-inline:auto;
  padding-block:clamp(14px,1.50vw,24px);
  display:flex; align-items:center; justify-content:space-between; gap:2vw;
}
/* Logo oficial horizontal: a la altura del tipográfico anterior el
   texto quedaba ilegible, así que se ajusta a su proporción real. */
.nav__logo img{ height:clamp(26px,2.15vw,35px); width:auto; }
.nav__menu{ display:flex; align-items:center; gap:clamp(12px,1.4vw,22px); }
.nav__list{ display:flex; align-items:center; gap:clamp(4px,.9vw,18px); }
.nav__link{
  display:inline-block; padding:.62em 1em; border-radius:999px;
  font-size:var(--fs-link); color:var(--navy);
  transition:background-color .25s var(--ease);
}
.nav__link:hover, .nav__link.is-active{ background:#EDEDED; }
.nav__cta{ font-size:var(--fs-link); padding:.72em 1.5em; }

.nav__toggle{
  display:none; width:46px; height:46px;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.nav__toggle span{
  display:block; width:26px; height:2px; background:var(--navy); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ================================ HERO ================================ */
.hero{
  position:relative;
  background:var(--navy);
  min-height:clamp(470px, 40.30vw, 774px);
  display:flex; align-items:center;
  overflow:hidden;
}
/* Fondo: navy + resplandor azul a la derecha + constelación */
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 88% at 74% 50%, rgba(45,105,175,.55) 0%, rgba(14,21,32,0) 70%),
    url("../img/constelacion.svg") center/cover no-repeat,
    var(--navy);
}
/* La figura va anclada a la derecha y ajustada a la altura de la sección */
.hero__foto{
  position:absolute; inset:0;
  /* Figura completa anclada abajo, separada del borde derecho para
     acercarla al centro. La imagen lleva el contorno saneado: sus
     píxeles transparentes eran blancos y al escalar producían halo. */
  background:url("../img/personas-hero.webp") right 9vw bottom / auto 96% no-repeat;
}
.hero__inner{ position:relative; color:var(--blanco); padding-block:clamp(44px,3.2vw,62px); }
.hero__title{ margin-top:var(--gap-rotulo); max-width:min(780px, 64%); }
.hero .rule{ margin-top:clamp(14px,1.52vw,29px); }
.hero .lead{ margin-top:clamp(16px,1.95vw,37px); color:var(--texto-suave); }
.hero .btn{ margin-top:clamp(20px,2.05vw,39px); }

/* =============================== STRIP =============================== */
.strip{ background:var(--blanco); }
.strip__inner{
  padding-block:clamp(24px,3.00vw,48px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(16px,3.4vw,66px);
}
.strip__item{
  font-size:var(--fs-strip); color:var(--navy);
  letter-spacing:.06em; text-transform:uppercase;
}
.strip__dot{
  width:clamp(4px,.29vw,6px); aspect-ratio:1; border-radius:50%;
  background:var(--navy); flex:0 0 auto;
}

/* ======================== SPLIT: FOTO + PANEL ======================== */
.split{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  min-height:clamp(320px, 26.5vw, 509px);
  background:var(--navy);
}
.split__foto{
  background:url("../img/sala-servidores.webp") center/cover no-repeat;
}
.split__panel{
  background:var(--navy) url("../img/constelacion.svg") right center/cover no-repeat;
  display:flex; align-items:center;
  padding:clamp(32px,3.6vw,58px) clamp(24px,4.2vw,67px);
}
.split__texto{ color:var(--blanco); max-width:34ch; }
.split__title{ font-size:var(--fs-h2); line-height:1.2; }
.split__panel .lead{ margin-top:clamp(14px,1.6vw,26px); color:var(--texto-suave); }

/* Badge circular montado sobre la costura entre foto y panel */
.split__badge{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:clamp(44px,3.6vw,58px); aspect-ratio:1;
  border-radius:50%;
  background:var(--blanco);
  border:2px solid var(--rojo);
  color:var(--rojo);
  display:grid; place-items:center;
  font-size:clamp(18px,1.5vw,24px);
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.split__badge:hover{ transform:translate(-50%,-50%) translateY(4px); }

/* ============ Cabecera de dos columnas (Solución / Capacidades) ============ */
.cabecera{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(24px,3vw,58px);
  align-items:start;
}
.cabecera .display{ margin-top:var(--gap-rotulo); }
.cabecera__apoyo{ color:var(--navy); padding-top:clamp(20px,3.1vw,50px); }

/* ====================== UNA SOLUCIÓN COMPLETA ====================== */
.solucion{
  background:var(--claro);
  padding-block:var(--pad-seccion);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.pasos{
  margin-top:clamp(26px,3.4vw,54px);
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.15vw,22px);
}
.paso{
  background:var(--blanco);
  border-radius:var(--radius);
  padding:clamp(16px,1.65vw,26px);
  display:flex; flex-direction:column;
  box-shadow:0 2px 14px rgba(14,21,32,.05);
}
.paso__icono{
  /* La tarjeta es un flex en columna: sin align-self el navegador estira
     la imagen a todo el ancho y la deforma. */
  align-self:flex-start;
  height:clamp(42px,3.9vw,62px); width:auto;
  margin-bottom:clamp(16px,2.2vw,35px);
}
.paso__num{
  font-size:var(--fs-num-grande);
  font-weight:var(--peso-black);
  line-height:1; color:var(--rojo);
}
.paso__titulo{
  margin-top:.15em;
  font-size:var(--fs-card-title);
  font-weight:700; line-height:1.2;
}
.paso__desc{
  margin-top:.55em;
  font-size:var(--fs-desc); line-height:1.35; color:var(--gris);
}
.solucion__cierre{
  margin-top:clamp(24px,2.9vw,46px);
  text-align:center;
  font-size:var(--fs-body);
  color:var(--navy);
}

/* ========================== CAPACIDADES ========================== */
.capacidades{ background:var(--blanco); padding-block:var(--pad-seccion); }
.caps{
  margin-top:clamp(26px,3.4vw,54px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.35vw,26px);
}
.cap{
  background:var(--card-claro);
  border-radius:var(--radius);
  padding:clamp(16px,1.65vw,26px);
  display:flex; align-items:flex-start; gap:clamp(12px,1.4vw,22px);
}
.cap__icono{ height:clamp(38px,3.4vw,54px); width:auto; flex:0 0 auto; margin-top:.2em; }
.cap__num{
  display:block;
  font-size:var(--fs-card-title);
  font-weight:var(--peso-black);
  line-height:1; color:var(--azul);
}
.cap__titulo{
  margin-top:.2em;
  font-size:var(--fs-card-title);
  font-weight:700; line-height:1.2;
}
.cap__desc{
  margin-top:.6em;
  font-size:var(--fs-desc); line-height:1.4; color:var(--gris);
}

/* ======================== AMBIENTES HÍBRIDOS ======================== */
.hibridos{ background:var(--navy); padding-block:var(--pad-seccion); }
.hibridos__inner{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,3.4vw,54px);
  align-items:center;
}
.hibridos__texto{ color:var(--blanco); }
.hibridos__texto .display{ margin-top:var(--gap-rotulo); }
.hibridos__texto .rule{ margin-top:clamp(14px,1.52vw,29px); }
.hibridos__texto .lead{ margin-top:clamp(14px,1.6vw,26px); color:var(--texto-suave); }

.ambientes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.15vw,22px); }
.ambiente{
  background:var(--navy-card);
  border-radius:var(--radius);
  padding:clamp(18px,1.9vw,30px) clamp(12px,1.2vw,19px) clamp(22px,2.3vw,37px);
  text-align:center; color:var(--blanco);
}
.ambiente img{
  height:clamp(60px,5.6vw,90px); width:auto; margin:0 auto clamp(14px,1.8vw,29px);
}
.ambiente h3{
  font-size:var(--fs-desc);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.ambiente p{
  margin-top:.5em;
  font-size:var(--fs-desc); line-height:1.4; color:var(--texto-suave);
}

/* ========================== BANDA CHILICLOUD ========================== */
.chilicloud{
  background:var(--rojo);
  padding-block:var(--pad-seccion);
  overflow:hidden;
  position:relative;
}
.chilicloud::after{           /* destellos suaves, como en el diseño */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(24% 46% at 78% 32%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(16% 34% at 92% 74%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);
}
.chilicloud__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(24px,3vw,58px);
  align-items:center;
}
.chilicloud__texto{ color:var(--blanco); }
.chilicloud__texto h2 a{ text-decoration:underline; text-underline-offset:.12em;
  text-decoration-thickness:.06em; transition:opacity .2s var(--ease); }
.chilicloud__texto h2 a:hover{ opacity:.82; }
.chilicloud__texto .lead{ margin-top:clamp(16px,1.8vw,29px); color:rgba(255,255,255,.94); }
.chilicloud__nota{
  margin-top:clamp(14px,1.6vw,26px);
  font-size:var(--fs-desc); color:rgba(255,255,255,.86);
}
.chilicloud .btn{ justify-self:end; }

/* ========================= POR QUÉ CHILIONE ========================= */
.porque{
  background:var(--claro);
  padding-block:var(--pad-seccion);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.porque__title{ margin-top:var(--gap-rotulo); }
.razones{
  margin-top:clamp(26px,3.4vw,54px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.35vw,26px);
}
.razon{
  background:var(--navy);
  border-radius:var(--radius);
  padding:clamp(18px,1.9vw,30px) clamp(18px,2.1vw,34px) clamp(22px,2.4vw,38px);
  color:var(--blanco);
  display:flex; flex-direction:column;
}
.razon img{
  height:clamp(52px,4.6vw,74px); width:auto;
  align-self:center; margin-bottom:clamp(18px,2.4vw,38px);
}
.razon__num{
  display:block;   /* vive dentro de .razon__cuerpo: sin esto sería inline */
  font-size:var(--fs-card-title);
  font-weight:var(--peso-black); line-height:1; color:var(--rojo);
}
.razon__titulo{
  margin-top:.25em;
  font-size:var(--fs-card-title); font-weight:700; line-height:1.2;
}
.razon__desc{
  margin-top:.7em;
  font-size:var(--fs-desc); line-height:1.45; color:var(--texto-suave);
}

/* ========================= QUÉ QUIERES INTEGRAR ========================= */
.integrar{ background:var(--claro); padding-bottom:var(--pad-seccion); }
.integrar__inner{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(24px,3vw,58px);
  align-items:center;
}
.integrar .lead{ color:var(--navy); }
/* El texto y su llamada a la acción van juntos en la columna derecha,
   respetando la diagramación a dos columnas del diseño. */
.integrar__texto{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(18px, 1.8vw, 26px);
}

/* =============================== FOOTER =============================== */
.footer{ background:var(--navy); color:var(--blanco); }
.footer__inner{
  padding-top:var(--pad-seccion);
  padding-bottom:clamp(28px,2.98vw,47px);
  display:grid; grid-template-columns:1.6fr 1fr 1.25fr .95fr;
  gap:clamp(24px,1.6vw,31px);
}
.footer__brand{ display:flex; align-items:flex-start; }
.footer__brand img{ width:clamp(140px,12.03vw,231px); height:auto; }
.footer__head{
  font-size:var(--fs-desc); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:clamp(9px,.64vw,12px);
}
.footer__col ul{ display:flex; flex-direction:column; gap:0; }
.footer__col li, .footer__col a{
  font-size:var(--fs-link); line-height:1.42; color:rgba(255,255,255,.88);
}
.footer__col a{ transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--azul); }
/* Etiqueta de marca sobre su teléfono. El número va en su propia
   línea y sin partirse: "+52 55 5025 0010" cortado a la mitad se
   lee como dos datos distintos. */
.footer__marca{
  display:block; font-size:.82em; opacity:.6;
  letter-spacing:.04em; text-transform:uppercase;
}
.footer__col--contact a[href^="tel:"]{ white-space:nowrap; }
.footer__col--contact li + li{ margin-top:.45em; }

.footer__social{
  margin-top:clamp(14px,1.20vw,23px);
  display:flex; align-items:center; gap:clamp(12px,1.46vw,28px);
}
.footer__social img{ height:clamp(16px,1.46vw,28px); width:auto; }
.footer__social a{ transition:opacity .2s var(--ease), transform .2s var(--ease); }
.footer__social a:hover{ opacity:.75; transform:translateY(-2px); }
.footer__bottom{ padding-bottom:var(--pad-seccion); text-align:center; }
/* En pantallas estrechas el botón flotante se apoya justo sobre esta línea
   al llegar al final del scroll. Se reserva su altura + margen para que el
   aviso legal nunca quede tapado. */
@media (max-width: 760px){
  .footer__bottom{ padding-bottom:calc(var(--pad-seccion) + 62px); }
}
.footer__bottom p{
  width:var(--cw); margin-inline:auto;
  font-size:var(--fs-copy); letter-spacing:.02em; color:rgba(255,255,255,.55);
}


/* ======================= VENTANA DE CONTACTO =======================
   Ventana emergente que alojará el formulario que envíe el cliente.
   Está construida y probada, pero permanece INACTIVA mientras no haya
   un <form> dentro de #formHost: hasta entonces los botones conservan
   su destino actual y la página se puede publicar sin nada roto.
   Para activarla no hay que tocar ni este CSS ni el JS: basta pegar el
   formulario dentro de #formHost (ver index.html).
   ================================================================== */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:clamp(16px, 4vw, 40px);
}
.modal__fondo{
  position:absolute; inset:0;
  background:rgba(8,11,16,.62);
  backdrop-filter:blur(3px);
  animation:modalFondo .2s var(--ease);
}
.modal__caja{
  position:relative;
  width:min(560px, 100%);
  max-height:calc(100vh - 2 * clamp(16px, 4vw, 40px));
  overflow-y:auto;
  background:#fff; color:var(--navy);
  border-radius:var(--radius);
  padding:clamp(26px, 3.4vw, 44px);
  box-shadow:0 26px 70px rgba(0,0,0,.34);
  animation:modalCaja .24s var(--ease);
}
.modal__cerrar{
  position:absolute; top:10px; inset-inline-end:10px;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  color:#6B7280;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.modal__cerrar:hover{ background:#F2F3F5; color:var(--navy); }
.modal__cerrar svg{ width:20px; height:20px; fill:currentColor; }
.modal__titulo{
  font-size:clamp(21px, 1.9vw, 30px); font-weight:700; line-height:1.2;
  padding-inline-end:44px;   /* deja libre la esquina del botón de cierre */
}
.modal__intro{
  font-size:var(--fs-desc); color:#5C6167;
  margin-top:.5em; margin-bottom:1.4em;
}
/* Hueco del formulario. Los estilos de campo llegarán con el HTML del
   cliente; aquí sólo se garantiza que nada se desborde de la ventana. */
.modal__form :is(input,select,textarea,button){ max-width:100%; }
.modal__form{ display:block; }

@keyframes modalFondo{ from{ opacity:0; } }
@keyframes modalCaja{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
@media (prefers-reduced-motion:reduce){
  .modal__fondo,.modal__caja{ animation:none; }
}

/* ===================== CONTACTO FLOTANTE =====================
   En reposo es un único botón; al abrirlo despliega los canales.
   Va a la IZQUIERDA a propósito: las plataformas de bots inyectan
   su widget abajo a la derecha y muchas no permiten moverlo.
   Cambiar de lado = cambiar --fab-lado por "right". */
:root{
  --fab-lado:  right;   /* el asistente es el bot de WhatsApp: no hay
                           widget externo con el que chocar en esta esquina */
  --fab-borde: clamp(16px, 2vw, 28px);
  --fab-fondo: clamp(16px, 2vw, 28px);
}
.fab{
  position:fixed; bottom:var(--fab-fondo); z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.fab{ inset-inline-end:var(--fab-borde); }

.fab__btn{
  width:56px; height:56px; border-radius:50%;
  background:var(--rojo); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.34); }
.fab__btn svg{ width:26px; height:26px; fill:currentColor; }
.fab__ico-cerrar{ display:none; }
.fab__btn[aria-expanded="true"] .fab__ico-abrir{ display:none; }
.fab__btn[aria-expanded="true"] .fab__ico-cerrar{ display:block; }

.fab__panel{
  width:min(280px, calc(100vw - 2 * var(--fab-borde)));
  background:#fff; color:var(--navy);
  border-radius:16px; padding:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.24);
  transform-origin:bottom right;
  animation:fabIn .22s var(--ease);
}
.fab__panel[hidden]{ display:none; }
@keyframes fabIn{ from{ opacity:0; transform:translateY(10px) scale(.96); } }

.fab__titulo{
  font-size:13px; font-weight:700; color:var(--navy);
  margin-bottom:10px; padding-inline:4px;
}
.fab__op{
  display:flex; align-items:center; gap:12px;
  padding:10px; border-radius:11px;
  transition:background-color .2s var(--ease);
}
.fab__op:hover{ background:#F2F3F5; }
.fab__op svg{ width:26px; height:26px; flex:0 0 auto; }
.fab__op--wa  svg{ fill:#25D366; }
.fab__op--tel svg{ fill:var(--rojo); }
.fab__op span{ display:flex; flex-direction:column; line-height:1.25; }
.fab__op b{ font-size:14px; font-weight:700; }
.fab__op small{ font-size:12px; color:#6B7280; }

/* La atribución pertenece sólo al asistente de WhatsApp, no al panel:
   por eso vive dentro de esa fila y no como pie del bloque. */
.fab__powered{
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:#8B9096; margin-top:1px;
}
.fab__powered img{ height:12px; width:auto; opacity:.75; }

@media (max-width:640px){
  .fab__btn{ width:52px; height:52px; }
}
@media (prefers-reduced-motion:reduce){
  .fab__panel{ animation:none; }
}

/* ============================ Animaciones ============================ */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

/* ============================= Responsive ============================= */
@media (max-width:1180px){
  .pasos{ grid-template-columns:repeat(3,1fr); }
  .caps{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:980px){
  .cabecera{ grid-template-columns:1fr; }
  .cabecera__apoyo{ padding-top:0; }
  .hibridos__inner{ grid-template-columns:1fr; }
  .chilicloud__inner{ grid-template-columns:1fr; }
  .chilicloud .btn{ justify-self:start; }
  /* A una columna, el titular y el texto se apilaban alineados a la
     izquierda y sobraba una franja en blanco a la derecha: en el diseño esta
     sección es el cierre de la página y ocupa el ancho entero. Apilada se
     centra, y el párrafo suelta los cortes de línea del diseño —pensados para
     la columna estrecha del escritorio— para llenar el renglón. */
  .integrar__inner{
    grid-template-columns:1fr;
    justify-items:center; text-align:center;
    gap:clamp(16px, 3.2vw, 26px);
  }
  .integrar__texto{ align-items:center; width:100%; }
  .integrar .lead br{ display:none; }
  /* Tope de medida: sin él, a 980px el renglón se vuelve demasiado largo
     para leerse de un vistazo. */
  .integrar .lead{ max-width:46ch; margin-inline:auto; }
  .razones{ grid-template-columns:1fr; }
  /* A una sola columna la tarjeta ocupa todo el ancho, pero el reparto seguía
     siendo el del escritorio: icono centrado y solo arriba, texto pegado a la
     izquierda y la mitad derecha vacía. Aquí se recuesta: icono a un lado y
     el texto al suyo, que llena el ancho y baja la altura a la mitad. */
  .razon{
    flex-direction:row; align-items:center;
    gap:clamp(16px, 3vw, 28px);
    padding:clamp(18px, 3vw, 26px) clamp(18px, 3.4vw, 30px);
  }
  .razon img{ align-self:center; margin-bottom:0; flex:0 0 auto; }
  .razon__cuerpo{ min-width:0; }
  .razon__titulo br, .razon__desc br{ display:none; }
  /* Tablet: la marca firma arriba y las tres columnas de enlaces quedan
     parejas debajo. A dos columnas el pie salía descuadrado —Contacto
     solo, con media fila vacía a su lado—. */
  .footer__inner{ grid-template-columns:repeat(3, 1fr); column-gap:clamp(18px, 2.6vw, 32px); row-gap:34px; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .nav{ position:relative; }
  .nav__toggle{ display:flex; }
  .nav__menu{
    position:absolute; left:0; right:0; top:100%; z-index:50;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--blanco);
    padding:14px clamp(22px,6vw,40px) 28px;
    border-top:1px solid #EAEAEA;
    box-shadow:0 18px 34px rgba(0,0,0,.12);
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__link{ padding:.9em 1em; font-size:16px; }
  .nav__cta{ margin-top:14px; justify-content:center; font-size:15px; padding:1em 1.5em; }

  .hero{ min-height:0; }
  .hero__inner{ padding-block:clamp(44px,8vw,80px); }
  .hero__title{ max-width:none; }   /* en vertical necesita todo el ancho */
  /* En vertical la figura se atenúa para que el texto siga legible */
  .hero__foto{ background-position:right center; background-size:auto 82%; opacity:.30; }

  /* La foto y el panel se apilan; el badge pasa a la costura horizontal */
  .split{ grid-template-columns:1fr; }
  .split__foto{ min-height:clamp(200px,42vw,330px); }
  /* Apilado, el texto ya no compite con la foto: puede usar todo el ancho
     en vez de quedarse en la mitad izquierda del panel. */
  .split__texto{ max-width:none; }
  .split__badge{ top:clamp(200px,42vw,330px); }

  .pasos{ grid-template-columns:repeat(2,1fr); }
  /* Son cinco pasos: a dos columnas el quinto queda solo con un hueco al
     lado. Se le deja ocupar la fila entera para que la rejilla cierre. */
  .paso:last-child{ grid-column:1 / -1; }
  .ambientes{ grid-template-columns:1fr; }
  /* Mismo caso que .razon: en fila, el icono deja de flotar solo en el centro
     de una caja demasiado alta. */
  .ambiente{
    display:flex; align-items:center; text-align:left;
    gap:clamp(16px, 3vw, 26px);
    padding:clamp(16px, 3vw, 24px) clamp(18px, 3.4vw, 28px);
  }
  .ambiente img{
    margin:0; height:clamp(52px, 11vw, 68px); width:auto;
    /* pista de ancho fijo: los tres iconos tienen proporciones distintas y
       sin ella el texto de cada tarjeta arrancaría en un punto diferente */
    flex:0 0 clamp(64px, 13vw, 82px);
    object-fit:contain; object-position:center;
  }
  .ambiente__cuerpo{ min-width:0; }
  /* El diseño parte estos textos en dos líneas pensando en columnas
     estrechas; en fila estorban. */
  .ambiente p br{ display:none; }

  /* Áreas táctiles cómodas */
  .footer__col a{ display:inline-block; padding-block:9px; }
  .footer__social{ gap:6px; }
  .footer__social a{ display:grid; place-items:center; min-width:40px; min-height:40px; }
}

@media (max-width:640px){
  .pasos{ grid-template-columns:1fr; }
  .caps{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; row-gap:32px; }
  .strip__inner{ gap:12px 22px; }

  /* Los saltos del diseño se dejan fluir; cada <br> lleva un espacio previo. */
  .hero__title br, .lead br, .display br,
  .paso__desc br, .cap__titulo br, .cap__desc br,
  .ambiente p br, .razon__titulo br, .razon__desc br,
  .chilicloud__texto br{ display:none; }
}

/* ========================= Accesibilidad motion ========================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ============================== Print ============================== */
@media print{
  .nav,.footer__social,.split__badge{ display:none; }
  .hero__bg,.hero__foto,.split__foto{ display:none; }
  body{ color:#000; }
}