/* =====================
   NAVBAR — Pill flotante glassmorphism
   ===================== */
.navbar {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-navbar);
  width: calc(100% - 2rem);
  max-width: 1312px;
}

.navbar__pill {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: rgba(47, 65, 92, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 150px;
  padding: 16px 30px;
  width: 100%;
}

.navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

.navbar__logo img {
  height: 34px;
  width: auto;
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-right: auto;
  margin-left: 40px;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-white-pure);
  white-space: nowrap;
  transition: color var(--transition);
  line-height: 30px;
}

.navbar__link:hover,
.navbar__link--active {
  color: var(--color-orange);
}

/* En el patrón split (Productos) el marcador de activo vive en el enlace, pero
   la flecha es un botón hermano: sin esto se quedaría blanca junto al texto naranja. */
.navbar__link--split.navbar__link--active ~ .navbar__link--arrow {
  color: var(--color-orange);
}

.navbar__link svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.navbar__link:hover svg {
  transform: rotate(180deg);
}

/* ---- Dropdown ---- */
.navbar__item {
  position: relative;
}

.navbar__link--btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
}

/* Trigger dividido (solo Productos): el texto es link a productos.html y la
   flecha despliega el submenu. La flecha se pega al texto reduciendo su padding. */
.navbar__item--split {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.navbar__link--split {
  padding-right: 4px;
}

.navbar__link--arrow {
  padding-left: 0;
  padding-right: 12px;
  gap: 0;
}

.navbar__item--dropdown:hover .navbar__link--arrow svg {
  transform: rotate(180deg);
}

/* Menús sin página (Soluciones, Más): mismo look que Productos pero toda la
   fila despliega. El texto y la flecha van en spans dentro de un único botón. */
.navbar__btn-arrow {
  display: inline-flex;
  align-items: center;
}

.navbar__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 220px;
  background-color: rgba(38, 50, 56, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: var(--z-dropdown);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Puente invisible: cubre el hueco de 12px entre el trigger y el dropdown
   para que el :hover del padre no se pierda al cruzarlo con el mouse.
   Solo con puntero real: en táctil este puente robaría el tap de la flecha. */
@media (hover: hover) {
  .navbar__dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    /* Cerrado, el puente no debe capturar nada: el dropdown de perfil se
       alinea a la derecha y su franja se montaba sobre el botón Cotiza,
       abriendo el menú al pasar el mouse por el botón. */
    pointer-events: none;
  }

  /* El puente solo se activa cuando el menú ya está abierto. */
  .navbar__item--dropdown:hover .navbar__dropdown::before,
  .navbar__item--dropdown:focus-within .navbar__dropdown::before,
  .navbar__dropdown--open::before {
    pointer-events: auto;
  }
}

/* Apertura por click (JS) — universal, incluye táctil */
.navbar__dropdown--open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Apertura por hover/focus — solo en dispositivos con puntero real.
   En táctil (iPad/móvil) evita que el primer toque active el :hover y "robe"
   el click del link Productos; ahí los dropdowns abren solo con tap en la flecha. */
@media (hover: hover) {
  .navbar__item--dropdown:hover .navbar__dropdown,
  .navbar__item--dropdown:focus-within .navbar__dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dropdown del perfil (vive en .navbar__actions, pegado a la derecha): mismos
   estilos que los submenus del nav, pero alineado a la derecha para no salirse
   del viewport. Solo desktop (≥1200px); en mobile hereda el layout del menú. */
@media (min-width: 1200px) {
  .navbar__dropdown--account {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-8px);
  }

  .navbar__item--account:hover .navbar__dropdown--account,
  .navbar__item--account:focus-within .navbar__dropdown--account,
  .navbar__dropdown--account.navbar__dropdown--open {
    transform: translateX(0) translateY(0);
  }
}

/* Mobile: el icono de perfil va inline junto al de idioma (no full-width como
   los items del nav) y su dropdown abre hacia arriba como panel sólido legible
   (el icono está al fondo del menú). El "volver" sobra: se cierra re-tocando. */
@media (max-width: 1199.98px) {
  /* El icono de perfil va inline con el de idioma; su panel se ancla al
     .navbar__pill--open (fixed, pantalla completa) para centrarse en el
     viewport. NO se posiciona .navbar__actions: el hamburger de cerrar vive
     dentro y su position:absolute debe anclarse al pill, no a actions. */
  .navbar__pill--open .navbar__actions .navbar__item--account {
    width: auto;
    position: static;
  }

  .navbar__dropdown--account .navbar__dropdown-back {
    display: none;
  }

  .navbar__dropdown--account.navbar__dropdown--open {
    position: absolute;
    top: auto;
    bottom: 64px;
    /* Centrado con márgenes auto (no con transform): el :focus-within del botón
       fuerza transform:none al abrir y descentraba el translateX. */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    min-width: 220px;
    background-color: rgba(38, 50, 56, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .navbar__dropdown--account .navbar__dropdown-link {
    text-align: center;
    padding: 12px 16px;
  }
}

.navbar__dropdown-link {
  display: block;
  padding: 10px 16px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.navbar__dropdown-link:hover {
  background-color: rgba(254, 80, 0, 0.15);
  color: var(--color-orange);
}

/* Doble clase a propósito: .navbar__dropdown-link fija su color más abajo en el
   archivo que .navbar__link--active, y con igual especificidad ganaría el blanco. */
.navbar__dropdown-link.navbar__link--active {
  color: var(--color-orange);
}

/* Botón "volver" del submenu mobile (drill-down). Oculto en desktop. */
.navbar__dropdown-back {
  display: none;
}

.navbar__dropdown-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-primary);
  color: var(--color-white-pure);
}

.navbar__dropdown-back-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(90deg);
}

/* Right side: Cotiza + icons */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.navbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  background-color: var(--color-orange);
  color: var(--color-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  border-radius: 24px;
  white-space: nowrap;
  transition:
    background-color var(--transition),
    transform var(--transition);
  line-height: 30px;
}

.navbar__cta:hover {
  background-color: var(--color-orange-dark);
  transform: translateY(-1px);
}

.navbar__icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  transition: opacity var(--transition);
}

.navbar__icon-btn:hover {
  opacity: 1;
}

.navbar__icon-btn svg {
  width: 22px;
  height: 22px;
}

/* Selector de idioma: el globo abre un <select> nativo (Español/English)
   superpuesto y transparente, para no perder el icono. */
.navbar__lang {
  position: relative;
}

.navbar__lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* evita el zoom automático de iOS al enfocar */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hamburger (mobile) */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.navbar__hamburger-line {
  width: 24px;
  height: 2px;
  background-color: var(--color-white-pure);
  transition:
    transform var(--transition),
    opacity var(--transition);
  border-radius: 2px;
}

.navbar__hamburger[aria-expanded='true'] .navbar__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger[aria-expanded='true'] .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger[aria-expanded='true'] .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navbar__hamburger[aria-expanded='true'] .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Navbar scrolled */
.navbar--scrolled {
  box-shadow: var(--shadow-md);
}

