* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

:root {
  --bg-color: #0d1b3e;       /* Azul marino oscuro (base sin brillo) */
  --bg-bright: #1755cc;      /* Azul eléctrico (cuando brilla) */
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --accent-blue: #146ef5;    /* Azul Flow Ninja */
  --card-bg: rgba(255, 255, 255, 0.05);
}

body {
  background-color: var(--bg-color);
  /* Líneas horizontales sutiles */
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0px,
    transparent 1.5px,
    transparent 150px
  );
  color: var(--text-main);
  overflow-x: hidden;
  position: relative;
}

/* Fix Tailwind container centering */
.container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== GLOW SUAVE DE FONDO (no reemplaza al pulso de la sección) ===== */
.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(130px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* Los glows están desactivados — el efecto lo maneja .hero-section */
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 4%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 200; /* encima del overlay ::after del hero */
  background-color: #0d1b3e; /* siempre oscuro, no le afecta el pulso */
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-links {
  position: absolute;
  top: 100%;
  left: -100%;
  width: 100%;
  background-color: #0d1b3e;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: left 0.4s ease;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 2rem;
}
.nav-links.active {
  left: 0;
}
.nav-links a {
  color: var(--text-main);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--accent-blue);
}
.nav-btn {
  background: white;
  color: black;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}
.nav-btn:hover {
  opacity: 0.8;
}

/* Menu Toggle */
.menu-toggle {
  display: block;
  cursor: pointer;
  z-index: 201;
}

.menu-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: white;
  border-radius: 2px;
}

/* Animación icono de X */
.menu-toggle.is-active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle.is-active .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.desktop-only {
  display: none;
}
.mobile-only {
  display: inline-block;
  margin-top: 1rem;
}

.hero-section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 650px) minmax(auto, 650px) 1fr;
  min-height: calc(100vh - 80px);
  background-color: #0d1b3e;   /* siempre oscuro como base */
}

/* El brillo animado (DEBAJO de las líneas) */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Oscuro sólido solo el 30%, luego empieza el brillo */
  background: linear-gradient(90deg, transparent 30%, #1755cc 100%);
  opacity: 0;
  animation: hero-pulse-overlay 9s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Las líneas (ENCIMA del brillo, para que nunca se oculten) */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0px,
    transparent 1.5px,
    transparent 150px
  );
  z-index: 0;
  pointer-events: none;
}

