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

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

.case-card__title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
}

.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;
}

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

.news-card__title {
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 25px;
  color: var(--color-navy);
  margin: 0;
  flex: 1;
}

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

.article-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
  /* 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);
}

.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: 700px;
}

.interior-hero__title {
  font-size: 44px;
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-white-pure);
  margin: 0;
}

.interior-hero__desc {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-white-pure);
  margin: 0;
}

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

.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;
  gap: 100px;
  flex-wrap: wrap;
}

.tier1-brands__logos img {
  height: 48px;
  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;
}

.products__scrollbar-wrap {
  display: flex;
  justify-content: center;
  padding-block: 22px;
}

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

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

.products__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) {
  .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;
}

.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;
}



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

  /* Botón: full-width en mobile, color original sin cambios */
  .cta-banner .btn {
    width: 100%;
    font-size: var(--fs-md);
  }

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

/* =====================
   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 {
    gap: 48px;
  }

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

  .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 {
    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);
}