/* =====================
   BOTONES — Sistema del style guide Figma
   Tamaño default = Large (el más usado en el sitio)
   ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg); /* Large: 20px */
  line-height: 30px;
  padding: 10px 40px; /* Large */
  border-radius: 2rem;
  border: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition);
}

/* ---- Tamaños ---- */
.btn--md {
  font-size: var(--fs-md); /* 16px */
  padding: 8px 32px;
}

.btn--sm {
  font-size: var(--fs-sm); /* 14px */
  padding: 6px 28px;
  height: 36px;
}

/* ---- Ancho completo ---- */
.btn--full {
  width: 100%;
}

/* ---- Primary — naranja sólido ---- */
.btn--primary {
  background-color: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
}
.btn--primary:hover {
  background-color: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
}

/* ---- Secondary — borde oscuro, para fondos claros ---- */
.btn--secondary {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--secondary:hover {
  background-color: var(--color-white);
}

/* ---- Secondary Inverse — borde claro, para fondos oscuros o con imagen ---- */
.btn--secondary-inverse {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn--secondary-inverse:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

/* =====================
   SECTION TITLE
   ===================== */
.section-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-lg);
}

.section-title--white {
  color: var(--color-white-pure);
}

.section-title--center {
  text-align: center;
}

/* =====================
   EYEBROW — Label naranja uppercase sobre un título
   ===================== */
.eyebrow {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 56px;
  color: var(--color-orange);
  text-transform: uppercase;
  margin: 0;
}

/* En mobile los eyebrows largos ("Almacenamiento Energético (BESS)") hacen
   wrap a 2 líneas; el line-height de 56px (pensado para 1 línea) deja un
   espacio excesivo entre ellas. */
@media (max-width: 575.98px) {
  .eyebrow {
    line-height: 28px;
  }
}

/* =====================
   SECTION HEADER (título + controles)
   ===================== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.section-header__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

/* =====================
   SLIDER ARROWS
   ===================== */
.slider-arrows {
  display: flex;
  gap: var(--space-xs);
}

.slider-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--color-navy);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition);
  color: var(--color-navy);
}

.slider-arrow:hover {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white-pure);
}

.slider-arrow svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =====================
   SECTOR CARD — Componente reutilizable
   (imagen de fondo + overlay + título + subtítulo + CTA)
   ===================== */
.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 528px;
  padding: 24px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

/* Gradiente: pseudo-element del card (z-index 0), encima de la imagen (-1) y debajo del contenido (1) */
.sector-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(102, 102, 102, 0) 0%,
    rgba(0, 0, 0, 0.9) 79.327%
  );
  pointer-events: none;
}

/* Imagen de fondo */
.sector-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.sector-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

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

/* Contenido */
.sector-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sector-card__title {
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-bold);
  line-height: 34px;
  color: var(--color-white);
  margin: 0;
}

.sector-card__text {
  font-size: var(--fs-md); /* 16px */
  font-weight: var(--fw-light);
  line-height: 30px;
  color: var(--color-white);
  margin: 0;
}

/* Tres renglones exactos en las descripciones de las tarjetas: el min-height
   los reserva cuando el texto no llega y line-clamp corta con puntos
   suspensivos cuando se pasa, de modo que el botón quede a la misma altura en
   todas. Mismo patrón que las ventajas del interior de producto.

   Va por sección y no sobre la clase suelta porque `.product-card__text` lo
   comparten cuatro bloques: `.advantages` usa siete renglones —su propia regla
   gana—, y Techumbres lleva textos de cuatro que este recorte cortaría, así
   que se excluye con su modificador. */
.sectors .sector-card__text,
.products:not(.products--roofing) .sector-card__text,
.products:not(.products--roofing) .product-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  overflow: hidden;
  min-height: calc(30px * 3);
}

/* .sector-card__cta usa: btn btn--secondary-inverse btn--full */

/* =====================
   PRODUCT CARD — Componente reutilizable (slider de productos)
   Misma estructura visual que sector-card, con título 28px y gap distinto
   ===================== */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 28px;
  height: 528px;
  padding: 24px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

.product-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

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

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(102, 102, 102, 0) 0%,
    rgba(0, 0, 0, 0.9) 79.327%
  );
  pointer-events: none;
}

.product-card__info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-card__title {
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 38px;
  color: var(--color-white-pure);
  margin: 0;
}

.product-card__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: 30px;
  color: #f4f4f4;
  margin: 0;
}

/* .product-card__cta usa: btn btn--secondary-inverse btn--full
   z-index: 1 necesario para quedar sobre el ::after del card */
.product-card__cta {
  position: relative;
  z-index: 1;
}

/* =====================
   CASE CARD — Componente reutilizable (Casos de éxito)
   Card vertical: imagen superior + badge + título + descripción + CTA
   El play icon es opcional: se muestra con .case-card__play (si existe)
   ===================== */
.case-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-card__image-wrap {
  position: relative;
  height: 224px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-navy);
  flex-shrink: 0;
}

.case-card__image-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

.case-card:hover .case-card__image-wrap img {
  transform: scale(1.04);
}

/* Icono de play — opcional, centrado sobre la imagen */
.case-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 61px;
  height: 61px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.case-card__play img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Badge de categoría */
.case-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: rgba(254, 80, 0, 0.2);
  border-radius: 100px;
  font-size: 10.8px;
  font-weight: 500;
  line-height: 14.4px;
  color: var(--color-orange-ultra-dark);
  align-self: flex-start;
}

/* Cuerpo: título + descripción */
.case-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cuatro renglones de mínimo y de máximo. Desde que el título es el titular
   de la nota son largos y desiguales: medido a 1512px sobre el carrusel del
   home dan 4, 3 y 5 renglones, y a 375px dan 5, 5 y 8 —Galnik es el que se
   dispara—. Sin reserva las tarjetas se descolocan entre sí, y sin tope una
   sola estira la fila. El corte se marca con puntos suspensivos.

   Va aquí porque `.case-card` la comparten el home, las cuatro soluciones y
   «Otras experiencias» del interior de caso. */
.case-card__title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
  /* El corte de renglón es del cliente: desde el 28 de septiembre de 2026 este
     rótulo es el titular de la nota, así que cancela el `balance` de base.css
     como ya hacen los titulares de noticias. Medido en Galnik: balance dejaba
     el renglón más ancho en el 94% de la caja. */
  text-wrap: auto;
  min-height: 120px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
          line-clamp: 4;
  overflow: hidden;
}

.case-card__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: #7f7f7f;
  margin: 0;
}

/* .case-card__cta usa: btn btn--secondary
   align-self: flex-start para que no se estire en el flex-col del card */
.case-card__cta {
  align-self: flex-start;
}