@keyframes hero-pulse-overlay {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Left Content */
.hero-content {
  grid-column: 2;
  position: relative;
  z-index: 2;
  padding: 3rem 2% 2rem 5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  width: fit-content;
  margin-bottom: 2rem;
  background: rgba(255,255,255,0.03);
}
.hero-title {
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.hero-subtitle {
  font-size: 1.25rem;
  color: #cbd5e1;
  max-width: 90%;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.hero-cta {
  display: inline-block;
  background: linear-gradient(90deg, var(--brand-orange, #FF7A00), #ff8c3a);
  color: #fff;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(255, 122, 0, 0.3);
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(255, 122, 0, 0.4);
  color: #fff;
}


/* Right Visuals - Infinite Scroll */
.hero-visual {
  grid-column: 3;
  position: relative;
  z-index: 2; /* Asegurar que las imágenes estén SIEMPRE por encima de la luz */
  height: 100vh;
  overflow: hidden;
  display: flex;
  gap: 2.5rem; /* Más espacio entre columnas */
  padding-left: 2rem; /* Reduce el ancho efectivo de las tarjetas */
  padding-right: 4rem;
  /* El mask-image hace que se desvanezca arriba y abajo */
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.masonry-col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* Más espacio vertical entre los tracks */
  flex: 1; /* Instead of hardcoded 33.33% to prevent overflow */
}

.scroll-track {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* Más espacio vertical entre las tarjetas */
  will-change: transform;
}

/* Pausar la animación al poner el mouse encima */
.masonry-col:hover .scroll-track {
  animation-play-state: paused;
}

/* Animaciones fluidas sin cortes (40s para que sea más lento y elegante) */
.scroll-up .scroll-track {
  animation: moveUp 40s linear infinite;
}
.scroll-down .scroll-track {
  animation: moveDown 40s linear infinite;
}

/* Movemos exactamente el 50% de la altura total del track (que tiene 2 sets identicos) */
@keyframes moveUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes moveDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Cards (Enlaces clickeables) */
.card {
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--card-bg);
  position: relative;
  aspect-ratio: 4/5; /* Proporción ligeramente vertical */
  text-decoration: none; /* Quitar subrayado del link */
  cursor: pointer;
}

/* Efecto hover con Overlay completo estilo HONEYBOOK */
.card-hover-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--hover-color, rgba(37, 99, 235, 0.95)); /* Usamos variable para colores dinámicos */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.card:hover .card-hover-overlay {
  opacity: 1;
}

.card-hover-title {
  color: white;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.card-hover-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px;
  border-radius: 6px;
  font-size: 1.2rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.card:hover img {
  transform: scale(1.08); /* Efecto zoom ligero detrás de la superposición */
}

/* --- Trusted By Section --- */
.trusted-section {
  padding: 80px 5%;
  background-color: var(--bg-color); /* Fondo azul oscuro, cubre las líneas del body */
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.trusted-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.trusted-text-container {
  flex: 0 0 35%;
  text-align: left;
  display: flex;
  align-items: center;
  padding-right: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.trusted-text {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 0;
  color: #ffffff;
}

.text-blue {
  color: #a4c8ff; /* Azul claro / púrpura sutil para destacar */
}

.trusted-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  justify-items: center;
}

.trusted-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 20px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.trusted-logo-wrap:nth-child(3n) {
  border-right: none;
}

.trusted-logo {
  max-width: 110px;
  max-height: 35px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Logos blancos con ligera opacidad */
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.trusted-logo-wrap:hover .trusted-logo {
  opacity: 1;
}

.trusted-tag {
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
  font-weight: 500;
}

.tag-blue {
  color: #1755cc;
  border-color: #1755cc;
}

.tag-green {
  color: #0f764a;
  border-color: #0f764a;
}

/* --- Built Section --- */
.built-section {
  padding: 100px 5%;
  position: relative;
  z-index: 2;
  background-color: var(--bg-color);
}

.built-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.built-title {
  font-size: 3.5rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0;
  letter-spacing: -0.02em;
}

.built-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.3s;
  display: flex;
  align-items: center;
}

.built-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.built-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* El .case-card original ya no es el contenedor principal exterior de texto, 
   podemos simplemente usar .case-card-inner directamente o mantenerlo por compatibilidad */
.case-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center; /* Centrar la tarjeta en su columna */
}

.case-card-inner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 350px; /* Ensanchado un poco más para que el video se vea mejor */
  margin: 0 auto; /* Added to center the card within the grid cell */
  aspect-ratio: 9/16; /* Formato vertical original para que el video quepa perfecto */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 20px;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.case-card-inner:hover {
  transform: translateY(-5px);
}

.case-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.case-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
  opacity: 0; /* Oculto por defecto */
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.case-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.case-card-inner:hover .case-video {
  opacity: 1;
  transform: scale(1.03);
}

.case-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 2;
  position: relative;
  transition: opacity 0.4s ease; /* Transición para ocultar los textos */
}

.case-card-inner:hover .case-content {
  opacity: 0; /* Oculta los textos al pasar el mouse para ver el video completo */
}

.case-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: auto;
}

.case-tag {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.case-logo-text {
  font-size: 1.6rem; /* Reducido desde 2rem para que quepa bien */
  font-weight: 800;
  color: white;
  text-align: center;
  letter-spacing: -0.02em;
  margin: auto 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  word-break: break-word; /* Asegura que palabras largas no se salgan del borde */
}

.case-quote-wrap {
  text-align: center;
  color: #fff;
  margin-top: auto;
}

.case-quote {
  font-size: 0.85rem; /* Reducido para encajar mejor en la tarjeta */
  line-height: 1.4;
  margin-bottom: 12px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.case-author {
  font-size: 0.75rem; /* Texto de autor ligeramente más pequeño */
  opacity: 0.9;
}
.case-author strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 2px;
}  opacity: 0.8;
  margin: 0;
}

.case-author strong {
  color: #fff;
  font-weight: 600;
  margin-right: 5px;
}

.case-metrics {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 10px;
}

.case-testimonial {
  display: block;
  padding: 10px 10px 20px 10px;
  text-align: center;
  max-width: 300px;
}
.testimonial-quote {
  color: #cbd5e1;
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 15px;
  line-height: 1.5;
}
.testimonial-author {
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
}

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

.metric-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  letter-spacing: -0.02em;
}

.metric-label {
  font-size: 0.8rem;
  color: #94a3b8;
}

.metric-divider {
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 0 10px;
}

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

/* --- Tabs Section --- */
.tabs-section {
  padding: 100px 5%;
  position: relative;
  z-index: 2;
  background-color: #f8fafc; /* Fondo casi blanco/gris muy claro */
}

.tabs-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #0f172a; /* Texto oscuro */
  letter-spacing: -0.02em;
}

