/*
 * This is a manifest file that'll be compiled into application.css.
 */

/* Contenedor global único, compartido por navbar, secciones de contenido
   y footer. El fondo de cada uno puede seguir siendo full-bleed (edge to
   edge); este container solo limita el contenido interno, siempre con el
   mismo max-width y padding, para que logo/nav/CTA (navbar), contenido
   principal (secciones) y logo/columnas/CTA (footer) queden en las
   mismas guías verticales izquierda y derecha. */
:root {
  /* Margen flotante exterior de la caja negra del navbar (ver
     .site-header / left-[var(--nav-float-inset)] en _navbar.html.erb).
     A partir de 640px, .site-container--nav resta este mismo valor de
     su padding para que el TEXTO del logo/botón caiga en la misma guía
     que el resto del sitio: inset + padding-nav = padding del
     .site-container normal. En el breakpoint base (mobile, <640px) se
     usa una regla distinta a propósito — ver el comentario en
     .site-container más abajo. */
  --nav-float-inset: 12px;
}

.site-container {
  width: 100%;
  /* 1680px + 2x --nav-float-inset: el navbar vive dentro de un header
     recortado 2x --nav-float-inset (izquierda + derecha) por su inset
     flotante, así que su propia guía tope real es 1680+24=1704px (ver
     .site-container--nav más abajo). Este max-width general se ensancha
     esa misma medida para que, al superar el tope, el contenido de las
     secciones llegue hasta esa misma guía en vez de quedar más angosto
     que el navbar. */
  max-width: calc(1680px + (var(--nav-float-inset) * 2));
  margin-inline: auto;
  /* Mobile (breakpoint base): el padding iguala --nav-float-inset a
     propósito, para que el BORDE EXTERIOR de cualquier bloque de
     contenido (cards, acordeones, formularios) coincida con el borde
     exterior de la píldora flotante del navbar — no con el texto del
     logo, que lleva su propio padding interno (ver .site-container--nav
     aquí abajo, que en este breakpoint usa el mismo valor). A partir de
     640px se vuelve a alinear por texto, con los valores de siempre. */
  padding-inline: var(--nav-float-inset);
}

.site-container--nav {
  max-width: 1680px;
  /* Mismo valor que .site-container en este breakpoint (ver arriba):
     el logo queda pegado al borde interior de la píldora, que es
     justo el borde que debe coincidir con las cards de la página. */
  padding-inline: var(--nav-float-inset);
}

@media (min-width: 640px) {
  .site-container { padding-inline: 32px; }
  .site-container--nav { padding-inline: calc(32px - var(--nav-float-inset)); }
}

@media (min-width: 1024px) {
  .site-container { padding-inline: 48px; }
  .site-container--nav { padding-inline: calc(48px - var(--nav-float-inset)); }
}

@media (min-width: 1280px) {
  .site-container { padding-inline: 80px; }
  .site-container--nav { padding-inline: calc(80px - var(--nav-float-inset)); }
}