/* =====================
   VIDEO CON PORTADA Y PLAY
   Lo comparten el interior de caso y Solfium One. Vivía en `caso-interior.css`
   con el nombre `.case-detail__video`; al compartirlo, el nombre pasa a
   describir el componente y no la página que lo estrenó.
   ===================== */
.video-play {
  position: relative;
  height: 680px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-navy);
  /* La portada y el iframe se apilan dentro: sin esto el z-index de la página
     se los lleva por delante. */
  isolation: isolate;
}

.video-play img,
.video-play iframe,
.video-play video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Con el iframe dentro, la portada y el botón sobran. */
.video-play.is-playing img,
.video-play.is-playing .video-play__btn {
  display: none;
}

.video-play__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 165px;
  height: 165px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--transition);
}

.video-play__btn:hover {
  opacity: 1;
}

/* El icono no se posiciona como las capas de arriba: llena su botón. */
.video-play__btn img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Solfium One lo pinta suelto entre el hero y el banner, no dentro de una
   columna de texto como el interior de caso: hereda la caja de la galería que
   estaba ahí antes, que era más alta y de esquinas más redondeadas. Los dos
   breakpoints de abajo ya coinciden con los que tenía. */
.video-play--one {
  height: 725px;
  border-radius: 16px;
}

@media (max-width: 991.98px) {
  .video-play {
    height: 420px;
  }

  .video-play__btn {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 575.98px) {
  .video-play {
    height: 240px;
    border-radius: 16px;
  }

  .video-play__btn {
    width: 72px;
    height: 72px;
  }
}

/* =====================
   CARD DE NOTICIAS
   ===================== */
.news-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.news-card__image-wrap {
  height: 176px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #252525;
  flex-shrink: 0;
}

.news-card__image-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-card__image-wrap img {
  transform: scale(1.04);
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  flex: 1;
}

.news-card__date {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 16px;
  color: var(--color-gray-light);
}

/* El titular de una nota lo escribe quien la publica: el corte de renglón es
   suyo, y aquí se cancela el `balance` de base.css. */
.news-card__title {
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 25px;
  color: var(--color-navy);
  margin: 0;
  flex: 1;
  text-wrap: auto;
}

/* CTA estilo Icon Button (Tertiary) del style guide */
.news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 30px;
  color: var(--color-icon);
  transition: color var(--transition);
}

.news-card__cta:hover {
  color: var(--color-navy);
}

.news-card__cta svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* =====================
   ARTICLE CARD — "Card_noticias" (noticias.html y noticias-interior.html)
   Card vertical: imagen + fecha + título + descripción + CTA
   ===================== */
.article-grid__title {
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.article-card {
  flex: 1 1 280px;
  max-width: 312px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #fcfcfc;
  border-radius: 16px;
}

.article-card__image-wrap {
  height: 176px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #252525;
}

.article-card__image-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding-top: 16px;
}

.article-card__date {
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--color-gray-light);
}

/* El titular de una nota lo escribe quien la publica: el corte de renglón es
   suyo, y aquí se cancela el `balance` de base.css. */
.article-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
  text-wrap: auto;
  /* Los titulares de las notas van de una a seis líneas. Se recortan a tres y
     el navegador agrega los puntos suspensivos. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__text {
  font-size: 14px;
  font-weight: var(--fw-light);
  line-height: 30px;
  color: var(--color-icon);
  margin: 0;
}

.article-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-icon);
}

.article-card__cta:hover {
  color: var(--color-navy);
}

.article-card__cta svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* =====================
   PROGRESS BAR
   ===================== */
.progress-bar {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background-color: var(--color-orange);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* =====================
   INTERIOR HERO — Sección reutilizable (soluciones y productos)
   Imagen estática, borde redondeado, márgenes = igual que .hero del home
   Diferencias: menor altura, gradiente izquierda→derecha, título más pequeño
   ===================== */
.interior-hero {
  position: relative;
  height: 613px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 24px;
  margin: 0 0.875rem 0;
  background-color: var(--color-navy);
}

/* Hero más bajo: 434 en el Figma frente a los 613 de las demás vistas. Solo
   cambia el alto. Lo llevan el interior de noticia, el de caso y «Refiere y
   gana», así que el nombre describe la variante y no la página que lo estrenó. */
.interior-hero--corto {
  height: 434px;
}

.interior-hero__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.interior-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

/* Gradiente: oscuro a la izquierda (hasta ~61.6%), transparente a la derecha */
.interior-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 61.663%,
    rgba(102, 102, 102, 0) 100%
  );
}

.interior-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  /* padding-inline = 2rem + 30px: los 30px compensan el padding horizontal
     de .navbar__pill para que el texto quede alineado con el logo */
  padding: 156px calc(2rem + 30px) 102px;
}

.interior-hero__content {
  display: flex;
  flex-direction: column;
  gap: 35px;
  max-width: 800px;
}

/* El reparto por renglones lo hace el navegador, no el contenido: doce de los
   dieciocho títulos dejaban una palabra sola en el último renglón en algún
   ancho. Un navegador anterior a `balance` parte como siempre. */
.interior-hero__title {
  font-size: 44px;
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-white-pure);
  margin: 0;
  text-wrap: balance;
}

.interior-hero__desc {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-white-pure);
  margin: 0;
  /* Reparte los dos renglones en vez de llenar el primero. Medido a 1512px:
     en `/productos/` iban a 712 y 454 dentro de un contenedor de 800, y con
     esto quedan en 604 y 562. Mejora las once vistas que llevan esta clase
     —Industrial pasa de 800/293 a 538/555— y ninguna gana un renglón.
     Es el mismo mecanismo que ya reparte los títulos desde `base.css`; aquí
     hace falta declararlo porque esto es un `<p>`. */
  text-wrap: balance;
}

/* =====================
   INTERIOR PAGE — Wrapper de página (soluciones y productos)
   Las secciones usan su propio padding-block (--space-3xl).
   El gap aquí solo separa los bloques sin padding propio (hero, trusted, quote).
   ===================== */
.interior-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 12px;
}

/* =====================
   SOLUTION OVERVIEW ROW — imagen + texto + chips (soluciones y productos)
   ===================== */
.solution-overview {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.solution-overview__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.solution-overview__row {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
}

.solution-overview__media {
  flex: 0 0 646px;
  border-radius: 16px;
  overflow: hidden;
}

.solution-overview__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.solution-overview__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.solution-overview__title {
  font-size: 32px;
  font-weight: var(--fw-semibold);
  line-height: 42px;
  color: var(--color-navy);
  margin: 0;
}

.solution-overview__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: #555;
  margin: 0;
}

.solution-overview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Chip: ícono + label/sublabel — usado en solution-overview */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: var(--color-white);
  border-radius: 16px;
}

.chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background-color: rgba(26, 26, 26, 0.1);
}

.chip__label {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 22px;
  color: #636363;
  margin: 0;
}

.chip__sublabel {
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 18px;
  color: #7f7f7f;
  margin: 0;
}

/* =====================
   TAB SELECTOR — pills de categoría + panel (soluciones, productos y casos)
   ===================== */