.highlight-transform {
  color: #30806c; /* Green highlight matching the active tab */
}

.tabs-subtitle {
  font-size: 1.2rem;
  color: #334155; /* Texto subtítulo oscuro */
  max-width: 600px;
  margin: 0 auto 50px auto;
}

.tabs-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.tab-btn {
  background-color: #e2e8f0; /* Fondo gris/azulado claro */
  border: 1px solid transparent;
  color: #0f172a; /* Texto oscuro */
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  background-color: #cbd5e1;
}

.tab-btn.active[data-target="tab-mvp"] {
  background-color: #2a6a57;
  border-color: #2a6a57;
  color: #fff;
}

.tab-btn.active[data-target="tab-landing"] {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.tab-btn.active[data-target="tab-evolution"] {
  background-color: #be185d;
  border-color: #be185d;
  color: #fff;
}

.tab-btn.active[data-target="tab-speed"] {
  background-color: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.tab-content {
  animation: fadeIn 0.4s ease forwards;
}

.tab-card:not(.active) {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.tab-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #103328 0%, #30806c 100%);
  z-index: 1;
}

.tab-card-content {
  position: relative;
  z-index: 2;
  padding: 60px 5%;
  flex: 1;
  max-width: 1000px;
}

.tab-logo {
  margin-bottom: 30px;
}

.tab-card-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.tab-card-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
  max-width: 450px;
}

.tab-included-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 15px;
}

.tab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.tab-pill {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.85rem;
}

.tab-btn-action {
  display: inline-block;
  background-color: #fff;
  color: #000;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.tab-btn-action:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* Marquee */
.tab-marquee {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.03); /* Subtle transparency to let the card gradient show through */
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: scroll-marquee 20s linear infinite;
}

.tab-marquee-track img {
  height: 30px;
  object-fit: contain;
  opacity: 0.9;
  filter: brightness(0) invert(1); /* Makes logos white */
}

@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Scrolls half because it's duplicated */
}

/* --- Team / Planet Section --- */
.team-section {
  position: relative;
  padding: 120px 5% 150px 5%;
  background-color: #050a15; /* Fondo muy oscuro azul/negro */
  color: #fff;
  overflow: hidden;
  z-index: 1;
}

.team-bg-glow {
  position: absolute;
  top: 80%; /* Bajamos el resplandor para que esté detrás del planeta */
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(23, 85, 204, 0.5) 0%, rgba(23, 85, 204, 0.1) 40%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.team-main-title {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 120px; /* Más espacio para coincidir con el original */
  text-align: center;
}

.team-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 60px auto;
}

