/* =========================================================================
   BASE COMPARTIDA — ChiliGroup · ChiliOne · ChiliCloud

   Este archivo es la FUENTE ÚNICA de todo lo que las tres páginas tienen en
   común: el reset, el pie, la ventana de contacto, el formulario, los botones
   flotantes y las animaciones.

   NO SE EDITA EN LAS CARPETAS PUBLICADAS. Se edita aquí y se vuelve a generar
   con  python3 SISTEMA/construir.py  — el cambio llega a las tres a la vez.

   No nombra ningún color de marca. Usa tokens por función (--acento, --tinta,
   --papel, --pie-fondo…) que cada marca define en su propio archivo. Así el
   mismo pie sirve para el rojo de ChiliGroup y el azul de ChiliOne.
   ========================================================================= */

/* ------------------------------- Reset ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  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(--skip-fondo); color:#fff; padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:0; }
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--foco-anillo); outline-offset:3px; border-radius:4px;
}

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

/* =============================== FOOTER =============================== */
.footer{ background:var(--pie-fondo); color:var(--papel); }
.footer__inner{
  /* El aire superior del footer iguala al inferior de .footer__bottom. */
  padding-top:var(--pad-seccion);
  padding-bottom:clamp(28px, 2.98vw, 47px);   /* separación interna con el copyright */
  display:grid;
  grid-template-columns:1.6fr 1fr 1.25fr .95fr;
  gap:var(--pie-gap);
}
.footer__brand{ display:flex; align-items:flex-start; }
.footer__brand img{ width:var(--pie-marca-ancho); height:auto; }   /* .ai 321 */
.footer__head{
  font-size:var(--fs-fhead);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--papel);
  margin-bottom:clamp(9px, .64vw, 10px);
}
.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(--pie-enlace-hover); }

/* 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; }
/* La dirección va en varias líneas: en la columna de contacto, de una tirada
   se parte por donde toque y se lee como si fueran datos sueltos. */
.footer__dir{ display:flex; flex-direction:column; }
.footer__dir span{ display:block; }


.footer__social{
  margin-top:var(--pie-social-margen);
  display:flex; align-items:center; gap:var(--pie-social-gap);
}
.footer__social img{ height:var(--pie-social-alto); width:auto; }     /* .ai 39 */
.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;   /* dentro del lienzo, como el resto */
  font-size:var(--fs-copy); letter-spacing:.02em; color:rgba(255,255,255,.55);
}

/* ---- El pie en tablet y móvil ---------------------------------------- */
@media (max-width:980px){
  /* 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){
  .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){
  .footer__inner{ grid-template-columns:1fr; row-gap:32px; }
}

/* ======================= 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);
  /* Safari solo lo entiende con prefijo; sin él el fondo de la ventana
     no se desenfoca en iPhone ni en Mac. */
  -webkit-backdrop-filter:blur(3px);
  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(--tinta);
  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(--tinta); }
.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-menor); 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; }
}

/* ========================= FORMULARIO DE CONTACTO =========================
   Vive dentro de la ventana modal. Reproduce los campos del formulario de
   Odoo del cliente (mismos id y name) con nuestra tipografía y color.
   ========================================================================= */
.form__fila{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(12px, 1.4vw, 18px);
}
.form__campo{ display:flex; flex-direction:column; margin-bottom:clamp(12px,1.3vw,16px); }
.form__campo label{
  font-size:13px; font-weight:700; color:var(--tinta);
  margin-bottom:6px; letter-spacing:.01em;
}
/* El asterisco de obligatorio en el color de marca, sin depender solo de él:
   los campos también llevan required, que es lo que leen los lectores. */
.form__campo label span{ color:var(--acento); }