.tab-selector {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.tab-selector__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.tab-selector__nav {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.tab-selector__nav::-webkit-scrollbar {
  display: none;
}

/* Señal de scroll horizontal: los tabs se desvanecen en el borde que tiene
   más contenido oculto. tabs.js alterna las clases según scrollLeft. */
.tab-selector__nav.is-overflow-right:not(.is-overflow-left) {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 48px),
    transparent
  );
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}

.tab-selector__nav.is-overflow-left:not(.is-overflow-right) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
  mask-image: linear-gradient(to right, transparent, #000 48px);
}

.tab-selector__nav.is-overflow-left.is-overflow-right {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 48px,
    #000 calc(100% - 48px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 48px,
    #000 calc(100% - 48px),
    transparent
  );
}

.tab-selector__tab {
  flex-shrink: 0;
  padding: 10px 24px;
  border-radius: 24px;
  border: none;
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.tab-selector__tab.is-active {
  background-color: var(--color-orange);
  color: var(--color-white);
}

.tab-selector__panel {
  display: flex;
  align-items: stretch;
  gap: 61px;
}

/* Panel con varios casos apilados (sectores sin caso destacado único) */
.tab-selector__panel--cases {
  flex-direction: column;
  gap: 64px;
}

.tab-selector__case {
  display: flex;
  align-items: stretch;
  gap: 61px;
  width: 100%;
}

.tab-selector__media {
  flex: 0 1 646px;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
}

/* Indicador de video, solo en los casos que lo tienen cargado. */
.tab-selector__media {
  position: relative;
}

.tab-selector__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 61px;
  height: 61px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tab-selector__play img {
  width: 61px;
  height: 61px;
  -o-object-fit: contain;
     object-fit: contain;
}

.tab-selector__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

/* Modificador solo de productos.html: sus 6 tabs traen imágenes de proporciones
   muy distintas (de 640x427 a 640x960), así que el panel saltaba de 431px a
   969px de alto al cambiar de pestaña. Se fija la proporción de la más baja
   (640x427) y object-fit: cover recorta el resto.
   align-self es imprescindible: el panel es flex y con el stretch por defecto la
   imagen se estira al alto del texto, que gana sobre aspect-ratio.
   Se acota a >=768px porque por debajo .tab-selector__media ya lleva alto fijo. */
@media (min-width: 768px) {
  .tab-selector--capped-media .tab-selector__media {
    align-self: center;
    aspect-ratio: 640 / 427;
  }
}

/* Móvil: 300px en vez de los 320/240 del componente base. Con menos alto, el
   recorte centrado del mockup de Solfium Care se come el ícono de la app.
   Una sola regla cubre los dos breakpoints: la doble clase gana en especificidad. */
@media (max-width: 767.98px) {
  .tab-selector--capped-media .tab-selector__media {
    height: 300px;
  }
}

.tab-selector__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

/* Panel "Muy pronto": sector sin caso publicado, va sin imagen y el texto no
   debe estirarse a todo el ancho. Todavía no hay HTML que lo instancie. */
.tab-selector__content--empty {
  max-width: 646px;
}

.tab-selector__title {
  font-size: 32px;
  font-weight: var(--fw-semibold);
  line-height: 42px;
  color: var(--color-navy);
  margin: 0;
  /* El corte de renglón es del cliente: desde el 28 de septiembre de 2026 este
     rótulo es el titular de la nota, así que cancela el `balance` de base.css
     como ya hacen los titulares de noticias. Medido en Galnik: balance dejaba
     el renglón más ancho en el 91% de la caja. */
  text-wrap: auto;
}

.tab-selector__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: #555;
  margin: 0;
}

/* =====================
   TRUSTED BY — Sección reutilizable
   ===================== */
.trusted {
  background-color: var(--color-white-pure);
  padding-block: 0;
}

/* Espaciado dentro de .interior-page (soluciones, productos y nosotros) */
.interior-page .trusted {
  padding-block: 5rem;
}

.trusted__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding-block: 40px;
  padding-inline: calc(2rem + 30px);
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
}

@media (max-width: 991.98px) {
  .trusted__inner {
    padding-inline: var(--container-pad);
  }
}