.team-row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.team-card {
  flex: 1;
  background: rgba(10, 15, 30, 0.7); /* Fondo muy oscuro y sutilmente translúcido */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil parejo */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
  background: rgba(15, 20, 40, 0.8);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.team-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.team-card-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  margin-bottom: 20px;
}

.team-card-desc {
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.team-btn {
  display: inline-block;
  background-color: #fff;
  color: #000;
  padding: 15px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 3;
}

.team-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.planet-wrapper {
  position: absolute;
  top: 300px; /* Más arriba */
  left: 50%;
  transform: translateX(-50%);
  width: 90%; /* Más pequeño */
  max-width: 1200px;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

.planet-img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Testimonials Section --- */
.testimonials-section {
  padding: 100px 5%;
  background-color: var(--bg-color); /* Fondo oscuro igual al resto */
  color: #fff;
}

.testimonials-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 30px;
}

.testimonials-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

.testimonials-subtitle {
  font-size: 1.2rem;
  color: #94a3b8;
  max-width: 320px;
  line-height: 1.5;
  align-self: center;
}

.testimonials-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 40px;
}

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

.testimonial-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0d1424;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
}

.testimonial-card-video-space {
  width: 100%;
  aspect-ratio: 16/9; /* Proporción panorámica para el espacio vacío del video */
  background: linear-gradient(145deg, #0f172a 0%, #020617 100%); /* Degradado sutil muy oscuro */
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonial-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

/* Necesitamos un wrapper relativo para el posicionamiento absoluto del top */
.testimonial-card {
  position: relative;
}

.testimonial-logo {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.play-video-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
}

.testimonial-card-bottom {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1; /* Para que ocupe el resto del espacio si las tarjetas tienen diferentes alturas */
}

.testimonial-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e2e8f0;
  margin-bottom: 30px;
}

.testimonial-author {
  margin-top: auto; /* Empuja el autor hacia el fondo */
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.testimonial-role {
  font-size: 0.85rem;
  color: #64748b;
}

/* --- Awards Section --- */
.awards-section {
  padding: 100px 5%;
  background-color: var(--bg-color);
  color: #fff;
}

.awards-main-title {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
}

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

.award-card {
  background: radial-gradient(circle at top left, #1e3a8a 0%, #0f172a 60%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 0.3s ease;
  min-height: 380px;
}

.award-card:hover {
  transform: translateY(-5px);
}

/* Tarjeta 1: Clutch */
.clutch-card {
  align-items: center;
  text-align: center;
  justify-content: space-between;
}

.clutch-subtitle {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 24px;
}

.clutch-score {
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(147, 197, 253, 0.4);
  margin-bottom: 8px;
}

.clutch-out-of {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 30px;
}

.clutch-logo-wrapper {
  margin-bottom: 40px;
}

.clutch-stars {
  height: 20px;
  width: auto;
  object-fit: contain;
}

.clutch-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: auto;
}

.clutch-link-text {
  font-size: 0.85rem;
  font-weight: 600;
}

.clutch-arrow-btn {
  background: rgba(37, 99, 235, 0.2);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
}

/* Tarjetas 2 y 3: Webflow */
.webflow-card {
  justify-content: space-between;
}

.webflow-logo {
  margin-bottom: 30px;
}

.award-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.award-year-bg {
  position: absolute;
  bottom: 0;
  right: -5%;
  font-size: 10rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03);
  line-height: 0.7;
  z-index: 1;
  pointer-events: none;
}

.award-badges {
  display: flex;
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.badge-item {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(4px);
}

/* --- Embedded Section --- */
.embedded-section {
  padding: 100px 5% 0 5%;
  background-color: var(--bg-color);
  color: #fff;
  position: relative;
  /* overflow: hidden; Quitamos esto para que se pueda hacer overlap */
}

.embedded-title {
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 60px;
  color: #e2e8f0;
}

.embedded-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
  margin-bottom: 50px;
}

.embedded-card {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 550px;
  transition: transform 0.3s ease;
}

.embedded-card:hover {
  transform: translateY(-5px);
}

.card-dark {
  background-color: #0f172a;
}

.card-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.card-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.9) 100%);
  z-index: 2;
}

