/* ============ HEADER ============ */
/* Claro, tal cual mockup del Hero (2026-09-07): antes era una barra oscura
   translúcida pensada para el hero oscuro anterior. Texto real (no imágenes:
   un intento con recortes del mockup se vio "plano"/pegado, Dai lo rechazó). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(4, 5, 31, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.site-header__logo {
  display: block;
  height: 38px;
}

.site-header__logo img {
  height: 100%;
  width: auto;
}

.site-header__nav ul {
  display: flex;
  gap: var(--space-md);
}

.site-header__nav ul a {
  position: relative;
  display: block;
  text-decoration: none;
  color: #000028;
  font-family: var(--font-subheading);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.site-header__nav ul a:hover {
  color: var(--c-primario);
}

.site-header__nav ul a.is-current {
  color: var(--c-primario);
  font-weight: 700;
}

.site-header__nav ul a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 10px;
  bottom: -8px;
  height: 2px;
  background: var(--c-primario);
  border-radius: 999px;
}

.site-header__nav ul a.is-current::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-primario);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--c-primario);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-subheading);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -8px rgba(255, 153, 0, 0.55);
}

.site-header__cta--secundario {
  margin-right: calc(var(--space-sm) - var(--space-lg));
  background: transparent;
  color: var(--c-primario);
  box-shadow: inset 0 0 0 2px var(--c-primario);
}

.site-header__cta--secundario:hover {
  box-shadow: inset 0 0 0 2px var(--c-primario), 0 10px 18px -8px rgba(255, 153, 0, 0.55);
}

.site-header__nav-mobile {
  display: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-sm);
  padding: 3px;
  border: 1px solid rgba(4, 5, 31, 0.15);
  border-radius: 999px;
  background: #fff;
}

.lang-switch__btn {
  display: inline-block;
  line-height: normal;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  color: #9a9aab;
  font-family: var(--font-subheading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-switch__btn:hover {
  color: #000028;
}

.lang-switch__btn.is-active {
  background: var(--c-primario);
  color: #fff;
}

.lang-switch__btn.is-active:hover {
  color: #fff;
}

.nav-toggle {
  display: none;
}

@media (max-width: 780px) {
  .site-header__nav ul {
    display: none;
  }
  .site-header__nav ul.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 20px;
    background: #ffffff;
    box-shadow: 0 12px 30px -10px rgba(4, 5, 31, 0.25);
    padding: 1rem 1.5rem;
    border-radius: 12px;
  }
  .site-header__cta {
    display: none;
  }
  .site-header__nav-mobile {
    display: list-item;
  }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    color: #000028;
    font-size: 1.5rem;
  }
}

/* ============ BLOQUE 1 · HERO ============ */
/* Texto real tal cual el mockup (tipografía Poppins 600 y colores muestreados
   del mockup por histograma de moda). Se probó recortar el texto como imagen
   directo del mockup y quedó "plano"/con bordes de recorte visibles — Dai lo
   rechazó y pidió volver a texto real. Sólo el gráfico 3D es imagen (foto real,
   no se puede recrear con CSS); tiene la esquina inferior-derecha disimulada
   con degradé para que la lista real `.hero__tags` se superponga sin
   duplicar el texto horneado del mockup. */
.hero {
  --hero-bg: #f8f8f8;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #f8f8f8 55%, #f0f0f2 100%);
  color: #000028;
  padding-top: 90px;
  padding-bottom: 32px;
  box-sizing: border-box;
}

.hero__graphic {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(320px, 47vw, 760px);
  pointer-events: none;
}

.hero__graphic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
}

.hero__graphic-fade-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--hero-bg) 0%, rgba(248, 248, 248, 0) 22%);
}

.hero__graphic-fade-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 45%;
  background: radial-gradient(circle at 100% 100%, var(--hero-bg) 0%, var(--hero-bg) 30%, rgba(248, 248, 248, 0) 70%);
}

@media (max-width: 900px) {
  .hero__graphic {
    width: clamp(200px, 60vw, 340px);
    opacity: 0.55;
  }
}