.trusted__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.trusted__title {
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.trusted__subtitle {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
}

/* =====================
   TIER 1 BRANDS — Fila de logos estática, sin slider
   (productos e interior de Nosotros)
   ===================== */
.tier1-brands {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.tier1-brands__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.tier1-brands__title {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.tier1-brands__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 36px, no 100: a 85px de alto los seis logos suman 1015px y con la
     separación anterior se salían del contenedor de 1236px, partiéndose en dos
     filas. El Figma usa 50 y allí caben porque su logo más ancho mide 170;
     a 44 aquí caben justos, con cero holgura, y un logo más los partiría. */
  gap: 36px;
  flex-wrap: wrap;
}

/* Cada logo dentro de una caja de 170x85, la del frame de Fotovoltaico.
   **85px es un tope, no una medida fija**, y por eso el alto es fluido: a esa
   altura los seis logos suman 1015px y solo caben en una fila por encima de
   unos 1250px de viewport. Con `height` fijo se partían en dos a 1280, donde
   antes cabían. El `clamp` los deja en 85 desde 1417px y los encoge por
   debajo, con suelo en 56 para que no se vuelvan ilegibles; por debajo de
   992px manda el `max-height: 36px` del breakpoint, donde ya envuelven.
   El `max-width` es por Victron, que es un wordmark de 620x201: sin él mediría
   262px de ancho a 85 de alto. Con la caja queda a 170x55, como el ABB del
   Figma, que también es más bajo que sus vecinos por la misma razón. */
/* El logo enlazado va dentro de un <a>, que en el flex de la fila ocuparía su
   propio hueco: se ajusta a la imagen para que la fila mida lo mismo con
   enlace y sin él. */
.tier1-brands__enlace {
  display: inline-flex;
  align-items: center;
}

.tier1-brands__logos img {
  --tier-alto: clamp(56px, 6vw, 85px);
  /* `auto` y no una altura explícita: los dos topes bastan, porque la imagen
     se escala al más estrecho de los dos y todos los logos son más altos que
     85px de origen (400x201). Así el alto es de verdad un máximo. */
  height: auto;
  max-height: 85px;
  /* La caja es 2:1, como en el Figma (170x85), así que el ancho máximo se ata
     al alto en vez de fijarse: con 170 fijo, Victron no encogía con los demás
     y a 1100px la fila se pasaba nueve píxeles. */
  max-width: calc(var(--tier-alto) * 2);
  width: auto;
}

/* =====================
   PRODUCTS SECTION — Sección reutilizable
   ===================== */
.products {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.products__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.products__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.products__swiper {
  width: 100%;
}

.products__swiper .swiper-wrapper {
  align-items: stretch;
}

/* Barra de arrastre de los carruseles que no llevan flechas: soluciones y
   productos del home, productos de las soluciones, ecosistema y ventajas
   competitivas de los productos. Los que sí llevan flechas —casos de éxito,
   otros productos— no la usan: ya tienen de dónde agarrarse.

   Cada carrusel lleva su propia clase aunque el aspecto sea el mismo, porque
   Swiper engancha el scrollbar **por selector**: con una clase compartida, dos
   carruseles de la misma página se quedarían los dos con el primero. */
/* `width: 100%` y `min-width: 0` porque hay contenedores que son flex-column con
   `align-items: center` —`.advantages__inner` lo es—: ahí el contenedor de la
   barra es un item de flex, se dimensiona por su contenido y `min-width: auto`
   le impide encogerse por debajo de los 900px de la barra. Se salía 66px por
   cada lado del margen de la página, tapando el padding lateral. */
.products__scrollbar-wrap,
.sectors__scrollbar-wrap,
.ecosystem__scrollbar-wrap,
.advantages__scrollbar-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding-block: 22px;
}

/* Cuando no hay nada que arrastrar, Swiper le pone `swiper-scrollbar-lock` a la
   barra y su propio CSS la esconde, pero el contenedor se queda ocupando sus
   44px de padding. Le pasa a Ventajas por encima de 992px, donde las tres
   tarjetas caben. */
.products__scrollbar-wrap:has(.swiper-scrollbar-lock),
.sectors__scrollbar-wrap:has(.swiper-scrollbar-lock),
.ecosystem__scrollbar-wrap:has(.swiper-scrollbar-lock),
.advantages__scrollbar-wrap:has(.swiper-scrollbar-lock) {
  display: none;
}

.products__scrollbar,
.sectors__scrollbar,
.ecosystem__scrollbar,
.advantages__scrollbar {
  position: relative !important;
  width: 900px;
  max-width: 100%;
  height: 8px;
  border-radius: 8px;
  background: #d9d9d9;
}

.products__scrollbar .swiper-scrollbar-drag,
.sectors__scrollbar .swiper-scrollbar-drag,
.ecosystem__scrollbar .swiper-scrollbar-drag,
.advantages__scrollbar .swiper-scrollbar-drag {
  background: var(--color-orange);
  border-radius: 8px;
  cursor: -webkit-grab;
  cursor: grab;
}

.products__scrollbar .swiper-scrollbar-drag:active,
.sectors__scrollbar .swiper-scrollbar-drag:active,
.ecosystem__scrollbar .swiper-scrollbar-drag:active,
.advantages__scrollbar .swiper-scrollbar-drag:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* Modificador solo del home: grid 3x2 estático en desktop. El Swiper únicamente
   se instancia por debajo de 992px (ver init en index.html), así que aquí el
   wrapper no trae estilos inline. Las páginas de soluciones reusan
   .products__swiper SIN este modificador y siguen siendo carrusel a todo ancho. */
@media (min-width: 992px) {
  /* Aquí el Swiper ni se instancia, así que su scrollbar no tendría nada que
     arrastrar: sin esto quedaría una banda vacía de 44px bajo el grid. */
  .products__swiper--grid ~ .products__scrollbar-wrap {
    display: none;
  }

  .products__swiper--grid .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .products__swiper--grid .swiper-slide {
    height: auto;
  }
}

/* =====================
   CASES SECTION — Sección reutilizable
   ===================== */
.cases {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.cases__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.cases__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cases__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.cases__arrows {
  display: flex;
  gap: 17px;
  align-items: center;
}

.cases__arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--color-navy);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-navy);
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
  flex-shrink: 0;
}

.cases__arrow:hover {
  background-color: var(--color-white);
}

.cases__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* Swiper marca las flechas con .swiper-button-lock cuando las diapositivas
   caben todas y no hay a dónde navegar. Su regla de display pierde contra
   .cases__arrow a igual especificidad, así que hay que ganarle aquí. */
.cases__arrow.swiper-button-lock {
  display: none;
}

.cases__arrow svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cases__swiper {
  width: 100%;
}

/* =====================
   LOGOS SLIDER
   ===================== */
.logos-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Fade en los bordes: los logos se funden al entrar/salir del carrusel */
  --logos-fade: clamp(40px, 8%, 120px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--logos-fade),
    #000 calc(100% - var(--logos-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--logos-fade),
    #000 calc(100% - var(--logos-fade)),
    transparent 100%
  );
}

/* El desplazamiento lo hace Swiper. Sin la curva lineal, cada vuelta del
   autoplay arranca y frena, y se nota el latido. */
.logos-slider__track {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}

/* Con slidesPerView: 'auto', Swiper toma el ancho de la diapositiva del CSS. */
.logos-slider__item {
  flex-shrink: 0;
  height: 98px;
  width: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El enlace ocupa la caja completa del item: la imagen dimensiona con
   width/height al 100%, así que sin esto colapsa a 0x0. */
.logos-slider__enlace {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logos-slider__item img {
  max-height: 98px;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Hasta que Swiper arranca, el carrusel es una fila de logos que desborda.
   El overflow del contenedor ya lo recorta, así que no hay salto visible. */
.logos-slider:not(.swiper-initialized) .logos-slider__track {
  display: flex;
  gap: 100px;
}

/* =====================
   WHATSAPP BUTTON
   ===================== */
.whatsapp-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: var(--z-dropdown);
  width: 56px;
  height: 56px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn svg {
  width: 28px;
  height: 28px;
  fill: white;
}

/* =====================
   COOKIE BANNER — Aviso de uso de cookies (inyectado por cookies.js)
   Card fijo abajo-izquierda; aparece solo si no existe la cookie de consentimiento.
   ===================== */
.cookie-banner {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: var(--z-toast);
  width: calc(100% - 4rem);
  max-width: 360px;
  background-color: var(--color-white-pure);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.cookie-banner--hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.cookie-banner__title {
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-navy);
  margin: 0;
}

.cookie-banner__text {
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 22px;
  color: #555;
  margin: 0;
}

.cookie-banner__link {
  color: var(--color-orange);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.cookie-banner__link:hover {
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.cookie-banner__btn {
  flex: 1;
  align-self: auto;
  padding: 8px 16px;
  font-size: 14px;
}

/* =====================
   CTA BANNER — Componente reutilizable
   Imagen full-width + gradiente left→right + contenido left-aligned
   ===================== */
.cta-banner {
  position: relative;
  height: 478px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* La imagen de red lleva zonas transparentes: sin este fondo se vería el
     blanco del documento a través de ellas. */
  background-color: #000;
}

/* Capa de imagen de fondo */
.cta-banner__bg {
  position: absolute;
  inset: 0;
}

.cta-banner__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Sobre una foto el texto blanco no tiene de dónde agarrarse. El Figma lo
   resuelve con un degradado que oscurece la mitad izquierda —donde va el
   texto— y suelta la derecha, y aquí se hace igual en vez de hornearlo en la
   imagen. Solo en la variante de foto: las que van sobre el fondo de red no lo
   llevan, y ahí taparía la captura del dashboard.
   Medido contra el render de Figma: 59% de oscurecimiento a la izquierda, 48%
   al centro y 8% a la derecha. */
.cta-banner--foto .cta-banner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* La rampa del 25 de septiembre de 2026: 62% a la izquierda, 50% al
     centro y 8% a la derecha. El 26 se cambió por un plano al 70% que soltaba
     la derecha, y la foto se veía más clara. */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.50) 45%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

/* Apilado no hay «izquierda»: el texto queda encima de toda la foto. */
@media (max-width: 991.98px) {
  .cta-banner--foto .cta-banner__bg::after {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* Residencial Premium, frame del 28 de septiembre: 70% de negro hasta el 39%
   y la derecha se suelta. El velo del 25 se queda en las otras fotos. Por
   debajo de 992 manda el velo plano de arriba. */
@media (min-width: 992px) {
  .cta-banner--residencial.cta-banner--foto .cta-banner__bg::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.7) 39%,
      rgba(102, 102, 102, 0) 100%
    );
  }
}

@media (min-width: 576px) {
  .cta-banner--residencial .cta-banner__title {
    font-size: 28px;
    line-height: 34px;
    max-width: 980px;
  }
}



/* Contenido */
.cta-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.cta-banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 1 0;
  min-width: 0;
}

/* La captura del dashboard. El mix-blend-mode viene del diseño: funde los
   negros del PNG con el fondo en vez de recortarlos contra él. */
.cta-banner__media {
  flex: 0 0 auto;
  width: 711px;
  max-width: 100%;
  line-height: 0;
}

.cta-banner__media img {
  width: 100%;
  height: auto;
  mix-blend-mode: lighten;
}

.cta-banner__title {
  font-size: 36px;
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-white-pure);
  max-width: 681px;
  margin: 0;
}

.cta-banner__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 695px;
  margin: 0;
}