.card-blue {
  background-color: #2563eb; /* Azul sólido oscuro idéntico al original */
}

.card-green {
  background-color: #16a34a; /* Verde bosque sólido idéntico al original */
}

.card-content-top {
  position: relative;
  z-index: 3;
  padding: 40px 30px;
}

.card-icon {
  margin-bottom: 30px;
}

.embedded-card h3 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
  color: #fff;
  letter-spacing: -0.03em;
}

.embedded-card p {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 32px;
}

.card-link-sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.arrow-btn-sm {
  background: rgba(255, 255, 255, 0.2);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.card-bottom-glass {
  position: relative;
  z-index: 3;
  margin: auto 20px 20px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 16px;
}

.glass-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.glass-avatars {
  display: flex;
}

.glass-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #0f172a;
  margin-right: -10px;
}

.card-bottom-img-container {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding: 0 20px 20px 20px;
}

.card-bottom-image {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.card-bottom-image-full {
  position: absolute;
  bottom: -5%;
  right: -10%;
  width: 110%;
  height: auto;
  z-index: 2;
}

/* Vaporwave Sea */
.vaporwave-sea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 450px; /* Alto suficiente para quedar detrás de las tarjetas */
  z-index: 1; /* Detrás del grid */
  background: linear-gradient(180deg, 
    rgba(13, 27, 42, 0) 0%, 
    #1e1b4b 30%, 
    #7c3aed 55%,
    #a855f7 65%,
    #c084fc 75%,
    #93c5fd 85%,
    #60a5fa 100%
  );
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
  pointer-events: none;
}

.sea-line {
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.sl-1 { height: 1px; margin-bottom: 28px; opacity: 0.25; }
.sl-2 { height: 1px; margin-bottom: 22px; opacity: 0.4; }
.sl-3 { height: 1px; margin-bottom: 16px; opacity: 0.6; }
.sl-4 { height: 2px; margin-bottom: 10px; opacity: 0.75; }
.sl-5 { height: 2px; margin-bottom: 0; opacity: 0.9; }

/* --- Foresight Section --- */
.foresight-section {
  position: relative;
  padding: 100px 5%;
  min-height: 800px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Azul oscuro profundo como base */
  background: #06122a;
}

/* Ola de luz principal — el gran barrido diagonal */
.foresight-section::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 75%;
  height: 180%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(59, 130, 246, 0.18) 25%,
    rgba(96, 165, 250, 0.35) 45%,
    rgba(147, 197, 253, 0.25) 55%,
    rgba(59, 130, 246, 0.1) 70%,
    transparent 100%
  );
  transform: rotate(-20deg);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Resplandor secundario — punto de luz más concentrado arriba-derecha */