@media (max-width: 640px) {
  .hero__graphic {
    display: none;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-left: 0;
  padding-left: clamp(24px, 6vw, 120px);
}

.hero__content {
  max-width: 620px;
}

.hero__label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  font-family: var(--font-subheading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #000028;
}

.hero__label-line {
  display: block;
  width: 48px;
  height: 1px;
  background: #b3b1bd;
}

.hero__title {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px;
  font-family: var(--font-subheading);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  line-height: 1.08;
}

.hero__title-line {
  color: #000028;
}

.hero__title-line--accent {
  color: var(--c-primario);
}

.hero__desc {
  max-width: 493px;
  margin: 0 0 32px;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.5;
  color: #585868;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 16px 30px;
  margin-bottom: 56px;
  border-radius: 999px;
  background: var(--c-primario);
  color: #ffffff;
  font-family: var(--font-subheading);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 24px -10px rgba(255, 153, 0, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(255, 153, 0, 0.65);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #585868;
}

.hero__scroll-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #c7c6d1;
  color: #4a4a5c;
}

.hero__scroll-icon svg {
  width: 18px;
  height: 18px;
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.hero__scroll-text {
  font-family: var(--font-subheading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
}

.hero__tags {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 6vw, 100px);
  bottom: clamp(28px, 6vw, 56px);
  margin: 0;
  padding: 12px 0 0;
  list-style: none;
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: #000028;
  text-align: right;
}

.hero__tags::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 2px;
  background: var(--c-primario);
}

@media (max-width: 640px) {
  .hero__tags {
    display: none;
  }
}

/* ============ BLOQUE 2 · ¿POR QUÉ SMART SOUTH? ============ */
/* Rediseño tal cual mockup (2026-09-07): columna de texto + un cluster de
   hexágonos hecho en CSS nativo (mismo lenguaje visual que el hex-grid de
   Servicios, en paleta de marca), no una foto recortada del mockup. Los
   callouts son texto real, siempre visible, con marcador de punto en vez
   de la línea conectora fotográfica. */
.porque {
  background: var(--c-bg-white);
  position: relative;
  overflow: hidden;
}

/* Este bloque usa un contenedor más ancho que el resto del sitio: con el
   ancho estándar (1180px) quedaba como una franja angosta con mucho blanco
   a los costados de la ventana. La columna de texto se limita a un ancho
   de lectura cómodo; la columna del gráfico crece con el espacio extra. */
.porque .container {
  max-width: 1400px;
}

.porque__grid {
  display: grid;
  grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}

.porque__col-izq h2 {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--c-text-dark);
}

.porque__col-izq h2 strong {
  display: block;
  margin-top: 0.15em;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.porque__brand-a {
  color: var(--c-text-dark);
}

.porque__brand-b {
  color: var(--c-primario);
}

.porque__subtitulo {
  margin: 0.6em 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.25;
  color: var(--c-text-dark);
}

.porque__dash {
  display: block;
  width: 46px;
  height: 3px;
  margin: 1.4rem 0 1.2rem;
  background: var(--c-primario);
}

.porque__texto p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--c-text-dark);
}

.porque__texto strong {
  color: var(--c-primario);
  font-weight: 700;
}

.porque__destacado {
  margin: 0.4rem 0 1.8rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  line-height: 1.3;
  color: var(--c-primario);
}

.porque__beneficios {
  display: flex;
  gap: 0;
}

.porque__beneficio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.9rem;
  text-align: center;
  border-right: 1px solid #dfe1e6;
}

.porque__beneficio:first-child {
  padding-left: 0;
}

.porque__beneficio:last-child {
  padding-right: 0;
  border-right: none;
}

.porque__beneficio-icon {
  display: flex;
  width: 30px;
  height: 30px;
  color: var(--c-text-dark);
}

.porque__beneficio-icon svg {
  width: 100%;
  height: 100%;
}

.porque__beneficio span[data-i18n-html] {
  font-family: var(--font-subheading);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--c-text-muted);
}

.porque__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 420px;
  padding: 10px;
}

/* Cluster de hexágonos: misma matemática de tessellation que .hex-grid
   (Bloque 3 · Servicios), en bloque parejo 4/3/4/3 (14 hexágonos) para
   llenar el recuadro de punta a punta en vez de un panal chico suelto.
   Los vecinos del hex central llevan un tinte naranja tenue, como si la
   luz del centro se filtrara a las piezas de al lado. */
