/* ==========================================================================
   GAPELLI — Estilos de páginas y secciones
   Hero, tarjetas, timeline, CEDIS, catálogo, contacto, área técnica.
   ========================================================================== */

/* ==========================================================================
   HERO (genérico, con imagen de fondo + overlay)
   ========================================================================== */
.hero-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -2px;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}

.hero-container {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  height: clamp(460px, calc(100vh - var(--header-h)), 880px);
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

.hero-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  /* Sin degradado: los banners nuevos ya traen su propio panel horneado. */
  background: none;
}

.hero-overlay--right {
  background: linear-gradient(
    to left,
    rgba(13, 25, 58, 0.78) 0%,
    rgba(13, 25, 58, 0.42) 45%,
    rgba(13, 25, 58, 0.05) 100%
  );
}

.hero-overlay--center {
  justify-content: center;
  text-align: center;
  background: rgba(13, 25, 58, 0.55);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 clamp(24px, min(4.5vw, 86.4px), 90px);
}

.hero-badge {
  display: inline-block;
  padding: 8px 18px;
  margin-bottom: 22px;
  border-radius: 100px;
  background-color: rgba(206, 135, 38, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-title {
  color: #fff;
  font-size: clamp(34px, min(4.6vw, 88.32px), 72px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 820px;
  text-wrap: balance;
}

.hero-title .accent { color: #f0b45b; }

.hero-subtitle {
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(16px, min(1.4vw, 26.88px), 22px);
  font-weight: 500;
  line-height: 1.5;
  max-width: 640px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Hero móvil */
.mobile-hero-container {
  display: none;
}

.mobile-image-wrapper {
  position: relative;
  line-height: 0;
}

.mobile-hero-image {
  /* Sin recortar: con `cover` en una caja de 390x226 el banner (1920x905) se
     escalaba a 479x226 y se comian 89px de los lados, que es justo donde
     estan las patas del arco inferior. Con su proporcion natural (47.14vw =
     184px a 390) se ve entero y la curva aparece. */
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 905;
  object-fit: contain;
  object-position: center;
  display: block;
}

.mobile-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px 22px 40px;
  background: none;
}
/* El degradado va en un pseudo-elemento para poder desvanecerlo abajo sin
   desvanecer tambien el titulo, que va dentro del overlay.
   El banner trae un ARCO en su borde inferior (sus esquinas de abajo son
   transparentes y dejan ver el blanco del hero): con el degradado a `inset: 0`
   se pintaba encima y la curva desaparecia en movil. */
.mobile-image-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 25, 58, 0.85), rgba(13, 25, 58, 0.1) 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 88%);
  pointer-events: none;
}
.mobile-image-overlay .mobile-title { position: relative; z-index: 1; }

.mobile-title {
  /* Ahora es un <p>, no un <h1>: recupero aqui lo que daba el reset de titulos
     para que el hero movil no cambie ni un pixel. */
  margin: 0;
  font-family: var(--font-display);
  color: var(--gapelli-gold); /* mismo dorado que hero-title--gold en escritorio */
  font-size: clamp(26px, min(7vw, 134.4px), 40px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.mobile-content-wrapper {
  padding: 28px 22px 40px;
  text-align: center;
}

.mobile-subtitle {
  color: var(--c-slate-600);
  font-size: 16px;
  line-height: 1.6;
}

.mobile-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
}

@media (max-width: 1023px) {
  /* El hero genérico YA NO se oculta en móvil: se ADAPTA. Solo se oculta en
     las páginas que traen su propia versión móvil (index), para no duplicar.
     Antes esto ocultaba el banner en nosotros, productos, area-tecnica y
     contacto, y como esas páginas no tienen versión móvil la imagen
     simplemente desaparecía. */
  .hero-wrapper:has(.mobile-hero-container) .hero-container { display: none !important; }
  .mobile-hero-container { display: block; }

  .hero-container {
    display: block !important;
    height: clamp(300px, 58vw, 480px);
  }
  .hero-image {
    height: 100%;
    object-position: center;
  }
  /* El panel pasa a degradado vertical anclado abajo: arriba se sigue viendo la
     imagen (la parte clara) y el texto queda legible sobre la zona oscura. */
  .hero-overlay,
  .hero-overlay--left,
  .hero-overlay--right {
    align-items: flex-end;
    background: linear-gradient(
      180deg,
      rgba(13, 25, 58, 0.04) 0%,
      rgba(13, 25, 58, 0.38) 52%,
      rgba(13, 25, 58, 0.86) 100%
    );
  }
  .hero-overlay--center {
    align-items: center;
    background: linear-gradient(
      180deg,
      rgba(13, 25, 58, 0.2) 0%,
      rgba(13, 25, 58, 0.64) 100%
    );
  }
  .hero-content {
    padding: 22px 22px 30px;
  }
}

/* --- Variante de hero con fondo claro (inicio) --- */
.hero-overlay--light {
  background: transparent;
}
.hero-title--gold { color: var(--gapelli-gold); }
.hero-subtitle--blue { color: var(--gapelli-blue); }

.btn-hero {
  padding: 13px 28px;
  border: 2px solid var(--gapelli-blue);
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(32, 60, 127, 0.24);
}
.btn-hero:hover { transform: translateY(-2px); }

/* ==========================================================================
   CATEGORÍAS — carrusel centrado (medidas del Figma)
   Tarjeta central grande 494×520, laterales 402×412, separación 76px,
   radio 153px 16px 16px 0 y barra azul #203C7F abajo con la etiqueta.
   Calibrado a 1800px: desde ahí los valores son exactos.
   ========================================================================== */
.cat-section {
  background-color: #fff;
  padding-top: clamp(40px, min(5vw, 96px), 90px);
  padding-bottom: clamp(48px, min(5.333vw, 102.39px), 96px);
}

.cat-head {
  text-align: center;
  padding: 0 20px;
  margin-bottom: clamp(32px, min(4.611vw, 88.53px), 83px);
}

.cat-title {
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(34px, min(3.556vw, 68.28px), 64px);
  font-weight: 700;
  line-height: 1.28;
}

.cat-subtitle {
  margin-top: clamp(3px, min(0.389vw, 7.47px), 7px);
  color: #000;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  line-height: 1.58;
}

/* --- Carrusel ---
   La caja muestra EXACTAMENTE 3 tarjetas, de borde a borde:
     vecina(402) + gap(76) + activa(494) + gap(76) + vecina(402) = 1450
   a 1800px eso es min(80.556vw, 1546.68px). Con este ancho las 3 llenan la caja justo y la
   4ª tarjeta queda ya fuera, así que nunca asoma nada de más. */
.cat-carousel {
  position: relative;
  --cat-dur: 950ms;
  /* ease-out suave: arranca rápido y frena sin golpe */
  --cat-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  /* Ancho de la caja: EXACTAMENTE lo que ocupan las 3 tarjetas.
     La activa escala 46px por lado DENTRO del hueco del gap, así que el ancho
     real del conjunto no es 402+76+494+76+402 sino:
       media = activa/2 + (gap − 46) + vecina  →  247 + 30 + 402 = 679
       caja  = 2 × 679 = 1358px  (min(75.444vw, 1448.52px) a 1800)
     Con este ancho las 3 tarjetas llenan la caja de borde a borde (las
     vecinas quedan pegadas a los lados, para que las flechas abracen las
     imágenes) y la 4ª empieza en 1434, o sea 76px fuera: nunca asoma.
     Con 1450px quedaban solo 30px de margen y se colaba un trozo de la 4ª. */
  --cat-box: min(75.444vw, 1448.52px);
  /* El alto real lo calcula el JS (alto de tarjeta × escala + margen) para
     que la activa no se recorte. Esto es solo un mínimo de seguridad. */
  --cat-box-h: clamp(230px, min(30vw, 576px), 540px);
}

/* Las flechas van PEGADAS a los lados de la caja de 3 tarjetas */
.cat-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, min(1.611vw, 30.93px), 29px);
}

/* Caja que recorta EXACTAMENTE 3 tarjetas: las dos laterales completas y la
   activa al centro. Todo lo que sobra se recorta contra estos bordes, así que
   no se ve ninguna tarjeta de más. */
.cat-viewport {
  position: relative;
  flex: none;
  width: var(--cat-box);
  height: var(--cat-box-h);
  overflow: hidden;
}

.cat-track {
  position: relative;
  display: flex;
  align-items: center;
  /* Ocupa todo el alto del viewport para que las tarjetas queden centradas
     verticalmente y el crecimiento de la activa no descuadre nada. */
  height: 100%;
  /* Separación entre tarjetas, la del Figma (76px a 1800). Puramente
     proporcional: si la recortara con un clamp, en pantallas chicas la caja
     dejaría de coincidir con las tarjetas y volvería a asomar la 4ª. */
  gap: min(4.222vw, 81.06px);
  will-change: transform;
  /* Misma duración y curva que las tarjetas (--cat-dur / --cat-ease) para que
     el deslizamiento y el escalado ocurran sincronizados. */
  transition: transform var(--cat-dur) var(--cat-ease);
}

/* --- Tarjeta --- */
.cat-card {
  position: relative;
  flex: none;
  /* Tamaño base (tarjeta lateral): 402×412 a 1800px, el del Figma.
     SIN topes en px a propósito: si el ancho se topara pero la caja (min(80.556vw, 1546.68px))
     siguiera creciendo, la caja dejaría de coincidir con las tarjetas y
     volvería a asomar la 4ª. Todo escala junto con vw. */
  width: min(22.333vw, 428.79px);
  height: min(22.889vw, 439.47px);
  /* esquina superior izquierda muy redondeada, resto casi recto */
  border-radius: clamp(58px, min(8.5vw, 163.2px), 153px) 16px 16px 0;
  overflow: hidden;
  /* La activa crece con `scale` (animable y compuesto en GPU) en vez de
     cambiar width/aspect-ratio, que no son animables de forma fluida. */
  transform-origin: center center;
  transform: scale(var(--ps, 1));
  will-change: transform;
}

/* Solo la tarjeta activa crece. El factor sale de comparar la central
   (494×520) con la lateral (402×412). Como sus proporciones difieren un poco
   (1.229 vs 1.262), con un único `scale` no se pueden clavar ambos: elegimos
   1.2289 para que el ANCHO sea exacto (494×506 en vez de 494×520; 14px de
   diferencia en el alto, imperceptibles). */
.cat-card.is-active {
  --ps: 1.2289;
  box-shadow: 0 26px 54px -18px rgba(32, 60, 127, 0.45);
}

/* Misma duración y curva para el deslizamiento y el escalado: así arrancan,
   avanzan y frenan juntos y el movimiento se lee como uno solo. */
.cat-card {
  transition:
    transform var(--cat-dur, 950ms) var(--cat-ease),
    box-shadow var(--cat-dur, 950ms) var(--cat-ease);
}

.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}
.cat-card:hover img { transform: scale(1.05); }

/* Barra azul: 62.15% del ancho y 14.04% del alto de la tarjeta */
.cat-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62.15%;
  height: 14.04%;
  background-color: #203c7f;
  border-radius: 0 100px 0 0;
  pointer-events: none;
}

.cat-label {
  position: absolute;
  left: 6%;
  bottom: 2.2%;
  z-index: 2;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(12px, min(1.778vw, 34.14px), 32px);
  font-weight: 500;
  line-height: 1.375;
  white-space: nowrap;
  pointer-events: none;
}

/* --- Flechas: fondo #203C7F, icono blanco --- */
.cat-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, min(2.778vw, 53.34px), 50px);
  height: clamp(34px, min(2.778vw, 53.34px), 50px);
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #203c7f;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(32, 60, 127, 0.55);
  transition: background-color 0.25s, transform 0.25s var(--ease-out-expo),
    box-shadow 0.25s;
}
.cat-arrow:hover {
  background-color: #0d2a87;
  transform: scale(1.08);
}
.cat-arrow:active { transform: scale(0.96); }
.cat-arrow svg {
  width: clamp(18px, min(1.667vw, 32.01px), 30px);
  height: auto;
}

/* La clave de todo el ancho: el conjunto de 3 tarjetas mide
      caja = 3 × vecina + 2 × gap
   (la activa escala desde su centro, así que su crecimiento se come parte del
   gap y el total queda en 3 anchos de tarjeta más los 2 huecos).
   Comprobación a 1800px: 3 × 22.333 + 2 × 4.222 = min(75.444vw, 1448.52px) ✔
   Si cambias el ancho de tarjeta o el gap, recalcula --cat-box con esa
   fórmula o empezará a asomar la 4ª tarjeta. */

/* En móvil la caja llena el ancho y las tarjetas se recalculan con la MISMA
   fórmula para que sigan entrando exactamente 3:
      min(100vw, 1920px) = 3 × tarjeta + 2 × gap(min(4vw, 76.8px))  →  tarjeta = 92/3 = min(30.667vw, 588.81px) */
@media (max-width: 700px) {
  /* En movil se ve UNA sola tarjeta (antes se veian tres).
     La cuenta: la caja mide 84vw; la tarjeta activa escala 1.2289, asi que
     ocupa 58 x 1.2289 = 71.3vw y queda centrada de 6.4 a 77.6vw. Las vecinas
     empiezan en 77.6 + 4 (gap) = 81.6vw, o sea fuera de la caja: el
     `overflow: hidden` del viewport las recorta y no asoma ninguna.
     El carrusel funciona igual (mismo bucle infinito, mismos 950ms). */
  .cat-carousel { --cat-box: 84vw; }
  .cat-card {
    width: 58vw;
    height: 59.44vw; /* misma proporcion que en escritorio (402 x 412) */
    border-radius: 34px 12px 12px 0;
  }
  .cat-track { gap: 16vw; }

  /* Las flechas van en el hueco libre a los lados de la tarjeta */
  .cat-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    margin-top: -17px; /* la mitad del alto de 34px */
  }
  .cat-arrow--prev { left: 4px; }
  .cat-arrow--next { right: 4px; }
}

/* ==========================================================================
   EL RESPALDO DETRÁS DE TUS PRODUCTOS — carrusel de 4 tarjetas visibles
   Medidas del Figma a 1800px:
     tarjeta 368×433 · gap 60 · viewport = 4 tarjetas + 3 gaps = 1652
     título 64 · subtítulo 24 · etiqueta 32 · flechas 30 · dots 28
   Las imágenes Frame_*.png ya miden 368×433 y traen la etiqueta y el icono
   incluidos, así que cada tarjeta es solo un <img>.
   ========================================================================== */
.pb-section {
  background-color: #fff;
  padding-top: clamp(40px, min(4.7vw, 90.24px), 85px);
  padding-bottom: clamp(48px, min(5vw, 96px), 90px);
}

.pb-head {
  text-align: center;
  padding: 0 20px;
  margin-bottom: clamp(30px, min(4vw, 76.8px), 72px);
}

.pb-title {
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(34px, min(3.556vw, 68.28px), 64px);
  font-weight: 700;
  line-height: 1.28;
}

.pb-subtitle {
  margin-top: clamp(3px, min(0.389vw, 7.47px), 7px);
  color: #000;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  line-height: 1.58;
}

/* --- Carrusel ---
   El viewport mide EXACTAMENTE 4 tarjetas + 3 gaps, así que siempre se ven 4
   completas y ninguna asoma a medias. */
.pb-carousel {
  --pb-card: min(20.444vw, 392.52px);  /* 368px a 1800 */
  --pb-gap: min(3.333vw, 63.99px);    /* 60px a 1800  */
  --pb-count: 4;        /* tarjetas visibles */
  --pb-view: calc(
    var(--pb-count) * var(--pb-card) + (var(--pb-count) - 1) * var(--pb-gap)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pb-viewport {
  width: var(--pb-view);
  box-sizing: content-box;
  overflow: hidden;
  padding: clamp(8px, min(1.1vw, 21.12px), 20px) 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.pb-viewport:active { cursor: grabbing; }

.pb-track {
  display: flex;
  align-items: center;
  gap: var(--pb-gap);
  will-change: transform;
  /* Misma curva y duración que usa el sitio original */
  transition: transform 0.48s cubic-bezier(0.25, 1, 0.5, 1);
}

.pb-card {
  flex: none;
  width: var(--pb-card);
  aspect-ratio: 368 / 433; /* la proporción real de las imágenes */
  border-radius: 20px;
  overflow: hidden;
  filter: drop-shadow(0 8px 18px rgba(32, 60, 127, 0.12));
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), filter 0.35s;
}

.pb-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
}

.pb-card:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 18px 30px rgba(32, 60, 127, 0.24));
}

/* --- Paginador: flecha · dots · flecha --- */
.pb-paginator {
  display: flex;
  align-items: center;
  gap: clamp(10px, min(1.556vw, 29.88px), 28px);
  margin-top: clamp(20px, min(4.056vw, 77.88px), 73px);
}