.foresight-section::after {
  content: '';
  position: absolute;
  top: -10%;
  right: 15%;
  width: 40%;
  height: 80%;
  background: radial-gradient(
    ellipse at center,
    rgba(147, 197, 253, 0.3) 0%,
    rgba(59, 130, 246, 0.15) 40%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.foresight-bg {
  display: none;
}

.foresight-bg-img {
  display: none;
}

.foresight-bg-overlay {
  display: none;
}

.foresight-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.foresight-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.foresight-pill span {
  background: rgba(37, 99, 235, 0.15); /* Light blue transparent */
  border: 1px solid rgba(37, 99, 235, 0.3); /* Light blue border */
  color: #60a5fa; /* Light blue text */
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
}

.foresight-users {
  display: flex;
  align-items: center;
  gap: 12px;
}

.users-text {
  font-size: 0.95rem;
  font-weight: 600;
}

.users-avatars img {
  height: 28px;
  width: auto;
}

.foresight-content {
  max-width: 50%;
  padding-right: 40px;
}

.foresight-title {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
}

.foresight-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
  max-width: 90%;
  line-height: 1.5;
}

.foresight-form {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.foresight-input {
  flex: none;
  width: 320px;
  background: rgba(2, 6, 23, 0.6); /* Dark blue background */
  border: 1px solid rgba(37, 99, 235, 0.4); /* Light blue border */
  border-radius: 8px;
  padding: 16px 20px;
  color: #fff;
  font-size: 1rem;
  outline: none;
  backdrop-filter: blur(10px);
}

.foresight-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.foresight-btn {
  flex: none;
  background: #2563eb; /* Light blue background */
  color: #ffffff; /* White text */
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}

.foresight-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

.foresight-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.note-highlight {
  color: #F1C4FA;
  font-weight: 600;
}

/* --- Verified Reviews Section --- */
.verified-reviews-section {
  padding: 120px 5% 100px 5%;
  background-color: var(--bg-color);
  color: #fff;
  position: relative;
  z-index: 2;
}

.clutch-badge-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.clutch-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.3s ease;
}

.clutch-badge:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.clutch-badge-text {
  background-color: #F1C4FA;
  color: #08163C;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.clutch-stars svg {
  height: 14px;
  width: auto;
}

.clutch-score {
  font-weight: 700;
  font-size: 0.9rem;
}

.verified-title {
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 60px;
  color: #e2e8f0;
}

.quote-separator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
}

.quote-line {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  z-index: 1;
}

.quote-icon {
  position: relative;
  z-index: 2;
  background-color: var(--bg-color);
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.review-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.review-avatars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 32px;
  min-height: 80px;
}

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateY(0);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.avatar-wrapper.active {
  transform: translateY(-16px);
}

.avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.inactive-img {
  opacity: 0.4;
}

.inactive-img:hover {
  opacity: 0.8;
}

.avatar-active-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.linkedin-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.reviewer-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.reviewer-title {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
}

.reviewer-company {
  height: 24px;
  width: auto;
  margin-bottom: 40px;
  opacity: 0.9;
}

.review-quote {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
  .trusted-container {
    flex-direction: column;
    text-align: center;
  }
  .trusted-text-container {
    flex: none;
    width: 100%;
    margin-bottom: 20px;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 30px;
  }
  .trusted-grid {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .built-section {
    padding: 60px 5%;
  }

  .built-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  
  .built-title {
    font-size: 2.5rem;
  }
  
  .built-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tabs-title {
    font-size: 2.5rem;
  }
  
  .tab-card-title {
    font-size: 2.5rem;
  }
  
  .tab-marquee-track {
    gap: 40px;
  }
  .tab-marquee-track img {
    height: 25px;
  }

  .team-main-title {
    font-size: 3.5rem;
  }
  
  .team-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .planet-wrapper {
    top: 280px;
    bottom: auto;
    width: 200%;
  }

  /* Menú ya es global */

  .hero-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* Allow content to take only needed space */
    padding-top: 20px; /* Reducido para quitar el enorme espacio vacío */
    min-height: auto; /* Remove mandatory full height to prevent vertical gaps */
  }
  
  /* En móviles, la luz ilumina de arriba (oscuro en el texto) hacia abajo (brillante en las tarjetas) */
  .hero-section::before {
    background: linear-gradient(180deg, transparent 40%, #1755cc 100%);
  }

  .hero-content {
    grid-column: 1;
    padding: 2rem 5% 4rem 5%;
    text-align: center;
    align-items: center;
  }
  
  .hero-title {
    font-size: clamp(1.5rem, 5vw, 2.6rem);
  }
  
  .hero-subtitle {
    margin: 0 auto 2.5rem auto;
  }

  .hero-visual {
    grid-column: 1;
    height: 70vh;
    padding: 0 3%;
    gap: 0.5rem; /* Gap mucho más pequeño para que quepan las 3 columnas */
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
  }
  
  .masonry-col {
    gap: 0.5rem;
    flex: 1; /* Auto distribute width to avoid overflowing */
  }
  
  .scroll-track {
    gap: 0.5rem;
  }
  
  .card {
    border-radius: 10px; /* Bordes un poco más pequeños en móvil */
  }
}

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

  .testimonials-header {
    flex-direction: column;
    gap: 16px;
  }

  .testimonials-title {
    font-size: 2.5rem;
  }

  .testimonials-grid,
  .awards-grid,
  .embedded-grid {
    grid-template-columns: 1fr;
  }

  .embedded-title {
    font-size: 2.5rem;
  }

  .tabs-buttons {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 15px; /* space for scrollbar */
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px; /* offset container padding */
    margin-right: -20px;
  }
  .tabs-buttons::-webkit-scrollbar {
    display: none;
  }
  .tab-btn {
    flex-shrink: 0;
    text-align: center;
  }
  
  .tab-card-content {
    padding: 40px 5%;
  }
  
  .team-main-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
  }
}