.form__campo :is(input, textarea){
  font:inherit; font-size:15px; color:var(--tinta);
  background:#fff;
  border:1px solid var(--campo-borde);
  border-radius:10px;
  padding:11px 13px;
  width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form__campo textarea{ resize:vertical; min-height:96px; line-height:1.45; }
.form__campo :is(input, textarea):focus{
  outline:none;
  border-color:var(--acento);
  box-shadow:0 0 0 3px var(--campo-foco);
}
/* El rojo de error solo aparece cuando el campo ya se tocó y quedó mal:
   marcarlo antes de que la persona escriba nada es hostil. */
.form__campo :is(input, textarea).es-invalido{
  border-color:#D93025; box-shadow:0 0 0 3px rgba(217,48,37,.14);
}

/* Trampa para robots: fuera de pantalla, nunca oculta con display:none,
   porque algunos bots detectan eso y la saltan. */
.form__trampa{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form__consent{
  display:flex; align-items:flex-start; gap:9px;
  margin:2px 0 clamp(16px,1.8vw,22px);
  font-size:13px; line-height:1.45; color:#5C6167;
}
.form__consent input{ margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--acento); }
.form__consent a{ color:var(--acento); text-decoration:underline; text-underline-offset:2px; }

.form__pie{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.form__pie .btn[disabled]{ opacity:.55; cursor:progress; }

.form__aviso{ font-size:13px; line-height:1.4; margin:0; }
.form__aviso:empty{ display:none; }
.form__aviso.es-error{ color:#C5221F; }
.form__aviso.es-ok{ color:#1E7B34; font-weight:700; }

/* Mensaje de envío correcto: sustituye al formulario entero. */
.form__gracias{ text-align:center; padding:clamp(10px,1.6vw,20px) 0; }
.form__gracias svg{ width:46px; height:46px; fill:var(--acento); margin-bottom:12px; }
.form__gracias h3{ font-size:clamp(18px,1.6vw,23px); font-weight:700; margin-bottom:.45em; }
.form__gracias p{ font-size:var(--fs-menor); color:#5C6167; line-height:1.5; }

@media (max-width:560px){
  /* A una columna: dos campos por fila en un móvil dejan cajas impracticables. */
  .form__fila{ grid-template-columns:1fr; }
}

/* ===================== CONTACTO FLOTANTE =====================
   Dos accesos independientes en la esquina inferior derecha: llamar y
   asistente virtual. Cada uno enlaza directo, sin panel de por medio.
   ========================================================== */
:root{
  --fab-borde: clamp(16px, 2vw, 28px);
  --fab-fondo: clamp(16px, 2vw, 28px);
}
.fab{
  position:fixed; bottom:var(--fab-fondo); inset-inline-end:var(--fab-borde);
  z-index:200;
  display:flex; align-items:center; gap:clamp(10px, 1vw, 14px);
}

.fab__btn{
  position:relative;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  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:active{ transform:translateY(0); }
.fab__btn svg{ width:26px; height:26px; fill:currentColor; }

.fab__btn--tel{ background:var(--acento); }
/* El verde es el color con el que la gente reconoce WhatsApp; cambiarlo por
   el de marca haría que dejara de leerse de un vistazo. */
.fab__btn--wa{ background:#25D366; }

/* Etiqueta emergente. Sale a la izquierda del botón para no salirse de la
   pantalla, y solo con ratón o teclado: en táctil no hay hover y el nombre
   ya viaja en aria-label. */
.fab__nombre{
  /* Va ENCIMA del botón, no al lado: puesta a la izquierda, la etiqueta del
     asistente tapaba el botón de llamar que tiene justo al lado. */
  position:absolute; bottom:calc(100% + 10px); inset-inline-end:0;
  display:flex; flex-direction:column; align-items:flex-end;
  white-space:nowrap;
  background:#fff; color:var(--tinta);
  font-size:13px; font-weight:700; line-height:1.25;
  padding:8px 12px; border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  pointer-events:none;
}
.fab__btn:hover .fab__nombre,
.fab__btn:focus-visible .fab__nombre{ opacity:1; visibility:visible; transform:none; }

/* La atribución pertenece solo al asistente de WhatsApp. */
.fab__powered{
  display:flex; align-items:center; gap:4px;
  font-size:10px; font-weight:400; color:#8B9096; margin-top:2px;
}
.fab__powered img{ height:11px; width:auto; opacity:.75; }

@media (max-width:640px){
  .fab__btn{ width:52px; height:52px; }
  .fab__btn svg{ width:24px; height:24px; }
  .fab{ gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  .fab__btn, .fab__nombre{ transition:none; }
  .fab__btn:hover{ transform: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; }

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

/* =========================================================================
   CHILICLOUD — estilos propios de la marca

   ARCHIVO FUENTE. Lo publicado en CHILICLOUD ONE PAGE/web/ se genera con
   SISTEMA/construir.py; editar allí no sirve de nada.

   ESCALA
   El archivo de Illustrator mide 1920 x 11764.87 px y es un lienzo 2x:
   reproducido 1:1 la tipografía saldría al doble de tamaño real. Se conserva
   toda la diagramación y se reescala cada medida, con el mismo sistema que
   ChiliGroup y ChiliOne:

     · Tipografía  → escala fluida: 40% del .ai a 768px de ancho,
                     55% al tope de lienzo (1591px)
     · Ritmo vertical      → 0.68 del .ai
     · Elementos gráficos  → 0.72 del .ai
     · Secciones con foto  → 0.80 del .ai
     · Proporciones de caja → sin reescalar: son diagramación, no tamaño
   ========================================================================= */

:root{
  /* ---- Color, muestreado del .ai ---- */
  --rojo:        #EC1C23;   /* rojo de marca (bandas, CTA, rótulos)  */
  --rojo-hover:  #FF2A33;
  --rojo-hondo:  #C80016;   /* titulares de las tarjetas de servicio */
  --rojo-cta:    #DD0009;   /* extremo oscuro del degradado del botón */
  --rojo-vino:   #8E1016;   /* tarjeta "Infraestructura propia"       */

  --oscuro:      #22282E;   /* secciones oscuras y pie                */
  --hero-fondo:  #080E18;   /* fondo del hero tras la fotografía      */
  --navy:        #0E1520;   /* tarjeta "Ambiente híbrido"             */
  --claro:       #EFEFED;   /* fondo de las secciones claras          */
  --card:        #FAFAFA;   /* tarjetas sobre fondo claro             */
  --blanco:      #FFFFFF;
  --texto:       #0E1520;
  --texto-suave: #6B737A;
  --gris-icono:  #5B6570;   /* iconos de "Capacidades clave"          */

  /* ---- Tipografía ----------------------------------------------------
     Escala fluida de dos anclas: cada tamaño vale 40% del .ai a 768px de
     ancho y crece hasta 1591px, donde el lienzo alcanza su tope de 1400px.
     A partir de ahí todo queda fijo y la página sólo se centra.          */
  --fs-display:    clamp(32px, calc(22.7px + 2.26vw), 59px);   /* .ai 100 */
  --fs-h2:         clamp(26px, calc(17.9px + 1.80vw), 47px);   /* .ai  80 */
  --fs-num-grande: clamp(26px, calc(16.4px + 1.72vw), 44px);   /* .ai  75 */
  --fs-card-title: clamp(17px, calc( 9.4px + 0.92vw), 25px);   /* .ai  42 */
  --fs-body:       clamp(15px, calc( 7.3px + 0.72vw), 19px);   /* .ai  32 */
  --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);

  /* Peso de los titulares. Vive en SISTEMA/marcas.json. El cliente
     decidió quedarse en Bold (700); Nexa Black no se incorpora. */
  --peso-black: 700;

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

  /* ---- Puente hacia la base compartida --------------------------------
     base.css no conoce los colores de esta marca; los pide por función.
     Aquí se le dice cuál es cuál. -------------------------------------- */
  --acento:            var(--rojo);
  --tinta:             var(--texto);
  --papel:             var(--blanco);
  --pie-fondo:         var(--oscuro);
  --fs-menor:          var(--fs-desc);
  --pie-gap:           clamp(24px, 1.6vw, 31px);
  --pie-marca-ancho:   clamp(140px, 12.03vw, 231px);
  --campo-borde:       #D8DBDF;
  --campo-foco:        rgba(236,28,35,.16);
  --fs-fhead:          var(--fs-desc);
  --pie-enlace-hover:  var(--rojo);
  --pie-social-margen: clamp(14px, 1.20vw, 23px);
  --pie-social-gap:    clamp(12px, 1.46vw, 28px);
  --pie-social-alto:   clamp(16px, 1.46vw, 28px);
  --skip-fondo:        var(--rojo);
  --foco-anillo:       var(--rojo);
}

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

/* Regla roja bajo el titular del hero — .ai 262 x 12 */
.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);
}
.btn--red{
  background:linear-gradient(100deg, var(--rojo-cta) 0%, var(--rojo) 100%);
  color:var(--blanco);
}
.btn--red:hover{ transform:translateY(-2px); box-shadow:0 .5vw 1.2vw rgba(236,28,35,.34); }
.btn--red:active{ transform:translateY(0); }
.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); }

/* ================================ 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;
}
.nav__logo img{ height:clamp(34px, 2.90vw, 46px); 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, .45vw, 7px); }
.nav__link{
  display:inline-block; padding:.62em 1.15em; border-radius:999px;
  font-size:var(--fs-link); color:var(--texto);
  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; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 9px;
}
.nav__toggle span{ display:block; height:2px; background:var(--texto); border-radius:2px; }
/* Las tres barras se convierten en aspa al abrir el menú, igual que en
   ChiliGroup y ChiliOne. */
.nav__toggle span{ transition:transform .25s var(--ease), opacity .2s var(--ease); }
.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); }

/* ================================ HERO ================================ */
.hero{ position:relative; background:var(--hero-fondo); overflow:hidden; }
.hero__foto{
  position:absolute; inset:0;
  background:url("../img/hero-cloud.webp") right center / cover no-repeat;
}
/* Velo por la izquierda: sin él, el titular blanco cae sobre la parte clara
   de la fotografía y deja de leerse. */
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--hero-fondo) 6%, rgba(8,14,24,.82) 34%, rgba(8,14,24,0) 62%);
}
.hero__inner{
  position:relative; z-index:1;
  min-height:clamp(340px, 38.8vw, 545px);   /* .ai 970 x 0.80 */
  padding-block:clamp(34px, 4.0vw, 62px);
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:clamp(12px, 1.4vw, 20px);
  color:var(--blanco);
}
.hero__title{ margin-top:clamp(4px,.5vw,8px); }
.hero__lead{ color:#D5D9DE; max-width:34ch; }
.hero .btn{ margin-top:clamp(6px,.8vw,12px); }

/* ====================== Cabecera de dos columnas ====================== */
.cabecera{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(20px, 3vw, 58px); align-items:start;
}
.cabecera__apoyo{ padding-top:clamp(4px, 1vw, 16px); }
.cabecera__apoyo .lead{ color:var(--texto-suave); }

/* ========================= NUBE ADMINISTRADA ========================= */
.nube{ background:var(--claro); padding-block:var(--pad-seccion); }
.aviso{
  display:flex; align-items:flex-start; gap:clamp(10px,1.1vw,16px);
  margin-top:clamp(16px,1.9vw,28px);
  font-size:var(--fs-desc); line-height:1.5; color:var(--rojo-hondo); font-weight:600;
}
.aviso img{ height:clamp(28px,2.6vw,42px); width:auto; flex:0 0 auto; margin-top:2px; }

.franja{
  text-align:center; font-size:var(--fs-strip); color:var(--texto);
  margin-block:clamp(26px,3.2vw,50px) clamp(18px,2.2vw,34px);
}
.franja--pasos{ font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--texto-suave); }
.franja--pasos b{ color:var(--rojo); }