.pb-dots {
  display: flex;
  align-items: center;
  gap: clamp(5px, min(0.667vw, 12.81px), 12px);
}

.pb-dot {
  width: clamp(9px, min(1.556vw, 29.88px), 28px);
  height: clamp(9px, min(1.556vw, 29.88px), 28px);
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: #ebeef0;
  cursor: pointer;
  transition: width 0.35s var(--ease-out-expo), background-color 0.35s,
    border-radius 0.35s;
}
.pb-dot:hover { background-color: #d8dee4; }
/* El dot activo se estira a pastilla, como en el diseño */
.pb-dot.is-active {
  width: clamp(12px, min(2vw, 38.4px), 36px);
  background-color: #203c7f;
  border-radius: 12px;
}

.pb-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, min(2.222vw, 42.66px), 40px);
  height: clamp(30px, min(2.222vw, 42.66px), 40px);
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #203c7f;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(32, 60, 127, 0.55);
  transition: background-color 0.25s, transform 0.25s var(--ease-out-expo),
    box-shadow 0.25s;
}
.pb-arrow:hover {
  background-color: #0d2a87;
  transform: scale(1.08);
}
.pb-arrow:active { transform: scale(0.96); }
.pb-arrow svg {
  width: clamp(16px, min(1.333vw, 25.59px), 24px);
  height: auto;
}

/* En pantallas chicas se ven menos tarjetas para que no queden diminutas:
   3 en tablet y 1 en móvil, recalculando el ancho del viewport con la misma
   fórmula (count × tarjeta + (count−1) × gap). */
@media (max-width: 1024px) {
  .pb-carousel {
    --pb-card: min(28.333vw, 543.99px);
    --pb-gap: min(4vw, 76.8px);
    --pb-count: 3;
  }
}
@media (max-width: 700px) {
  .pb-carousel {
    --pb-card: min(min(86vw, 1651.2px), 320px);
    --pb-gap: min(4vw, 76.8px);
    --pb-count: 1;
  }
  .pb-viewport { padding: 12px 0 20px; }
}

/* ==========================================================================
   ¿POR QUÉ GAPELLI? — bento grid de 4 tarjetas
   Medidas del Figma a 1800px:
     columna 530 · gap columnas 28.59 · alto fila 385 · gap filas 38
     radio 25 · etiqueta 36 (Geist 700 #203C7F) · título 64 dorado · subtítulo 24
   Reparto:
     +----------+--------+--------+
     |          |  b     |  c     |   fila 1 (385)
     |    a     +--------+--------+
     |  (808)   |       d         |   fila 2 (385)
     +----------+-----------------+
     a = 2 filas (385+38+385 = 808)  ·  d = 2 columnas (530+28.59+530)
   ========================================================================== */
.why-section { background-color: #fff; }

.why-head {
  text-align: center;
  padding: 0 20px;
  /* subtítulo (y=172) → grid (y=244) = 72px */
  margin-bottom: clamp(30px, min(4vw, 76.8px), 72px);
}

.why-title {
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(34px, min(3.556vw, 68.28px), 64px);
  font-weight: 700;
  line-height: 1.28;
}

.why-subtitle {
  /* título (alto 82) → subtítulo (y=96) = 14px */
  margin-top: clamp(4px, min(0.778vw, 14.94px), 14px);
  color: #000;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  line-height: 1.58;
}

.why-grid {
  --why-col: min(29.444vw, 565.32px);  /* 530px  */
  --why-cg: min(1.588vw, 30.49px);    /* 28.59  */
  --why-row: min(21.389vw, 410.67px);  /* 385px  */
  --why-rg: min(2.111vw, 40.53px);    /* 38px   */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: var(--why-row) var(--why-row);
  column-gap: var(--why-cg);
  row-gap: var(--why-rg);
  /* 3 columnas + 2 gaps = 1647px, igual que el Figma */
  width: calc(3 * var(--why-col) + 2 * var(--why-cg));
  margin: 0 auto;
}

.why-card {
  position: relative;
  display: block;
  border-radius: clamp(14px, min(1.389vw, 26.67px), 25px);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -18px rgba(32, 60, 127, 0.35);
}

.why-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out-expo);
}
.why-card:hover img { transform: scale(1.04); }

/* Degradado exacto del Figma: transparente al 52% y sólido #EBEEF0 al 88%,
   para que la etiqueta azul se lea sobre el fondo claro. */
.why-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(235, 238, 240, 0) 52%, #ebeef0 88%);
  pointer-events: none;
}

.why-card h3 {
  position: absolute;
  left: clamp(16px, min(1.778vw, 34.14px), 32px);
  right: clamp(16px, min(1.778vw, 34.14px), 32px);
  bottom: clamp(10px, min(0.889vw, 17.07px), 16px);
  z-index: 2;
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(19px, min(2vw, 38.4px), 36px);
  font-weight: 700;
  line-height: 1.25;
}

/* Reparto del bento */
.why-card--lab { grid-area: 1 / 1 / 3 / 2; }      /* 2 filas, columna 1 */
.why-card--area { grid-area: 1 / 2 / 2 / 3; }     /* fila 1, columna 2 */
.why-card--soporte { grid-area: 1 / 3 / 2 / 4; }  /* fila 1, columna 3 */
.why-card--catalogo { grid-area: 2 / 2 / 3 / 4; } /* fila 2, columnas 2-3 */

/* En pantallas menores el bento de 3 columnas no cabe: pasamos a una sola
   columna con alturas proporcionales, manteniendo la tarjeta alta la primera. */
@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    width: min(min(92vw, 1766.4px), 560px);
    gap: 18px;
  }
  .why-card--lab,
  .why-card--area,
  .why-card--soporte,
  .why-card--catalogo { grid-area: auto; }

  .why-card { height: min(58vw, 1113.6px); max-height: 340px; min-height: 190px; }
  .why-card--lab { height: min(86vw, 1651.2px); max-height: 520px; min-height: 300px; }
  .why-card h3 { font-size: 24px; bottom: 14px; }
}

/* ==========================================================================
   CONECTAMOS SOLUCIONES, ACORTAMOS DISTANCIAS
   Medidas del Figma (marco 1832 × 702):
     panel gris 1172 × 702 pegado a la izquierda, esquinas DERECHAS redondeadas
       (border-radius 0 35px 35px 0)
     texto a 167 del borde izq · título 768 de ancho, 64 px dorado
     subtítulo 674 de ancho, 24 px azul · botón 337 × 60, radio 30, borde blanco
     imagen 840 × 581 pegada al borde derecho y centrada en vertical, con la
       esquina SUPERIOR DERECHA muy redondeada (313 px)
   El panel llega a 1172 y la imagen empieza en 992: se solapan 180 px.
   ========================================================================== */
.log-section {
  background-color: #fff;
  padding: clamp(24px, min(3vw, 57.6px), 54px) 0;
}

.log-wrap {
  position: relative;
  /* La imagen termina en el MISMO borde derecho que la sección de arriba
     ("¿Por qué Gapelli?"). Ese bento mide 3×min(29.444vw, 565.32px) + 2×min(1.588vw, 30.49px) = min(91.508vw, 1756.95px) y
     va centrado, así que su borde derecho está en min(95.754vw, 1838.48px) → el margen es
     min(4.246vw, 81.52px). Si este número cambia, hay que cambiarlo también en .why-grid. */
  --log-media-right: 4.246%;
  /* SIN max-width ni centrado: la sección va de borde a borde. Así la capa
     gris queda pegada al borde izquierdo (en el Figma el panel arranca en
     x=0), sin franjas blancas. */
  width: 100%;
  /* el marco del Figma es 1832 × 702 */
  aspect-ratio: 1832 / 702;
  min-height: 280px;
}

/* Panel gris: pegado al borde izquierdo y con las esquinas derechas curvas */
.log-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 63.97%; /* 1172 / 1832 */
  height: 100%;
  background-color: #ebeef0;
  border-radius: 0 clamp(16px, min(1.944vw, 37.32px), 35px) clamp(16px, min(1.944vw, 37.32px), 35px) 0;
}

/* Texto: dentro del panel, centrado en vertical y arrancando a 167px */
.log-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 63.97%;
  height: 100%;
  padding-left: 9.115%; /* 167 / 1832 */
  padding-right: 3%;
  /* En el Figma el bloque de texto (155..508) queda 20px por encima del centro
     del panel (702). Con flex centrado, un padding-bottom lo sube la mitad. */
  padding-bottom: clamp(10px, min(2.167vw, 41.61px), 39px);
}

.log-title {
  max-width: min(42.667vw, 819.21px); /* 768px */
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(28px, min(3.556vw, 68.28px), 64px);
  font-weight: 700;
  /* 1.28 es el interlineado que usan los demás títulos del diseño (el bloque
     de 82px por línea de "Categorías" y "El respaldo…"). */
  line-height: 1.28;
}

.log-subtitle {
  max-width: min(37.444vw, 718.92px); /* 674px */
  margin-top: 0; /* en el Figma el subtítulo arranca donde acaba el título */
  color: #203c7f;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  line-height: 1.52;
}

.log-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(14px, min(1.333vw, 25.59px), 24px);
  height: clamp(40px, min(3.333vw, 63.99px), 60px);
  padding: 0 clamp(16px, min(1.278vw, 24.54px), 23px);
  border: 1px solid #fff;
  border-radius: 100px;
  background-color: #203c7f;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.25s, transform 0.25s var(--ease-out-expo);
}
.log-btn:hover {
  background-color: #0d2a87;
  transform: translateY(-2px);
}

/* Imagen: termina en el borde derecho de la sección de arriba y se solapa con
   el panel.
   El ancho baja de 45.85% (el del Figma) a 42% porque al mover la imagen a la
   derecha su borde izquierdo se acercaba al título dorado y lo tocaba; con 42%
   queda un hueco de ~36px entre el texto y la imagen.
   El `top` la mantiene centrada en vertical para este ancho nuevo (con
   45.85% era 8.547%).
   OJO: aquí NO se puede centrar con `transform: translateY(-50%)` porque las
   clases de animación (.reveal-fade-left) también usan transform y lo
   sobreescribirían, dejando la imagen desfasada hacia abajo. */
.log-media {
  position: absolute;
  right: var(--log-media-right, 4.246%);
  top: 12.1%;
  z-index: 1;
  width: 42%;
}

.log-media img {
  display: block;
  width: 100%;
  aspect-ratio: 840 / 581;
  object-fit: cover;
  /* Curva grande en la esquina INFERIOR DERECHA (según la referencia).
     El orden en CSS es TL TR BR BL, así que el 313px va en la TERCERA
     posición:   16px  16px  313px  16px
                    TL    TR     BR     BL
     Las otras tres esquinas llevan 16px.
     En vw para que la curva crezca junto con la sección, que ahora es fluida
     (a 1800px: 16px las chicas y 313px la grande). */
  border-radius: min(0.889vw, 17.07px) min(0.889vw, 17.07px) min(17.389vw, 333.87px) min(0.889vw, 17.07px);
}

/* En pantallas menores el marco 1832×702 queda demasiado plano: apilamos el
   texto (con su propio fondo gris) y la imagen debajo. */
@media (max-width: 900px) {
  .log-wrap {
    aspect-ratio: auto;
    min-height: 0;
    max-width: 640px;
  }
  .log-panel { display: none; }

  .log-copy {
    width: 100%;
    height: auto;
    padding: clamp(24px, min(5vw, 96px), 44px);
    background-color: #ebeef0;
    border-radius: clamp(16px, min(3vw, 57.6px), 35px);
  }
  .log-title,
  .log-subtitle { max-width: 100%; }

  .log-media {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 18px;
  }
  .log-media img {
    border-radius: min(0.889vw, 17.07px) min(0.889vw, 17.07px) min(17.389vw, 333.87px) min(0.889vw, 17.07px);
  }
}

/* ==========================================================================
   TARJETA GENÉRICA
   ========================================================================== */
.card {
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}

.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--c-gray-50);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

.card:hover .card-media img { transform: scale(1.07); }

.card-body { padding: 24px 22px 26px; }

.card-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--gapelli-blue);
}

.card-text {
  margin-top: 10px;
  color: var(--c-slate-600);
  font-size: 15px;
  line-height: 1.6;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--gapelli-gold);
  font-weight: 700;
  font-size: 15px;
  transition: gap 0.25s, color 0.25s;
}
.card-link:hover { gap: 12px; color: var(--gapelli-gold-dark); }
.card-link svg { width: 16px; height: 16px; }

/* ==========================================================================
   GRID DE TARJETAS
   ========================================================================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, min(2.4vw, 46.08px), 34px);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, min(2.2vw, 42.24px), 30px);
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1180px) {
  .grid-5, .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid-5, .grid-4, .grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECCIÓN DE DOS COLUMNAS (imagen + texto)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, min(4vw, 76.8px), 72px);
  align-items: center;
}
.split--reverse .split-media { order: 2; }
.split--reverse .split-copy { order: 1; }

.split-media { position: relative; }
.split-media img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  object-fit: cover;
}
.split-media--frame img {
  border-radius: 26px;
  border: 1px solid rgba(32, 60, 127, 0.08);
}

.split-copy .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--gapelli-gold);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.split-copy h2 {
  font-size: clamp(26px, min(3vw, 57.6px), 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.split-copy p {
  margin-top: 16px;
  color: var(--c-slate-600);
  font-size: 16px;
  line-height: 1.7;
}
.split-copy .btn { margin-top: 26px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 1; }
  .split--reverse .split-copy { order: 2; }
}

/* ==========================================================================
   BENEFICIOS / LISTAS CON CHECK
   ========================================================================== */
.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}
.benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--c-slate-700);
  font-size: 15.5px;
  line-height: 1.55;
}
.benefit-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: rgba(5, 150, 105, 0.12);
  color: #059669;
  font-weight: 900;
  font-size: 13px;
}

/* ==========================================================================
   BLOQUE OSCUO (logistics / llamados a acción)
   ========================================================================== */
.dark-band {
  position: relative;
  background-color: var(--gapelli-blue);
  color: #fff;
  overflow: hidden;
}

.dark-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 85% 20%, rgba(206, 135, 38, 0.28), transparent 60%),
    radial-gradient(500px 380px at 10% 90%, rgba(23, 45, 98, 0.9), transparent 60%);
  pointer-events: none;
}

.dark-band .container { position: relative; z-index: 1; }