@media (max-width: 576px) {
  .trusted-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trusted-logo-wrap:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .trusted-logo-wrap:nth-child(2n) {
    border-right: none;
  }

  .hero-visual {
    height: 40vh;
    padding: 0 5%;
  }
}

/* --- CTA Section --- */
.cta-section {
  position: relative;
  padding: 150px 5%;
  background-color: #06122a; /* Azul oscuro constante */
  color: #fff;
  overflow: hidden; /* Evitar scroll horizontal por imágenes fuera */
}

.cta-content {
  position: relative;
  z-index: 10;
  pointer-events: none; /* Dejar pasar el hover al fondo */
}

.cta-title {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
}

.cta-desc {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
}

.cta-btn-wrapper {
  pointer-events: auto; /* Reactivar clic solo para el botón */
}

.cta-btn {
  background: #f8fafc;
  color: #020617;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.cta-btn:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
}

/* --- Stacked Image Trail (Efecto Hover 5 imágenes) --- */
.stacked-image-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: auto; /* Capturar el movimiento del mouse */
}

.stacked-image-trail__collection,
.stacked-image-trail__list {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
}

.stacked-image-trail__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 75px;
  height: 100px;
  pointer-events: none;
  z-index: 0;
}

.stacked-image-trail__card {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.stacked-image-trail__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lógica original de animación sacada de Webflow */
[data-stacked-trail-item] {
  transform: translate(-50%, -50%) rotate(0.001deg) scale(0.5);
  transition: transform 0.8s cubic-bezier(0.87, 0, 0.13, 1), clip-path 0.8s cubic-bezier(0.87, 0, 0.13, 1);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

[data-stacked-trail-area="hover"] [data-stacked-trail-item] {
  transform: translate(-50%, -50%) rotate(0.001deg) scale(1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Deshabilitar en móviles y tablets */
@media (max-width: 991px) {
  [data-stacked-trail-item] {
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    left: auto !important;
    top: auto !important;
    display: none;
  }

  .stacked-image-trail {
    display: none;
  }

  .cta-content {
    pointer-events: auto;
  }
}

/* --- FOOTER --- */
.main-footer {
  background-color: #040d21; /* Azul muy oscuro */
  color: #fff;
  padding: 80px 0 40px 0;
  font-family: 'Inter', sans-serif;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 60px;
}

.footer-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 24px;
}

.footer-subheading {
  font-size: 0.9rem;
  color: #94a3b8;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  opacity: 0.6;
}

.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.solutions-col {
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  padding: 0 40px;
}

/* Footer Cards */
.footer-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 20px;
  margin-bottom: 40px;
}

.footer-card {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 160px;
}

.location-card .card-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.4);
}