/* Material Symbols variable font settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Border-only hover effect for cards and highlighted elements */
.aura-glow {
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aura-glow:hover {
  border-color: #40cf80;
}

/* Acordeón "Casos donde podemos ayudarte" — la altura se anima con
   grid-template-rows (0fr -> 1fr) en vez de <details> nativo, que abre
   y cierra sin transición. El overflow-hidden interno recorta el
   contenido mientras la fila crece/decrece. */
.cases-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cases-accordion-row.is-open .cases-accordion-panel {
  grid-template-rows: 1fr;
}

.cases-accordion-icon {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cases-accordion-row.is-open .cases-accordion-icon {
  transform: rotate(45deg);
}

.cases-accordion-title {
  transition: color 200ms ease;
}

.cases-accordion-row.is-open .cases-accordion-title {
  color: #050505;
}

/* Acordeón mobile de "Áreas de intervención" (páginas de solución
   individual) — exclusivo, una fila abierta a la vez. Misma técnica
   de animación de alto que .cases-accordion-panel (grid-template-rows
   0fr -> 1fr). Independiente del sidebar+panel de desktop. */
.capability-mobile-row {
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: #ecf1ed;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.capability-mobile-row.is-open {
  background-color: #ffffff;
  border-color: rgba(64, 207, 128, 0.5);
  box-shadow: 0 12px 32px -16px rgba(5, 5, 5, 0.25);
}

.capability-mobile-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #050505;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background-color 300ms ease, color 300ms ease;
}

.capability-mobile-row.is-open .capability-mobile-number {
  background-color: #40cf80;
}

.capability-mobile-chevron {
  color: #050505;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms ease;
}

.capability-mobile-row.is-open .capability-mobile-chevron {
  transform: rotate(180deg);
  color: #40cf80;
}

.capability-mobile-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.capability-mobile-row.is-open .capability-mobile-panel {
  grid-template-rows: 1fr;
}

.canvas-bg {
  background: linear-gradient(135deg, rgba(64, 207, 128, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

/* Animated pulse for status indicators */
.pulse-dot {
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(64, 207, 128, 0.7); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(64, 207, 128, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(64, 207, 128, 0); }
}

html {
  background-color: #ffffff;
}

body {
  min-height: max(884px, 100dvh);
  background-color: #ffffff !important;
}

section {
  background-color: #ffffff !important;
  scroll-margin-top: 96px;
}

.section-soft-bg {
  background-color: #edf2ee !important;
}

.section-dark-bg {
  background-color: #000000 !important;
}

/* Hero CTA buttons — sistema unificado de botones: ancho fijo, ambos idénticos */
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 56px;
  padding: 0 20px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
  text-decoration: none;
  gap: 8px;
}

/* Botón outline sobre fondo oscuro — Soluciones CTA */
.hero-btn-outline-light {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.hero-btn-outline-light:hover {
  background-color: #40cf80;
  color: #ffffff;
  border-color: #40cf80;
}

/* AI pulse CTA button — hero "Iniciar proyecto" */
@keyframes aiPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(64, 207, 128, 0.3), 0 0 8px rgba(64, 207, 128, 0.12);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(64, 207, 128, 0), 0 0 12px rgba(64, 207, 128, 0.16);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(64, 207, 128, 0), 0 0 8px rgba(64, 207, 128, 0.12);
  }
}

.ai-pulse-button {
  background-color: #40cf80;
  color: #ffffff;
  border-color: #40cf80;
  border-radius: 2px;
  animation: aiPulse 2.6s ease-in-out infinite;
  transition: background-color 200ms ease, border-color 200ms ease,
              transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-pulse-button .material-symbols-outlined {
  transition: transform 300ms ease;
}

.ai-pulse-button:hover {
  background-color: #40cf80;
  border-color: #40cf80;
  color: #ffffff;
  animation: none;
  transform: translateY(-2px);
}

.ai-pulse-button:hover .material-symbols-outlined {
  transform: translateX(5px);
}

.ai-pulse-button:active {
  animation: none;
  transform: translateY(0px);
  background-color: #40cf80;
  border-color: #40cf80;
}

/* Hero/CTA final usan hero-btn+ai-pulse-button: fuerzan rounded-none sin afectar el botón del navbar */
.hero-btn.ai-pulse-button {
  border-radius: 0;
}

/* Hero — animación de revelado progresivo del headline principal */
.hero-reveal-title {
  overflow: hidden;
}

.hero-reveal-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  color: #ffffff;
  animation-fill-mode: forwards;
}

.hero-reveal-line-1 {
  animation: consultingxRevealLine 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-reveal-line-2 {
  animation: consultingxRevealLine 850ms cubic-bezier(0.22, 1, 0.36, 1) 220ms forwards;
}

@keyframes consultingxRevealLine {
  0% {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    color: #ffffff !important;
  }
}

/* =========================================
   NAVBAR — Blanco fijo, translúcido
   ========================================= */

header.site-header {
  background-color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

/* Logo: blanco sobre fondo oscuro */
.logo-navbar {
  transition: opacity 300ms ease;
}
.logo-navbar--dark  { opacity: 1; }
.logo-navbar--light { opacity: 0; }

/* Nav links */
header.site-header .nav-link {
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color 300ms ease;
}

header.site-header .nav-link:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 6px 14px;
  margin: -6px -14px;
}

header.site-header .nav-link.nav-link--active {
  color: #ffffff;
}

/* Language button */
header.site-header .lang-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  background-color: transparent;
}

header.site-header .lang-btn:hover,
header.site-header .lang-btn[data-open="true"] {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

/* Solutions dropdown — megamenú oscuro, ícono + título + descripción
   por solución, organizado en 2 columnas y centrado bajo el trigger. */
.nav-solutions-wrapper {
  position: relative;
}

.solutions-megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 14px;
  width: 560px;
  max-width: calc(100vw - 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  background-color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 100;
}

.solutions-megamenu.nav-menu-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.solution-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.solution-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.solution-item__title {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.solution-item__desc {
  display: block;
  margin-top: 3px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

/* Chevron en el link de Soluciones */
.nav-link-chevron {
  font-size: 14px;
  transition: transform 200ms ease;
  vertical-align: middle;
}

.nav-solutions-wrapper:hover .nav-link-chevron {
  transform: rotate(180deg);
}

/* Mobile hamburger button */
.mobile-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: color 300ms ease;
}

.mobile-hamburger__icon {
  font-size: 28px;
}

/* Mobile dropdown menu — mismo negro del navbar/megamenú desktop */
.mobile-menu {
  display: none;
  background-color: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
}

.mobile-menu--open {
  display: block;
}

.mobile-menu__nav {
  padding: 0.5rem 1.5rem;
}

.mobile-nav-link {
  display: block;
  padding: 16px 0;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 150ms ease;
}

.mobile-nav-link:hover {
  color: #ffffff;
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 0;
}

.mobile-nav-label {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 4px 0 8px;
  transition: color 150ms ease;
}

.mobile-nav-label:hover {
  color: #ffffff;
}

.mobile-solution-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.mobile-solution-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.mobile-solution-link__title {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.mobile-solution-link__desc {
  display: block;
  margin-top: 2px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.mobile-menu__footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-menu__lang {
  display: flex;
  gap: 8px;
}

.mobile-lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  transition: all 150ms ease;
}

.mobile-lang-btn--active {
  color: #ffffff;
  border-color: #ffffff;
}

/* Language switcher */
.lang-switcher {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1.5px solid #cfc4c5;
  background-color: transparent;
  color: #050505;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  white-space: nowrap;
  text-transform: uppercase;
}

.lang-btn .lang-icon {
  font-size: 16px;
}

.lang-btn .lang-arrow {
  font-size: 14px;
  transition: transform 200ms ease;
}

.lang-btn:hover,
.lang-btn[data-open="true"] {
  background-color: #050505;
  border-color: #050505;
  color: #ffffff;
}

.lang-btn[data-open="true"] .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  min-width: 140px;
  overflow: hidden;
  z-index: 200;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1a1c1c;
  text-decoration: none;
  transition: background-color 150ms ease;
  gap: 8px;
}

.lang-option:hover {
  background-color: #f9f9f9;
}

.lang-option--active {
  color: #40cf80;
  font-weight: 600;
}

.lang-check {
  font-size: 16px;
  color: #40cf80;
}

/* Flash messages */
.flash {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 9999;
  padding: 1rem 2rem;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 560px;
  width: calc(100% - 2rem);
  text-align: center;
  opacity: 1;
  transition: opacity 500ms ease, transform 500ms ease;
}

.flash--hidden {
  opacity: 0;
  transform: translate(-50%, -12px);
}

.flash--notice {
  background-color: #40cf80;
  color: #050505;
}

.flash--alert {
  background-color: #ba1a1a;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

/* =========================================
   MOBILE — max-width: 767px
   ========================================= */
@media (max-width: 767px) {

  /* Prevenir scroll horizontal */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Navbar: botón compacto en mobile */
  header .ai-pulse-button {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 10px !important;
    letter-spacing: 0.07em !important;
    height: auto !important;
    min-height: 40px;
  }

  header .ai-pulse-button .material-symbols-outlined {
    font-size: 16px !important;
  }

  /* Títulos principales: de 72px a 40px */
  .text-display-xl {
    font-size: 40px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }

  /* Botones hero: full width en mobile */
  .hero-btn {
    width: 100%;
    max-width: 320px;
  }

  /* Excepción: par de CTAs del hero de Inicio ("Iniciar proyecto" /
     "Conoce nuestras soluciones") van lado a lado en vez de apilados.
     Mayor especificidad (2 clases) para ganarle a la regla de arriba. */
  .hero-cta-row.hero-cta-row .hero-btn {
    width: auto;
    max-width: none;
    flex: 1 1 0%;
    min-width: 0;
    height: auto;
    min-height: 52px;
    padding: 10px 8px;
    white-space: normal;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }

  .hero-cta-row.hero-cta-row .hero-btn .material-symbols-outlined {
    display: none;
  }

}

/* =========================================
   TABLET — 768px a 1023px
   ========================================= */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Títulos: reducción moderada */
  .text-display-xl {
    font-size: 54px !important;
    line-height: 1.1 !important;
  }

}

/* =========================================
   LAPTOP — 1024px a 1439px (evita el salto brusco al tamaño desktop grande)
   ========================================= */
@media (min-width: 1024px) and (max-width: 1439px) {

  .text-display-xl {
    font-size: 64px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
}

/* =========================================
   BODY TEXT SYSTEM — descripciones y bullets homologados
   (Soluciones, Modelo de impacto, Nuestra metodología)
   ========================================= */

.text-body-secondary {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1.625;
  font-weight: 400;
}

@media (min-width: 768px) {
  .text-body-secondary {
    font-size: 16px;
  }
}

/* =========================================
   MODELO DE IMPACTO — editorial claro
   ========================================= */

.impact-section {
  position: relative;
  background-color: #f7f8f6 !important;
}

.section-edf2ee-bg {
  background-color: #f6f7f5 !important;
}

/* =========================================
   CAPABILITY TABS — panel interactivo tipo
   "áreas de servicio" (tabs izquierda / detalle derecha)
   ========================================= */

.capability-panel {
  background-color: #ffffff;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.capability-tab-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(64, 207, 128, 0.4) transparent;
}

.capability-tab-list::-webkit-scrollbar {
  width: 4px;
}

.capability-tab-list::-webkit-scrollbar-thumb {
  background-color: rgba(64, 207, 128, 0.4);
  border-radius: 4px;
}

.capability-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 14px 16px;
  border-radius: 6px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #050505;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.capability-tab:hover {
  background-color: rgba(64, 207, 128, 0.08);
}

.capability-tab:hover .capability-tab-arrow {
  opacity: 0.5;
}

.capability-tab:focus-visible {
  outline: 2px solid #40cf80;
  outline-offset: 2px;
}

.capability-tab[data-open="true"] {
  background-color: #ffffff;
  border-color: #40cf80;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
}

.capability-tab-arrow {
  font-size: 18px;
  color: #40cf80;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.capability-tab[data-open="true"] .capability-tab-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Por debajo de 1024px la lista es un carril horizontal (ver
   .capability-tab-list y "lg:flex-col" en la vista), pero .capability-tab
   hereda width:100% pensado para las filas verticales de desktop — eso
   hace que cada pestaña ocupe todo el ancho visible y no se vea que hay
   más para deslizar (solo una "caja" gigante, sin peek de las siguientes).
   Aquí se ajusta a ancho de contenido, como un chip, igual que .solution-pill. */
@media (max-width: 1023px) {
  .capability-tab {
    width: auto;
    max-width: 230px;
    flex-shrink: 0;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.3;
    /* .capability-tab es transparente/sin borde por defecto (pensado
       para las filas de desktop, que se mezclan con el fondo del
       sidebar). En el chip de mobile eso deja a las pestañas inactivas
       sin ninguna caja visible — se ven como texto suelto. Chip visible
       siempre, igual que .solution-pill; [data-open="true"] ya pinta
       el estado activo (fondo blanco + borde verde) encima de esto. */
    background-color: #ffffff;
    border-color: #cfc4c5;
  }

  .capability-tab-arrow {
    display: none;
  }
}

/* Slide direccional al cambiar de panel activo (capability_accordion_controller.js).
   Usado tanto por la barra de píldoras de /soluciones como por la barra
   de "Áreas de intervención" de las sub-páginas de cada solución. El
   panel saliente y el entrante se mueven en la misma dirección del
   cambio (izquierda->derecha o viceversa), no un fade genérico. */
[data-capability-accordion-target="content"] {
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
  transform: translateX(0);
}

[data-capability-accordion-target="content"].capability-slide-out-left {
  opacity: 0;
  transform: translateX(-28px);
}

[data-capability-accordion-target="content"].capability-slide-out-right {
  opacity: 0;
  transform: translateX(28px);
}

[data-capability-accordion-target="content"].capability-slide-in-right {
  opacity: 0;
  transform: translateX(28px);
}

[data-capability-accordion-target="content"].capability-slide-in-left {
  opacity: 0;
  transform: translateX(-28px);
}

/* Barra de progreso del carril de píldoras/pestañas (capability_accordion_controller.js):
   indica cuánto queda por deslizar hacia la derecha. */
.scroll-progress-track {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background-color: rgba(5, 5, 5, 0.1);
  overflow: hidden;
}

.scroll-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background-color: #40cf80;
  transition: left 120ms ease, width 120ms ease;
}

/* =========================================
   SOLUTION CARDS — /soluciones "Nuestras soluciones".
   Card = foto de fondo + degradado + número/título/descripción/CTA
   sobrepuestos. Misma tarjeta para el grid bento de desktop (la
   primera solución ocupa 2 filas, ver .solutions-bento-card--featured)
   y para el carrusel horizontal de mobile/tablet.
   ========================================= */

.solutions-bento-card {
  position: relative;
  height: 100%;
  min-height: 340px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 24px 48px -24px rgba(5, 5, 5, 0.35);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease;
}

.solutions-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 64px -20px rgba(5, 5, 5, 0.45);
}

.solutions-bento-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solutions-bento-card:hover .solutions-bento-card__img {
  transform: scale(1.06);
}

.solutions-bento-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.55) 42%, rgba(5, 5, 5, 0.05) 75%);
}