.porque__hexcluster {
  --hexW: clamp(72px, 8vw, 96px);
  --hexH: calc(var(--hexW) * 1.1547005);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
  filter: drop-shadow(0 18px 30px rgba(12, 1, 55, 0.14));
}

.porque__hexrow {
  display: flex;
  gap: calc(var(--hexW) * 0.06);
}

.porque__hexrow--pull {
  margin-top: calc(var(--hexH) * -0.25);
}

.porque__hexrow--offset {
  transform: translateX(calc(var(--hexW) * 0.53));
}

.porque__hex {
  position: relative;
  width: var(--hexW);
  height: var(--hexH);
  display: flex;
}

.porque__hex::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(150deg, #ffffff 0%, #dde2ea 100%);
  border: 1.5px solid #c5cbd6;
  box-shadow: inset 0 -11px 15px rgba(12, 1, 55, 0.1), inset 0 6px 10px rgba(255, 255, 255, 0.95);
}

.porque__hex--glow::before {
  background: linear-gradient(150deg, #fff8f0 0%, #f3d9bd 100%);
  border-color: color-mix(in srgb, var(--c-primario) 45%, #c5cbd6);
  box-shadow: inset 0 -11px 15px rgba(180, 90, 0, 0.12), inset 0 6px 10px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 153, 0, 0.2);
}

.porque__hex--core::before {
  background: radial-gradient(circle at 45% 38%, #ffc588 0%, var(--c-primario) 55%, var(--c-primario-oscuro) 100%);
  border-color: var(--c-primario);
  box-shadow: 0 0 34px rgba(255, 153, 0, 0.65), inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}

.porque__hex-icon {
  position: relative;
  z-index: 1;
  margin: auto;
  width: 40%;
  height: 40%;
  color: #fff;
}

.porque__hex-icon svg {
  width: 100%;
  height: 100%;
}

/* Líneas conectoras del cluster a cada callout: curva suave + punto,
   como en el mockup, en vez de un marcador suelto. */
.porque__connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.porque__connectors path {
  fill: none;
  stroke: var(--c-primario);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.porque__connectors circle {
  fill: var(--c-primario);
}

.porque__callout {
  position: absolute;
  z-index: 2;
  max-width: 42%;
}

.porque__callout--infra {
  right: 2%;
  top: 6%;
  text-align: right;
}

.porque__callout--soporte {
  left: 11%;
  top: 44%;
}

.porque__callout--ciber {
  right: 2%;
  top: 66%;
  text-align: right;
}

.porque__callout-titulo {
  display: block;
  font-family: var(--font-subheading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-dark);
}

.porque__callout-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--c-text-muted);
}

.porque__visual-tagline {
  position: absolute;
  z-index: 2;
  right: 2%;
  top: 84%;
  padding-top: 0.6rem;
  border-top: 3px solid var(--c-primario);
  text-align: right;
  font-family: var(--font-subheading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--c-text-dark);
}

.porque__visual-tagline strong {
  color: var(--c-primario);
}

@media (max-width: 900px) {
  .porque__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .porque__visual {
    order: -1;
    min-height: 340px;
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 560px) {
  .porque__hexcluster {
    --hexW: 68px;
  }
  .porque__callout {
    max-width: 60%;
    overflow-wrap: break-word;
  }
  .porque__callout-titulo {
    font-size: 0.68rem;
  }
  .porque__callout-sub {
    font-size: 0.62rem;
  }
}

@media (max-width: 560px) {
  .porque__beneficios {
    flex-wrap: wrap;
    row-gap: 1.2rem;
  }
  .porque__beneficio {
    flex: 1 1 40%;
    border-right: none;
  }
}

/* ============ BLOQUE 3 · SERVICIOS (hexágonos nativos + íconos SVG, 2026-09-08) ============ */
/* Se probó recortar los íconos del mockup como imagen (con recuadro, con
   difuminado, y en círculo) y Dai los rechazó las 3 veces: no quería ningún
   fondo/placa detrás y el recorte rasterizado se veía mal a este tamaño
   chico. Los íconos son SVG vectorial (currentColor), nítidos a cualquier
   tamaño y sin fondo. */
.servicios {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 0%, transparent 38%, rgba(12, 1, 55, 0.035) 38.4%, transparent 39%, transparent 100%),
    linear-gradient(115deg, transparent 0%, transparent 60%, rgba(12, 1, 55, 0.03) 60.4%, transparent 61%, transparent 100%),
    linear-gradient(135deg, #f6f7fa 0%, #eef0f5 45%, #e7e9ef 100%);
  color: var(--c-text-dark);
}

.servicios::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 480px 90px at 4% 62%, rgba(255, 153, 0, 0.4), transparent 70%),
    radial-gradient(ellipse 420px 90px at 34% 96%, rgba(255, 153, 0, 0.32), transparent 70%),
    radial-gradient(ellipse 120px 260px at 2% 55%, rgba(255, 153, 0, 0.22), transparent 70%);
  filter: blur(2px);
}