.dark-band .section-title { color: #fff; }
.dark-band .section-subtitle { color: rgba(255, 255, 255, 0.78); }

.dark-band--gold {
  background: linear-gradient(120deg, #b26f1c, var(--gapelli-gold) 55%, #e3a24e);
}

/* ==========================================================================
   (Las tarjetas viejas de categorías se reemplazaron por .cat-card arriba,
   que replica la forma del Figma: 153px / 16px / 16px / 0)
   ========================================================================== */

/* ==========================================================================
   CONTÁCTANOS — formulario sobre imagen (componente ContactGlassSection)
   La imagen vector14_contact.png YA INCLUYE el título, el subtítulo, las
   etiquetas y los recuadros de los campos (es un gráfico de 1600×909).
   Por eso los <input> van ENCIMA, colocados en porcentajes de la imagen.
   Esos porcentajes son los del sitio original.
   ========================================================================== */
.contact-cta {
  background-color: #fff;
  padding: 0; /* la imagen va a sangre, sin margen */
}

.cta-container {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* line-height 0 quita el hueco que deja la imagen al ser inline */
  line-height: 0;
  overflow: hidden;
}

.cta-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  vertical-align: bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Título y subtítulo: solo se usan en móvil (en escritorio están en la imagen) */
.cta-title,
.cta-subtitle { display: none; }

/* --- Formulario superpuesto --- */
.cta-form {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.cta-field {
  position: absolute;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #fff;
  color: #1e293b;
  font-family: var(--font-sans);
  font-size: clamp(14px, min(1.05vw, 20.16px), 18px);
  font-weight: 500;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cta-field::placeholder { color: #94a3b8; }
.cta-field:focus {
  border-color: var(--gapelli-blue);
  box-shadow: 0 0 0 4px rgba(32, 60, 127, 0.12);
}

/* Posiciones en % de la imagen (valores del sitio original) */
.cta-field--nombre { width: 19.05%; height: 6.32%; top: 40.15%; left: 10.26%; }
.cta-field--telefono { width: 22.35%; height: 6.32%; top: 40.15%; left: 31.56%; }
.cta-field--email { width: 19.05%; height: 6.32%; top: 51.35%; left: 10.26%; }
.cta-field--empresa { width: 22.35%; height: 6.32%; top: 51.35%; left: 31.56%; }
.cta-field--mensaje {
  width: 43.65%;
  height: 13.25%;
  top: 62.55%;
  left: 10.26%;
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: 1.5;
  resize: none;
}

.cta-submit {
  position: absolute;
  top: 76.75%;
  left: 10.42%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.65%;
  min-width: 140px;
  height: 5.15%;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 30px;
  background-color: #203c7f;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(13px, min(0.95vw, 18.24px), 17px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(32, 60, 127, 0.35);
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.cta-submit:hover {
  background-color: #172d62;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(32, 60, 127, 0.7);
}
.cta-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* En pantallas chicas los campos quedarían diminutos, así que se abandona el
   gráfico y se arma un formulario normal con el texto en HTML. */
@media (max-width: 900px) {
  .contact-cta { padding: 40px 20px; }

  .cta-container {
    max-width: 620px;
    padding: 30px 22px 36px;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.33);
    line-height: normal;
    overflow: visible;
  }

  .cta-image { display: none; }

  .cta-title {
    display: block;
    margin: 0 0 10px;
    color: #203c7f;
    font-family: var(--font-display);
    font-size: clamp(22px, min(5vw, 96px), 32px);
    font-weight: 700;
    text-align: center;
  }
  .cta-subtitle {
    display: block;
    margin: 0 0 22px;
    color: #203c7f;
    font-family: var(--font-sans);
    font-size: clamp(14px, min(3.2vw, 61.44px), 17px);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  .cta-form {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: auto;
    height: auto;
  }

  .cta-field {
    position: static;
    width: auto;
    height: auto;
    padding: 13px 16px;
    font-size: 16px;
  }
  .cta-field--mensaje {
    grid-column: 1 / -1;
    min-height: 130px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .cta-submit {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin-top: 4px;
  }
}

@media (max-width: 560px) {
  .cta-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ALIANZAS QUE AMPLÍAN NUESTRAS SOLUCIONES — carrete de logos
   Medidas del Figma (marco 1920):
     título 64 dorado · subtítulo 24 (ancho 1158) · carrete 1920 × 355
     16 logos de ~117px de alto con 162px de separación
   El carrete mide 5816px de ancho, así que se anima en bucle continuo.
   Cada logo lleva su ancho (--lw) del Figma: varios tienen relleno
   transparente (Hyzlin sobre todo: arte real 853×125 dentro de una imagen de
   1123×794) y su ancho natural no coincide con la caja que usa el diseño.
   ========================================================================== */
.partners-section {
  background-color: #fff;
  padding-top: clamp(40px, min(4.7vw, 90.24px), 85px);
  padding-bottom: clamp(40px, min(4.7vw, 90.24px), 85px);
}

.partners-head {
  text-align: center;
  padding: 0 20px;
  /* subtítulo (termina en y=188) → carrete (empieza en y=209) = 21px */
  margin-bottom: clamp(14px, min(1.167vw, 22.41px), 21px);
}

.partners-title {
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(30px, min(3.556vw, 68.28px), 64px);
  font-weight: 700;
  line-height: 1.28;
}

.partners-subtitle {
  /* título (alto 82) → subtítulo (y=112) = 30px */
  margin: clamp(10px, min(1.667vw, 32.01px), 30px) auto 0;
  max-width: min(64.333vw, 1235.19px); /* 1158px */
  color: #000;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  line-height: 1.58;
}

/* --- Carrete --- */
.logos-band {
  --logo-h: min(6.5vw, 124.8px); /* 117px a 1800 */
  --logo-gap: min(9vw, 172.8px); /* 162px a 1800 */
  width: 100%;
  height: clamp(110px, min(19.722vw, 378.66px), 355px); /* 355px a 1800 */
  display: flex;
  align-items: center;
  background-color: #fff;
  overflow: hidden;
  /* Difuminado en los bordes para que los logos entren y salgan suaves */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 5% 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 5% 95%,
    transparent 100%
  );
}

.logos-marquee {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scrollMarquee 42s linear infinite;
}
.logos-marquee:hover { animation-play-state: paused; }

/* El padding-right repite el mismo hueco que hay entre logos, para que al
   repetirse el grupo (el JS lo duplica) el bucle sea continuo sin saltos. */
.marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
}

/* Cada logo tiene el ancho que le da el Figma y una altura común. Con
   `contain` la imagen nunca se deforma. */
.partner-logo {
  flex-shrink: 0;
  width: var(--lw, min(8vw, 153.6px));
  height: var(--logo-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* SIN filtro: los logos se muestran con el color original del archivo, tal
     cual vienen. (Antes llevaban grayscale + opacidad reducida.) */
  transition: transform 0.35s var(--ease-out-expo);
}
.partner-logo:hover img {
  transform: scale(1.06);
}

/* --- Alianzas en móvil: los logos salían a 25px de alto (6.5vw) y no se leían.
   Se agrandan. El ancho de cada logo (--lw) viene en línea desde el HTML, así
   que se escala con calc() sobre la propia variable para no perder el ajuste
   individual que cada uno necesita (varios tienen mucho relleno transparente). --- */
@media (max-width: 700px) {
  .logos-band {
    --logo-h: 46px;
    --logo-gap: 46px;
    height: 132px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6% 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6% 94%, transparent 100%);
  }
  .partner-logo {
    width: calc(var(--lw, 8vw) * 2.2);
    height: 46px;
  }
}

/* ==========================================================================
   SLIDER GENÉRICO (productos / categorías)
   ========================================================================== */
.slider-shell { position: relative; }

.slider-viewport {
  overflow: hidden;
  padding: 4px 4px 18px;
}

.slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.55s var(--ease-out-expo);
}

.slider-card {
  flex: 0 0 auto;
  width: calc((100% - 72px) / 4);
}

@media (max-width: 1399px) { .slider-card { width: calc((100% - 48px) / 3); } }
@media (max-width: 1023px) { .slider-card { width: calc((100% - 24px) / 2); } }
@media (max-width: 639px) { .slider-card { width: 100%; } }

.slider-arrows {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(32, 60, 127, 0.2);
  border-radius: 50%;
  background: #fff;
  color: var(--gapelli-blue);
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.slider-arrow:hover {
  background-color: var(--gapelli-blue);
  color: #fff;
  transform: translateY(-2px);
}
.slider-arrow svg { width: 20px; height: 20px; }

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background-color: var(--c-slate-300);
  transition: width 0.3s var(--ease-out-expo), background-color 0.3s;
}
.slider-dot.is-active {
  width: 26px;
  background-color: var(--gapelli-blue);
}

/* ==========================================================================
   TIMELINE (Calidad / trayectoria)
   ========================================================================== */
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gapelli-gold), rgba(206, 135, 38, 0.15));
}

.timeline-item {
  position: relative;
  padding: 0 0 34px 66px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gapelli-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gapelli-blue);
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 6px 16px -6px rgba(206, 135, 38, 0.5);
}

.timeline-year {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gapelli-gold);
  text-transform: uppercase;
}

.timeline-title {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 800;
  color: var(--gapelli-blue);
}

.timeline-desc {
  margin-top: 8px;
  color: var(--c-slate-600);
  font-size: 15px;
  line-height: 1.6;
}

.timeline-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 100px;
  background-color: rgba(32, 60, 127, 0.08);
  color: var(--gapelli-blue);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   PILARES / VALORES (Diseño exacto Figma)
   ========================================================================== */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 54px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
}

@media (max-width: 640px) {
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.pillar {
  position: relative;
  background-color: #ebeef0;
  border-radius: 20px;
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
  padding: 56px 28px 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}

.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0px 10px 16px 5px rgba(0, 0, 0, 0.18), 0px 4px 6px rgba(0, 0, 0, 0.25);
}

.pillar-num {
  position: absolute;
  top: -42px;
  left: 24px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: #ce8726;
  color: #ffffff;
  font-family: 'Geist', sans-serif;
  font-size: 42px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
  z-index: 3;
}

.pillar-content {
  display: flex;
  flex-direction: column;
}

.pillar h3 {
  font-family: 'Geist', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #203c7f;
  margin: 0 0 14px 0;
  line-height: 1.25;
}

.pillar p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   ACORDEÓN / INGREDIENTES (Área técnica)
   ========================================================================== */
/* .ingredient-card unificado más abajo */

.ingredient-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: none;
  background: transparent;
  text-align: left;
}

.ingredient-icon {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(32, 60, 127, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ingredient-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.ingredient-head-text { flex: 1; }
.ingredient-head-text h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--gapelli-blue);
}
.ingredient-head-text .brand {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gapelli-gold);
  text-transform: uppercase;
}

.ingredient-chevron {
  flex: none;
  color: var(--gapelli-blue);
  transition: transform 0.35s var(--ease-out-expo);
}
.ingredient-chevron svg { width: 22px; height: 22px; }
.ingredient-card.is-open .ingredient-chevron { transform: rotate(180deg); }

.ingredient-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-out-expo);
}
.ingredient-body-inner {
  padding: 4px 22px 24px;
}
.ingredient-body-inner p {
  color: var(--c-slate-600);
  font-size: 14.5px;
  line-height: 1.65;
}
.ingredient-body-inner .expanded {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--c-slate-50);
  white-space: pre-line;
}
.ingredient-body-inner .footer-note {
  margin-top: 12px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--c-slate-500);
}

/* ==========================================================================
   FORMULARIO DE CONTACTO
   ========================================================================== */
.contact-form-wrap {
  border-radius: 130px 36px 130px 36px;
  background: #ebeef0;
  padding: 48px 44px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
@media (max-width: 640px) {
  .contact-form-wrap {
    border-radius: 60px 20px 60px 20px;
    padding: 32px 20px;
  }
}

.form-field { margin-bottom: 20px; }

.form-field label {
  display: block;
  margin-bottom: 10px;
  color: #203c7f;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.form-field input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid #333678;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: #111827;
  background: transparent;
  outline: none;
  transition: all 0.2s;
}

.form-field textarea {
  width: 100%;
  min-height: 165px;
  padding: 16px 20px;
  border: 1px solid #333678;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: #111827;
  background: transparent;
  outline: none;
  resize: vertical;
  transition: all 0.2s;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #6b7280;
  font-weight: 300;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.92);
  border-color: #203c7f;
  box-shadow: 0 0 0 3px rgba(32, 60, 127, 0.15);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; gap: 16px; } }

.form-submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.btn-contact-submit {
  height: 56px;
  padding: 0 52px;
  background-color: #203c7f;
  border: 1px solid #ffffff;
  border-radius: 30px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 8px 20px rgba(32, 60, 127, 0.25);
}

.btn-contact-submit:hover {
  background-color: #182e63;
  transform: translateY(-2px);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(15, 23, 42, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 42px 36px 36px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  text-align: center;
  box-shadow: 0 25px 60px -15px rgba(32, 60, 127, 0.35);
  animation: popIn 0.3s var(--ease-out-expo);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}
.modal-close:hover { background: var(--c-slate-100); color: var(--c-slate-700); }

.modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-title {
  color: var(--gapelli-blue);
  font-size: 24px;
  font-weight: 800;
}
.modal-message {
  margin-top: 12px;
  color: var(--c-slate-600);
  font-size: 15px;
  line-height: 1.6;
}

/* ==========================================================================
   BOTÓN FLOTANTE
   ========================================================================== */
.floating-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  /* Circular: solo el icono, sin texto */
  border-radius: 50%;
  background-color: #203c7f;
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(32, 60, 127, 0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease-out-expo), background-color 0.25s;
}
.floating-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floating-btn.is-hidden { opacity: 0; visibility: hidden; }
.floating-btn:hover { transform: translateY(-3px); background-color: #172d61; }

.floating-btn .pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(32, 60, 127, 0.55);
  animation: pulseRing 2s infinite;
}
.floating-btn svg { width: 26px; height: 26px; }

/* ==========================================================================
   FILTROS DE CATÁLOGO
   ========================================================================== */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.filter-chip {
  padding: 10px 20px;
  border: 1.5px solid rgba(32, 60, 127, 0.18);
  border-radius: 100px;
  background: #fff;
  color: var(--gapelli-blue);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.filter-chip:hover { transform: translateY(-2px); }
.filter-chip.is-active {
  background-color: var(--gapelli-blue);
  border-color: var(--gapelli-blue);
  color: #fff;
}

/* Categoría del catálogo */
.catalog-group { margin-bottom: 48px; }
.catalog-group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--c-slate-100);
}
.catalog-group-head .cat-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-gray-50);
  flex: none;
}
.catalog-group-head .cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-group-head h3 {
  font-size: 24px;
  font-weight: 800;
}
.product-tag {
  display: inline-block;
  padding: 12px 18px;
  margin: 6px;
  border-radius: 100px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  color: var(--c-slate-700);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.25s, color 0.25s, transform 0.25s, background-color 0.25s;
}
.product-tag:hover {
  border-color: var(--gapelli-gold);
  color: var(--gapelli-blue);
  background: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   CALIDAD
   ========================================================================== */
.cert-desc {
  max-width: 860px;
  margin: 0 auto clamp(32px, min(4vw, 76.8px), 48px);
  text-align: center;
  color: var(--c-slate-600);
  font-size: 17px;
  line-height: 1.7;
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
}
.cert-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.cert-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}
.cert-img:hover img { transform: scale(1.05); }
.cert-seals {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, min(4vw, 76.8px), 60px);
  margin-top: 44px;
}
.seal {
  width: clamp(120px, min(14vw, 268.8px), 190px);
}
.seal img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 768px) {
  .cert-grid { grid-template-columns: 1fr; }
}

.pillar--cta {
  align-items: center;
  background: linear-gradient(135deg, var(--gapelli-blue), var(--gapelli-blue-dark));
  color: #fff;
}
.pillar--cta h3 { color: #fff; }
.pillar--cta p { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: stretch;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1200px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

#contacto .section-title {
  color: #251e48;
  font-family: var(--font-display);
  font-size: clamp(34px, min(4vw, 76.8px), 52px);
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
  margin: 0 0 12px;
}

#contacto .section-subtitle {
  color: #4b5563;
  font-family: var(--font-sans);
  font-size: clamp(16px, min(1.4vw, 26.88px), 20px);
  font-weight: 500;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.contact-info-panel {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 36px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
}
@media (max-width: 640px) {
  .contact-info-panel {
    border-radius: 28px;
    padding: 32px 20px;
  }
}

.contact-info-panel h3 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: #203c7f;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
}
@media (max-width: 640px) {
  .contact-info-panel h3 { font-size: 26px; }
}

.contact-info-sub {
  margin: 0 0 32px;
  color: #4b5563;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.channel {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 26px;
  border-radius: 45px;
  background-color: #203c7f;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(32, 60, 127, 0.22);
  transition: all 0.22s;
}
@media (max-width: 640px) {
  .channel { gap: 14px; padding: 12px 18px; }
}

a.channel:hover {
  background-color: #182e63;
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(32, 60, 127, 0.32);
}

.channel-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.channel-icon svg { width: 28px; height: 28px; color: #ffffff; }

.channel-text { display: flex; flex-direction: column; }
.channel-text strong {
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}
.channel-text span {
  color: #e0e7ff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
}

.channel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ==========================================================================
   ÁREA TÉCNICA
   ========================================================================== */
#categorias .grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.mini-cat {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 90px 16px 16px 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 4px 20px rgba(32, 60, 127, 0.08);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
}

button.mini-cat {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.mini-cat.is-active {
  box-shadow: 0 0 0 4px #ce8726, 0 10px 30px rgba(206, 135, 38, 0.4);
  transform: translateY(-4px);
}

.mini-cat.is-active span {
  background-color: #ce8726;
}

.mini-cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 90px 16px 16px 16px;
  transition: transform 0.7s var(--ease-out-expo);
}

.mini-cat:hover img {
  transform: scale(1.06);
}

.mini-cat::after {
  content: none;
}

.mini-cat span {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background-color: #203c7f;
  border-radius: 0px 24px 24px 0px;
  padding: 12px 24px 12px 18px;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.2vw, 23.04px), 22px);
  font-weight: 500;
  transition: background-color 0.3s ease;
  /* Estas tres propiedades se habian quedado sin selector (bloque huerfano).
     Pertenecen a la etiqueta de .mini-cat. */
  text-align: left;
  line-height: 1.1;
  box-shadow: 0 4px 15px rgba(32, 60, 127, 0.2);
}