.solutions-bento-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}

.solutions-bento-card--featured .solutions-bento-card__content {
  padding: 36px;
}

.solutions-bento-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.solutions-bento-card__number {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #40cf80;
  line-height: 1;
}

.solutions-bento-card__divider {
  width: 28px;
  height: 2px;
  background-color: #40cf80;
}

.solutions-bento-card__title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 10px;
}

.solutions-bento-card--featured .solutions-bento-card__title {
  font-size: 28px;
}

.solutions-bento-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 34ch;
  margin-bottom: 18px;
}

.solutions-bento-card--featured .solutions-bento-card__desc {
  max-width: 30ch;
}

.solutions-bento-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #40cf80;
}

/* =========================================
   ENFOQUE CONSULTINGX — /soluciones "Enfoque".
   Las 4 tarjetas comparten el mismo estado visual en reposo — ninguna
   aparece "seleccionada" por defecto, el contraste se gana solo en
   hover. La línea conectora (.approach-steps::before) es un detalle
   de fondo, no protagonista: opacidad baja y detrás de las cards
   (que llevan fondo casi opaco, por eso la línea solo se asoma en
   los huecos entre ellas). Composición interna editorial: ícono y
   número en una fila superior, título con más peso, todo alineado
   a la izquierda (no centrado).
   ========================================= */