.servicios > .container,
.servicios .hex-grid {
  position: relative;
  z-index: 1;
}

.servicios__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  color: var(--c-text-muted);
  font-size: 1.15rem;
}

.hex-grid {
  --hexW: clamp(160px, 20vw, 280px);
  --hexH: calc(var(--hexW) * 1.1547005);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
}

.hex-row {
  display: flex;
  gap: calc(var(--hexW) * 0.045);
}

.hex-row--pull {
  margin-top: calc(var(--hexH) * -0.25);
}

.hex-row--offset {
  transform: translateX(calc(var(--hexW) * 0.53));
}

.hex {
  position: relative;
  width: var(--hexW);
  height: var(--hexH);
  transition: transform 0.25s ease, filter 0.25s ease;
}

.hex:hover {
  transform: scale(1.05);
  z-index: 5;
}

.hex__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px solid color-mix(in srgb, var(--hex-color) 65%, black 12%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hex-color) 80%, white 22%) 0%,
    var(--hex-color) 48%,
    color-mix(in srgb, var(--hex-color) 78%, black 18%) 100%
  );
  box-shadow:
    inset 2px 3px 8px rgba(255, 255, 255, 0.3),
    inset -4px -7px 12px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.25s ease;
}

.hex:hover .hex__face {
  box-shadow:
    inset 3px 4px 14px rgba(255, 255, 255, 0.5),
    inset -6px -10px 18px rgba(0, 0, 0, 0.22),
    0 0 26px color-mix(in srgb, var(--hex-color) 65%, transparent);
}

.hex__inner {
  position: relative;
  z-index: 1;
  margin: auto;
  width: 100%;
  padding: 0 20%;
  text-align: center;
}

.hex__icono {
  width: calc(var(--hexW) * 0.2);
  height: calc(var(--hexW) * 0.2);
  margin: 0 auto 0.35rem;
  color: inherit;
}

.hex__icono svg {
  width: 100%;
  height: 100%;
}

.hex__titulo {
  font-family: var(--font-subheading);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.hex__titulo::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 0.5rem auto 0.7rem;
  background: rgba(255, 255, 255, 0.55);
}

.hex--c .hex__titulo {
  width: 140%;
  margin-left: -20%;
}

.hex__desc {
  font-size: calc(var(--hexW) * 0.048);
  line-height: 1.35;
  opacity: 0.9;
}

.hex--a,
.hex--b,
.hex--d {
  color: var(--c-text-light);
}

.hex--a {
  --hex-color: var(--c-primario);
}
.hex--b {
  --hex-color: var(--c-navy-claro);
}
.hex--c {
  --hex-color: #f5efe6;
  color: var(--c-text-dark);
}
.hex--d {
  --hex-color: var(--c-navy-claro);
}

.hex--c .hex__icono {
  color: var(--c-primario);
}

.hex--c .hex__titulo::after {
  background: var(--c-primario);
}

.hex--c .hex__desc {
  color: var(--c-text-muted);
  opacity: 1;
}

@media (max-width: 900px) {
  .hex-grid {
    --hexW: 50vw;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 10px;
  }
  .hex-row {
    display: contents;
  }
  .hex-row--offset {
    transform: none;
  }
}