/* =====================
   FOOTER
   ===================== */
.footer {
  background-color: var(--color-navy);
  padding-block: 64px;
}

.footer__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Fila superior: brand col (278px) + nav cols (resto) */
.footer__top {
  display: flex;
  align-items: flex-start;
  padding-bottom: 48px;
}

/* Columna de marca */
.footer__brand {
  width: 278px;
  flex-shrink: 0;
  margin-right: 15px;
  height: 208px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer__logo img {
  height: 32px;
  width: auto;
}

.footer__social {
  display: flex;
  gap: 8px;
  align-items: center;
}

.footer__social-link {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition);
  opacity: 0.85;
}

.footer__social-link:hover {
  opacity: 1;
}

.footer__social-link img {
  width: 32px;
  height: 32px;
}

/* Columnas de navegación — justify-between sin gap forzado */
.footer__nav-cols {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

/* Anchos exactos del Figma */
.footer__col--soluciones {
  width: 170px;
}
.footer__col--empresa {
  width: 134px;
}
.footer__col--productos {
  width: 90px;
}
.footer__col--contacto {
  width: 234px;
}

.footer__col-title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: var(--color-white-pure);
  margin: 0;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
  margin-inline: 0;
}

.footer__link {
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--color-white-pure);
  transition: opacity var(--transition);
}

.footer__link:hover {
  opacity: 0.7;
}

/* Columna de contacto */
.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 20px;
}

.footer__contact-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.footer__contact-item img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
}

.footer__contact-text {
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--color-white-pure);
  margin: 0;
}

/* Barra inferior */
.footer__bottom {
  border-top: 1px solid var(--color-white-pure);
  padding-top: 33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__copy {
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 16px;
  color: var(--color-white-pure);
  margin: 0;
}

.footer__legal {
  display: flex;
  gap: 24px;
  align-items: center;
}

.footer__legal-link {
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 16px;
  color: var(--color-white-pure);
  transition: opacity var(--transition);
}

.footer__legal-link:hover {
  opacity: 0.7;
}

/* =====================
   FOOTER — Tablet: grid 3 columnas
   Fila 1: logo+redes, Soluciones, Empresa
   Fila 2: Productos, Contacto
   Acotado a la franja tablet para no pisar el apilado full de mobile (≤575.98px)
   ===================== */
@media (min-width: 576px) and (max-width: 991.98px) {
  .footer__top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 24px;
         column-gap: 24px;
    row-gap: 32px;
  }

  .footer__brand {
    width: auto;
    height: auto;
    margin-right: 0;
  }

  /* "Desenvuelve" el wrapper para que sus columnas entren directo al grid de footer__top */
  .footer__nav-cols {
    display: contents;
  }

  .footer__col--soluciones,
  .footer__col--empresa,
  .footer__col--productos,
  .footer__col--contacto {
    width: auto;
  }
}

/* =====================
   RESPONSIVE — Navbar (tablet landscape y abajo)
   El nav horizontal completo (logo + 5 items + Cotiza + idioma + usuario) no
   cabe en el pill por debajo de 1200px (iPad landscape 1024 desbordaba a la
   derecha). Se colapsa a hamburguesa desde xl (1199.98px), alineado con el
   sistema de breakpoints del proyecto.
   ===================== */