.servicios{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.35vw,26px);
}
.servicio{
  background:var(--blanco); border-radius:var(--radius);
  padding:clamp(16px,1.75vw,28px) clamp(15px,1.65vw,26px) clamp(20px,2.1vw,34px);
  display:flex; flex-direction:column;
}
.servicio__titulo{
  font-size:var(--fs-card-title); font-weight:var(--peso-black);
  line-height:1.14; color:var(--rojo-hondo);
}
.servicio__gancho{
  margin-top:.55em; font-size:var(--fs-desc); font-weight:700;
  line-height:1.35; color:var(--texto);
}
.servicio__desc{
  margin-top:.6em; font-size:var(--fs-desc); line-height:1.5; color:var(--texto-suave);
}

/* ===================== SIN COMPLICACIONES (split) ===================== */
.split{ background:var(--claro); padding-bottom:var(--pad-seccion); }
.split__inner{
  position:relative;
  display:grid; grid-template-columns:1fr 1.12fr;
  border-radius:var(--radius-lg); overflow:hidden;
}
.split__foto{
  background:url("../img/pareja-tablet.webp") center / cover no-repeat;
  min-height:clamp(240px, 27vw, 380px);
}
.split__panel{
  background:linear-gradient(115deg, var(--rojo) 0%, var(--rojo-cta) 100%);
  display:flex; align-items:center;
  padding:clamp(26px,3.4vw,58px) clamp(22px,3.6vw,62px);
  color:var(--blanco);
}
.split__texto .lead{ margin-top:clamp(14px,1.7vw,28px); color:var(--blanco); }
.split__texto .lead b{ font-weight:700; color:var(--blanco); }
/* Insignia circular montada sobre la costura entre foto y panel */
.split__badge{
  position:absolute; left:calc(1 / 2.12 * 100%); top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:clamp(38px,3.6vw,58px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  background:var(--blanco); color:var(--rojo);
  font-size:clamp(17px,1.6vw,26px); line-height:1;
  box-shadow:0 .3vw .9vw rgba(0,0,0,.18);
}

/* ========================== SEIS BENEFICIOS ========================== */
.ventajas{ background:var(--claro); padding-bottom:var(--pad-seccion); }
.ventajas__lista{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.15vw,22px);
}
.ventaja{
  background:var(--card); border-radius:var(--radius);
  padding:clamp(16px,1.8vw,28px) clamp(13px,1.35vw,22px) clamp(18px,2vw,32px);
  display:flex; flex-direction:column;
}
.ventaja img{
  align-self:flex-start; height:clamp(40px,3.7vw,60px); width:auto;
  margin-bottom:clamp(14px,1.6vw,26px);
}
.ventaja h3{
  font-size:var(--fs-card-title); font-weight:var(--peso-black);
  line-height:1.14; color:var(--rojo-hondo);
}
.ventaja p{ margin-top:.7em; font-size:var(--fs-desc); line-height:1.5; color:var(--texto-suave); }