/* ============ BLOQUE 4 · PRODUCTOS / SOLUCIONES (tal cual mockup 2026-09) ============ */
.productos {
  background: var(--c-bg-white);
  position: relative;
  overflow: hidden;
}

.productos__intro {
  max-width: 620px;
  margin: var(--space-xs) auto 0;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.producto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-top: var(--space-lg);
}

.producto-card {
  --card-color: var(--c-primario);
  position: relative;
  background: var(--c-bg-white);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(12, 1, 55, 0.08);
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow: hidden;
}

.producto-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 60px;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--card-color);
}

.producto-card:nth-child(even) {
  --card-color: var(--c-navy);
}

.producto-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.producto-card__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--font-heading);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}

.producto-card__nombre {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.28;
  font-weight: 700;
  color: var(--c-navy);
  padding-top: 0.15rem;
  min-height: 2.56em;
}

.producto-card__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 0.9rem;
  align-items: start;
}

.producto__lista li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--c-text-dark);
}

.producto__lista li:last-child {
  margin-bottom: 0;
}

.producto__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-color);
}

.producto__imagen {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(12, 1, 55, 0.14);
}

.producto__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.productos__tagline {
  position: relative;
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-text-muted);
}

.productos__tagline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--c-primario);
}

@media (max-width: 1080px) {
  .producto-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .producto-grid {
    grid-template-columns: 1fr;
  }
  .producto-card__body {
    grid-template-columns: 1fr;
  }
  .producto__imagen {
    max-width: 200px;
    justify-self: start;
  }
}

/* ============ BLOQUE 5 · CASOS DE ÉXITO Y CLIENTES ============ */
.clientes {
  background: var(--c-bg-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.clientes__texto {
  max-width: 720px;
  margin: 0 auto var(--space-lg);
  font-size: 1.15rem;
}

/* Casos de éxito (carrusel de tarjetas) */
.casos__carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: 0 var(--space-md);
}

.casos__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--space-xs) 0 var(--space-sm);
  scrollbar-width: none;
}

.casos__track:focus-visible {
  outline: 3px solid var(--c-primario);
  outline-offset: 2px;
}

.casos__track::-webkit-scrollbar {
  display: none;
}

.caso-card {
  flex: 0 0 300px;
  min-height: 460px;
  scroll-snap-align: start;
  background: var(--c-bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(12, 1, 55, 0.12);
  text-align: left;
  display: flex;
  flex-direction: column;
}

.caso-card__img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.caso-card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
}

.caso-card__titulo {
  font-family: var(--font-subheading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-text-dark);
  line-height: 1.3;
  margin: 0;
  flex-shrink: 0;
  min-height: calc(1.05rem * 1.3 * 2);
}

.caso-card__texto {
  font-size: 0.88rem;
  color: var(--c-text-muted);
  line-height: 1.45;
  margin: 0;
  flex-shrink: 0;
}

.caso-card__texto strong {
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
}

.casos__btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--c-bg-white);
  color: var(--c-text-dark);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(12, 1, 55, 0.15);
  transition: background 0.2s ease, color 0.2s ease;
}

.casos__btn:hover {
  background: var(--c-primario);
  color: var(--c-text-dark);
}

@media (max-width: 640px) {
  .casos__carousel {
    padding: 0 var(--space-xs);
  }
  .caso-card {
    flex-basis: 78vw;
  }
  .casos__btn {
    display: none;
  }
}

/* Logos de clientes (marquee infinito) */
.clientes__carousel-wrap {
  position: relative;
  background: var(--c-bg-dark);
  margin-top: var(--space-lg);
  padding-top: 2.2rem;
}