@media (max-width: 1200px) {
  #categorias .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  #categorias .grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  #categorias .grid-5 {
    grid-template-columns: 1fr;
  }
}

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 1024px) {
  .ingredients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .ingredients-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 1. Tarjeta Contenedor (Alto fijo 440px, radio 20px, overflow hidden) */
.ingredient-card {
  position: relative;
  height: 440px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0px 4px 25px 5px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 8px 30px 5px rgba(0, 0, 0, 0.22);
}

/* 2. Imagen de Portada (Media) - 250px de alto fija en la parte superior */
.ingredient-card-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.ingredient-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-card:hover .ingredient-card-img {
  transform: scale(1.05);
}

/* 3. Panel Gris Deslizable (.ingredient-card-body)
   En estado cerrado: top: 214px (calc(100% - 226px)), height: 226px.
   En estado abierto (.is-open): top: 0, height: 100%.
   Transición fluida con cubic-bezier(0.16, 1, 0.3, 1). */
.ingredient-card-body {
  position: absolute;
  top: calc(100% - 226px);
  left: 0;
  width: 100%;
  height: 226px;
  padding: 28px 32px 18px 32px;
  border-radius: 20px;
  background-color: #ebeef0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 2;
  transition: top 0.45s cubic-bezier(0.16, 1, 0.3, 1), height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-card.is-open .ingredient-card-body {
  top: 0;
  height: 100%;
}

/* 4. Insignia e Icono (.ingredient-icon-badge & .icon-circle)
   En estado cerrado:
   - Badge exterior gris (frame-item): 92px x 92px, top: -46px, right: 40px.
     El centro del círculo (-46px) queda JUSTO en la línea superior del panel gris (#ebeef0).
   - Círculo interior azul (frame-inner): 77px x 77px, background: #203c7f.
   - Imagen del icono: max-width 46px, max-height 54px.

   En estado abierto (.is-open):
   - Badge exterior gris: se acopla arriba a la derecha (72px x 72px, top: 20px, right: 24px).
   - Círculo interior azul: 60px x 60px.
   - Imagen del icono: max-width 36px, max-height 42px. */
.ingredient-icon-badge {
  position: absolute;
  top: -46px;
  right: 40px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background-color: #ebeef0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: top 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              right 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-card.is-open .ingredient-icon-badge {
  top: 20px;
  right: 24px;
  width: 72px;
  height: 72px;
}

.icon-circle {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  background-color: #203c7f;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-card.is-open .icon-circle {
  width: 60px;
  height: 60px;
}

.icon-circle img {
  width: 46px;
  height: 54px;
  object-fit: contain;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-card.is-open .icon-circle img {
  width: 36px;
  height: 42px;
}

/* 5. Título de la tarjeta y marca */
.ingredient-card-title-wrap {
  margin-bottom: 6px;
  padding-right: 85px; /* Espacio para que el título no choque con la insignia de 92px */
}

.ingredient-card-title {
  font-family: 'Geist', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #203c7f;
  margin: 0;
  line-height: 1.2;
}

.brand-tag {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #203c7f;
}

/* 6. Contenido en estado cerrado vs abierto */
.collapsed-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-card.is-open .collapsed-content {
  display: none !important;
  opacity: 0;
}

.ingredient-card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #000000;
  line-height: 1.4;
  margin: 4px 0 0 0;
  max-width: 90%;
}

.click-hint {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #203c7f;
  margin-top: auto;
  padding-bottom: 4px;
}

/* 7. Contenido detallado desplegado (.ingredient-details-content & .scrollable-body) */
.ingredient-details-content {
  display: none;
  opacity: 0;
  flex: 1;
  margin-top: 12px;
  overflow: hidden;
  transition: opacity 0.35s ease 0.1s;
}

.ingredient-card.is-open .ingredient-details-content {
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.scrollable-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #000000;
  overflow-y: auto;
  padding-right: 12px;
  max-height: 330px;
  flex: 1;
}

.scrollable-body p {
  margin: 0 0 10px 0;
}

.scrollable-body p strong {
  font-weight: 700;
  color: #203c7f;
}

.scrollable-body::-webkit-scrollbar {
  width: 5px;
}
.scrollable-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.scrollable-body::-webkit-scrollbar-thumb {
  background: #203c7f;
  border-radius: 4px;
}

/* 8. Botón circular azul (#203c7f) con flechita blanca centrado */
.ingredient-card-arrow {
  position: absolute;
  bottom: 18px;
  right: 28px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #203c7f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(32, 60, 127, 0.25);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 4;
}

.ingredient-card-arrow svg {
  width: 14px;
  height: 14px;
  stroke: #ffffff;
  stroke-width: 3.5;
}

.ingredient-card.is-open .ingredient-card-arrow {
  transform: rotate(180deg);
}

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.logo-center-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  height: 80%;
  margin: auto;
  padding: 0 24px;
  pointer-events: none;
}
.logo-centrado {
  width: 100%;
  max-width: 440px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.22));
}
@media (max-width: 1023px) {
  .logo-center-container { max-width: 240px; height: 100%; }
  .logo-centrado { max-width: min(200px, min(48vw, 921.6px)); }
}

/* --- Nuestra Historia (medidas del Figma, marco 1705 × 663) ---
   Reparto: collage 873 · hueco 61 · texto 771  (suma 1705)
     collage = imagen grande 530 + hueco 40 + columna 303
   Los anchos van en % del contenedor PADRE correspondiente. Ojo: el `gap` en %
   de un flex resuelve contra su PROPIO contenedor, no contra el de fuera, así
   que cada uno lleva su porcentaje calculado a mano.
   Las alturas van por aspect-ratio, así siguen al ancho solas. */
.history-layout {
  display: flex;
  align-items: flex-start;
  gap: 3.578%; /* 61 / 1705 */
  width: 100%;
  /* 1705 de contenido + 40 de padding. Con box-sizing: border-box y el tope en
     1745 el contenido mide exactamente 1705 en pantallas anchas y por debajo
     se encoge sin desbordar. Antes iba con content-box y max-width: 1705, así
     que el ancho real era 1705 + 40 = 1745 y en cualquier pantalla más
     estrecha que eso se salía por la derecha (el overflow-x: clip de <html> lo
     recortaba, por eso no se veía la barra, pero se cortaba el texto). */
  max-width: 1745px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.history-collage {
  flex: none;
  display: flex;
  gap: 4.582%; /* 40 / 873 */
  width: 51.202%; /* 873 / 1705 */
}

/* Imagen grande 530×652 con la curva abajo-izquierda (268px) */
.collage-a {
  flex: none;
  width: 60.71%; /* 530 / 873 */
  aspect-ratio: 530 / 652;
  margin-top: min(0.611vw, 11.73px); /* el Figma la baja 11px */
  border-radius: 0 0 0 min(14.889vw, 285.87px); /* 268px */
  overflow: hidden;
}

.collage-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* separación vertical: en % no funciona (el alto es indefinido), va en vw */
  gap: min(2.167vw, 41.61px); /* 39px */
}

/* Arriba 303×286 con la curva arriba-izquierda (93px) */
.collage-c {
  aspect-ratio: 303 / 286;
  border-radius: min(5.167vw, 99.21px) 0 0 0; /* 93px */
  overflow: hidden;
}

/* Abajo 303×338 con la curva abajo-derecha (153px) */
.collage-b {
  aspect-ratio: 303 / 338;
  border-radius: 0 0 min(8.5vw, 163.2px) 0; /* 153px */
  overflow: hidden;
}

.collage-a img,
.collage-b img,
.collage-c img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La tarjeta del logo (Rectangle 8) es una imagen con fondo blanco y el logo
   centrado: con `cover` se recortaba el logo, así que va con `contain` para
   que se vea completo, igual que en el Figma. */
.collage-c img {
  object-fit: contain;
  background-color: #fff;
}

.history-copy { width: 45.220%; /* 771 / 1705 */ }

.history-title {
  margin: 0;
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(30px, min(3.556vw, 68.28px), 64px);
  font-weight: 700;
  line-height: 1.28;
}

.history-text {
  /* el título ocupa 82px (64 × 1.28) y el texto arranca en y=105 del Figma */
  margin-top: clamp(10px, min(1.278vw, 24.54px), 23px);
}

.history-text p {
  margin: 0 0 clamp(10px, min(0.889vw, 17.07px), 16px);
  color: #000;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  line-height: 1.5;
}
.history-text p:last-child { margin-bottom: 0; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .history-layout {
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
  }
  .history-collage { width: 100%; }
  .history-copy { width: 100%; }
  .collage-a { margin-top: 0; }
}

@media (max-width: 640px) {
  .history-collage { flex-direction: column; gap: 16px; }
  .collage-a {
    width: 100%;
    height: min(70vw, 1344px);
    aspect-ratio: auto;
    border-radius: 0 0 0 min(28vw, 537.6px);
  }
  .collage-col { flex-direction: row; gap: 16px; }
  .collage-c,
  .collage-b { flex: 1; height: min(46vw, 883.2px); aspect-ratio: auto; }
  .collage-c { border-radius: min(14vw, 268.8px) 0 0 0; }
  .collage-b { border-radius: 0 0 min(14vw, 268.8px) 0; }
}
/* ==========================================================================
   FILOSOFÍA / MISIÓN / VISIÓN
   Medidas del Figma (marco 1543):
     3 tarjetas de 440 con 107px de separación
     imagen 440×410, curva grande ARRIBA-IZQUIERDA de 153px (las otras 20px)
     píldora translúcida 204×43 pegada al borde izquierdo, a 45px de arriba
     tarjeta blanca 440×123 con margin-top: -33px (se solapa con la imagen)
   ========================================================================== */
.fmv-section { background-color: #fff; }

.fmv-container {
  width: min(85.222vw, 1636.26px); /* 1534px = 3 × 440 + 2 × 107 */
  max-width: 1534px;
  margin: 0 auto;
}

.fmv-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: min(5.944vw, 114.12px); /* 107px */
}

.fmv-card {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Imagen 440×410 --- */
.fmv-media {
  position: relative;
  width: 100%;
  height: min(22.778vw, 437.34px); /* 410px */
  max-height: 410px;
  /* 153px 20px 20px = curva grande arriba-izquierda */
  border-radius: min(8.5vw, 163.2px) min(1.111vw, 21.33px) min(1.111vw, 21.33px);
  overflow: hidden;
}

.fmv-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out-expo);
}
.fmv-card:hover .fmv-media img { transform: scale(1.04); }

/* --- Píldora con el nombre (cristal) ---
   Va como hermana de .fmv-media dentro de .fmv-card, por eso `left: 0` la deja
   pegada al borde de la imagen sin que la recorte su overflow:hidden. */
.fmv-pill {
  position: absolute;
  top: min(2.5vw, 48px); /* 45px */
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(11.333vw, 217.59px); /* 204px */
  height: min(2.389vw, 45.87px); /* 43px */
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.28);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s;
}
.fmv-card:hover .fmv-pill {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Brillo dentro de la píldora (a la izquierda) */
.fmv-pill-glow {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: min(2.111vw, 40.53px); /* 38px */
  height: min(2.111vw, 40.53px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.45) 35%,
    rgba(255, 255, 255, 0) 72%
  );
  pointer-events: none;
}