/* ================== BANDA: INFRAESTRUCTURA LISTA ================== */
.banda{ background:var(--claro); padding-bottom:var(--pad-seccion); }
/* En el diseño la banda es UNA sola imagen: la fotografía se funde con el
   rojo y los iconos flotan en la transición. Partirla en foto + panel dejaba
   una costura dura que no existe en el original. */
.banda__caja{
  display:grid; grid-template-columns:1fr 1.28fr;
  border-radius:var(--radius-lg); overflow:hidden;
  background:url("../img/banda-infraestructura.webp") center / cover no-repeat;
  min-height:clamp(190px, 21vw, 300px);
  /* El texto arranca pasado el 56%: antes caía sobre la persona y los iconos
     que la propia imagen trae en la zona de transición. */
  grid-template-columns:56% 1fr;
  color:var(--blanco);
}
.banda__foto{ display:none; }
.banda__texto{
  grid-column:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(20px,2.6vw,44px) clamp(20px,3vw,52px);
}
.banda__titulo{
  font-size:var(--fs-h2); font-weight:var(--peso-black); line-height:1.12;
}
.banda__items{ margin-top:.6em; font-size:var(--fs-desc); line-height:1.5; }
.banda__resultado{
  margin-top:clamp(12px,1.4vw,22px);
  background:rgba(255,255,255,.18); border-radius:999px;
  padding:clamp(9px,.95vw,15px) clamp(14px,1.5vw,24px);
  font-size:var(--fs-desc); line-height:1.45;
}