.approach-steps {
  position: relative;
}

@media (min-width: 1024px) {
  .approach-steps::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 58px;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(64, 207, 128, 0.16) 12%,
      rgba(64, 207, 128, 0.16) 88%,
      transparent 100%
    );
    z-index: 0;
  }
}

.approach-step-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 32px 28px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #080808;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 320ms ease,
              box-shadow 320ms ease;
}

.approach-step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(64, 207, 128, 0.45);
  box-shadow: 0 0 28px -10px rgba(64, 207, 128, 0.3);
}

.approach-step-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
}

.approach-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(64, 207, 128, 0.35);
  transition: border-color 320ms ease;
}

.approach-step-card:hover .approach-step-icon {
  border-color: rgba(64, 207, 128, 0.7);
}

.approach-step-number {
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: rgba(64, 207, 128, 0.75);
  transition: color 320ms ease;
}

.approach-step-card:hover .approach-step-number {
  color: #40cf80;
}

.approach-step-title {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.approach-step-divider {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #40cf80;
  margin: 16px 0;
}

.approach-step-desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

/* =========================================
   STEP CARD — mismo patrón (ícono en círculo + número + título +
   descripción) reutilizado en "Nuestra metodología" (home) y
   "Entregables" (páginas de solución). Mismo hover que
   .approach-step-card: elevación ligera + borde y glow verde
   tenues; el ícono y el número también suben de intensidad.
   ========================================= */

.step-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.03);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 320ms ease,
              box-shadow 320ms ease;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(64, 207, 128, 0.45);
  box-shadow: 0 0 28px -10px rgba(64, 207, 128, 0.3);
}