.fmv-pill-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(16px, min(1.778vw, 34.14px), 32px);
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* --- Tarjeta blanca con la descripción (se solapa 33px) --- */
.fmv-text {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: min(6.833vw, 131.19px); /* 123px */
  margin: -min(1.833vw, 35.19px) 0 0; /* -33px */
  padding: min(1.111vw, 21.33px) min(1.333vw, 25.59px); /* 20px 24px */
  background-color: #fff;
  border-radius: min(1.111vw, 21.33px); /* 20px */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  color: #000;
  font-family: var(--font-sans);
  font-size: clamp(13px, min(1vw, 19.2px), 18px);
  font-weight: 300;
  line-height: 1.48;
  text-align: center;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .fmv-container {
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .fmv-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
  }
  .fmv-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
  }
  .fmv-media {
    height: auto;
    aspect-ratio: 440 / 410;
    max-height: none;
    border-radius: 90px 18px 18px;
  }
  .fmv-pill {
    top: 20px;
    width: 160px;
    height: 40px;
  }
  .fmv-pill-glow { width: 34px; height: 34px; }
  .fmv-pill-text { font-size: 21px; }
  .fmv-text {
    min-height: 0;
    margin-top: -24px;
    padding: 18px 20px;
    border-radius: 16px;
    font-size: 15px;
    box-shadow: 0 8px 24px -4px rgba(32, 60, 127, 0.1);
  }
}
/* Valores */
.values-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
}
.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex: 1;
  padding: 16px 8px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out-expo);
}
.value-item:hover { transform: translateY(-6px); }
.value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.value-icon img { max-height: 80px; width: auto; }
.value-label {
  color: var(--gapelli-gold);
  text-align: center;
  letter-spacing: -0.3px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  transition: color 0.3s, transform 0.3s;
}
.value-item:hover .value-label { color: #b5741e; transform: scale(1.03); }

@media (max-width: 1023px) {
  .values-grid { flex-wrap: wrap; justify-content: center; gap: 40px 24px; }
  .value-item { flex: 0 0 30%; min-width: 180px; }
  .value-label { font-size: 28px; }
}
@media (max-width: 640px) {
  .values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 440px; margin: 0 auto; }
  .value-item { flex: unset; background: #fff; border: 1px solid rgba(32, 60, 127, 0.08); gap: 10px; padding: 16px 12px 14px; box-shadow: 0 4px 14px -3px rgba(32, 60, 127, 0.06); }
  .value-icon { height: 52px; }
  .value-icon img { max-height: 52px; }
  .value-label { font-size: 17px; }
}

/* ==========================================================================
   SOSTENIBILIDAD
   Medidas del Figma (marco 1556 × 626):
     contenedor 1556 · columna de texto 614 · imagen 893 × 626 pegada a la derecha
     hueco entre columnas 48 (real: 49, porque la imagen topa en su max-width)
     rótulo "Sostenibilidad" 64px Geist 700 dorado · line-height 1.1
     título 40px Geist 900 #203C7F · line-height 1.2 · letter-spacing -0.5px
     párrafo 24px Plus Jakarta Sans 500 · line-height 1.5 · ancho 553
     imagen con la curva grande ABAJO-IZQUIERDA (313px), las otras tres 16px
   El párrafo va a 553px de ancho y no a 614 (el ancho de la columna): el Figma
   lo marca así a propósito, para que la medida de línea sea más cómoda.
   ========================================================================== */
.sustainability-section {
  background-color: #fff;
  padding: clamp(28px, min(2.778vw, 53.34px), 50px) 0 clamp(48px, min(6.111vw, 117.33px), 110px); /* 50 / 110 */
  overflow: hidden;
}

.sus-container {
  width: min(86.444vw, 1659.72px); /* 1556px */
  max-width: 1556px;
  margin: 0 auto;
}

.sus-layout {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(2.667vw, 51.21px); /* 48px */
  min-height: min(34.778vw, 667.74px); /* 626px */
  font-family: var(--font-display);
  text-align: left;
}

/* --- Columna de texto (614px) ---
   El Figma NO centra el texto en vertical: lo ancla arriba, con el rótulo a
   17px del borde superior de la imagen. Los tres `top` del Figma son
   17 (rótulo) · 117 (título) · 239 (párrafo), y los márgenes de abajo están
   calculados para que el texto renderizado caiga EXACTAMENTE en esos valores
   (alto real medido en navegador: rótulo 70.4 · título 96 · párrafo 251.9):
     17 + 70.4 + 29.6 = 117      117 + 96 + 26 = 239
   Si cambias el ancho de la columna y el título pasa a 1 o 3 líneas, hay que
   recalcular los dos márgenes. */
.sus-copy {
  position: relative;
  z-index: 2;
  flex: 0 0 45%;
  max-width: min(34.111vw, 654.93px); /* 614px */
  align-self: flex-start;
  padding-top: min(0.944vw, 18.12px); /* 17px */
  display: flex;
  flex-direction: column;
}

.sus-badge {
  display: block;
  margin: 0 0 min(1.644vw, 31.56px); /* 29.6px → el título cae en y=117 */
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(28px, min(3.556vw, 68.28px), 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.sus-title {
  margin: 0 0 min(1.444vw, 27.72px); /* 26px → el párrafo cae en y=239 */
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(19px, min(2.222vw, 42.66px), 40px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.sus-text {
  max-width: min(30.722vw, 589.86px); /* 553px */
  margin: 0;
  color: #1a1a1a;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.333vw, 25.59px), 24px);
  font-weight: 500;
  line-height: 1.5;
}

/* --- Imagen (893 × 626, pegada al borde derecho del contenedor) ---
   `flex: 1` la hace crecer hasta su max-width; el sobrante de 1px lo reparte
   el space-between, así que queda exactamente en x=663 como en el Figma.
   El `height` fijo es el del componente original: la imagen NO es cuadrada,
   se recorta con object-fit: cover. */
.sus-media {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: min(49.611vw, 952.53px); /* 893px */
  height: min(34.778vw, 667.74px); /* 626px */
}

.sus-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Orden TL TR BR BL → la curva grande de 313px va abajo-izquierda */
  border-radius: min(0.889vw, 17.07px) min(0.889vw, 17.07px) min(0.889vw, 17.07px) min(17.389vw, 333.87px); /* 16 16 16 313 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* --- Responsive: en pantallas menores se apilan --- */
@media (max-width: 1024px) {
  .sus-container {
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .sus-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    min-height: 0;
  }
  .sus-copy { flex: none; max-width: 100%; }
  .sus-badge { margin-bottom: 12px; font-size: 34px; }
  .sus-title { margin-bottom: 16px; font-size: 26px; }
  .sus-text { max-width: 100%; font-size: 16px; line-height: 1.55; }
  .sus-media {
    max-width: 100%;
    height: auto;
    aspect-ratio: 893 / 626;
  }
  .sus-media img { border-radius: 16px 16px 16px 120px; }
}

@media (max-width: 640px) {
  .sus-badge { font-size: 28px; }
  .sus-title { font-size: 22px; }
  .sus-text { font-size: 15px; }
  .sus-media img { border-radius: 14px 14px 14px 80px; }
}

/* ==========================================================================
   SERVICIOS — HERO "20 AÑOS"
   Medidas del Figma (marco 1903 × 993, de las que 0–80 son la cabecera):
     imagen 1903 × 913 a sangre (top 80 = justo debajo del header)
     panel gris 1819 de ancho, borde derecho en x=1957 (54 fuera del marco, se
       recorta) y borde izquierdo en x=138. Va girado 180°, así que el degradado
       queda sólido a la DERECHA y se desvanece hacia la IZQUIERDA.
     bloque de texto: x 987 → 1860 (873 de ancho), rótulos a 118 / 272 / 448
       desde el borde superior de la imagen
     "20" 140px · "años" 100px · título 64px · párrafo 24px (todo Geist 700
     menos el párrafo, que es Plus Jakarta Sans 500)
   El marco está calibrado a 1800px de ancho, así que cada px del Figma son
   min(0.052553vw, 1.01px) (≈ ÷19.03). El hero va a sangre: su ancho es min(100vw, 1920px).
   ========================================================================== */
.sh-section {
  /* El <section> y .sh-hero son elementos distintos: sin esto la curva
     decorativa se posicionaba contra un ancestro lejano y no se veia. */
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.sh-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1903 / 913;
  overflow: hidden;
  background-color: #ebeef0;
}

.sh-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center; /* igual que el componente original */
  pointer-events: none;
}

/* --- Panel gris: sólido a la derecha, se desvanece hacia la izquierda ---
   En el Figma esta capa está girada 180°, así que su degradado (que va de
   izquierda a derecha en el archivo) se lee al revés en pantalla. En vez de
   rotar nada lo escribo ya en el sentido final: 270deg = de derecha a
   izquierda, opaco en el borde derecho (0%) y desvanecido al 55%.
   La caja llega a x=1957, 54px más allá del marco: el overflow del hero la
   recorta, exactamente igual que en el Figma. */
.sh-panel {
  position: absolute;
  top: 0;
  left: 7.2533%; /* 138 / 1903 */
  width: 95.586%; /* 1819 / 1903 */
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    270deg,
    #ebeef0 0%,
    rgba(235, 238, 240, 0.06) 55%
  );
  pointer-events: none;
}

/* --- Bloque de texto: x 987 → 1860 (873 de ancho) --- */
.sh-text {
  position: absolute;
  left: 51.866%; /* 987 / 1903 */
  right: 2.2596%; /* 43 / 1903 */
  top: min(6.201vw, 119.06px); /* 118px */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* "20 años": alineados por la base, como en el componente original */
.sh-years {
  display: flex;
  align-items: baseline;
  gap: min(0.894vw, 17.16px); /* 17px — el hueco del componente original (14px) escalado */
  line-height: 1.1;
}

.sh-num {
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(60px, min(7.357vw, 141.25px), 140px); /* 140px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -2px;
}

.sh-unit {
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(42px, min(5.255vw, 100.9px), 100px); /* 100px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
}

/* Título dorado: en el Figma arranca justo donde acaba el bloque "20 años",
   por eso no lleva margen superior. El salto de línea es fijo (el Figma lo
   trae con <br/>), así que el ancho del bloque no lo condiciona. */
.sh-title {
  margin: 0;
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(26px, min(3.363vw, 64.57px), 64px); /* 64px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.sh-sub {
  /* el párrafo arranca en y=448 del Figma; el margen está calculado para que
     el texto renderizado caiga exactamente ahí (caja del título: 147.2px) */
  margin: min(1.513vw, 29.05px) 0 0; /* 28.8px */
  color: #203c7f;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.261vw, 24.21px), 24px); /* 24px */
  font-weight: 500;
  line-height: 1.5;
}

/* --- Responsive: el marco 1903×913 es demasiado plano para pantallas
   pequeñas, así que el texto pasa a flujo normal (relativo) y la imagen y el
   panel se quedan detrás en absoluto. Es el mismo planteamiento que usa el
   componente original en móvil. --- */
@media (max-width: 1024px) {
  .sh-hero {
    aspect-ratio: auto;
    min-height: 0;
  }
  .sh-image { object-position: center; }
  .sh-panel {
    left: 0;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(235, 238, 240, 0.15) 0%,
      rgba(235, 238, 240, 0.9) 45%,
      #ebeef0 72%
    );
  }
  .sh-text {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    align-items: center;
    text-align: center;
    padding: min(40vw, 499.2px) 22px 46px;
  }
  .sh-years { gap: 10px; }
  .sh-num { font-size: 78px; }
  .sh-unit { font-size: 56px; }
  .sh-title { font-size: 38px; margin-top: 6px; }
  .sh-sub { font-size: 17px; margin-top: 16px; max-width: 620px; }
  .sh-title br { display: none; }
}

@media (max-width: 640px) {
  .sh-text { padding: min(46vw, 652.8px) 20px 40px; }
  .sh-num { font-size: 58px; }
  .sh-unit { font-size: 42px; }
  .sh-title { font-size: 28px; }
  .sh-sub { font-size: 15.5px; }
}

/* ==========================================================================
   SERVICIOS — ÁREAS (Almacén / Área de mezclado)
   Medidas del Figma (marco 1996 × 909, fondo blanco):
     contenido 1422 de ancho, centrado → 288 a cada lado (el Figma marca 288)
     2 tarjetas de 653 × 451 con 116 de separación y radio 35
     degradado de la tarjeta: linear-gradient(180deg, rgba(51,54,120,0) 52%, #333678 100%)
     rótulo blanco 40px Geist 900 centrado, a 81px del borde inferior
     botón 328 × 60, radio 30, #CE8726 con borde blanco, texto 24px Jakarta 500,
     separado 69px de las tarjetas
   Comprobación del centrado: (1996 − 1422) / 2 = 287 ≈ los 288 del Figma, y el
   botón queda centrado en 998 = 1996/2. Por eso el marco son 1996 y no los 1936
   del alto del degradado de fondo (ese número no cuadra con nada más).
   El fondo es BLANCO: coincide con el CSS del componente original
   (background-color:#fff) y con la captura de referencia.
   La cara TRASERA (volteo) no está en el Figma; va con el CSS del componente
   original, que es donde vive el contenido de beneficios del CMS.
   ========================================================================== */
.sa-section {
  position: relative;
  z-index: 5;
  margin-top: clamp(-100px, -min(6vw, 115.2px), -60px);
  padding: clamp(70px, min(8vw, 153.6px), 130px) 0 min(7.064vw, 135.63px);
  overflow: hidden;
}

.sa-inner {
  width: min(71.243vw, 1367.87px); /* 1422px */
  max-width: 1422px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(3.457vw, 66.37px); /* 69px entre tarjetas y botón */
}

.sa-row {
  display: flex;
  justify-content: space-between;
  gap: 8.158%; /* 116 / 1422 */
  width: 100%;
}

/* --- Tarjeta con volteo --- */
.sa-card {
  position: relative;
  flex: 0 1 45.921%; /* 653 / 1422 */
  height: min(22.595vw, 433.82px); /* 451px */
  max-height: 451px;
  perspective: 1400px;
  cursor: pointer;
  border-radius: min(1.754vw, 33.68px); /* 35px */
  outline: none;
}
.sa-card:focus-visible { box-shadow: 0 0 0 3px rgba(32, 60, 127, 0.35); }

.sa-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  box-shadow: 0 12px 36px rgba(32, 60, 127, 0.12);
  transition: transform 0.85s cubic-bezier(0.2, 0.85, 0.4, 1.15), box-shadow 0.4s;
}
.sa-card.is-flipped .sa-flipper {
  transform: rotateY(180deg);
  box-shadow: 0 22px 50px rgba(32, 60, 127, 0.28);
}
/* El volteo al pasar el cursor solo donde existe cursor: en táctil dejaría la
   tarjeta girada sin forma de devolverla. */
@media (hover: hover) {
  .sa-card:hover .sa-flipper {
    transform: rotateY(180deg);
    box-shadow: 0 22px 50px rgba(32, 60, 127, 0.28);
  }
}

.sa-front,
.sa-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sa-front { z-index: 2; }
.sa-back {
  z-index: 1;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 34px;
  text-align: left;
  color: #fff;
  background: linear-gradient(145deg, #172d61 0%, #203c7f 55%, #101c38 100%);
  border: 2px solid rgba(206, 135, 38, 0.45);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.25);
}

/* --- Cara frontal --- */
.sa-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out-expo);
}
.sa-card:hover .sa-img { transform: scale(1.04); }

/* Degradado exacto del Figma */
.sa-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(51, 54, 120, 0) 52%, #333678 100%);
  pointer-events: none;
}