@media (max-width: 1199.98px) {
  .navbar {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    transform: none;
  }

  .navbar__pill {
    position: relative;
  }

  .navbar__nav {
    display: none;
  }

  .navbar__link {
    padding: 10px 12px;
    width: 100%;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__actions .navbar__icon-btn {
    display: none;
  }

  /* ---- Menú abierto: el pill se expande a panel de pantalla completa ---- */
  .navbar__pill--open {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    border-radius: 0;
    background-color: rgba(47, 65, 92, 0.5);
    overflow-y: auto;
  }

  .navbar__pill--open .navbar__hamburger {
    position: absolute;
    top: 16px;
    right: 30px;
  }

  .navbar__pill--open .navbar__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    gap: 4px;
    margin: 32px 0 24px;
  }

  .navbar__pill--open .navbar__nav > .navbar__link,
  .navbar__pill--open
    .navbar__nav
    > .navbar__item--dropdown
    > .navbar__link--btn {
    padding: 12px 0;
    width: auto;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
  }

  .navbar__pill--open .navbar__item--dropdown {
    width: 100%;
  }

  /* Trigger dividido (Productos): texto + flecha en una fila, submenu debajo */
  .navbar__pill--open .navbar__item--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .navbar__pill--open .navbar__item--split > .navbar__link--split {
    flex: 1 1 auto;
    width: auto;
    padding: 12px 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
  }

  .navbar__pill--open .navbar__item--split > .navbar__link--arrow {
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 44px;
    justify-content: center;
    margin-left: 8px;
    padding: 12px 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }

  .navbar__pill--open .navbar__item--split > .navbar__link--arrow svg {
    width: 14px;
    height: 14px;
  }

  .navbar__pill--open .navbar__item--split > .navbar__dropdown {
    flex-basis: 100%;
  }

  /* En drill-down, ocultar el texto: el submenu ya muestra su botón "volver" */
  .navbar__item--split.navbar__item--active > .navbar__link--split {
    display: none;
  }

  /* Soluciones / Más: mismo layout (label + divisor + flecha) que Productos,
     pero un solo botón → toda la fila despliega el submenu.
     Selector alineado en especificidad con la regla de .navbar__link--btn de arriba. */
  .navbar__pill--open
    .navbar__nav
    > .navbar__item--dropdown
    > .navbar__link--menu {
    display: flex;
    width: 100%;
    align-items: stretch;
    justify-content: space-between;
    padding: 0;
  }

  .navbar__pill--open .navbar__link--menu .navbar__btn-label {
    display: flex;
    align-items: center;
    padding: 12px 0;
  }

  .navbar__pill--open .navbar__link--menu .navbar__btn-arrow {
    min-width: 44px;
    justify-content: center;
    margin-left: 8px;
    padding: 12px 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }

  .navbar__pill--open .navbar__link--menu .navbar__btn-arrow svg {
    width: 14px;
    height: 14px;
  }

  /* En drill-down ocultar el botón entero (mismo peso que la regla display:flex de arriba) */
  .navbar__pill--open
    .navbar__nav
    > .navbar__item--active
    > .navbar__link--menu {
    display: none;
  }

  .navbar__pill--open .navbar__nav .navbar__link--btn svg {
    transform: rotate(-90deg);
  }

  .navbar__pill--open .navbar__nav .navbar__link--btn:hover svg {
    transform: rotate(-90deg);
  }

  /* Drill-down: mientras un submenu está abierto, se ocultan los demás items raíz */
  .navbar__nav--drilldown > .navbar__link,
  .navbar__nav--drilldown > .navbar__item--dropdown:not(.navbar__item--active) {
    display: none;
  }

  .navbar__item--active > .navbar__link--btn {
    display: none;
  }

  .navbar__dropdown::before {
    display: none;
  }

  .navbar__dropdown {
    position: static;
    display: none;
    flex-direction: column;
    opacity: 1;
    pointer-events: none;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
  }

  .navbar__dropdown--open {
    display: flex;
    pointer-events: all;
  }

  /* Neutraliza el transform del popover desktop (hover/focus-within tienen más especificidad) */
  .navbar__item--dropdown:hover .navbar__dropdown,
  .navbar__item--dropdown:focus-within .navbar__dropdown,
  .navbar__dropdown--open {
    transform: none;
  }

  .navbar__dropdown-back {
    display: block;
    margin-bottom: 8px;
  }

  .navbar__dropdown-back-btn {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
  }

  .navbar__dropdown-link {
    padding: 10px 0;
    border-radius: 0;
  }

  .navbar__dropdown-link:hover {
    background-color: transparent;
  }

  .navbar__pill--open .navbar__actions {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .navbar__pill--open .navbar__actions .navbar__cta {
    flex: 1 0 100%;
    text-align: center;
  }

  .navbar__pill--open .navbar__actions .navbar__icon-btn {
    display: flex;
  }
}

@media (max-width: 575.98px) {
  /* Logo más pequeño */
  .navbar__logo img {
    height: 22px;
  }

  /* Pill: padding reducido */
  .navbar__pill {
    padding: 16px 27px;
  }

  /* Cotiza: tamaño Small del style guide */
  .navbar__cta {
    padding: 6px 28px;
    font-size: 14px;
    height: 36px;
    line-height: 1;
  }

  /* Hamburger: 33×33px */
  .navbar__hamburger {
    width: 33px;
    height: 33px;
    padding: 6px;
  }
}

@media (max-width: 575.98px) {
  /* CTA Banner mobile */
  .cta-banner {
    height: auto;
    padding-block: 64px;
  }

  .cta-banner__media {
    width: 100%;
  }

  .cta-banner__title {
    font-size: 24px;
    font-weight: var(--fw-bold);
    line-height: 37px;
    max-width: none;
  }

  .cta-banner__text {
    font-size: 14px;
    max-width: none;
    color: rgba(255, 255, 255, 0.9);
  }

  /* El recorte al 70% deja el dashboard detrás del texto. El velo va en el
     fondo, debajo de .cta-banner__inner, que ya tiene z-index. Las fotos
     (Solfium One y Residencial) ya traen el suyo y no se recortan igual. */
  .cta-banner:not(.cta-banner--foto) .cta-banner__bg img {
    -o-object-position: 70% center;
       object-position: 70% center;
  }

  .cta-banner:not(.cta-banner--foto) .cta-banner__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  /* Full-width, color original. El relleno de Large más el nowrap sacaba
     «Solicita tu cotización inteligente» del botón; el hero ya baja al Small
     por lo mismo. Si aun así no cabe, parte dentro del pill. */
  .cta-banner .btn {
    width: 100%;
    max-width: 100%;
    padding: 6px 28px;
    font-size: 14px;
    line-height: 20px;
    height: auto;
    min-height: 36px;
    white-space: normal;
    text-align: center;
  }

  /* Footer mobile — apilado verticalmente */
  .footer {
    padding-inline: 32px;
  }

  .footer__inner {
    padding-inline: 0;
  }

  .footer__top {
    flex-direction: column;
    gap: 44px;
    padding-bottom: 44px;
  }

  /* Brand: logo arriba, social abajo con 44px entre ellos */
  .footer__brand {
    width: 100%;
    height: auto;
    margin-right: 0;
    gap: 44px;
    justify-content: flex-start;
  }

  /* Nav cols: apiladas en columna con 51px de separación */
  .footer__nav-cols {
    flex-direction: column;
    gap: 51px;
  }

  /* Todas las cols ocupan el ancho completo */
  .footer__col--soluciones,
  .footer__col--empresa,
  .footer__col--productos,
  .footer__col--contacto {
    width: 100%;
  }

  /* Bottom bar: legal encima (centered) + copyright abajo (centered) */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .footer__legal {
    order: -1;
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer__copy {
    order: 1;
    text-align: center;
  }
}

/* Tablet (768–1199px): las filas con imagen fija de 646px no caben y, si se
   apilaran a 1 columna como en móvil, se verían "estiradas" con la imagen en
   banda y mucho espacio vacío. Se mantienen 2 columnas proporcionales (48/52,
   el contenido necesita ≥349px a 768px) para aprovechar el ancho del tablet.
   Desktop ≥1200px conserva la media de 646px; teléfono ≤767px apila. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .tab-selector__panel:not(.tab-selector__panel--cases),
  .tab-selector__case,
  .solution-overview__row {
    gap: 40px;
  }

  .tab-selector__media,
  .solution-overview__media {
    flex: 48 1 0;
    min-width: 0;
  }

  .tab-selector__content,
  .solution-overview__content {
    flex: 52 1 0;
    min-width: 0;
  }
}

/* CTA Banner en tablet apaisada: el ancho de la captura es fijo (711px) y se
   pensó para el contenedor de escritorio. Entre 992 y 1200 se come casi todo el
   ancho disponible, y al texto le quedaban unos 120px: el título caía a una
   palabra por renglón y el bloque desbordaba los 478px de alto del banner, que
   recorta con `overflow: hidden`. Aquí la captura pasa a la mitad del
   contenedor y el texto se queda con la otra mitad.

   Solo se toca `.cta-banner__media` porque `.cta-banner__content` ya es
   `flex: 1 1 0` y ocupa lo que sobre. Quien va sobre foto no lleva captura, así
   que su banner sigue a una columna sin excepción que escribir. Por debajo de
   992px manda el bloque que apila las dos columnas. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* El alto fijo pasa a mínimo para que el padding sea aire de verdad: con los
     478px fijos, el padding solo le quitaría sitio al contenido y volvería el
     recorte que esta franja viene a resolver. Mínimo y no `auto` porque los
     banners sin captura caben de sobra en 478 y con `auto` encogerían,
     recortando su foto de fondo sin que nadie lo hubiera pedido. */
  .cta-banner {
    height: auto;
    min-height: 478px;
    padding-block: 72px;
  }

  .cta-banner__media {
    flex: 0 1 50%;
    width: 50%;
  }

  /* 36px se pensaron para una columna de 681px; en la mitad del contenedor
     caían cuatro renglones pegados al párrafo. Queda a medio camino de los
     24px del móvil. */
  .cta-banner__title {
    font-size: 30px;
    line-height: 44px;
  }
}

/* =====================
   RESPONSIVE — Componentes compartidos (aplica a todas las páginas)
   ===================== */
@media (max-width: 991.98px) {
  .interior-hero__inner {
    padding: 100px 40px 60px;
  }
  .interior-hero__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
  }

  .tab-selector__panel--cases {
    gap: 56px;
  }

  .solution-overview__title,
  .tab-selector__title {
    font-size: 26px;
    line-height: 34px;
  }

  .tier1-brands__logos {
    /* 24, no 48: por debajo de 1200px el alto fluido encoge los logos pero la
       separación no, y con 48 —incluso con 32— la fila se pasaba. A 24 caben
       en una sola hasta los 992px, donde ya envuelven a propósito. */
    gap: 24px;
  }

  /* CTA Banner: por debajo del escritorio el dashboard no cabe junto al texto,
     así que las dos columnas se apilan y el alto deja de ser fijo. */
  .cta-banner {
    height: auto;
    padding-block: 56px;
  }

  .cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .cta-banner__media {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .sector-card {
    height: 380px;
  }

  .trusted__inner {
    padding-inline: 2rem;
  }

  /* Teléfono: las filas con imagen se apilan a 1 columna */
  .solution-overview__row,
  .tab-selector__panel,
  .tab-selector__case {
    flex-direction: column;
    gap: 32px;
  }

  .solution-overview__media,
  .tab-selector__media {
    flex-basis: auto;
    height: 320px;
  }
}

@media (max-width: 575.98px) {
  /* Sector card: altura y gradiente del frame mobile de Figma */
  .sector-card {
    height: 353px;
  }

  .sector-card::after {
    background: linear-gradient(
      to bottom,
      rgba(102, 102, 102, 0) 0%,
      rgba(0, 0, 0, 0.9) 65%
    );
  }

  .interior-hero {
    height: auto;
    min-height: 0;
    border-radius: 0;
    margin: 0;
    align-items: flex-start;
  }

  /* Overlay: 20% uniforme + gradiente diagonal der→izq (igual que .hero del home) */
  .interior-hero__overlay {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
      linear-gradient(
        270deg,
        rgba(102, 102, 102, 0) 0%,
        rgba(0, 0, 0, 0.5) 65.078%
      );
  }

  .interior-hero__inner {
    padding: 181px 30px 95px;
  }

  .interior-hero__content {
    max-width: 315px;
    gap: 24px;
  }

  .interior-hero__title {
    font-size: 36px;
    font-weight: var(--fw-bold);
    line-height: 43px;
  }

  /* Bajo 992 estos dos bajan a 26px juntos. En el teléfono el titular del
     caso, en /casos-de-exito/, sigue grande; el overview comparte la regla. */
  .solution-overview__title,
  .tab-selector__title {
    font-size: 20px;
    line-height: 28px;
  }

  .interior-hero__desc {
    font-size: var(--fs-md);
    line-height: 30px;
  }

  .interior-hero__content .btn {
    padding: 6px 28px;
    font-size: 14px;
    height: 36px;
  }

  .interior-page {
    padding-top: 0;
  }

  .interior-page .trusted {
    padding-block: 2rem;
  }

  .solution-overview__media,
  .tab-selector__media {
    height: 240px;
  }

  .chip {
    width: 100%;
  }

  .tab-selector__tab {
    padding: 8px 18px;
    font-size: 15px;
  }

  .tier1-brands__logos {
    gap: 32px;
  }

  .tier1-brands__logos img {
    --tier-alto: 36px;
    max-height: 36px;
  }
}

/* ---- Reset mobile: el padding alineado al navbar (calc(2rem + 30px)) solo aplica en desktop; en mobile se usa el gutter estándar ---- */
@media (max-width: 991.98px) {
  .solution-overview__inner {
    padding-inline: var(--container-pad);
  }

  .tab-selector__inner {
    padding-inline: var(--container-pad);
  }

  .tier1-brands__inner {
    padding-inline: var(--container-pad);
  }

  .products__inner {
    padding-inline: var(--container-pad);
  }

  .cases__inner {
    padding-inline: var(--container-pad);
  }

  .cta-banner__inner {
    padding-inline: var(--container-pad);
  }
}

/* Aviso que solo ven quienes pueden editar la página: marca un formulario de
   Contact Form 7 sin configurar, que si no se vería como un hueco vacío. */
.solfium-aviso-editor {
  margin: 0;
  padding: 16px 20px;
  border: 1px dashed #d64545;
  border-radius: 8px;
  font-size: var(--fs-md);
  color: #d64545;
  text-align: center;
}

/* Google permite ocultar el badge flotante de reCAPTCHA solo si la atribución
   queda visible en el flujo del formulario. Esa leyenda va en la plantilla del
   formulario en CF7. Se usa visibility y no display para no romper el widget. */
.grecaptcha-badge {
  visibility: hidden;
}

/* El contenedor del formulario ya separa con gap, así que no lleva margen. */
.form-recaptcha {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: #7f7f7f;
  text-align: center;
}

.form-recaptcha a {
  color: #7f7f7f;
  text-decoration: underline;
}

.form-recaptcha a:hover {
  color: var(--color-orange);
}

/* =====================
   NEWS SECTION
   Aquí y no en index.css porque el bloque lo comparten el home y la solución
   Corporativo, que carga soluciones.css. `.news-card` ya estaba aquí; solo
   faltaba el contenedor.
   ===================== */
.news {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.news__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.news__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

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

  .news__inner {
    padding-inline: var(--container-pad);
  }
}

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