/* Variante clara de methodology-step — framework conectado sobre fondo claro
   (usado en Nosotros > Cómo trabajamos) */

.process-step {
  padding: 28px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.process-step:first-child {
  padding-top: 0;
  border-top: none;
}

.process-step:last-child {
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  .process-step {
    padding: 0 40px;
    border-top: none;
  }

  .process-step:first-child {
    padding-left: 0;
  }

  .process-step:last-child {
    padding-right: 0;
  }

  .process-step:not(:first-child) {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }
}

.process-step-number {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: #40cf80;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .process-step-number {
    font-size: 48px;
  }
}

.process-step-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .process-step-title {
    font-size: 18px;
  }
}

.process-step-desc {
  color: #4c4546;
}

/* Títulos de tarjeta grande — acordeón de soluciones */
.solution-card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .solution-card-title {
    font-size: 30px;
  }
}

/* =========================================
   SOLUTIONS ACCORDION — panel expandible al click
   ========================================= */

.solutions-accordion {
  gap: 12px;
  height: 480px;
}

.solutions-accordion__panel {
  display: flex;
  align-items: stretch;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 88px;
  height: 100%;
  min-width: 0;
  background-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 500ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms ease;
}

.solutions-accordion__panel.is-active {
  flex-grow: 1;
  flex-shrink: 1;
  border-color: #40cf80;
  cursor: default;
}