/* Aviso de que la tarjeta se voltea */
.sa-hint {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  background-color: rgba(23, 45, 97, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sa-card.is-flipped .sa-hint,
.sa-card:hover .sa-hint { opacity: 0; }
.sa-hint svg { width: 16px; height: 16px; }

.sa-title {
  position: absolute;
  left: 0;
  bottom: min(1.754vw, 33.68px); /* 35px → el texto cae a 81px del borde inferior */
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 min(1.002vw, 19.24px); /* 20px */
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(24px, min(2.004vw, 38.48px), 40px); /* 40px */
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* --- Cara trasera: contenido de beneficios del CMS --- */
.sa-back-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sa-tag {
  padding: 5px 14px;
  border: 1px solid rgba(206, 135, 38, 0.35);
  border-radius: 20px;
  background-color: rgba(206, 135, 38, 0.15);
  color: #ce8726;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sa-back-icon { display: flex; color: rgba(255, 255, 255, 0.6); }
.sa-back-icon svg { width: 18px; height: 18px; }

.sa-back-title {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.sa-back-desc {
  margin: 0 0 14px;
  color: #e2e8f0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.sa-divider {
  width: 100%;
  height: 1px;
  margin: 0 0 14px;
  background: linear-gradient(90deg, rgba(206, 135, 38, 0.7) 0%, rgba(206, 135, 38, 0.1) 100%);
}
.sa-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sa-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #f8fafc;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
.sa-benefits svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: #ce8726;
}

/* --- Botón --- */
.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(16.433vw, 315.51px); /* 328px */
  max-width: 328px;
  height: min(3.006vw, 57.72px); /* 60px */
  max-height: 60px;
  min-height: 44px;
  border: 1.5px solid #fff;
  border-radius: min(1.503vw, 28.86px); /* 30px */
  background-color: #ce8726;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.202vw, 23.08px), 24px); /* 24px */
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(206, 135, 38, 0.35);
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sa-btn:hover {
  background-color: #b7761f;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(206, 135, 38, 0.45);
}
.sa-btn:active { transform: translateY(1px); }

/* --- Responsive: en pantallas menores las tarjetas se apilan --- */
@media (max-width: 1024px) {
  .sa-section { padding: clamp(36px, min(5vw, 96px), 70px) 20px clamp(34px, min(4.5vw, 86.4px), 64px); }
  .sa-inner { width: 100%; max-width: 620px; gap: 32px; }
  .sa-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .sa-card {
    flex: none;
    width: 100%;
    max-width: 520px;
    /* El alto lo manda la cara TRASERA: con 66vw (274px a 360) el contenido de
       beneficios (365px) se cortaba. Este clamp lo deja caber entero. */
    height: clamp(440px, 118vw, 490px);
    /* Sin esto seguia mandando el max-height: 451px de la regla de escritorio. */
    max-height: none;
    border-radius: 26px;
  }
  .sa-title { bottom: 20px; padding: 0 18px; font-size: 26px; }
  .sa-back { padding: 24px 26px; border-radius: 26px; }
  .sa-back-title { font-size: 19px; }
  .sa-back-desc { font-size: 13.5px; margin-bottom: 10px; }
  .sa-benefits { gap: 7px; }
  .sa-benefits li { font-size: 13px; gap: 8px; }
  .sa-btn { width: 100%; max-width: 328px; height: 54px; font-size: 20px; border-radius: 27px; }
}

@media (max-width: 640px) {
  .sa-card { height: clamp(480px, 132vw, 500px); }
  .sa-title { font-size: 22px; }
  .sa-back { padding: 20px 20px; overflow-y: auto; }
  .sa-back-title { font-size: 17px; }
  .sa-back-desc { font-size: 12.5px; }
  .sa-benefits li { font-size: 12px; }
  .sa-tag { font-size: 11px; padding: 4px 11px; }
  .sa-hint { top: 12px; right: 12px; padding: 5px 11px; font-size: 11.5px; }
}

/* ==========================================================================
   SERVICIOS — NUESTROS CENTROS DE DISTRIBUCIÓN (visión general)
   Medidas del componente original (a 1800px, todo ÷18 para pasarlo a vw):
     sección con padding 60/110 · panel gris #EBEEF0 de 702 de alto pegado a
       la derecha, esquinas IZQUIERDAS redondeadas 35px
     imagen 48% (máx. 932) × 628 con la curva grande ABAJO-DERECHA (313px)
     texto 52% con padding-left 70 · título dorado 54 · párrafos 20 azul
     botón azul 280×56 radio 30 con borde blanco al 50%
   ========================================================================== */
.cd-section {
  position: relative;
  background-color: #fff;
  padding: min(3.333vw, 63.99px) 0 min(6.111vw, 117.33px); /* 60 / 110 */
  overflow: hidden;
}

/* Panel gris: arranca a la altura del 36% del ancho (o 50% − 180px, el que sea
   mayor) y llega hasta el borde derecho. */
.cd-grey {
  position: absolute;
  top: 50%;
  left: max(36%, calc(50% - 180px));
  right: 0;
  z-index: 1;
  height: min(39vw, 748.8px); /* 702px */
  background-color: #ebeef0;
  border-radius: min(1.944vw, 37.32px) 0 0 min(1.944vw, 37.32px); /* 35px a la izquierda */
  transform: translateY(-50%);
}

.cd-inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(95.556vw, 1834.68px); /* 1720px */
  max-width: 1720px;
  margin: 0 auto;
  padding-left: min(2.222vw, 42.66px); /* 40px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: min(39vw, 748.8px); /* 702px */
}

.cd-media {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 48%;
  max-width: min(51.778vw, 994.14px); /* 932px */
  height: min(34.889vw, 669.87px); /* 628px */
}
.cd-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* curva grande abajo-derecha (orden TL TR BR BL) */
  border-radius: min(0.889vw, 17.07px) min(0.889vw, 17.07px) min(17.389vw, 333.87px) min(0.889vw, 17.07px); /* 16 16 313 16 */
  box-shadow: 0 16px 40px rgba(32, 60, 127, 0.12);
}

.cd-copy {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: 52%;
  padding-left: min(3.889vw, 74.67px); /* 70px */
  padding-right: min(3.333vw, 63.99px); /* 60px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.cd-title {
  margin: 0 0 min(1.444vw, 27.72px); /* 26px */
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(28px, min(3vw, 57.6px), 54px); /* 54px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.cd-text {
  max-width: min(34.444vw, 661.32px); /* 620px */
  margin: 0 0 min(1.333vw, 25.59px); /* 16px */
  color: #203c7f;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.111vw, 21.33px), 20px); /* 20px */
  font-weight: 500;
  line-height: 1.55;
}
.cd-text--lead { margin-bottom: min(2vw, 38.4px); } /* 36px antes del botón */

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(15.556vw, 298.68px); /* 280px */
  height: min(3.111vw, 59.73px); /* 56px */
  max-height: 56px;
  min-height: 44px;
  padding: 0 min(1.778vw, 34.14px); /* 32px */
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: min(1.667vw, 32.01px); /* 30px */
  background-color: #203c7f;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.111vw, 21.33px), 20px); /* 20px */
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(32, 60, 127, 0.28);
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cd-btn:hover {
  background-color: #172d61;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(32, 60, 127, 0.38);
}
.cd-btn:active { transform: translateY(1px); }

@media (max-width: 1024px) {
  .cd-section { padding: clamp(30px, min(5vw, 96px), 60px) 0 clamp(40px, min(6vw, 115.2px), 90px); }
  .cd-grey { display: none; }
  .cd-inner {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 700px;
    padding: 0 20px;
    min-height: 0;
  }
  .cd-media { width: 100%; max-width: 700px; height: min(56vw, 1075.2px); max-height: 420px; }
  .cd-media img { border-radius: 16px 16px min(18vw, 345.6px) 16px; }
  .cd-copy {
    width: 100%;
    max-width: 700px;
    padding: 40px 28px;
    background-color: #ebeef0;
    border-radius: 24px;
  }
  .cd-title { font-size: 30px; margin-bottom: 18px; }
  .cd-text { max-width: 100%; font-size: 16px; }
  .cd-text--lead { margin-bottom: 24px; }
  .cd-btn { min-width: 0; width: 100%; max-width: 300px; height: 52px; font-size: 17px; border-radius: 26px; }
}

/* ==========================================================================
   SERVICIOS — FICHAS DE LOS CENTROS DE DISTRIBUCIÓN (CEDI)
   Medidas del componente original: tarjeta 1506 × 483.
     Mapa 749 × 483 con radio 46, pegado a un lado.
     Panel azul #203C7F detrás del mapa, con la curva grande abajo:
       Naucalpan y Monterrey → mapa a la IZQUIERDA, curva abajo-DERECHA (304)
       Guadalajara          → mapa a la DERECHA,  curva abajo-IZQUIERDA (231)
     Texto blanco: título 38 Geist 900 + descripción 21 Jakarta 500, y debajo
       "Dirección: …". Botón oscuro #251E48 de 314 × 60 con borde blanco.
   Las posiciones verticales van en % del alto de la tarjeta (que fija su
   aspect-ratio) para que todo crezca junto; las tipografías en vw.
   ========================================================================== */
.cedi-section {
  background-color: #fff;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.cedi-section--naucalpan { padding: min(2.222vw, 42.66px) min(1.333vw, 25.59px) min(3.889vw, 74.67px); } /* 40 24 70 */
.cedi-section--guadalajara { padding: min(1.667vw, 32.01px) min(1.333vw, 25.59px) min(3.889vw, 74.67px); } /* 30 24 70 */
.cedi-section--monterrey { padding: min(1.667vw, 32.01px) min(1.333vw, 25.59px) min(4.444vw, 85.32px); } /* 30 24 80 */

.cedi-card {
  position: relative;
  width: min(83.667vw, 1606.41px); /* 1506px */
  max-width: 1506px;
  aspect-ratio: 1506 / 483;
}

/* Panel azul de fondo, con la curva grande en una esquina inferior */
.cedi-panel {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  background-color: #203c7f;
  box-shadow: 0 16px 36px rgba(32, 60, 127, 0.16);
}

/* Mapa */
.cedi-map {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 49.734%; /* 749 / 1506 */
  height: 100%;
  object-fit: cover;
  border-radius: min(2.556vw, 49.08px); /* 46px */
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

/* Bloque de texto */
.cedi-copy {
  position: absolute;
  top: 6.625%; /* 32 / 483 */
  z-index: 4;
  width: 38.513%; /* 580 / 1506 */
  color: #fff;
  text-align: left;
}
.cedi-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(22px, min(2.111vw, 40.53px), 38px); /* 38px */
  font-weight: 900;
  line-height: 1.15;
}
.cedi-badge {
  display: inline-block;
  margin-top: min(0.667vw, 12.81px); /* 12px */
  padding: min(0.222vw, 4.26px) min(0.778vw, 14.94px); /* 4 / 14 */
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(11px, min(0.722vw, 13.86px), 13px);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.cedi-desc {
  margin: min(0.944vw, 18.12px) 0 0; /* 17px */
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(14px, min(1.167vw, 22.41px), 21px); /* 21px */
  font-weight: 500;
  line-height: 1.45;
}
.cedi-meta {
  margin: min(0.833vw, 15.99px) 0 0; /* 15px */
  display: flex;
  flex-direction: column;
  gap: min(0.222vw, 4.26px); /* 4px */
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-sans);
  font-size: clamp(12px, min(0.889vw, 17.07px), 16px);
  font-weight: 500;
  line-height: 1.4;
}
.cedi-meta b { color: #fff; font-weight: 700; }
.cedi-meta a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.cedi-meta a:hover { color: #fff; text-decoration: underline; }

/* Botón "Abrir en Maps" */
.cedi-maps {
  position: absolute;
  top: 79.917%; /* 386 / 483 */
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: min(0.556vw, 10.68px);
  width: 20.85%; /* 314 / 1506 */
  height: min(3.333vw, 63.99px); /* 60px */
  max-height: 60px;
  min-height: 42px;
  border: 1px solid #fff;
  border-radius: min(1.667vw, 32.01px); /* 30px */
  background-color: #251e48;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(13px, min(1.111vw, 21.33px), 20px); /* 20px */
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37, 30, 72, 0.35);
  transition: filter 0.25s, transform 0.25s;
}
.cedi-maps:hover { filter: brightness(1.1); transform: translateY(-2px); }
.cedi-maps:active { transform: translateY(1px); }
.cedi-maps svg { width: min(1.889vw, 36.27px); height: min(1.889vw, 36.27px); max-width: 34px; max-height: 34px; flex-shrink: 0; transition: transform 0.2s; }
.cedi-maps:hover svg { transform: translateX(4px); }

/* --- Variante: mapa a la izquierda (Naucalpan, Monterrey) --- */
.cedi--right .cedi-panel {
  left: 32.869%; /* 495 / 1506 */
  right: 0;
  /* curva abajo-DERECHA (TL TR BR BL) */
  border-radius: 0 0 min(16.889vw, 324.27px) 0; /* 304px */
}
.cedi--right .cedi-map { left: 0; }
.cedi--right .cedi-copy { left: 56.175%; } /* 846 / 1506 */
.cedi--right .cedi-maps { left: 55.843%; } /* 841 / 1506 */

/* --- Variante: mapa a la derecha (Guadalajara) --- */
.cedi--left .cedi-panel {
  left: 0;
  width: 64.276%; /* 968 / 1506 */
  /* curva abajo-IZQUIERDA */
  border-radius: 0 0 0 min(12.833vw, 246.39px); /* 231px */
}
.cedi--left .cedi-map { right: 0; }
.cedi--left .cedi-copy { left: 6.175%; } /* 93 / 1506 */
.cedi--left .cedi-maps { left: 5.909%; } /* 89 / 1506 */

@media (max-width: 1024px) {
  .cedi-section { padding: 24px 20px 36px; }

  /* En movil la tarjeta pasa a flujo normal: el mapa arriba y debajo el panel
     azul con los textos. El `.cedi-panel` es un div vacio que en escritorio
     hace de fondo; dejarlo `static` lo convertia en un bloque azul de 617px
     (height:100% de toda la tarjeta) que empujaba el mapa y los textos fuera
     de la vista. Ahora el azul lo pone la propia tarjeta. */
  .cedi-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    aspect-ratio: auto;
    background-color: #203c7f;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(32, 60, 127, 0.18);
  }
  .cedi-panel { display: none; }

  /* El mapa primero, a sangre dentro de la tarjeta */
  .cedi-map,
  .cedi--right .cedi-map,
  .cedi--left .cedi-map {
    position: static;
    order: -1;
    width: 100%;
    height: min(58vw, 300px);
    border-radius: 0;
    box-shadow: none;
  }

  .cedi-copy,
  .cedi--right .cedi-copy,
  .cedi--left .cedi-copy {
    position: static;
    width: 100%;
    padding: 22px 22px 4px;
  }
  .cedi-title { font-size: 24px; }
  .cedi-badge { margin-top: 10px; padding: 4px 13px; font-size: 12px; }
  .cedi-desc { font-size: 15px; margin-top: 10px; line-height: 1.5; }
  .cedi-meta { font-size: 14px; margin-top: 12px; gap: 4px; }
  .cedi-meta a { overflow-wrap: anywhere; }

  .cedi-maps,
  .cedi--right .cedi-maps,
  .cedi--left .cedi-maps {
    position: static;
    width: calc(100% - 44px);
    max-width: 320px;
    height: 50px;
    margin: 18px 22px 24px;
    font-size: 16px;
    border-radius: 25px;
  }
  .cedi-maps svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; }
}

/* ==========================================================================
   SERVICIOS — SOPORTE TÉCNICO (3 pilares)
   Medidas del componente original:
     rejilla 416 / 1fr / 416 con 32 de separación y alineadas arriba
     los pilares laterales bajan 89px; la imagen central es más grande
       (769 × 449) que las laterales (416 × 250)
     título dorado 58 Geist 800 · subtítulo 22 · títulos de pilar 34 azul
   ========================================================================== */
.st-section {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(3.333vw, 63.99px) min(1.333vw, 25.59px) min(5.556vw, 106.68px); /* 60 24 100 */
  overflow: hidden;
}

.st-inner {
  width: min(95.556vw, 1834.68px); /* 1720px */
  max-width: 1720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #000;
}

.st-title {
  margin: 0 0 min(1.111vw, 21.33px); /* 20px */
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(30px, min(3.222vw, 61.86px), 58px); /* 58px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.st-sub {
  max-width: min(64.444vw, 1237.32px); /* 1160px */
  margin: 0 auto min(3vw, 57.6px); /* 54px */
  color: #1a1a1a;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.222vw, 23.46px), 22px); /* 22px */
  font-weight: 500;
  line-height: 1.5;
}

.st-grid {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: min(23.111vw, 443.73px) 1fr min(23.111vw, 443.73px); /* 416 / 1fr / 416 */
  align-items: start;
  justify-content: center;
  gap: min(1.778vw, 34.14px); /* 32px */
  width: 100%;
}

.st-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.st-pillar--side { padding-top: min(4.944vw, 94.92px); } /* 89px */
.st-pillar--center { padding: 0 min(0.556vw, 10.68px); }

.st-media {
  width: 100%;
  overflow: hidden;
  border-radius: min(1.667vw, 32.01px); /* 30px */
}
.st-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-out-expo);
}
.st-media:hover img { transform: scale(1.03); }

.st-pillar--side .st-media {
  max-width: min(23.111vw, 443.73px); /* 416px */
  height: min(13.889vw, 266.67px); /* 250px */
  margin-bottom: min(1.556vw, 29.88px); /* 28px */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.st-pillar--center .st-media {
  max-width: min(42.722vw, 820.26px); /* 769px */
  height: min(24.944vw, 478.92px); /* 449px */
  margin-bottom: min(1.778vw, 34.14px); /* 32px */
  box-shadow: 0 16px 36px rgba(32, 60, 127, 0.14);
}

.st-pillar-title {
  margin: 0 0 min(1vw, 19.2px); /* 18px */
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(18px, min(1.889vw, 36.27px), 34px); /* 34px */
  font-weight: 700;
  line-height: 1.2;
}

.st-pillar-text {
  margin: 0;
  max-width: min(23.111vw, 443.73px); /* 416px */
  color: #2b2b2b;
  font-family: var(--font-sans);
  font-size: clamp(13px, min(1.056vw, 20.28px), 19px); /* 19px */
  font-weight: 500;
  line-height: 1.55;
}
.st-pillar--center .st-pillar-text {
  max-width: min(40vw, 768px); /* 720px */
  font-size: clamp(13px, min(1.111vw, 21.33px), 20px); /* 20px */
}

@media (max-width: 1024px) {
  .st-section { padding: clamp(30px, min(5vw, 96px), 60px) 20px clamp(40px, min(6vw, 115.2px), 90px); }
  .st-inner { width: 100%; max-width: 620px; }
  .st-title { font-size: 34px; }
  .st-sub { max-width: 100%; font-size: 16px; margin-bottom: 30px; }
  .st-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .st-pillar--side { padding-top: 0; width: 100%; max-width: 600px; }
  .st-pillar--side .st-media { max-width: 100%; height: min(52vw, 998.4px); max-height: 300px; border-radius: 20px; }
  .st-pillar--center { width: 100%; max-width: 600px; padding: 0; }
  .st-pillar--center .st-media { max-width: 100%; height: min(56vw, 1075.2px); max-height: 340px; border-radius: 20px; }
  .st-pillar-title { font-size: 24px; }
  .st-pillar-text,
  .st-pillar--center .st-pillar-text { max-width: 100%; font-size: 15px; }
}

/* ==========================================================================
   CALIDAD — HERO "Aseguramiento de calidad"
   Medidas del Figma (marco 1920):
     imagen a sangre 1920 × 526 · título 64px Geist azul, 2 líneas
     panel #EBEEF0 girado 180°: sólido a la DERECHA y desvanecido a la izquierda
       (el archivo lo trae a 90.06deg con 0.86 de alfa hasta el 69.23%)
     el título queda a 93px del borde derecho, 561 de ancho, centrado al 42%
   Calibrado a 1800px: cada px del Figma son min(0.052083vw, 1px) (÷19.2).
   ========================================================================== */
.ch-hero {
  position: relative;
  width: 100%;
  height: min(27.396vw, 526px); /* 526px */
  overflow: hidden;
  background-color: #ebeef0;
}
.ch-hero-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%; /* igual que el componente original */
  pointer-events: none;
}
/* El panel va girado 180° en el Figma, así que lo escribo ya en el sentido
   final: 270deg = de derecha a izquierda, sólido en el borde derecho. */
.ch-hero-panel {
  /* El banner de Calidad ya trae el panel claro a la derecha. */
  display: none;
}
.ch-hero-title {
  position: absolute;
  top: 42%;
  right: clamp(40px, min(6vw, 115.2px), 120px); /* min(6vw, 115.2px) del componente = 115px del Figma */
  z-index: 3;
  max-width: min(min(29.219vw, 561px), 561px); /* 561 / 1920 */
  margin: 0;
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(32px, min(3.333vw, 63.99px), 64px); /* 64px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-align: left;
  white-space: pre-line; /* el Figma trae el salto de línea a mano */
  transform: translateY(-50%);
}

@media (max-width: 900px) {
  .ch-hero { height: auto; min-height: 0; }
  .ch-hero-img { position: absolute; }
  /* En movil el degradado pasa a ser vertical, asi que el panel tiene que
     cubrir TODO el ancho. Sin esto se quedaba en el 69% derecho y ademas
     sobresalia 7px. */
  .ch-hero-panel {
  /* El banner de Calidad ya trae el panel claro a la derecha. */
  display: none;
}
  .ch-hero-title {
    position: relative;
    top: auto;
    right: auto;
    max-width: 100%;
    padding: min(46vw, 422.4px) 22px 42px;
    transform: none;
    font-size: 34px;
    text-align: center;
  }
}

/* ==========================================================================
   CALIDAD — "Calidad que genera confianza" (collage + texto)
   Medidas del Figma (marco 1920):
     collage: tarjeta grande 536 × 652 (curva grande ABAJO-IZQUIERDA, 268)
       + columna de 306 con 41 de hueco: arriba 306 × 275 (curva abajo-izq. 93)
         y abajo 306 × 338 (curva abajo-izq. 153), separadas 39
     hueco collage → texto 80 · texto 804 de ancho
     título 64 dorado · "La calidad forma parte…" 36 azul · párrafo 24 azul
     sellos: circular 127 + logo 261 × 48, separados 41
   ========================================================================== */
.cc-section {
  position: relative;
  z-index: 5;
  margin-top: clamp(-100px, -min(6vw, 115.2px), -60px);
  padding: clamp(70px, min(8vw, 153.6px), 130px) min(2.5vw, 48px) min(4.083vw, 78.39px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(46.927vw, 901px);
  overflow: hidden;
}

/* Imagen decorativa de fondo (la misma pieza que el adorno del hero) */
.cc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cc-inner { position: relative; z-index: 1; }

.cc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(4.167vw, 80.01px); /* 80px */
  width: min(92.031vw, 1767px); /* 1767px, el contenido del Figma */
  max-width: 1767px;
}

.cc-collage {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: min(2.135vw, 40.99px); /* 41px */
}

.cc-main {
  flex-shrink: 0;
  width: min(27.917vw, 536.01px); /* 536px */
  height: min(33.958vw, 651.99px); /* 652px */
  /* curva grande abajo-izquierda */
  border-radius: 0 0 0 min(13.958vw, 267.99px); /* 268px */
  overflow: hidden;
  background-color: #f4f6f8;
  box-shadow: 0 16px 36px -12px rgba(32, 60, 127, 0.12);
}

.cc-stack {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: min(2.031vw, 39px); /* 39px */
  width: min(15.938vw, 306.01px); /* 306px */
}