/* ========================= PAQUETES DE SERVICIO ========================= */
.paquetes{ background:var(--blanco); padding-block:var(--pad-seccion); }
.paquetes .display{ margin-top:var(--gap-rotulo); }
.paquetes__inner{
  margin-top:clamp(24px,3vw,46px);
  display:grid; grid-template-columns:1fr 1.16fr;
  gap:clamp(22px,3.2vw,58px); align-items:start;
}
.paquetes__foto{
  background:url("../img/hombre-relajado.webp") center / cover no-repeat;
  border-radius:var(--radius); min-height:clamp(240px,26vw,380px);
}
.paquetes__lista{ display:flex; flex-direction:column; }
.paquete{
  display:grid; grid-template-columns:auto auto 1fr;
  align-items:center; gap:clamp(10px,1.3vw,22px);
  padding-block:clamp(11px,1.25vw,20px);
  border-bottom:1px solid #E4E4E2;
}
.paquete:last-child{ border-bottom:0; }
.paquete__num{
  font-size:var(--fs-num-grande); font-weight:var(--peso-black);
  line-height:1; color:var(--rojo); font-variant-numeric:tabular-nums;
}
.paquete img{ height:clamp(26px,2.4vw,38px); width:auto; }
.paquete h3{
  font-size:var(--fs-card-title); font-weight:var(--peso-black);
  line-height:1.15; color:var(--texto);
}
.paquete__gancho{
  font-size:var(--fs-desc); font-style:italic; font-weight:700;
  line-height:1.3; color:var(--texto);
}
.paquete__items{ margin-top:.2em; font-size:var(--fs-desc); line-height:1.4; color:var(--texto-suave); }