.solutions-accordion__rail {
  position: relative;
  flex: 0 0 88px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 28px;
  gap: 16px;
  overflow: hidden;
  transition: flex-basis 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.solutions-accordion__panel.is-active .solutions-accordion__rail {
  flex-basis: 170px;
}

.solutions-accordion__rail-img {
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 2px);
  height: calc(100% + 4px);
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.solutions-accordion__panel.is-active .solutions-accordion__rail-img {
  transform: scale(1.06);
}

.solutions-accordion__rail-img--safety {
  object-position: 58% center;
}

.solutions-accordion__rail-img--water {
  object-position: 45% center;
}

.solutions-accordion__rail-img--environmental {
  object-position: 70% center;
}

.solutions-accordion__rail-overlay {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 2px);
  height: calc(100% + 4px);
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.35), rgba(5, 5, 5, 0.75));
  z-index: 1;
  transition: background 400ms ease;
}

.solutions-accordion__panel.is-active .solutions-accordion__rail-overlay {
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.1), rgba(5, 5, 5, 0.45));
}

.solutions-accordion__number {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: #efefef;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  transform: scale(1);
  transition: background-color 300ms ease, color 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.solutions-accordion__panel.is-active .solutions-accordion__number {
  background-color: #40cf80;
  color: #050505;
  transform: scale(1.15);
}

.solutions-accordion__icon {
  position: relative;
  z-index: 2;
  color: #40cf80;
  font-size: 28px;
}

.solutions-accordion__content {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 250ms ease, transform 250ms ease, flex-basis 500ms ease, padding 500ms ease;
}

.solutions-accordion__panel.is-active .solutions-accordion__content {
  flex: 1 1 auto;
  width: auto;
  padding: 40px 40px 40px 8px;
  opacity: 1;
  transform: translateY(0);
  white-space: normal;
  transition: opacity 450ms ease 220ms, transform 450ms cubic-bezier(0.4, 0, 0.2, 1) 220ms, flex-basis 500ms ease, padding 500ms ease;
}

.solutions-accordion__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.solutions-accordion__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1.625;
  font-weight: 400;
  color: #4c4546;
}

