/* ICUSA — sistema de diseño.
   Valores sacados del sitio original (elementor-kit-5 + medición del render). */

/* OJO con el mapa de pesos: el sitio original declara Avenir-Heavy como
   peso 600 (no 900). Si se cambia, TODO el texto de 600 cambia de ancho y el
   diseño se corre unos píxeles en cada bloque. Se respeta tal cual. */
@font-face{font-family:'Avenir';src:url('../fonts/Avenir-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('../fonts/Avenir-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('../fonts/Avenir-Heavy.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('../fonts/Avenir-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Marca */
  --ic-navy:#101820;
  --ic-navy-soft:#2E2E2E;
  --ic-green:#74CC34;
  --ic-green-dark:#50951E;
  --ic-green-tint:rgba(105,233,12,.2);
  --ic-green-tint-strong:rgba(105,233,12,.5);
  --ic-blue:#3382FF;
  --ic-blue-tint:rgba(196,211,235,.2);
  --ic-text:#5D5D5D;
  --ic-white:#fff;
  --ic-line:#E8E8E8;
  --ic-line-soft:#E3E3E3;
  --ic-ground:#F4F4F4;

  /* Medidas */
  /* Ronda 4 (7-oct-2026): ICUSA pidió menos hueco blanco a los costados.
     Antes el contenido se topaba en 1280 y en una pantalla de 1750 dejaba
     ~235 px vacíos por lado. Ahora llega a 1600 y el margen crece con la
     ventana (2vw), con 10 px como piso para que el celular no cambie. */
  --ic-container:1600px;
  --ic-gutter:clamp(10px,2vw,32px);
  --ic-radius-sm:12px;
  --ic-radius-lg:24px;
  --ic-shadow:0 4px 34px rgba(0,0,0,.1);

  /* Acento por página. La unidad Industrial va en azul en el original:
     botones, etiquetas y la palabra resaltada de los títulos. */
  --ic-acento:var(--ic-green);
  --ic-acento-hondo:var(--ic-green-dark);
  --ic-acento-tinte:var(--ic-green-tint);

  /* Tipografía */
  --ic-font:'Avenir','Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ic-ground);
  color:var(--ic-text);
  font-family:var(--ic-font);
  font-size:18px;
  font-weight:500;
  line-height:26px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ic-navy);font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Rejilla base: cada sección es una franja de ancho completo con un
   contenedor centrado (1600 máx. desde la ronda 4; el original era 1280). */
.ic-strip{padding-inline:var(--ic-gutter)}
.ic-container{max-width:var(--ic-container);margin-inline:auto;width:100%}

/* Etiqueta pequeña (eyebrow) */
.ic-eyebrow{
  display:inline-block;
  padding:2px 10px;
  border-radius:24px;
  font-size:12px;
  font-weight:600;
  line-height:24px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.ic-eyebrow--green{background:var(--ic-acento-tinte);color:var(--ic-acento-hondo)}
.ic-eyebrow--blue{background:var(--ic-blue-tint);color:var(--ic-blue)}
.ic-eyebrow--onDark{background:var(--ic-green-tint-strong);color:var(--ic-white)}

/* Títulos de sección */
.ic-h2{font-size:42px;font-weight:700;line-height:44px;color:var(--ic-navy)}
/* El original usa dos acentos distintos y hay que respetarlos:
   .green  → verde + itálica, solo en los heroes y en "estándar"
   .green1 → verde derecha, en los títulos de sección */
.ic-h2 em,.ic-hero__titulo em{font-style:italic;color:var(--ic-acento)}
.ic-verde{color:var(--ic-acento);font-style:normal}
.ic-lead{font-size:18px;font-weight:500;line-height:26px;color:var(--ic-text)}
.ic-onDark .ic-h2,.ic-onDark h2,.ic-onDark h3{color:var(--ic-white)}
.ic-onDark .ic-lead{color:var(--ic-white)}

/* Botones */
/* Botón: el original usa padding 12/24, radio 42 y peso 900 (que con las
   fuentes cargadas cae en Avenir Bold). Alto resultante 46 px, 48 con borde. */
.ic-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:42px;
  font-size:16px;font-weight:900;line-height:22px;
  border:0 solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.ic-btn--green{background:var(--ic-acento);color:var(--ic-white)}
.ic-btn--green:hover{background:var(--ic-acento-hondo)}
.ic-btn--ghost{background:rgba(129,129,129,.2);color:var(--ic-white);border:1px solid #FDFDFD}
.ic-btn--ghost:hover{background:var(--ic-white);color:var(--ic-navy)}
.ic-btn--navy{background:var(--ic-navy);color:var(--ic-white)}
.ic-btn--navy:hover{background:var(--ic-navy-soft)}
.ic-btn--outline{background:transparent;color:var(--ic-navy);border:1px solid var(--ic-navy)}
.ic-btn--outline:hover{background:var(--ic-navy);color:var(--ic-white)}
.ic-btn svg{width:16px;height:16px;flex:0 0 auto}

@media (max-width:1024px){
  .ic-h2{font-size:36px;line-height:42px}
}
@media (max-width:767px){
  body{font-size:16px;line-height:24px}
  .ic-h2{font-size:32px;line-height:38px}
  .ic-lead{font-size:16px;line-height:24px}
}