/* ======================== ELIGE SEGÚN TU NECESIDAD ======================== */
.elige{
  background:linear-gradient(100deg, var(--rojo-cta) 0%, var(--rojo) 55%, var(--rojo-cta) 100%);
  color:var(--blanco); padding-block:var(--pad-seccion);
}
.elige__titulo{
  text-align:center; font-size:var(--fs-h2); font-weight:var(--peso-black); line-height:1.12;
}
.elige__lista{
  margin-top:clamp(24px,3vw,46px);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.elige__item{
  text-align:center; padding-inline:clamp(12px,1.6vw,28px);
  border-right:1px solid rgba(255,255,255,.28);
  display:flex; flex-direction:column; align-items:center;
}
.elige__item:last-child{ border-right:0; }
.elige__item img{ height:clamp(40px,3.7vw,60px); width:auto; margin-bottom:clamp(14px,1.7vw,28px); }
.elige__item h3{ font-size:var(--fs-card-title); font-weight:var(--peso-black); line-height:1.14; }
.elige__item p{ margin-top:.7em; font-size:var(--fs-desc); line-height:1.45; color:var(--blanco); }

/* ======================== RUTA DE MODERNIZACIÓN ======================== */
.ruta{ background:var(--blanco); padding-block:var(--pad-seccion); }
.ruta .cabecera{ margin-top:var(--gap-rotulo); }
.pasos{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.35vw,26px);
}
.paso{
  background:var(--card); border-radius:var(--radius);
  padding:clamp(18px,2vw,32px) clamp(15px,1.65vw,26px) clamp(20px,2.2vw,36px);
  display:flex; flex-direction:column;
}
.paso__icono{
  align-self:center; height:clamp(42px,3.9vw,62px); width:auto;
  margin-bottom:clamp(18px,2.2vw,36px);
}
.paso__num{
  font-size:var(--fs-num-grande); font-weight:var(--peso-black);
  line-height:1; color:var(--rojo); font-variant-numeric:tabular-nums;
}
.paso__titulo{
  margin-top:.12em; font-size:var(--fs-card-title);
  font-weight:var(--peso-black); line-height:1.15; color:var(--rojo-hondo);
}
.paso__desc{ margin-top:.7em; font-size:var(--fs-desc); line-height:1.5; color:var(--texto-suave); }