@media (min-width: 768px) {
  .solutions-accordion__list li {
    font-size: 16px;
  }
}

.solutions-accordion__list li .material-symbols-outlined {
  font-size: 18px;
  color: #40cf80;
  flex-shrink: 0;
}

/* Variante del checklist para fondos oscuros (tarjetas mobile con foto) */
.solutions-accordion__list--on-dark li {
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================
   SOLUTION MOBILE CARD — tarjeta con foto para el listado de
   "Nuestras capacidades" en mobile (equivalente al acordeón desktop)
   ========================================= */

.solution-mobile-card {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 300ms ease;
}

/* Solo mouse real: en touch, :hover queda "pegado" tras el tap y se ve
   como si la card quedara marcada/seleccionada al deslizar el carrusel. */
@media (hover: hover) and (pointer: fine) {
  .solution-mobile-card:hover {
    border-color: #40cf80;
  }
}

.solution-mobile-card__img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

.solution-mobile-card__img--safety {
  object-position: 58% center;
}

.solution-mobile-card__img--water {
  object-position: 35% center;
}

.solution-mobile-card__img--environmental {
  object-position: 70% center;
}

.solution-carousel,
.adn-carousel {
  scrollbar-width: none;
}

.solution-carousel::-webkit-scrollbar,
.adn-carousel::-webkit-scrollbar {
  display: none;
}

/* Flechas prev/next reutilizables por cualquier carrusel del sitio
   (carousel_controller.js). Pensadas para fondo oscuro. */
.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.carousel-arrow .material-symbols-outlined {
  font-size: 22px;
}

.carousel-arrow:hover:not(:disabled) {
  background-color: rgba(64, 207, 128, 0.12);
  border-color: rgba(64, 207, 128, 0.5);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Variante para fondos claros (ej. sección "Nuestro modelo") — mismo
   criterio de borde/color que .lang-btn y .solution-pill. */
.carousel-arrow--light {
  border-color: #cfc4c5;
  color: #050505;
}

.carousel-arrow--light:hover:not(:disabled) {
  background-color: rgba(64, 207, 128, 0.08);
  border-color: #40cf80;
}

/* Footer */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================
   FORMULARIO "INICIAR PROYECTO"
   ========================================= */

.form-label {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #050505;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 14px 16px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  color: #050505;
  background-color: #ffffff;
  transition: border-color 200ms ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #40cf80;
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

.form-error-box {
  border: 1px solid rgba(186, 26, 26, 0.3);
  background-color: rgba(186, 26, 26, 0.05);
  padding: 20px 24px;
}

.form-error-box p {
  color: #ba1a1a;
}

.form-error-box ul {
  color: #ba1a1a;
}

.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form-checkbox-row input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: #40cf80;
  flex-shrink: 0;
}

.form-checkbox-row label {
  font-size: 14px;
  line-height: 1.5;
  color: #4c4546;
}

/* Errores de campo — reemplaza el tooltip nativo del navegador */
.form-input.form-field--invalid,
.form-select.form-field--invalid,
.form-textarea.form-field--invalid {
  border-color: #ba1a1a;
}

.form-checkbox-row input[type="checkbox"].form-field--invalid {
  outline: 1.5px solid #ba1a1a;
  outline-offset: 2px;
}

.form-field-error {
  margin-top: 8px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #ba1a1a;
}

.carousel-dot {
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  border: none;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.carousel-dot.is-active {
  background-color: #40cf80;
  box-shadow: 0 0 0 2px rgba(5, 5, 5, 1), 0 0 0 3.5px rgba(64, 207, 128, 0.7);
}

/* Variante para fondos claros (ej. sección "Nuestro modelo") — mismo
   criterio que .carousel-arrow--light. */
.carousel-dots--light .carousel-dot {
  background-color: rgba(5, 5, 5, 0.2);
}

.carousel-dots--light .carousel-dot:hover {
  background-color: rgba(5, 5, 5, 0.35);
}

.carousel-dots--light .carousel-dot.is-active {
  background-color: #40cf80;
  box-shadow: 0 0 0 2px #f7f8f6, 0 0 0 3.5px rgba(64, 207, 128, 0.7);
}

/* =========================================
   DELIVERABLES CAROUSEL — carril horizontal
   editorial para la sección "Entregables"
   ========================================= */

.deliverables-carousel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.deliverables-carousel::-webkit-scrollbar {
  display: none;
}

/* Luz superior consistente: todas las cards reciben el glow desde
   arriba (misma lógica de "iluminación"), solo varía la posición
   horizontal y la intensidad para dar variedad sin verse aleatorio. */
.deliverable-card-bg-1 { background: radial-gradient(ellipse 70% 24% at 50% -10%, rgba(64, 207, 128, 0.20), transparent 60%), linear-gradient(180deg, #131313 0%, #050505 100%); }
.deliverable-card-bg-2 { background: radial-gradient(ellipse 70% 24% at 30% -10%, rgba(64, 207, 128, 0.17), transparent 60%), linear-gradient(180deg, #101010 0%, #060606 100%); }
.deliverable-card-bg-3 { background: radial-gradient(ellipse 70% 24% at 70% -10%, rgba(64, 207, 128, 0.17), transparent 60%), linear-gradient(180deg, #0f0f0f 0%, #050505 100%); }
.deliverable-card-bg-4 { background: radial-gradient(ellipse 70% 24% at 40% -10%, rgba(64, 207, 128, 0.19), transparent 60%), linear-gradient(180deg, #101010 0%, #060606 100%); }
.deliverable-card-bg-5 { background: radial-gradient(ellipse 70% 24% at 60% -10%, rgba(64, 207, 128, 0.16), transparent 60%), linear-gradient(180deg, #0e0e0e 0%, #050505 100%); }
.deliverable-card-bg-6 { background: radial-gradient(ellipse 70% 24% at 50% -10%, rgba(64, 207, 128, 0.18), transparent 60%), linear-gradient(180deg, #121212 0%, #050505 100%); }

.deliverable-card {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 40px -24px rgba(0, 0, 0, 0.7);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.deliverable-card:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 55px -20px rgba(0, 0, 0, 0.75);
  filter: brightness(1.06);
}

.deliverable-card-number {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.deliverable-card:hover .deliverable-card-number {
  color: rgba(64, 207, 128, 0.4);
}

.deliverable-card-bubble {
  background-color: rgba(237, 242, 238, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 24px 44px -22px rgba(0, 0, 0, 0.55);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.deliverable-card:hover .deliverable-card-bubble {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 32px 56px -18px rgba(0, 0, 0, 0.6);
}

.deliverable-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  color: #050505;
  background-color: transparent;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
              color 400ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.deliverable-card:hover .deliverable-arrow-btn {
  background-color: #40cf80;
  border-color: #40cf80;
  color: #ffffff;
  transform: translate(2px, -2px);
}

/* =========================================
   TEAM CAROUSEL — carril horizontal en móvil
   para la sección "Liderazgo" (about page)
   ========================================= */

.team-carousel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.team-carousel::-webkit-scrollbar {
  display: none;
}