.cc-top,
.cc-bottom {
  overflow: hidden;
  background-color: #f4f6f8;
  box-shadow: 0 12px 28px -10px rgba(32, 60, 127, 0.1);
}
.cc-top {
  width: 100%;
  height: min(14.323vw, 275px); /* 275px */
  border-radius: min(4.844vw, 93px) 0 0 0; /* 93px curva superior izquierda */
}
.cc-bottom {
  width: 100%;
  height: min(17.604vw, 338px); /* 338px */
  border-radius: 0 0 min(7.969vw, 153px) 0; /* 153px curva inferior derecha */
}
.cc-main img,
.cc-top img,
.cc-bottom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.6s var(--ease-out-expo);
}
.cc-main:hover img,
.cc-top:hover img,
.cc-bottom:hover img { transform: scale(1.04); }
.cc-bottom img { object-position: center 15%; }

.cc-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  max-width: min(41.875vw, 804px); /* 804px */
  text-align: left;
}

.cc-title {
  margin: 0 0 min(1.25vw, 24px); /* 24px */
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(30px, min(3.333vw, 63.99px), 64px); /* 64px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  white-space: pre-line;
}

.cc-claim {
  max-width: min(38.333vw, 735.99px); /* 736px */
  margin: 0 0 min(1.25vw, 24px); /* 24px */
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(19px, min(1.875vw, 36px), 36px); /* 36px */
  font-weight: 700;
  line-height: 1.25;
}

.cc-desc {
  max-width: min(39.688vw, 762.01px); /* 762px */
  margin: 0 0 min(2.083vw, 39.99px); /* 40px */
  color: #203c7f;
  font-family: var(--font-sans);
  font-size: clamp(15px, min(1.25vw, 24px), 24px); /* 24px */
  font-weight: 500;
  line-height: 1.55;
}

.cc-seals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: min(2.135vw, 40.99px); /* 41px */
}
.cc-seal {
  display: block;
  width: min(6.615vw, 127.01px); /* 127px */
  height: min(6.615vw, 127.01px);
  object-fit: contain;
  transition: transform 0.25s;
}
.cc-seal-logo {
  display: block;
  width: min(13.594vw, 261px); /* 261px */
  height: min(2.5vw, 48px); /* 48px */
  object-fit: contain;
  transition: transform 0.25s;
}
.cc-seal:hover,
.cc-seal-logo:hover { transform: scale(1.05); }

@media (max-width: 1024px) {
  .cc-section { padding: clamp(30px, min(5vw, 96px), 60px) 20px clamp(40px, min(6vw, 115.2px), 90px); }
  .cc-inner {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 620px;
  }
  .cc-collage { width: 100%; gap: 16px; }
  .cc-main { width: 58%; height: auto; aspect-ratio: 536 / 652; border-radius: 0 0 0 min(22vw, 422.4px); }
  .cc-stack { width: 38%; gap: 16px; }
  .cc-top { height: auto; aspect-ratio: 306 / 275; border-radius: min(8vw, 153.6px) 0 0 0; }
  .cc-bottom { height: auto; aspect-ratio: 306 / 338; border-radius: 0 0 min(12vw, 230.4px) 0; }
  .cc-copy { max-width: 100%; }
  .cc-title { font-size: 34px; }
  .cc-claim { max-width: 100%; font-size: 22px; }
  .cc-desc { max-width: 100%; font-size: 16px; margin-bottom: 26px; }
  .cc-seals { gap: 22px; }
  .cc-seal { width: 92px; height: 92px; }
  .cc-seal-logo { width: 180px; height: 36px; }
}

/* ==========================================================================
   CALIDAD — "Política de Calidad" (intro + línea de tiempo interactiva)
   Medidas del componente original (÷19.2 para pasarlas a vw a 1800px):
     sección padding 80/120 · contenedor 1720 con 70 de hueco
     intro 588 (título 58 dorado + párrafo 22)
     línea de tiempo 1020 con 36 de hueco entre hitos
       hito: círculo 114 + 36 + texto (título 30 / descripción 20)
       línea vertical de 2px a 77 del borde izquierdo
     Al pulsar un hito se activa: círculo azul #203C7F, título azul y
     descripción oscura; los demás quedan en gris.
   ========================================================================== */
.pc-section {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(4.167vw, 80.01px) min(1.25vw, 24px) min(6.25vw, 120px); /* 80 24 120 */
  overflow: hidden;
}

.pc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(3.646vw, 70px); /* 70px */
  width: min(89.583vw, 1719.99px); /* 1720px */
  max-width: 1720px;
}

.pc-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: min(30.625vw, 588px); /* 588px */
}

.pc-title {
  margin: 0 0 min(1.458vw, 27.99px); /* 28px */
  color: #ce8726;
  font-family: var(--font-display);
  font-size: clamp(30px, min(3.021vw, 58px), 58px); /* 58px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.pc-lead {
  max-width: min(28.125vw, 540px); /* 540px */
  margin: 0;
  color: #1a1a1a;
  font-family: var(--font-sans);
  font-size: clamp(16px, min(1.146vw, 22px), 22px); /* 22px */
  font-weight: 500;
  line-height: 1.55;
}

/* --- Línea de tiempo --- */
.pc-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: min(1.875vw, 36px); /* 36px */
  max-width: min(53.125vw, 1020px); /* 1020px */
  padding-left: min(1.042vw, 20.01px); /* 20px */
}

.pc-line {
  position: absolute;
  top: min(2.865vw, 55.01px); /* 55px */
  bottom: min(4.167vw, 80.01px); /* 80px */
  left: min(4.01vw, 76.99px); /* 77px */
  z-index: 1;
  width: 2px;
  background-color: #e2e8f0;
}

.pc-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: min(1.875vw, 36px); /* 36px */
  padding: min(0.625vw, 12px) min(0.938vw, 18.01px); /* 12px 18px */
  border: none;
  border-radius: 20px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s var(--ease-out-expo);
}
.pc-item:hover { background-color: rgba(32, 60, 127, 0.04); }
.pc-item:focus-visible { outline: 2px solid #203c7f; outline-offset: 2px; }

.pc-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: min(5.938vw, 114.01px); /* 114px */
  height: min(5.938vw, 114.01px);
  border-radius: 50%;
  background-color: #251e48;
  opacity: 0.85;
  box-shadow: 0 8px 24px rgba(32, 60, 127, 0.12);
  transition: background-color 0.35s, opacity 0.35s, transform 0.35s var(--ease-out-expo), box-shadow 0.35s;
}
.pc-item.is-active .pc-circle {
  background-color: #203c7f;
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 12px 30px rgba(32, 60, 127, 0.3);
}
.pc-circle img {
  width: min(3.125vw, 60px); /* 60px */
  height: min(3.125vw, 60px);
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
  transition: transform 0.3s;
}
.pc-item:hover .pc-circle img,
.pc-item.is-active .pc-circle img { transform: scale(1.08); }

.pc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: min(0.729vw, 14px); /* 14px */
  text-align: left;
}
.pc-item-title {
  margin: 0 0 min(0.521vw, 10px); /* 10px */
  color: #718096;
  font-family: var(--font-sans);
  font-size: clamp(17px, min(1.563vw, 30.01px), 30px); /* 30px */
  font-weight: 600;
  line-height: 1.25;
  transition: color 0.3s;
}
.pc-item.is-active .pc-item-title { color: #203c7f; font-weight: 700; }

.pc-item-desc {
  max-width: min(42.708vw, 819.99px); /* 820px */
  margin: 0;
  color: #a0aec0;
  font-family: var(--font-sans);
  font-size: clamp(14px, min(1.042vw, 20.01px), 20px); /* 20px */
  font-weight: 400;
  line-height: 1.55;
  transition: color 0.3s;
}
.pc-item.is-active .pc-item-desc { color: #2d3748; font-weight: 500; }

@media (max-width: 1024px) {
  .pc-section { padding: clamp(30px, min(5vw, 96px), 60px) 20px clamp(36px, min(5.5vw, 105.6px), 80px); }
  .pc-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 34px;
    width: 100%;
    max-width: 620px;
  }
  .pc-intro { max-width: 100%; }
  .pc-title { font-size: 32px; margin-bottom: 16px; }
  .pc-lead { max-width: 100%; font-size: 16px; }
  .pc-timeline { max-width: 100%; padding-left: 0; gap: 18px; }
  .pc-line { left: 35px; top: 30px; bottom: 40px; }
  .pc-item { gap: 18px; padding: 8px 10px; }
  .pc-circle { width: 70px; height: 70px; }
  .pc-circle img { width: 38px; height: 38px; }
  .pc-body { padding-top: 6px; }
  .pc-item-title { font-size: 18px; margin-bottom: 6px; }
  .pc-item-desc { max-width: 100%; font-size: 15px; }
}

/* ==========================================================================
   PÁGINA DE PRIVACIDAD
   ========================================================================== */
.privacy-card {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(30px, min(4vw, 76.8px), 56px);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.privacy-card h2 {
  font-size: clamp(24px, min(2.6vw, 49.92px), 36px);
  font-weight: 800;
  margin-bottom: 8px;
}
.privacy-card .responsible {
  color: var(--c-slate-600);
  font-size: 15px;
  line-height: 1.6;
  padding: 16px 18px;
  margin: 18px 0;
  border-radius: 14px;
  background: var(--c-slate-50);
}
.privacy-card p {
  color: var(--c-slate-600);
  font-size: 15.5px;
  line-height: 1.75;
  margin-top: 14px;
}
.privacy-card .arco-email {
  color: var(--gapelli-blue);
  font-weight: 700;
}

/* ==========================================================================
   CABECERAS DE PÁGINA INTERIOR (sin imagen de fondo full)
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--gapelli-blue-dark);
}
.page-hero .container { position: relative; z-index: 2; }

/* ==========================================================================
   VISTA PRODUCTOS - CATALOGO VISUAL FIGMA & MODAL DE DETALLES
   ========================================================================== */
.cat-grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 50px;
}

.cat-card-item {
  flex: 0 0 calc(25% - 18px);
  max-width: calc(25% - 18px);
  position: relative;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(32, 60, 127, 0.08);
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .cat-card-item {
    flex: 0 0 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
  }
}

@media (max-width: 768px) {
  .cat-grid-wrapper {
    gap: 16px;
  }
  .cat-card-item {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
}

@media (max-width: 480px) {
  .cat-card-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.cat-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(32, 60, 127, 0.16);
  border-color: rgba(206, 135, 38, 0.5);
}

.cat-card-item.is-active {
  border-color: var(--gapelli-gold);
  box-shadow: 0 8px 25px rgba(206, 135, 38, 0.25);
}

.cat-card-thumb {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f4f6f8;
}

.cat-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}

.cat-card-item:hover .cat-card-thumb img {
  transform: scale(1.08);
}

.cat-card-body {
  padding: 16px 20px;
  background: #ebeef0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.3s;
}

.cat-card-item.is-active .cat-card-body {
  background: var(--gapelli-blue);
}

.cat-card-title {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #203c7f;
  margin: 0;
  transition: color 0.25s;
}

.cat-card-item.is-active .cat-card-title {
  color: #fff;
}

.cat-card-arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gapelli-blue-dark);
  color: #ffffff;
  transition: all 0.3s var(--ease-out-expo);
}

.cat-card-item:hover .cat-card-arrow {
  background: var(--gapelli-blue);
  transform: translateY(3px);
}

.cat-card-item.is-active .cat-card-arrow {
  background: #ffffff;
  color: var(--gapelli-blue-dark);
  transform: translateY(3px);
}

/* Grilla de productos por categoría */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 840px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 540px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

.product-item-card {
  position: relative;
  background: #fffcfc;
  border-radius: 25px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 2px 6px 2px rgba(0, 0, 0, 0.08);
  border: none;
  padding: 24px 20px 20px 20px;
  height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s var(--ease-out-expo);
}

.product-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(32, 60, 127, 0.18);
}

.product-item-head {
  margin-bottom: 0;
}

.product-item-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(22px, min(1.8vw, 34.56px), 28px);
  font-weight: 500;
  color: #203c7f;
  margin: 0;
  line-height: 1.2;
}

.product-item-category {
  display: none;
}

.btn-product-details {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 53px;
  border-radius: 30px;
  background-color: #203c7f;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  border: 1px solid #ffffff;
  cursor: default;
  transition: all 0.25s ease;
  text-align: center;
  box-shadow: none;
}

.btn-product-details:hover {
  background-color: #203c7f;
  color: #ffffff;
  transform: none;
}

/* Header del grupo activo de productos */
.active-category-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 36px;
  padding-bottom: 0;
  border-bottom: none;
}

.active-category-title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(36px, min(4.5vw, 86.4px), 64px);
  font-weight: 800;
  color: #251e48;
  border-bottom: 4px solid #203c7f;
  padding-bottom: 6px;
  display: inline-block;
  margin: 0;
}

.active-category-count {
  display: none;
}

/* Modal de detalle de producto */
.product-modal-body {
  padding: 20px 0 10px;
}

.product-modal-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(206, 135, 38, 0.15);
  color: #a36512;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.product-modal-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--c-slate-700);
  margin-bottom: 24px;
}

.product-docs-list {
  background: #f8fafc;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
}

.product-docs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-slate-900);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-slate-700);
  padding: 6px 0;
}

.product-doc-item svg {
  width: 18px;
  height: 18px;
  color: var(--gapelli-blue);
  flex-shrink: 0;
}

.product-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-modal-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 100px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
  text-decoration: none;
}

.btn-modal-wa:hover {
  background: #1ebe58;
  transform: translateY(-2px);
  color: #fff;
}

/* ==========================================================================
   CURVA DECORATIVA FIGMA (image4-decor.png)
   Se coloca en el contenedor SIGUIENTE al Hero y se desplaza hacia arriba
   para montar la curva sobre el banner hero sin dejar espacio en blanco.
   ========================================================================== */
#areas-servicios,
#calidad-confianza,
#categorias-principales,
#fortalezas,
#contacto,
.politicas-section {
  position: relative;
  z-index: 5;
  margin-top: clamp(-100px, -min(6vw, 115.2px), -60px);
  padding-top: clamp(70px, min(8vw, 153.6px), 130px);
  overflow: hidden;
}

.sa-inner,
.cc-inner,
#categorias-principales > .container,
#fortalezas > .container,
#contacto > .container,
.politicas-content-wrapper {
  position: relative;
  z-index: 2;
}

#fortalezas .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

#fortalezas .card-media {
  border-radius: 10px;
  overflow: hidden;
  /* spect-ratio + height fijos a la vez hacen que el navegador calcule el     ANCHO a partir del alto: 358 x 1.6 = 573px, que se salia de su columna en     cualquier pantalla. Con spect-ratio: auto el ancho lo manda el grid y el     alto queda limitado y fluido. */
  aspect-ratio: auto;
  height: clamp(220px, 40vw, 358px);
  margin-bottom: 24px;
}

#fortalezas .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

#fortalezas .card-title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(24px, min(2vw, 38.4px), 32px);
  font-weight: 700;
  color: #203c7f;
  margin-bottom: 12px;
  line-height: 1.25;
}

#fortalezas .card-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(15px, min(1.2vw, 23.04px), 18px);
  font-weight: 300;
  color: #000000;
  line-height: 1.5;
}

.hero-section-curve {
  position: absolute;
  /* El domo ocupa el primer 15% de la imagen, asi que la pieza se ancla al 85%
     del alto del hero: lo que asoma es justo la curva, y el hero la recorta.
     Esto es lo que hace el componente original (imagen de 901px dentro de un
     hero de 683, con solo 135px visibles). */
  top: 85%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 751;
  object-fit: cover;
  object-position: top center;
  /* Por encima de la foto (z1) pero por debajo del panel (z2) y del texto (z3). */
  z-index: 1;
  pointer-events: none;
}