.ambientes{
  margin-top:clamp(22px,2.8vw,46px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.35vw,26px);
}
.ambiente{
  border-radius:var(--radius); color:var(--blanco);
  padding:clamp(20px,2.3vw,38px) clamp(18px,2vw,32px) clamp(22px,2.6vw,42px);
  min-height:clamp(150px,16vw,230px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.ambiente h3{ font-size:var(--fs-card-title); font-weight:var(--peso-black); line-height:1.14; }
.ambiente p{ margin-top:.7em; font-size:var(--fs-desc); line-height:1.5; color:var(--blanco); }
.ambiente--cloud{   background:linear-gradient(140deg, var(--rojo) 0%, var(--rojo-cta) 100%); }
.ambiente--propia{  background:linear-gradient(140deg, var(--rojo-cta) 0%, var(--rojo-vino) 100%); }
.ambiente--hibrido{ background:linear-gradient(140deg, #2B3441 0%, var(--navy) 100%); }

/* =========================== CAPACIDADES CLAVE =========================== */
.capacidades{ background:var(--blanco); padding-bottom:var(--pad-seccion); }
.capacidades__lista{
  margin-top:clamp(18px,2.2vw,34px);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.capacidad{
  text-align:center; padding-inline:clamp(12px,1.6vw,28px);
  border-right:1px solid #DFDFDD;
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.2vw,20px);
}
.capacidad:last-child{ border-right:0; }
.capacidad img{ height:clamp(34px,3.1vw,50px); width:auto; }
.capacidad h3{
  font-size:var(--fs-card-title); font-weight:var(--peso-black);
  line-height:1.15; color:var(--gris-icono);
}

/* ========================= RESPALDAR / RECUPERAR ========================= */
.continuidad{ background:var(--oscuro); color:var(--blanco); padding-block:var(--pad-seccion); }
.continuidad__titulo{
  font-size:var(--fs-h2); font-weight:var(--peso-black); line-height:1.16;
  display:flex; flex-wrap:wrap; align-items:center; gap:.4em;
}
.pastilla{
  border:2px solid var(--blanco); border-radius:999px;
  padding:.16em .62em; font-size:.92em; line-height:1.2;
}
.continuidad__inner{
  margin-top:clamp(26px,3.2vw,52px);
  display:grid; grid-template-columns:1fr 1.06fr;
  gap:clamp(24px,3.4vw,60px); align-items:center;
}

/* La rueda: un disco central y cuatro etapas colgadas de su contorno.
   Se dibuja con texto real, no como imagen, para que se pueda leer. */
.rueda{
  position:relative; width:min(100%, 430px); aspect-ratio:1;
  margin-inline:auto;
  display:grid; place-items:center;
}
.rueda::before,
.rueda::after{
  content:""; position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
}
.rueda::before{ inset:6%; }
.rueda::after{ inset:16%; }
.rueda__disco{
  width:56%; aspect-ratio:1; border-radius:50%;
  background:#2C333B;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(6px,.9vw,14px);
}
.rueda__escudo{ width:clamp(38px,4.2vw,66px); height:auto; }
.rueda__palabra{
  font-size:var(--fs-desc); font-weight:var(--peso-black);
  letter-spacing:.1em; text-transform:uppercase; color:var(--blanco);
}
.rueda__etapa{
  position:absolute;
  background:var(--blanco); color:var(--texto);
  font-size:var(--fs-desc); font-weight:700; line-height:1;
  padding:clamp(7px,.8vw,13px) clamp(12px,1.3vw,22px);
  border-radius:999px; white-space:nowrap;
}
/* El punto rojo que ancla cada etiqueta al círculo */
.rueda__etapa::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:clamp(9px,.95vw,15px); aspect-ratio:1; border-radius:50%;
  background:var(--rojo); border:3px solid var(--oscuro);
}
.rueda__etapa--1{ top:6%;  left:2%;  }
.rueda__etapa--2{ top:6%;  right:2%; }
.rueda__etapa--3{ bottom:6%; left:2%;  }
.rueda__etapa--4{ bottom:6%; right:2%; }
.rueda__etapa--1::after,
.rueda__etapa--2::after{ bottom:calc(-1 * clamp(5px,.5vw,8px)); }
.rueda__etapa--3::after,
.rueda__etapa--4::after{ top:calc(-1 * clamp(5px,.5vw,8px)); }

.continuidad__texto .lead{ color:#C9CED4; }
.pilares{ margin-top:clamp(18px,2.2vw,34px); }
.pilar{ padding-block:clamp(11px,1.3vw,21px); border-bottom:1px solid rgba(255,255,255,.16); }
.pilar:last-child{ border-bottom:0; }
.pilar dt{ font-size:var(--fs-card-title); font-weight:var(--peso-black); line-height:1.2; }
.pilar dd{ margin:.4em 0 0; font-size:var(--fs-desc); line-height:1.45; color:#A9B0B8; }

/* ============================== RPO / RTO ============================== */
.rpo{ background:var(--claro); padding-block:var(--pad-seccion); }
/* El diseño muestra esta imagen recortada en banda ancha y ocupando ~82% del
   lienzo, no entera: sin recortar salía cuatro veces más alta de la cuenta y
   rompía el ritmo de la página. */
.rpo__marco{
  margin:0 auto; max-width:82%;
  border-radius:var(--radius-lg); overflow:hidden;
  border:clamp(6px,.7vw,11px) solid var(--blanco);
  box-shadow:0 .4vw 1.4vw rgba(14,21,32,.10);
}
.rpo__marco img{
  display:block; width:100%; height:auto;
  aspect-ratio:2.95; object-fit:cover; object-position:center;
}

/* ============================== PARTNERS ============================== */
.partners{ background:var(--claro); padding-bottom:var(--pad-seccion); }
.partners .cabecera{ margin-top:var(--gap-rotulo); }
.partners__lista{
  margin-top:clamp(24px,3vw,46px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.35vw,26px);
}
.socio{
  background:var(--blanco); border-radius:var(--radius);
  padding:clamp(16px,1.85vw,30px) clamp(15px,1.65vw,26px) clamp(20px,2.2vw,36px);
}
.socio h3{
  font-size:var(--fs-card-title); font-weight:var(--peso-black);
  line-height:1.14; color:var(--rojo-hondo);
}
.socio p{ margin-top:.7em; font-size:var(--fs-desc); line-height:1.5; color:var(--texto-suave); }

/* =========================== MODELO FLEXIBLE =========================== */
.modelo{ background:var(--claro); padding-bottom:var(--pad-seccion); }
/* Misma corrección que en .banda: la imagen ya trae el rojo integrado. */
.modelo__caja{
  display:grid; grid-template-columns:1fr 1.28fr;
  border-radius:var(--radius-lg); overflow:hidden;
  background:url("../img/banda-partners.webp") center / cover no-repeat;
  min-height:clamp(190px, 21vw, 300px);
  grid-template-columns:52% 1fr;
  color:var(--blanco);
}
.modelo__foto{ display:none; }
.modelo__texto{
  grid-column:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(20px,2.6vw,44px) clamp(20px,3vw,52px);
}
.modelo__titulo{ font-size:var(--fs-h2); font-weight:var(--peso-black); line-height:1.12; }
.modelo__linea{ margin-top:.6em; font-size:var(--fs-desc); line-height:1.5; }
.modelo__modalidades{
  margin-top:clamp(12px,1.4vw,22px);
  background:rgba(255,255,255,.18); border-radius:var(--radius);
  padding:clamp(12px,1.3vw,20px) clamp(14px,1.5vw,24px);
  font-size:var(--fs-desc); line-height:1.5;
}
.modelo__rotulo{
  font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:.35em;
}

/* ============================== CIERRE ============================== */
.cierre{ background:var(--claro); padding-bottom:var(--pad-seccion); }
.cierre__inner{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(24px,3vw,58px); align-items:center;
}
.cierre__texto{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(18px,1.8vw,26px);
}
.cierre .lead{ color:var(--texto); }

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

@media (max-width:980px){
  .cabecera{ grid-template-columns:1fr; }
  .cabecera__apoyo{ padding-top:0; }
  .split__inner{ grid-template-columns:1fr; }
  /* Apilado, la insignia se coloca en la costura horizontal. */
  .split__badge{ left:50%; top:clamp(240px, 27vw, 380px); }
  /* Apiladas, el texto ya no cabe sobre la parte roja de la imagen: la
     fotografía vuelve a ser una franja arriba y el texto va sobre rojo. */
  .banda__caja, .modelo__caja{
    grid-template-columns:1fr; min-height:0;
    background-image:none;
    background:linear-gradient(100deg, var(--rojo-cta) 0%, var(--rojo) 100%);
  }
  .banda__texto, .modelo__texto{ grid-column:1; }
  .banda__foto, .modelo__foto{ display:block; min-height:clamp(170px,30vw,240px); }
  .banda__foto{ background:url("../img/banda-infraestructura.webp") center / cover no-repeat; }
  .modelo__foto{ background:url("../img/banda-partners.webp") center / cover no-repeat; }
  .rpo__marco{ max-width:100%; }
  .rpo__marco img{ aspect-ratio:2; }
  .paquetes__inner{ grid-template-columns:1fr; }
  .continuidad__inner{ grid-template-columns:1fr; }
  .partners__lista{ grid-template-columns:repeat(2,1fr); }
  .ambientes{ grid-template-columns:1fr; }
  .elige__lista{ grid-template-columns:repeat(2,1fr); row-gap:clamp(22px,3vw,38px); }
  .elige__item:nth-child(2n){ border-right:0; }
  .cierre__inner{
    grid-template-columns:1fr; justify-items:center; text-align:center;
    gap:clamp(16px,3.2vw,26px);
  }
  .cierre__texto{ align-items:center; width:100%; }
  .cierre .lead{ max-width:46ch; margin-inline:auto; }
  /* Los pasos y las capacidades caben de dos en dos antes de apilarse. */
  .pasos{ grid-template-columns:repeat(2,1fr); }
  .capacidades__lista{ grid-template-columns:repeat(2,1fr); row-gap:clamp(20px,3vw,34px); }
  .capacidad:nth-child(2n){ border-right:0; }
}

@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:10px; justify-content:center; }
  .hero__foto{ background-position:72% center; }
}

@media (max-width:640px){
  .servicios{ grid-template-columns:1fr; }
  .ventajas__lista{ grid-template-columns:1fr; }
  .partners__lista{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:1fr; }
  .elige__lista{ grid-template-columns:1fr; }
  .elige__item{ border-right:0; }
  .capacidades__lista{ grid-template-columns:1fr; }
  .capacidad{ border-right:0; }

  /* A una sola columna las tarjetas ocupan todo el ancho: se recuestan para
     que el icono deje de flotar solo sobre una caja demasiado alta. */
  .ventaja, .paso{
    flex-direction:row; align-items:center;
    gap:clamp(16px,3.4vw,26px);
    padding:clamp(16px,3.2vw,24px) clamp(18px,3.6vw,28px);
  }
  .ventaja img, .paso__icono{
    align-self:center; margin-bottom:0;
    flex:0 0 clamp(52px,13vw,66px);
    height:clamp(40px,10vw,52px); object-fit:contain;
  }
  .ventaja > :is(h3,p), .paso > :is(span,h3,p){ min-width:0; }
  .ventaja h3 br, .paso__desc br, .servicio__gancho br,
  .socio h3 br, .elige__item h3 br, .ambiente h3 br{ display:none; }

  /* Los cortes de línea del diseño estrechan el texto sin motivo a lo ancho. */
  .hero__lead br, .banda__items br, .modelo__linea br{ display:none; }
  .hero__lead{ max-width:none; }

  .paquete{ grid-template-columns:auto 1fr; row-gap:6px; }
  .paquete img{ grid-row:1; }
  .paquete__cuerpo{ grid-column:1 / -1; }

  .continuidad__titulo{ display:block; }
  .pastilla{ display:inline-block; margin-top:.3em; }
}

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