.clientes__pause-btn {
  position: absolute;
  top: 0.6rem;
  right: var(--space-md);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: 1px solid rgba(254, 252, 250, 0.3);
  border-radius: 999px;
  color: var(--c-text-light);
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.clientes__pause-btn:hover {
  opacity: 1;
  background: rgba(254, 252, 250, 0.08);
}

.clientes__pause-icon {
  font-size: 0.7em;
  letter-spacing: 1px;
}

@media (max-width: 640px) {
  .clientes__pause-btn {
    right: var(--space-sm);
  }
}

.clientes__carousel {
  display: flex;
  overflow: hidden;
  padding: var(--space-md) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.clientes__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: max-content;
  gap: var(--space-xl);
  padding-right: var(--space-xl);
  animation: clientes-scroll 36s linear infinite;
}

.clientes__carousel:hover .clientes__track,
.clientes__track.is-paused {
  animation-play-state: paused;
}

/* La caja fija (width+height+object-fit:contain, como el sitio raíz) hacía
   que cada wordmark "ancho" (H-constrained por contain) quedara con una
   altura de tinta distinta según su propia relación ancho/alto — Galicia
   Seguros (6.94:1) se achicaba mucho más que FEMSA (4.34:1) aunque las dos
   cajas midieran lo mismo. Se vuelve a ALTURA fija + ancho libre (sin
   contain): así el alto de tinta queda igual para todos los wordmarks, y
   el ancho de cada uno queda libre según su proporción real. */
.clientes__track img {
  width: auto;
  height: 40px;
  flex-shrink: 0;
  opacity: 0.95;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s ease;
}

.clientes__track img:hover {
  opacity: 1;
}

/* Logos con relación de aspecto muy cuadrada/vertical: a igual altura fija
   quedan mucho más angostos que el resto y se ven "más chicos" en el
   sentido opuesto (poco ancho). Se sube la altura puntual de cada uno para
   acercar su ancho renderizado al del resto de los isotipos. */
.clientes__track img[src*="abs-capital"] { height: 69px; }
.clientes__track img[src*="bancopiano"] { height: 78px; }
.clientes__track img[src*="bayer"] { height: 91px; }
.clientes__track img[src*="cencosud"] { height: 63px; }
.clientes__track img[src*="novo-nordisk"] { height: 75px; }
.clientes__track img[src*="zurich"] { height: 72px; }

@media (max-width: 640px) {
  .clientes__track {
    gap: var(--space-lg);
    padding-right: var(--space-lg);
  }
  .clientes__track img {
    width: auto;
    height: 30px;
  }
  .clientes__track img[src*="abs-capital"] { height: 52px; }
  .clientes__track img[src*="bancopiano"] { height: 59px; }
  .clientes__track img[src*="bayer"] { height: 68px; }
  .clientes__track img[src*="cencosud"] { height: 47px; }
  .clientes__track img[src*="novo-nordisk"] { height: 56px; }
  .clientes__track img[src*="zurich"] { height: 54px; }
}

@keyframes clientes-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .clientes__track,
  .hero__scroll-icon svg {
    animation: none;
  }
}

/* ============ CERTIFICACIÓN DE CALIDAD ============ */
.certificacion__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  text-align: left;
  color: var(--c-text-light);
  font-size: 0.9rem;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid rgba(254, 252, 250, 0.15);
}

.certificacion__grid > * {
  flex: 1 1 260px;
}

.certificacion__descarga a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.certificacion__sellos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.certificacion__sellos img {
  height: 64px;
  width: auto;
  background: var(--c-bg-white);
  border-radius: 6px;
  padding: 4px;
}

.certificacion__sellos p {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.certificacion__texto {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .certificacion__grid {
    text-align: center;
  }
  .certificacion__grid > * {
    flex: 1 1 100%;
  }
  .certificacion__sellos {
    justify-content: center;
  }
}

/* ============ CONTACTO ============ */
.contacto__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid rgba(254, 252, 250, 0.15);
}

.contacto__titulo {
  margin: 0;
  color: var(--c-primario);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
}

.contacto__lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contacto__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.contacto__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 2px solid var(--c-primario);
  border-radius: 9px;
  color: var(--c-primario);
}

.contacto__item--tel .contacto__icono {
  border-radius: 50%;
}

.contacto__icono svg {
  width: 16px;
  height: 16px;
}

.contacto__lista a {
  color: var(--c-primario);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.contacto__lista a:hover,
.contacto__lista a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .contacto__grid {
    align-items: center;
    text-align: center;
  }
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--c-bg-dark);
  color: rgba(254, 252, 250, 0.7);
  text-align: center;
  padding: var(--space-md) 0;
  font-size: 0.85rem;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}