/* Textos específicos de Productos Figma */
.hero-title--blue {
  color: var(--gapelli-blue);
  font-family: var(--font-display);
  font-size: clamp(36px, min(4.2vw, 80.64px), 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  max-width: 640px;
}

.hero-title--gold {
  color: var(--gapelli-gold);
  font-family: var(--font-display);
  font-size: clamp(36px, min(4.2vw, 80.64px), 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  max-width: 1090px;
}

.hero-subtitle--blue {
  color: #203c7f;
  font-family: var(--font-sans);
  font-size: clamp(17px, min(1.4vw, 26.88px), 24px);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 16px;
  margin-bottom: 30px;
  /* El Figma lo daba a 650px, pero a 1440 eso dejaba el texto a 5px de la
     mitad de la pagina. Se acorta para que termine claramente antes. */
  max-width: 560px;
}

.hero-title--contacto {
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(38px, min(4.5vw, 86.4px), 70px);
  font-weight: 700;
  line-height: 1.1;
  max-width: 1090px;
}

.hero-subtitle--contacto {
  color: #203c7f;
  font-family: var(--font-sans);
  font-size: clamp(18px, min(2vw, 38.4px), 32px);
  font-weight: 500;
  line-height: 1.45;
  margin-top: 20px;
  max-width: 636px;
}

.btn--blue-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 30px;
  background-color: #203c7f;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  border: 1px solid #ffffff;
  text-decoration: none;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: 0 4px 15px rgba(32, 60, 127, 0.2);
}

.btn--blue-pill:hover {
  background-color: var(--gapelli-gold);
  border-color: var(--gapelli-gold);
  color: #ffffff;
  transform: translateY(-2px);
}

.section-title--gold {
  color: var(--gapelli-gold);
  font-family: var(--font-display);
  font-size: clamp(32px, min(3.8vw, 72.96px), 64px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  text-align: center;
}

.section-title--blue {
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(32px, min(3.8vw, 72.96px), 64px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  text-align: center;
}

.section-subtitle--dark {
  color: #000;
  font-family: var(--font-sans);
  font-size: clamp(17px, min(1.4vw, 26.88px), 24px);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 40px;
  text-align: center;
}

.cat-section-heading {
  font-family: var(--font-display);
  font-size: clamp(24px, min(2.2vw, 42.24px), 36px);
  font-weight: 800;
  color: var(--gapelli-blue-dark);
  margin-bottom: 24px;
  text-align: center;
}


/* ==========================================================================
   POLITICAS / AVISO DE PRIVACIDAD — página completa
   Estilos extraídos 1:1 del sitio de referencia (PoliticasView-DkxPQ68L.css)
   ========================================================================== */

/* ── Sección completa ── */
.pol-section-wrapper {
  text-align: left;
  color: #606060;
  background-color: #fff;
  width: 100%;
  padding-bottom: 80px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
  overflow: hidden;
}

/* ── Hero ── */
.pol-hero-wrapper {
  background-color: #fff;
  width: 100%;
  min-height: 580px;
  position: relative;
  overflow: hidden;
}

.pol-hero-image {
  object-fit: cover;
  object-position: right center;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pol-hero-gradient {
  /* El banner ya trae su panel. */
  display: none;
}

.pol-hero-content {
  z-index: 3;
  max-width: 1440px;
  margin: 0 auto;
  padding: 180px 48px 160px;
  position: relative;
}

.pol-hero-title {
  color: #203c7f;
  letter-spacing: -0.5px;
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.15;
}

/* ── Imagen decorativa de ola (image4) al fondo del hero ── */
.pol-image4-decor {
  object-fit: fill;
  z-index: 4;
  pointer-events: none;
  width: 100%;
  min-width: 1920px;
  height: 180px;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Contenido legal ── */
.pol-content-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 1440px;
  margin: 40px auto 0;
  padding: 0 48px;
}

.pol-text-block {
  display: flex;
  flex-direction: column;
}

.pol-paragraph {
  color: #4b5563;
  margin: 0 0 24px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.8;
}

.pol-paragraph strong {
  color: #1f2937;
  font-weight: 700;
}

.pol-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
  padding-left: 0;
  list-style-type: none;
}

.pol-bullet-list li {
  color: #4b5563;
  padding-left: 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.65;
  position: relative;
}

.pol-bullet-list li::before {
  content: "\25AA";
  color: #203c7f;
  font-size: 20px;
  line-height: 1.6;
  position: absolute;
  left: 6px;
}

.pol-link-blue {
  color: #203c7f;
  font-weight: 700;
  text-decoration: underline;
  transition: color 0.2s;
}

.pol-link-blue:hover {
  color: #ce8726;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .pol-hero-wrapper {
    min-height: 460px;
  }
  .pol-hero-content {
    padding: 130px 32px 120px;
  }
  .pol-hero-title {
    font-size: 48px;
  }
  .pol-content-wrapper {
    padding: 0 32px;
  }
  .pol-paragraph,
  .pol-bullet-list li {
    font-size: 19px;
  }
}

@media (max-width: 640px) {
  .pol-hero-wrapper {
    min-height: 380px;
  }
  .pol-hero-content {
    padding: 90px 20px 100px;
  }
  .pol-hero-title {
    font-size: 34px;
  }
  .pol-content-wrapper {
    gap: 24px;
    margin-top: 24px;
    padding: 0 20px;
  }
  .pol-paragraph,
  .pol-bullet-list li {
    font-size: 16px;
    line-height: 1.65;
  }
  .pol-bullet-list li {
    padding-left: 22px;
  }
  .pol-image4-decor {
    height: 100px;
  }
}







/* ==========================================================================
   CURVA DECORATIVA (image4-decor.png) EN MÓVIL
   En escritorio esta pieza va como fondo de la sección con `object-fit: cover`
   y encaja 1:1 (la imagen es 1600×751, la misma proporción que la sección).
   En móvil la sección se vuelve estrecha y alta, así que `cover` recortaba la
   imagen y la curva dejaba de leerse. Aquí pasa a ser una banda inferior con
   su proporción natural, que es como se ve la silueta completa.
   ========================================================================== */
@media (max-width: 1024px) {
  /* La curva va en el borde SUPERIOR de la imagen (el domo ocupa el primer 15%
     y el alfa se desvanece hacia abajo). Por eso la banda se ancla ARRIBA: es
     lo que hace que el borde de la sección se vea curvo y no recto. */
  .hero-section-curve {
  position: absolute;
  /* El domo ocupa el primer 15% de la imagen, asi que la pieza se ancla al 85%
     del alto del hero: lo que asoma es justo la curva, y el hero la recorta.
     Esto es lo que hace el componente original (imagen de 901px dentro de un
     hero de 683, con solo 135px visibles). */
  top: 85%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 751;
  object-fit: cover;
  object-position: top center;
  /* Por encima de la foto (z1) pero por debajo del panel (z2) y del texto (z3). */
  z-index: 1;
  pointer-events: none;
}

  /* La ola del aviso de privacidad: en escritorio se estiraba a 1920 de ancho
     mínimo y `fill`, lo que en móvil recortaba los lados. */
  .pol-image4-decor {
    min-width: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 751;
    object-fit: contain;
    object-position: bottom center;
  }
}

/* ==========================================================================
   HERO DE NOSOTROS EN MÓVIL — que se vea el arco del banner
   De los 7 banners solo dos traen el arco inferior: el de Inicio y el de
   Nosotros (en los demás el contenido llega a los bordes, 0..1918). Con
   `cover` en una caja de 390x300 el banner se escalaba y se comían 123px por
   lado, justo donde están las patas del arco. Aquí se muestra sin recortar,
   con su proporción natural (47.14vw), y el logo se ajusta para caber.
   ========================================================================== */
@media (max-width: 1023px) {
  #nosotros-hero .hero-container {
    height: auto;
    overflow: visible;
  }
  #nosotros-hero .hero-image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 905;
    object-fit: contain;
    display: block;
  }
  #nosotros-hero .logo-center-container {
    height: 100%;
    max-width: 40vw;
    padding: 0;
  }
  #nosotros-hero .logo-centrado { max-width: 100%; }
}
/* ==========================================================================
   NOSOTROS — LÍNEA DE TIEMPO dentro de "Nuestra Historia"
   Columna de años a la izquierda y UNA tarjeta fija a la derecha, centrada
   en vertical: el texto siempre aparece en el mismo sitio y solo cambia su
   contenido al pasar por cada fecha (o al pulsarla).
   La columna de años mide 8 × 48 + 7 × 8 = 440px, menos que el collage
   (652px), así que nunca se sale del rango de las imágenes.
   Paleta: dorado #CE8726 · azul #203C7F.
   ========================================================================== */
.tl-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 24px);
  margin-top: clamp(12px, 1.278vw, 23px);
}

.tl-list {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
/* Línea horizontal que une los años (solo cuando no hay salto de línea) */
@media (min-width: 1025px) {
  .tl-list::before {
    content: '';
    position: absolute;
    left: 26px;
    right: 26px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, #ce8726 0%, #203c7f 100%);
    z-index: 0;
  }
  .tl-node { position: relative; z-index: 1; }
}

.tl-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
/* Ya no hay conector vertical: la línea va horizontal tras los años */
.tl-item::before {
  /* Ya no hay conector vertical: la línea va horizontal tras los años */
  display: none;
}
.tl-item:last-child::before { content: none; }
.tl-item:focus-visible { outline: 2px solid #203c7f; outline-offset: 3px; border-radius: 50%; }

.tl-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #203c7f;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.3px;
  box-shadow: 0 4px 12px rgba(32, 60, 127, 0.22);
  transition: background-color 0.3s, transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.tl-item.is-active .tl-node {
  background-color: #ce8726;
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(206, 135, 38, 0.4);
}

/* La tarjeta: un solo hueco, siempre en el mismo sitio */
.tl-panels {
  position: relative;
  min-height: 200px;
}
.tl-panel { display: none; }
.tl-panel.is-active { display: block; }

.tl-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 13px;
  border: 1px solid rgba(206, 135, 38, 0.35);
  border-radius: 100px;
  background-color: rgba(206, 135, 38, 0.12);
  color: #ce8726;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.tl-item-title {
  margin: 0 0 8px;
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.389vw, 25px);
  font-weight: 700;
  line-height: 1.25;
}
.tl-item-desc {
  margin: 0;
  color: #4b5563;
  font-family: var(--font-sans);
  font-size: clamp(13px, 0.944vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
}

@media (max-width: 1024px) {
  .tl-wrap { gap: 16px; }
  /* Los años pasan a una fila que se ajusta sola */
  .tl-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .tl-item::before {
  /* Ya no hay conector vertical: la línea va horizontal tras los años */
  display: none;
}
  .tl-node { width: 46px; height: 46px; font-size: 11.5px; }
  .tl-panels { min-height: 0; justify-content: center; }
  .tl-panel.is-active { text-align: center; }
  .tl-item-title { font-size: 19px; }
  .tl-item-desc { font-size: 15px; }
}
/* El año dentro de la tarjeta, para que se vea a qué fecha corresponde
   (en el círculo también está, pero aquí queda explícito) */
.tl-year {
  display: block;
  margin-bottom: 2px;
  color: #203c7f;
  font-family: var(--font-display);
  font-size: clamp(26px, 2vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
@media (max-width: 1024px) {
  .tl-year { font-size: 26px; }
}

/* ==========================================================================
   MÓVIL — LA IMAGEN ARRIBA Y EL TEXTO DEBAJO (todos los heroes)
   En móvil el texto encima de la foto se leía mal y además obligaba a
   recortar el banner. Ahora la imagen se muestra COMPLETA (con su proporción
   natural, así que también se ve el arco inferior) y el texto va debajo,
   sobre el fondo blanco del sitio.
   Los colores de los títulos (dorado y azul) ya funcionan sobre blanco.
   ========================================================================== */
@media (max-width: 1023px) {

  /* --- Hero genérico: nosotros, productos, área técnica, contacto --- */
  .hero-container {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .hero-image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 905;
    object-fit: contain;
    display: block;
  }
  .hero-overlay,
  .hero-overlay--left,
  .hero-overlay--right,
  .hero-overlay--center {
    position: static;
    inset: auto;
    align-items: flex-start;
    background: none;
    display: block;
  }
  .hero-content {
    padding: 22px 20px 34px;
    text-align: center;
  }
  /* Los textos que eran blancos pasan a azul para leerse sobre blanco */
  .hero-subtitle,
  .hero-subtitle--blue,
  .hero-subtitle--contacto { color: #203c7f; }
  .hero-actions { justify-content: center; }

  /* --- Hero de Servicios --- */
  .sh-hero {
    display: flex;
    flex-direction: column;
    height: auto;
    aspect-ratio: auto;
  }
  .sh-image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 905;
    object-fit: contain;
  }
  .sh-panel { display: none; }
  .sh-text {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    align-items: center;
    text-align: center;
    padding: 22px 20px 34px;
  }

  /* --- Hero de Calidad --- */
  .ch-hero {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .ch-hero-img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 905;
    object-fit: contain;
  }
  .ch-hero-panel { display: none; }
  .ch-hero-title {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    max-width: 100%;
    padding: 22px 20px 34px;
    text-align: center;
  }

  /* --- Hero de Inicio (versión móvil propia) --- */
  .mobile-image-overlay {
    position: static;
    inset: auto;
    padding: 20px 20px 26px;
    background: none;
  }
  .mobile-image-overlay::before { display: none; }
}
/* --- Hero del aviso de privacidad: mismo criterio (imagen completa + texto debajo) --- */
@media (max-width: 1023px) {
  .pol-hero-wrapper {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .pol-hero-image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 905;
    object-fit: contain;
    display: block;
  }
  .pol-hero-gradient { display: none; }
  .pol-hero-content {
    padding: 22px 20px 120px; /* el hueco de abajo es para la ola decorativa */
    text-align: center;
  }
  .pol-hero-title { font-size: 34px; }
}

/* ==========================================================================
   MÓVIL — TODO EL TEXTO CENTRADO
   Los bloques de texto pasan a centrados. Además, los que tienen `max-width`
   necesitan `margin-inline: auto`, porque si no el bloque queda pegado a la
   izquierda aunque el texto de dentro esté centrado.
   ========================================================================== */
@media (max-width: 1023px) {
  .hero-content,
  .hero-title,
  .hero-title--gold,
  .hero-title--blue,
  .hero-title--contacto,
  .hero-subtitle,
  .hero-subtitle--blue,
  .hero-subtitle--contacto,
  .sh-text,
  .sh-title,
  .sh-sub,
  .ch-hero-title,
  .mobile-image-overlay,
  .mobile-title,
  .mobile-subtitle,
  .mobile-content-wrapper,
  .pol-hero-content,
  .pol-hero-title,
  .history-copy,
  .history-title,
  .tl-wrap,
  .tl-panel,
  .tl-tag,
  .tl-item-title,
  .tl-item-desc,
  .section-head,
  .section-title,
  .section-title--gold,
  .section-subtitle,
  .section-subtitle--dark {
    text-align: center;
  }

  /* Los bloques con ancho máximo se centran como bloque */
  .hero-title,
  .hero-subtitle,
  .hero-subtitle--blue,
  .hero-subtitle--contacto,
  .sh-sub,
  .history-title,
  .tl-item-desc,
  .section-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  /* Las acciones del hero, centradas */
  .hero-actions,
  .sh-years { justify-content: center; }
}

/* ==========================================================================
   NUESTRA HISTORIA — en MÓVIL se oculta la imagen grande
   En escritorio se ven las TRES del collage (la grande 530×652 y las dos
   pequeñas apiladas). En móvil la grande se oculta y las dos pequeñas pasan a
   ir en fila, para que la sección no quede tan alta y se aprecien bien.
   ========================================================================== */
@media (max-width: 1023px) {
  .collage-a { display: none; }
  .history-collage { width: 100%; gap: 2.167vw; }
  .collage-col { flex-direction: row; align-items: stretch; }
  .collage-c,
  .collage-b {
    flex: 1;
    aspect-ratio: 303 / 320;
  }
}

/* ==========================================================================
   MÓVIL — EL FONDO DETRÁS DEL TEXTO DEL HERO, BLANCO
   En Servicios y Calidad el hero tenía `background-color: #ebeef0` (el gris
   del panel). En escritorio no se veía porque la imagen lo tapaba, pero al
   pasar el texto debajo de la imagen quedaba sobre ese gris. Aquí pasa a
   blanco, igual que en el resto de las páginas.
   ========================================================================== */
@media (max-width: 1023px) {
  .sh-hero,
  .ch-hero,
  .ch-hero-panel,
  .sh-panel {
    background-color: #fff;
  }
}

/* ==========================================================================
   MÓVIL — FUERA LA CURVA DECORATIVA (image4)
   Esa pieza hace la transición del borde inferior de la FOTO al blanco de la
   sección siguiente, y está anclada al 85% del hero. En móvil el texto ya no
   va encima de la imagen, así que la curva queda suelta: aparecía pisando el
   título y sobresaliendo 135px por debajo del hero. Aquí se oculta.
   La ola del aviso de privacidad (.pol-image4-decor) se mantiene, porque ahí
   sí va pegada al borde de la imagen.
   ========================================================================== */
@media (max-width: 1023px) {
  .hero-section-curve { display: none; }
}

/* ==========================================================================
   MÓVIL — FONDO BLANCO DETRÁS DE TODOS LOS TEXTOS
   Estos bloques llevaban el gris #EBEEF0 del panel del diseño. En móvil se
   apilan y el texto queda sobre el gris, así que el gris se nota. Aquí pasa a
   blanco para que no se vea la costura entre bloques.
   ========================================================================== */
@media (max-width: 1023px) {
  .cd-copy,          /* Centros de Distribución (Servicios) */
  .log-copy,         /* Conectamos soluciones (Inicio) */
  .log-panel,
  .cd-grey,
  .contact-form-wrap,
  .cc-section,
  .pc-section,
  .st-section,
  .why-section,
  .cat-section,
  .pb-section,
  .partners-section,
  .history-section,
  .values-section,
  .sustainability-section,
  .tl-section,
  .sa-section,
  .fmv-section {
    background-color: #fff;
  }
}