.location-card .card-content {
  position: relative;
  z-index: 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.location-card h4 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.location-card p {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin: 0;
}

.audit-card {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  display: flex;
  align-items: center;
  padding: 30px;
  gap: 20px;
}

.audit-left h3 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.audit-right {
  flex-grow: 1;
}

.audit-form-mini {
  display: flex;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}

.audit-form-mini input {
  flex-grow: 1;
  background: transparent;
  border: none;
  padding: 14px 20px;
  color: #fff;
  outline: none;
}

.audit-form-mini input::placeholder {
  color: rgba(255,255,255,0.6);
}

.audit-form-mini button {
  background: #f8fafc;
  color: #0f172a;
  border: none;
  padding: 0 24px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.audit-form-mini button:hover {
  background: #e2e8f0;
}

/* Footer Bottom Bar */
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 40px;
  margin-bottom: 24px;
}

.footer-huge-logo {
  width: 100%;
  max-width: 900px;
}

.footer-socials {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
}

.footer-socials a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.footer-socials a:hover {
  opacity: 1;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #94a3b8;
}

.legal-links {
  display: flex;
  gap: 24px;
}

.legal-links a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .solutions-col {
    border: none;
    padding: 0;
  }
  .footer-cards {
    grid-template-columns: 1fr;
  }
  .audit-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-socials {
    margin-top: 20px;
  }
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* --- PORTFOLIO SECTION (Flow Ninja Style) --- */

.portfolio-tabs-container {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 4px;
}

.portfolio-tab {
  background: transparent;
  color: #cbd5e1;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
}

.portfolio-tab.active {
  background: #ffffff;
  color: var(--brand-blue);
}

.portfolio-tab:hover:not(.active) {
  color: #ffffff;
}

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.filter-pill {
  background: transparent;
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-pill.active, .filter-pill:hover {
  background: #ffffff;
  color: var(--brand-blue);
  border-color: #ffffff;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px 25px;
}

.portfolio-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s ease;
}

.portfolio-card-wrap:hover {
  transform: translateY(-5px);
}

.portfolio-card {
  position: relative;
  background-color: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}

.portfolio-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.portfolio-cutout {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--bg-color); /* Match background */
  min-width: 170px;
  width: 52%;
  max-width: 210px;
  height: 58px;
  border-top-right-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Inverted curves for cutout */
.portfolio-cutout::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: transparent;
  border-bottom-left-radius: 16px;
  box-shadow: 0 8px 0 0 var(--bg-color);
}

.portfolio-cutout::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -16px;
  width: 16px;
  height: 16px;
  background-color: transparent;
  border-bottom-left-radius: 16px;
  box-shadow: -8px 0 0 0 var(--bg-color);
}

.portfolio-cutout-logo {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  transition: color 0.25s ease, transform 0.2s ease;
  cursor: pointer;
}

.portfolio-cutout-logo:hover {
  color: #60a5fa;
  transform: scale(1.05);
}

.portfolio-desc {
  font-size: 0.98rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
  padding-right: 10px;
}

/* ---- Video card styles ---- */

/* Thumb and video are stacked; video starts hidden */
.pf-video-card .pf-thumb {
  transition: opacity 0.4s ease, transform 0.5s ease;
}

/* Video always visible — first frame acts as poster */
.portfolio-video {
  opacity: 1;
  transition: opacity 0.4s ease;
  z-index: 1;
  object-fit: contain;
}

.portfolio-card-wrap:hover .portfolio-video {
  transform: scale(1); /* Evita el efecto zoom al reproducir/hover para ver el 100% del video sin cortes */
}

/* Keep cutout above video */
.pf-video-card .portfolio-cutout {
  z-index: 3;
}

/* Name link below the card (replaces <p class="portfolio-desc">) */
.portfolio-name-link {
  font-size: 0.98rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
  padding-right: 10px;
  text-decoration: none;
  display: block;
  transition: color 0.25s ease;
}

.portfolio-name-link:hover {
  color: #60a5fa;
  text-decoration: underline;
}

/* Cursor hint on video cards */
.pf-video-card .portfolio-card {
  cursor: pointer;
}


/* Responsive */
@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .portfolio-cutout {
    width: 55%;
  }
}

@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-tabs-container {
    width: 100%;
  }
  .portfolio-tab {
    flex: 1;
    text-align: center;
  }
}

/* Glassmorphism Cards */
.card-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}