/* -------------------------------------------- */
/* --- ENER PLAZA V2 - STYLESHEET IMPACTO --- */
/* -------------------------------------------- */

/* ------------------- */
/* RESET & BASE STYLES */
/* ------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', sans-serif;
  /* O 'Urbanist' */
  line-height: 1.7;
  color: var(--text-primary-dark);
  background-color: var(--bg-main-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-scroll-mobile {
  overflow-y: hidden;
}

/* ------------------- */
/* VARIABLES COLORES Y FUENTES */
/* ------------------- */
:root {
  /* Paleta de Azules Principal */
  --primary-color-main: #04054C;
  /* Azul ENER PLAZA original, profundo y corporativo */
  --primary-color-darker: #02032F;
  /* Para gradientes o fondos muy oscuros */
  --primary-color-medium: #0A2A5F;
  /* Azul intermedio, para contraste y elementos UI */

  /* Azules de Acento y Modernidad */
  --accent-blue-electric: #00BFFF;
  /* DeepSkyBlue - Para "pop" innovador, usar con MUCHA moderación */
  --accent-blue-vibrant: #1A73E8;
  /* Azul moderno tipo Google, para CTAs secundarios, links activos */
  --accent-blue-light-ui: #E9F3FF;
  /* Azul muy claro para fondos sutiles o UI elements */

  /* Neutrales */
  --text-primary-dark: #121826;
  /* Casi negro para texto principal, alta legibilidad */
  --text-secondary-gray: #586070;
  /* Gris oscuro para subtítulos, texto secundario */
  --text-light-on-dark: #F0F4F8;
  /* Blanco hueso para texto sobre fondos oscuros */
  --text-on-primary-cta: #FFFFFF;
  /* Blanco puro para CTAs con fondo primario */

  --bg-main-light: #FFFFFF;
  --bg-soft-gray: #F8F9FB;
  /* Gris muy suave para secciones alternas */
  --bg-dark-primary: var(--primary-color-main);
  --bg-dark-accent: var(--primary-color-medium);
  /* Para secciones oscuras con un toque diferente */

  --border-light: #E3E7ED;
  --border-dark-context: rgba(255, 255, 255, 0.15);

  /* Sombras y Radios */
  --shadow-soft: 0 4px 12px rgba(18, 24, 38, 0.05);
  --shadow-medium: 0 8px 24px rgba(18, 24, 38, 0.08);
  --shadow-strong: 0 12px 36px rgba(18, 24, 38, 0.12);
  --shadow-primary-cta: 0 6px 18px rgba(4, 5, 76, 0.3);
  --shadow-primary-cta-hover: 0 8px 25px rgba(4, 5, 76, 0.4);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-pill: 50px;

  /* Transiciones */
  --transition-base: all 0.3s ease-in-out;
  --transition-smooth: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-elastic: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Tipografía */
  --font-main: 'Inter', sans-serif;
  /* --font-display: 'Urbanist', sans-serif;  Opcional para titulares muy grandes */
}

/* ------------------- */
/* PRELOADER STYLES    */
/* ------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color-darker);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

#preloader.fade-out {
  opacity: 0;
}

.preloader-logo {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-light-on-dark);
  margin-bottom: 30px;
}

.preloader-logo span {
  color: var(--accent-blue-electric);
  font-weight: 600;
}

.preloader-dots {
  display: flex;
}

.preloader-dots .dot {
  width: 12px;
  height: 12px;
  background-color: var(--accent-blue-vibrant);
  border-radius: 50%;
  margin: 0 6px;
  animation: preloaderDotPulse 1.4s infinite ease-in-out both;
}

.preloader-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.preloader-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes preloaderDotPulse {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1.0);
  }
}

/* ------------------- */
/* UTILITIES & HELPERS */
/* ------------------- */
.container {
  width: 90%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-padding {
  padding: 100px 0;
}

@media (max-width: 992px) {
  .section-padding {
    padding: 80px 0;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding: 70px 0;
  }
}

.section-header-center {
  text-align: center;
  margin-bottom: 60px;
}

.section-tag {
  display: inline-block;
  padding: 6px 15px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: 15px;
  color: var(--accent-blue-vibrant);
  background-color: var(--accent-blue-light-ui);
  border: 1px solid var(--accent-blue-vibrant);
}

.section-tag.primary-tag {
  color: var(--primary-color-main);
  background-color: rgba(4, 5, 76, 0.08);
  border-color: rgba(4, 5, 76, 0.2);
}

.section-tag.light-tag {
  color: var(--text-light-on-dark);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.section-title {
  font-size: 2.9rem;
  /* Inter se ve bien un poco más grande */
  font-weight: 800;
  /* Bold para impacto */
  color: var(--text-primary-dark);
  line-height: 1.25;
  margin-bottom: 20px;
}

.section-title.with-line {
  position: relative;
  padding-bottom: 20px;
}

.section-title.with-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 4px;
  background-color: var(--primary-color-main);
  border-radius: 2px;
}

.section-title.with-line.light-line::after {
  background-color: var(--accent-blue-electric);
}

.section-title .highlight-electric {
  color: var(--accent-blue-electric);
}

.section-title .highlight-blue-medium {
  color: var(--accent-blue-vibrant);
}

.section-title.light-text {
  color: var(--text-light-on-dark);
}

.section-title .highlight-electric-on-dark {
  color: var(--accent-blue-electric);
}


.section-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary-gray);
  line-height: 1.8;
  max-width: 750px;
  /* Default width */
}

.section-subtitle.narrow {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.section-subtitle.left-align {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.section-subtitle.light-text {
  color: var(--text-light-on-dark);
  opacity: 0.85;
}

.cta-button {
  display: inline-flex;
  /* Para alinear icono y texto */
  align-items: center;
  justify-content: center;
  padding: 15px 35px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}

.cta-button i {
  margin-left: 10px;
  transition: transform 0.2s ease-out;
}

.cta-button:hover i {
  transform: translateX(3px);
}

.cta-button.primary-cta {
  background-color: var(--primary-color-main);
  color: var(--text-on-primary-cta);
  box-shadow: var(--shadow-primary-cta);
}

.cta-button.primary-cta:hover {
  background-color: var(--primary-color-darker);
  box-shadow: var(--shadow-primary-cta-hover);
  transform: translateY(-2px);
}

.cta-button.large-cta {
  padding: 18px 40px;
  font-size: 1.05rem;
}

.cta-button.extra-large-cta {
  padding: 20px 45px;
  font-size: 1.15rem;
  border-radius: var(--radius-md);
}

.cta-button-outline {
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 15px;
}

.cta-button-outline.light-outline {
  color: var(--text-light-on-dark);
  border-color: var(--text-light-on-dark);
}

.cta-button-outline.light-outline:hover {
  background-color: var(--text-light-on-dark);
  color: var(--primary-color-main);
}

.cta-button-outline.dark-outline {
  color: var(--primary-color-main);
  border-color: var(--primary-color-main);
}

.cta-button-outline.dark-outline:hover {
  background-color: var(--primary-color-main);
  color: var(--text-on-primary-cta);
}

.cta-button-outline.small-cta {
  padding: 10px 20px;
  font-size: 0.9rem;
}

.cta-button-outline.large-outline {
  padding: 16px 38px;
  font-size: 1.05rem;
}

.textured-bg {
  background-color: var(--bg-soft-gray);
  /* background-image: url('path/to/subtle-texture.png'); /* Opcional */
}

.dark-bg {
  background-color: var(--bg-dark-primary);
}

.dark-accent-bg {
  background-color: var(--bg-dark-accent);
}

/* Scroll Reveal Base Animations (using data-animation attribute) */
.reveal-on-scroll {
  opacity: 0;
}

.reveal-on-scroll.animated {
  opacity: 1;
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInRight {
  animation-name: fadeInRight;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.zoomIn {
  animation-name: zoomIn;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.slideInUp {
  animation-name: slideInCustomUp;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

@keyframes slideInCustomUp {
  from {
    opacity: 0;
    transform: translateY(60px) skewY(3deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) skewY(0);
  }
}

.scaleUp {
  animation-name: scaleUp;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.counterUp {
  animation-name: counterUp;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

/* Placeholder for JS counter trigger */
@keyframes counterUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------- */
/* NAVBAR V2           */
/* ------------------- */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
  transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

#navbar.navbar-transparent {
  background-color: transparent;
}

#navbar.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  /* Casi opaco */
  padding: 15px 0;
  box-shadow: var(--shadow-medium);
}

#navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 2rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}

.navbar-transparent .logo {
  color: var(--text-light-on-dark);
}

.navbar-scrolled .logo {
  color: var(--primary-color-main);
}

.logo span {
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar-transparent .logo span {
  color: var(--accent-blue-electric);
}

.navbar-scrolled .logo span {
  color: var(--accent-blue-vibrant);
}


.nav-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.nav-menu ul li {
  margin-left: 28px;
}

/* Reducido un poco */
.nav-menu ul li a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease, opacity 0.3s ease;
  position: relative;
  padding: 8px 4px;
}

.navbar-transparent .nav-menu ul li a {
  color: var(--text-light-on-dark);
  opacity: 0.85;
}

.navbar-scrolled .nav-menu ul li a {
  color: var(--text-secondary-gray);
}

.navbar-transparent .nav-menu ul li a:hover {
  color: var(--text-light-on-dark);
  opacity: 1;
}

.navbar-scrolled .nav-menu ul li a:hover {
  color: var(--primary-color-main);
}

/* Efecto línea sutil bajo el link activo/hover */
.nav-menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  transition: width 0.3s ease-out;
}

.navbar-transparent .nav-menu ul li a::after {
  background-color: var(--accent-blue-electric);
}

.navbar-scrolled .nav-menu ul li a::after {
  background-color: var(--primary-color-main);
}

.nav-menu ul li a:hover::after,
.nav-menu ul li a.active-link::after {
  /* Add .active-link via JS if needed */
  width: 100%;
}


.nav-cta {
  /* Estilo del CTA en el navbar */
  padding: 10px 22px !important;
  font-size: 0.9rem !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  transition: all 1s ease-out;
}

.navbar-transparent .nav-cta {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--text-light-on-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.navbar-transparent .nav-cta:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-scrolled .nav-cta {
  background-color: var(--primary-color-main) !important;
  color: var(--text-on-primary-cta) !important;
  border-color: var(--primary-color-main) !important;
  box-shadow: var(--shadow-primary-cta);
}

.navbar-scrolled .nav-cta:hover {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
  transform: translateY(-1px);
}

/* Pulsing CTA in Navbar */
.pulse-cta.active-pulse {
  animation: pulseAnimation 1.8s infinite;
}

@keyframes pulseAnimation {
  0% {
    box-shadow: 0 0 0 0 rgba(4, 5, 76, 0.5);
  }

  /* Corregido para que coincida con el color de .nav-scrolled .nav-cta */
  70% {
    box-shadow: 0 0 0 10px rgba(4, 5, 76, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(4, 5, 76, 0);
  }
}

.navbar-transparent .pulse-cta.active-pulse {
  /* Adaptar pulso para navbar transparente */
  animation: pulseAnimationTransparent 1.8s infinite;
}

@keyframes pulseAnimationTransparent {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}


/* Hamburger Menu (Transformicon Style) */
.hamburger-menu {
  display: none;
  /* Se muestra en media queries */
  width: 30px;
  height: 22px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1002;
  margin-bottom: 10px;
  /* Encima del menu cuando es overlay */
}

.hamburger-menu .bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-light-on-dark);
  border-radius: 3px;
  position: absolute;
  left: 0;
  transition: var(--transition-elastic);
}

.navbar-scrolled .hamburger-menu .bar {
  background-color: var(--primary-color-main);
}

.hamburger-menu .top-bar {
  top: 0;
}

.hamburger-menu .middle-bar {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-menu .bottom-bar {
  bottom: 0;
}

.hamburger-menu.active .top-bar {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger-menu.active .middle-bar {
  opacity: 0;
}

.hamburger-menu.active .bottom-bar {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.hamburger-menu.active .bar {
  background-color: var(--text-light-on-dark);
}

/* Color de X cuando está activo */


/* ------------------- */
/* HERO SECTION V2     */
/* ------------------- */
.hero-section-v2 {
  min-height: 100vh;
  /* Para evitar que sea demasiado alto en pantallas muy largas */
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--primary-color-darker);
  /* Fondo base oscuro */
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 100px;
  /* Espacio para navbar */
}

.hero-background-shape {
  /* Elemento decorativo abstracto */
  position: absolute;
  top: -20%;
  left: -10%;
  width: 70%;
  height: 120%;
  background: linear-gradient(135deg, var(--primary-color-main) 0%, var(--primary-color-medium) 100%);
  clip-path: ellipse(60% 70% at 30% 40%);
  /* Forma elíptica */
  opacity: 0.6;
  z-index: 0;
  animation: heroShapeAnim 20s infinite alternate ease-in-out;
}

@keyframes heroShapeAnim {
  0% {
    transform: rotate(0deg) scale(1);
  }

  100% {
    transform: rotate(15deg) scale(1.05);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  /* Texto más predominante */
  align-items: center;
  gap: 60px;
  color: var(--text-light-on-dark);
}

.hero-headline {
  font-size: 3.8rem;
  /* Ajustar según la fuente elegida */
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 25px;
  letter-spacing: -1px;
}

.hero-headline .highlight-electric {
  /* color: var(--accent-blue-electric); */
  /* Efecto de texto con gradiente sutil para "Monetiza" */
  background: linear-gradient(90deg, var(--accent-blue-electric), #00DDEE);
  /* Ajustar colores */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  display: inline-block;
  /* Necesario para background-clip */
}

.hero-subheadline {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 40px;
  opacity: 0.9;
  max-width: 600px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-visual-placeholder img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.scroll-down-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.5rem;
  animation: bounceArrow 2s infinite;
  z-index: 2;
}

@keyframes bounceArrow {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  40% {
    transform: translateX(-50%) translateY(-10px);
  }

  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* ------------------- */
/* DESAFÍO ENERGÉTICO  */
/* ------------------- */
.challenge-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.challenge-card {
  background-color: var(--bg-main-light);
  padding: 35px 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  text-align: center;
  transition: var(--transition-smooth);
  border: 1px solid var(--border-light);
}

.challenge-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-strong);
  border-color: var(--primary-color-main);
}

.challenge-card-icon {
  font-size: 2.5rem;
  color: var(--primary-color-main);
  margin-bottom: 20px;
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  background-color: var(--accent-blue-light-ui);
}

.challenge-card h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary-dark);
  margin-bottom: 12px;
}

.challenge-card p {
  font-size: 0.95rem;
  color: var(--text-secondary-gray);
}

/* ------------------- */
/* SOLUCIONES AVANZADAS */
/* ------------------- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 35px;
  margin-top: 50px;
}

.solution-card-v2 {
  background-color: var(--bg-main-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  /* For hover effect */
}

.solution-card-v2:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-strong);
  border-color: var(--primary-color-main);
}

.solution-card-icon-bg {
  padding: 30px;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-color-medium), var(--primary-color-main));
  color: var(--text-light-on-dark);
  font-size: 2.8rem;
}

.solution-card-icon-bg i {
  transition: transform 0.3s ease;
}

.solution-card-v2:hover .solution-card-icon-bg i {
  transform: scale(1.1) rotate(-5deg);
}

.solution-card-content {
  padding: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.solution-card-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color-main);
  margin-bottom: 15px;
  line-height: 1.3;
}

.solution-card-content p {
  font-size: 0.95rem;
  color: var(--text-secondary-gray);
  margin-bottom: 20px;
  flex-grow: 1;
}

.solution-card-link {
  display: inline-block;
  font-weight: 600;
  color: var(--accent-blue-vibrant);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.solution-card-link i {
  margin-left: 5px;
  transition: transform 0.2s ease-out;
}

.solution-card-link:hover {
  color: var(--primary-color-main);
  /* transform: translateX(3px); */
}

.solution-card-link:hover i {
  transform: translateX(4px);
}

/* ------------------- */
/* CTA BANNER 1        */
/* ------------------- */
.cta-banner-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cta-banner-section::before {
  /* Abstract background shapes */
  content: "";
  position: absolute;
  top: -50px;
  left: -100px;
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  filter: blur(20px);
}

.cta-banner-section::after {
  /* Abstract background shapes */
  content: "";
  position: absolute;
  bottom: -80px;
  right: -120px;
  width: 400px;
  height: 400px;
  background-color: rgba(0, 191, 255, 0.08);
  /* --accent-blue-electric with alpha */
  border-radius: 45% 55% 60% 40% / 50% 40% 60% 50%;
  /* Organic shape */
  filter: blur(25px);
  animation: ctaShapeFloat 10s infinite alternate ease-in-out;
}

@keyframes ctaShapeFloat {
  to {
    transform: translateY(20px) rotate(10deg);
  }
}

.cta-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.cta-banner-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-light-on-dark);
  margin-bottom: 15px;
  line-height: 1.3;
}

.cta-banner-text p {
  font-size: 1.1rem;
  color: var(--text-light-on-dark);
  opacity: 0.8;
  max-width: 600px;
}

/* ------------------- */
/* NUESTRO PROCESO V2  */
/* ------------------- */
.process-timeline-v2 {
  position: relative;
  margin-top: 60px;
}

/* Central line for timeline */
.process-timeline-v2::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 45px;
  /* Center of the icon */
  width: 4px;
  background-color: var(--accent-blue-light-ui);
  border-radius: 2px;
  z-index: 0;
}

.process-step-v2 {
  position: relative;
  padding-left: 110px;
  /* Space for icon and some margin */
  margin-bottom: 50px;
  min-height: 90px;
  /* Ensure space for icon */
}

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

.process-step-icon {
  position: absolute;
  left: 0;
  top: 0;
  /* Align to top of text content */
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--primary-color-main), var(--primary-color-medium));
  color: var(--text-light-on-dark);
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(4, 5, 76, 0.25);
  z-index: 2;
  border: 4px solid var(--bg-main-light);
  /* Creates a "pop-out" effect */
}

.process-step-v2:hover .process-step-icon {
  transform: scale(1.05);
}

.process-step-info h4 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary-dark);
  margin-bottom: 10px;
}

.process-step-info h4 span {
  /* For the number */
  color: var(--accent-blue-vibrant);
  margin-right: 8px;
  font-weight: 800;
}

.process-step-info p {
  font-size: 1rem;
  color: var(--text-secondary-gray);
  line-height: 1.7;
}

/* ------------------- */
/* IMPACTO REAL        */
/* ------------------- */
.impact-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  /* Reduced gap for tighter look */
  margin-top: 50px;
}

.impact-metric-item {
  background-color: var(--bg-dark-accent);
  /* Slightly different dark */
  padding: 30px 25px;
  border-radius: var(--radius-lg);
  text-align: left;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-dark-context);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.impact-metric-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.metric-icon {
  font-size: 2.5rem;
  color: var(--accent-blue-electric);
  margin-bottom: 15px;
  opacity: 0.8;
}

.metric-value {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--text-light-on-dark);
  line-height: 1;
  margin-bottom: 8px;
}

.metric-value .counter {
  color: inherit;
}

/* Ensure counter takes parent color */
.metric-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light-on-dark);
  opacity: 0.7;
  margin-bottom: 20px;
  min-height: 40px;
  /* Ensure consistent height */
}

.metric-bar {
  /* Visual bar */
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.metric-bar span {
  display: block;
  height: 100%;
  background-color: var(--accent-blue-electric);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Delay bar animation */
}

.reveal-on-scroll.animated .metric-bar span {
  /* Trigger bar animation when parent is revealed */
  transform: scaleX(1);
}

.section-cta-center {
  text-align: center;
  margin-top: 60px;
}


/* ------------------- */
/* TECNOLOGÍA CORE     */
/* ------------------- */
.section-header-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.section-header-dual .section-title,
.section-header-dual .section-subtitle {
  text-align: left;
  margin-left: 0;
}

.section-header-dual .section-title.with-line::after {
  left: 0;
  transform: translateX(0);
}

/* Align line left */

.tech-features-list {
  list-style: none;
  margin: 30px 0;
}

.tech-features-list li {
  font-size: 1.05rem;
  color: var(--text-secondary-gray);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.tech-features-list li i {
  color: var(--accent-blue-vibrant);
  margin-right: 12px;
  font-size: 1.3rem;
}

.header-visual img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
}


/* ------------------- */
/* CASOS DE ÉXITO      */
/* ------------------- */
.success-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.story-card {
  background-color: var(--bg-main-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.story-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: var(--shadow-strong);
}

.story-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.story-card:hover .story-image img {
  transform: scale(1.08);
}

.story-type-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: var(--primary-color-main);
  color: var(--text-on-primary-cta);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 1;
}

.story-content {
  padding: 25px 30px 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.story-content h3 {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary-color-main);
  margin-bottom: 10px;
}

.story-content p {
  font-size: 0.9rem;
  color: var(--text-secondary-gray);
  margin-bottom: 20px;
  line-height: 1.6;
  flex-grow: 1;
}

.story-tags {
  margin-bottom: 20px;
}

.story-tags span {
  display: inline-block;
  background-color: var(--accent-blue-light-ui);
  color: var(--accent-blue-vibrant);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  margin-right: 8px;
  margin-bottom: 8px;
}

.story-link {
  display: inline-block;
  font-weight: 600;
  color: var(--primary-color-main);
  text-decoration: none;
  margin-top: auto;
  /* Pushes link to bottom if card height varies */
  align-self: flex-start;
}

.story-link:hover {
  color: var(--accent-blue-vibrant);
}

.story-link i {
  margin-left: 6px;
}

/* ------------------- */
/* DIFERENCIADORES     */
/* ------------------- */
.differentiators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.differentiator-item {
  background-color: #fff;
  padding: 40px 30px;
  border-radius: var(--radius-lg);
  text-align: center;
  border-left: 5px solid var(--primary-color-main);
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: var(--shadow-medium);
}

.differentiator-item:hover {
  background-color: var(--bg-main-light);
  /* Cambia a blanco al hover */
  transform: translateY(-8px);
  box-shadow: var(--shadow-medium);
}

.diff-icon {
  font-size: 3rem;
  color: var(--primary-color-main);
  margin-bottom: 25px;
}

.differentiator-item h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary-dark);
  margin-bottom: 15px;
}

.differentiator-item p {
  font-size: 0.95rem;
  color: var(--text-secondary-gray);
}

/* ------------------- */
/* FAQ V2              */
/* ------------------- */
.faq-accordion-v2 {
  max-width: 900px;
  margin: 50px auto 0;
}

.faq-item-v2 {
  background-color: var(--bg-main-light);
  margin-bottom: 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  overflow: hidden;
  /* For smooth accordion */
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.3s ease;
}

.faq-item-v2:hover {
  box-shadow: var(--shadow-medium);
}

.faq-question-v2 {
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 25px 30px;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s ease;
}

.faq-question-v2:hover {
  color: var(--primary-color-main);
}

.faq-icon {
  font-size: 1.1rem;
  color: var(--primary-color-main);
  transition: transform 0.3s ease;
  width: 24px;
  height: 24px;
  /* Ensure consistent size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-question-v2[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

/* For plus to cross */
/* .faq-question-v2[aria-expanded="true"] .faq-icon i { classList.remove('fa-plus'); classList.add('fa-minus'); } // JS handled */

.faq-answer-v2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
  padding-left: 30px;
  padding-right: 30px;
  /* padding-top/bottom are handled by JS on expand for smoother animation */
}

.faq-answer-v2 p {
  font-size: 0.95rem;
  color: var(--text-secondary-gray);
  line-height: 1.8;
}

/* ------------------- */
/* CONTACTO V2         */
/* ------------------- */
.contact-section-v2 {
  position: relative;
  background: var(--primary-color-darker);
  /* Base dark color */
  overflow: hidden;
  /* For background shapes */
}

.contact-background-elements .bg-shape-1 {
  position: absolute;
  top: -10%;
  right: -15%;
  width: 400px;
  height: 400px;
  background: linear-gradient(45deg, var(--primary-color-medium), var(--primary-color-main));
  opacity: 0.3;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: bgShapeRotate 25s linear infinite;
}

.contact-background-elements .bg-shape-2 {
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 350px;
  height: 350px;
  background-color: var(--accent-blue-electric);
  opacity: 0.08;
  border-radius: 50%;
  filter: blur(50px);
}

@keyframes bgShapeRotate {
  to {
    transform: rotate(360deg);
  }
}

.contact-section-v2 .container {
  position: relative;
  z-index: 1;
}

.contact-content-wrapper {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  /* Form más grande */
  gap: 50px;
  align-items: flex-start;
  margin-top: 40px;
}

.contact-form-modern {
  background-color: rgba(255, 255, 255, 0.03);
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-dark-context);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.form-group-modern {
  position: relative;
  margin-bottom: 25px;
  /* Space for error messages if any */
}

.form-group-modern.full-width {
  grid-column: span 2;
}

.form-group-modern input,
.form-group-modern textarea,
.form-group-modern select {
  width: 100%;
  padding: 18px 20px 10px;
  /* Padding adjusted for floating label */
  border: 1px solid var(--border-dark-context);
  border-radius: var(--radius-sm);
  background-color: transparent;
  /* Inputs transparent on this bg */
  color: var(--text-light-on-dark);
  font-family: var(--font-main);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.form-group-modern select {
  padding-top: 14px;
  padding-bottom: 14px;
  /* Select needs different padding */
}

.form-group-modern select option {
  background-color: var(--primary-color-medium);
  color: var(--text-light-on-dark);
}

.form-group-modern label {
  position: absolute;
  top: 15px;
  /* Vertically centered with padding */
  left: 20px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

/* Floating label effect */
.form-group-modern input:focus+label,
.form-group-modern input:not(:placeholder-shown)+label,
.form-group-modern textarea:focus+label,
.form-group-modern textarea:not(:placeholder-shown)+label {
  top: 6px;
  font-size: 0.75rem;
  color: var(--accent-blue-electric);
}

/* Select label needs different handling as :placeholder-shown doesn't work */
.form-group-modern select:focus+label,
.form-group-modern select:valid+label {
  /* Using :valid if an option is selected */
  top: 6px;
  font-size: 0.75rem;
  color: var(--accent-blue-electric);
}


.form-group-modern input:focus,
.form-group-modern textarea:focus,
.form-group-modern select:focus {
  outline: none;
  border-color: var(--accent-blue-vibrant);
}

.form-group-modern textarea {
  resize: vertical;
  min-height: 100px;
}

.checkbox-group-modern {
  display: flex;
  align-items: center;
}

.checkbox-group-modern input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
  accent-color: var(--accent-blue-vibrant);
}

.checkbox-group-modern label {
  position: static;
  /* Override absolute for checkbox */
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: auto;
}

.checkbox-group-modern label a {
  color: var(--accent-blue-electric);
  text-decoration: underline;
}

.checkbox-group-modern label a:hover {
  text-decoration: none;
}

.modern-submit.primary-cta {
  width: 100%;
  grid-column: span 2;
  /* If inside form-grid */
  padding: 18px;
  font-size: 1.05rem;
  margin-top: 10px;
}

.modern-submit i {
  transition: none;
}

/* Disable default icon transition if using spinner */
.modern-submit .fa-spinner {
  margin-left: 10px;
}

.calendly-wrapper-modern {
  text-align: left;
  color: var(--text-light-on-dark);
}

.calendly-wrapper-modern h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.calendly-wrapper-modern p {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 20px;
}

.calendly-wrapper-modern .calendly-inline-widget {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-dark-context);
  height: 480px !important;
  /* Override Calendly default if needed */
}

/* ------------------- */
/* FOOTER V2           */
/* ------------------- */
#footer-v2 {
  background-color: var(--primary-color-darker);
  /* Deepest dark for footer */
  color: var(--text-light-on-dark);
  padding-top: 80px;
  /* No bottom padding, handled by bottom-bar */
  font-size: 0.9rem;
}

.footer-main-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  /* Adjust column ratios */
  gap: 45px;
  padding-bottom: 60px;
}

.footer-col h4 {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 25px;
  color: var(--text-light-on-dark);
  /* White titles */
  opacity: 0.9;
}

.footer-col.brand-info .footer-logo {
  font-size: 2.2rem;
  /* Match navbar logo */
  margin-bottom: 15px;
  display: inline-block;
}

.footer-col.brand-info .footer-logo span {
  color: var(--accent-blue-electric);
}

.footer-tagline {
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0.7;
  margin-bottom: 25px;
  max-width: 320px;
}

.social-media-links a {
  color: var(--text-light-on-dark);
  font-size: 1.3rem;
  margin-right: 18px;
  opacity: 0.6;
  transition: var(--transition-base);
}

.social-media-links a:hover {
  color: var(--accent-blue-electric);
  opacity: 1;
  transform: translateY(-2px);
}

.footer-col ul {
  list-style: none;
}

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

.footer-col ul li a {
  color: var(--text-light-on-dark);
  text-decoration: none;
  opacity: 0.7;
  transition: var(--transition-base);
}

.footer-col ul li a:hover {
  opacity: 1;
  color: var(--accent-blue-electric);
  padding-left: 5px;
}

.contact-info-col p {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  opacity: 0.8;
}

.contact-info-col p i {
  margin-right: 12px;
  color: var(--accent-blue-vibrant);
  margin-top: 4px;
  /* Align icon */
  width: 18px;
  text-align: center;
}

.contact-info-col p a {
  color: inherit;
  text-decoration: none;
}

.contact-info-col p a:hover {
  color: var(--accent-blue-electric);
}

.contact-info-col .cta-button-outline {
  margin-top: 15px;
}

.footer-bottom-bar {
  background-color: var(--primary-color-darker);
  /* Can be slightly different if needed */
  border-top: 1px solid var(--border-dark-context);
  padding: 25px 0;
}

.bottom-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.6;
}

.footer-legal-links a {
  color: inherit;
  text-decoration: none;
  margin-left: 20px;
}

.footer-legal-links a:hover {
  color: var(--accent-blue-electric);
  text-decoration: underline;
}

/* ------------------- */
/* SCROLL TOP BUTTON V2*/
/* ------------------- */
.scroll-top-btn-v2 {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  /* Slightly smaller */
  height: 48px;
  background-color: var(--primary-color-main);
  color: var(--text-on-primary-cta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-medium);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.8);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s var(--transition-elastic);
  text-decoration: none;
}

.scroll-top-btn-v2.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.scroll-top-btn-v2:hover {
  background-color: var(--accent-blue-vibrant);
  transform: translateY(-3px) scale(1.05);
}


/* ------------------- */
/* RESPONSIVE STYLES   */
/* ------------------- */
@media (max-width: 1200px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0;
  }

  .hero-text-content {
    order: 2;
  }

  .hero-visual-placeholder {
    order: 1;
    margin-bottom: 40px;
    text-align: center;
  }

  .hero-visual-placeholder img {
    max-width: 80%;
    margin: 0 auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .section-header-dual {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .section-header-dual .header-text {
    order: 2;
  }

  .section-header-dual .header-visual {
    order: 1;
    margin-bottom: 40px;
    text-align: center;
  }

  .section-header-dual .header-visual img {
    max-width: 80%;
    margin: 0 auto;
  }

  .section-header-dual .section-title,
  .section-header-dual .section-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .section-header-dual .section-title.with-line::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .tech-features-list {
    align-items: center;
    justify-content: center;
    text-align: left;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-content-wrapper {
    grid-template-columns: 1fr;
  }

  .calendly-wrapper-modern {
    margin-top: 40px;
    text-align: center;
  }

  .footer-main-content {
    grid-template-columns: 1fr 1fr;
  }

  /* 2 cols for tablet */
  .footer-col.brand-info,
  .footer-col.contact-info-col {
    grid-column: span 2;
    text-align: center;
  }

  /* Brand and contact full width on 2-col */
  .footer-col.brand-info .footer-tagline,
  .footer-col.contact-info-col p {
    margin-left: auto;
    margin-right: auto;
  }

  .social-media-links {
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .section-title {
    font-size: 2.5rem;
  }

  .hero-headline {
    font-size: 3.2rem;
  }

  /* Mobile Navbar Menu */
  .hamburger-menu {
    display: block;
  }

  /* Show hamburger */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    /* Start off-screen */
    width: 85%;
    max-width: 350px;
    height: 100vh;
    background-color: var(--primary-color-darker);
    /* Dark background for menu */
    padding: 100px 30px 40px;
    /* Top padding for navbar space */
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    transition: right 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
    /* Smooth cubic bezier */
    overflow-y: auto;
    z-index: 1001;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-menu ul {
    flex-direction: column;
    width: 100%;
  }

  .nav-menu ul li {
    margin-left: 0;
    width: 100%;
  }

  .nav-menu ul li a {
    display: block;
    padding: 18px 10px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-light-on-dark) !important;
    /* Important to override */
    opacity: 0.9;
    border-bottom: 1px solid var(--border-dark-context);
  }

  .nav-menu ul li:last-child a {
    border-bottom: none;
  }

  .nav-menu ul li a:hover {
    color: var(--accent-blue-electric) !important;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.05);
  }

  .nav-menu ul li a::after {
    display: none;
  }

  /* No underlines in mobile menu */
  .nav-menu .nav-cta {
    margin-top: 30px;
    width: 100%;
    text-align: center;
    padding: 16px 25px !important;
    background-color: var(--accent-blue-vibrant) !important;
    color: var(--text-on-primary-cta) !important;
    border-color: var(--accent-blue-vibrant) !important;
  }

  .nav-menu .nav-cta:hover {
    background-color: var(--accent-blue-electric) !important;
    border-color: var(--accent-blue-electric) !important;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2.2rem;
  }

  .hero-headline {
    font-size: 2.6rem;
  }

  .hero-subheadline {
    font-size: 1.1rem;
  }

  .cta-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .cta-banner-text h2 {
    font-size: 2rem;
  }

  .process-timeline-v2::before {
    left: 20px;
  }

  /* Adjust line for smaller icons */
  .process-step-v2 {
    padding-left: 60px;
    min-height: 70px;
  }

  .process-step-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    border-width: 3px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Stack form fields */
  .form-group-modern.full-width {
    grid-column: span 1;
  }

  .footer-main-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Single column for mobile footer */
  .footer-col.brand-info,
  .footer-col.contact-info-col {
    grid-column: span 1;
  }

  .footer-col h4 {
    text-align: center;
  }

  .bottom-bar-content {
    flex-direction: column;
    gap: 10px;
  }

  .footer-legal-links {
    margin-top: 10px;
  }

  .footer-legal-links a {
    margin: 0 8px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 2rem;
  }

  .hero-headline {
    font-size: 2.7rem;
  }

  .hero-visual-placeholder img {
    max-width: 100%;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .impact-metrics-grid {
    grid-template-columns: 1fr;
  }

  .success-stories-grid {
    grid-template-columns: 1fr;
  }

  .differentiators-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-modern {
    padding: 30px 25px;
  }

  .scroll-top-btn-v2 {
    width: 44px;
    height: 44px;
    font-size: 1rem;
    bottom: 20px;
    right: 20px;
  }

  .container {
    padding: 0;
  }
}

/* ------------------- */
/* COOKIE CONSENT POPUP */
/* ------------------- */
.cookie-popup {
  position: fixed;
  bottom: -200px;
  /* Inicia oculto abajo */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 700px;
  /* Ancho máximo para el popup */
  background-color: var(--primary-color-darker);
  /* Fondo oscuro elegante */
  color: var(--text-light-on-dark);
  padding: 25px 30px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* Bordes redondeados solo arriba */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  z-index: 2000;
  /* Por encima de otros elementos */
  opacity: 0;
  visibility: hidden;
  transition: bottom 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease, visibility 0.5s ease;
  border-top: 3px solid var(--accent-blue-electric);
  /* Línea de acento superior */
}

.cookie-popup.show {
  bottom: 0;
  /* Se desliza hacia arriba */
  opacity: 1;
  visibility: visible;
}

.cookie-popup-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.cookie-popup-content p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  flex-grow: 1;
  /* El texto ocupa el espacio disponible */
  opacity: 0.9;
}

.cookie-popup-content p a {
  color: var(--accent-blue-electric);
  /* Color de acento para el enlace */
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s ease;
}

.cookie-popup-content p a:hover {
  color: var(--text-light-on-dark);
  text-decoration: none;
}

.cookie-popup-content .cta-button.small-cta {
  padding: 10px 25px;
  /* Ajuste de padding para botón en popup */
  font-size: 0.9rem;
  flex-shrink: 0;
  /* Evita que el botón se encoja */
  background-color: var(--accent-blue-vibrant);
  /* Usar un azul vibrante para el botón */
  border-color: var(--accent-blue-vibrant);
}

.cookie-popup-content .cta-button.small-cta:hover {
  background-color: var(--accent-blue-electric);
  border-color: var(--accent-blue-electric);
}


/* Responsive para el popup de cookies */
@media (max-width: 768px) {
  .cookie-popup {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    /* Sin bordes redondeados en móvil para ocupar todo el ancho */
    padding: 20px;
    bottom: -250px;
    /* Asegurar que esté bien oculto al inicio */
  }

  .cookie-popup-content {
    flex-direction: column;
    /* Apilar en móvil */
    text-align: center;
    gap: 15px;
  }

  .cookie-popup-content p {
    margin-bottom: 10px;
    /* Espacio antes del botón */
  }

  .cookie-popup-content .cta-button.small-cta {
    width: 100%;
    max-width: 250px;
    /* Limitar ancho del botón en móvil */
  }
}

/* ------------------- */
/* WHATSAPP FLOAT BUTTON */
/* ------------------- */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px;
  /* Ajustar si se superpone con el scroll-top button */
  right: 30px;
  background-color: #25D366;
  /* Color oficial de WhatsApp */
  color: #FFFFFF;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  /* Tamaño del ícono */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 998;
  /* Ligeramente por debajo del scroll-top y del popup de cookies si es necesario */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s var(--transition-elastic), background-color 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  /* Inicia oculto para animación de entrada */
  visibility: hidden;
  transform: scale(0.5) translateY(20px);
  /* Inicia pequeño y abajo */
  animation: whatsappAppear 0.5s 2.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Animación de entrada con delay */
}

/* Animación para que el botón aparezca después de un tiempo */
@keyframes whatsappAppear {
  to {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
  }
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-3px);
  /* Efecto de "levantar" y agrandar */
  background-color: #1DAE50;
  /* Un verde ligeramente más oscuro al hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Pequeña animación de pulso para llamar la atención (opcional) */
.whatsapp-float::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #25D366;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.6;
  animation: whatsappPulse 2s infinite ease-out;
  /* No mostrar el pulso hasta que el botón principal haya aparecido */
  animation-delay: 3s;
  /* Sincronizar con el delay de whatsappAppear + duración */
}

@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.4);
    /* Cuánto se expande el pulso */
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Ajuste para que el botón de WhatsApp no se superponga con el de "Scroll to Top" */
/* Si ambos están en la misma esquina, puedes necesitar ajustar la posición de uno */
.scroll-top-btn-v2.visible+.whatsapp-float,
/* Si el scroll-top está visible Y LUEGO está el WhatsApp */
body:has(.scroll-top-btn-v2.visible) .whatsapp-float {
  /* Otra forma de seleccionar si el scroll-top es visible */
  bottom: 95px;
  /* Sube el botón de WhatsApp si el de scroll-top está visible (60px alto + 30px margen + 5px extra) */
  transition: bottom 0.3s ease;
  /* Transición suave al moverlo */
}

/* Responsive para el botón de WhatsApp */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    font-size: 26px;
    bottom: 20px;
    /* Más cerca del borde en móviles */
    right: 20px;
  }

  .scroll-top-btn-v2.visible+.whatsapp-float,
  body:has(.scroll-top-btn-v2.visible) .whatsapp-float {
    bottom: 85px;
    /* Ajuste para móvil */
  }
}

/* ----------------------------- */
/* HERO SECTION V2 - IMAGE STYLES */
/* ----------------------------- */

/* ... (Estilos existentes de .hero-section-v2 y .hero-content) ... */

.hero-section-v2 {
  /* ... (otros estilos) ... */
  overflow: hidden;
  /* Importante para que la imagen no cause scroll horizontal si se sale un poco */
}

.hero-content {
  /* ... (otros estilos, como display: grid) ... */
  position: relative;
  /* Necesario para el posicionamiento absoluto de la imagen */
  align-items: center;
  /* Mantenemos alineación vertical de los items del grid */
}

/* Contenedor de la imagen visual del Hero */
.hero-visual-container {
  grid-column: 2 / 3;
  /* Asumiendo que es el segundo item en tu grid de .hero-content */
  position: relative;
  /* Puede ser útil para elementos internos, pero la imagen será absoluta */
  /* Quitamos cualquier altura o ancho fijo para que no limite la imagen */
  height: auto;
  /* O incluso podrías quitarlo si la imagen define todo */
  z-index: 5;
  /* Para que la imagen esté por encima del .hero-background-shape si es necesario */

  /* Para pantallas grandes, hacemos que este contenedor sea la referencia de la imagen flotante */
  /* y que permita que la imagen se desborde */
  align-self: stretch;
  /* Que el contenedor intente ocupar toda la altura del grid row */
}

.hero-floating-image {
  display: block;
  /* Quitar espacio extra debajo de la imagen */
  position: absolute;
  /* ¡LA CLAVE! La sacamos del flujo normal del grid */

  /* Posicionamiento y Tamaño (Ajustar estos valores es CRUCIAL) */
  right: -25%;
  /* La movemos hacia la derecha, para que parte se salga del contenedor principal del grid.
                       Ajustar este valor para controlar cuánto se sale.
                       Podrías usar vw para que sea relativo al viewport width: right: -10vw; */
  top: 60%;
  /* Centrarla verticalmente respecto al .hero-content */
  transform: translateY(-50%);
  /* Ajuste fino para el centrado vertical */

  max-width: 850px;
  /* Un ancho máximo para la imagen, evita que sea demasiado grande en pantallas enormes */
  width: 150%;
  /* Hacemos que la imagen sea más ancha que su columna original en el grid.
                       Esto, combinado con 'right', la hará desbordar.
                       Podrías usar vw: width: 60vw; (ajustar según el diseño) */
  height: auto;
  /* Mantenemos la proporción */

  /* Estilos visuales para la imagen "premium" */
  object-fit: contain;
  /* O 'cover' dependiendo de cómo quieras que se comporte la imagen */
  /* No añadir box-shadow directamente aquí si la imagen PNG ya tiene buen recorte,
     la sombra puede venir del propio render 3D. Si no, añadir una sutil:
     filter: drop-shadow(0 15px 30px rgba(0,0,0,0.25));
  */
  border-radius: var(--radius-lg);
  /* Si la imagen no es PNG transparente y quieres redondearla */

  /* Para asegurar que está sobre otros elementos dentro del hero, si es necesario */
  z-index: 10;
}

/* Ajustes para pantallas más pequeñas donde la imagen flotante podría ser problemática */
@media (max-width: 1200px) {
  .hero-visual-container {
    grid-column: 1 / -1;
    /* Que ocupe todo el ancho en el grid de una columna */
    order: 1;
    /* Para que la imagen vaya arriba en el flujo móvil */
    margin-bottom: 30px;
    /* Para móvil, volvemos a un posicionamiento más normal para la imagen */
  }

  .hero-floating-image {
    position: relative;
    /* Volver a un posicionamiento relativo/estático */
    right: auto;
    top: auto;
    transform: none;
    width: 80%;
    /* O un valor que funcione bien centrado */
    max-width: 500px;
    /* Límite para móvil */
    margin: 0 auto;
    /* Centrar la imagen */
  }
}

@media (max-width: 768px) {
  .hero-floating-image {
    width: 90%;
    max-width: 400px;
  }
}

/* Estilos existentes del texto del hero (.hero-text-content) */
.hero-text-content {
  grid-column: 1 / 2;
  /* Asegurar que el texto está en la primera columna */
  position: relative;
  /* Para mantenerlo en el flujo del grid */
  z-index: 15;
  /* Asegurar que el texto esté sobre la imagen si hay superposición */
  /* ... otros estilos del texto ... */
}

@media (max-width: 1200px) {
  .hero-text-content {
    grid-column: 1 / -1;
    order: 2;
    /* Texto debajo de la imagen en móvil */
    text-align: center;
    /* Centrar texto en móvil */
  }

  .hero-text-content .hero-cta-group {
    justify-content: center;
    /* Centrar botones en móvil */
  }
}

/* ------------------- */
/* ANIMACIÓN DE FLOTACIÓN */
/* ------------------- */
@keyframes floatAnimation {
  0% {
    transform: translateY(-50%);
    /* Estado inicial del transform: translateY que ya tienes */
  }

  50% {
    transform: translateY(calc(-50% + 15px));
    /* Mover hacia abajo 15px */
  }

  100% {
    transform: translateY(-50%);
    /* Volver al estado inicial */
  }
}

/* Si quieres una flotación más sutil, puedes usar valores más pequeños como 8px o 10px */
/* @keyframes floatAnimationSubtle {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% + 8px));
  }
  100% {
    transform: translateY(-50%);
  }
} */

/* ... (Estilos existentes de .hero-section-v2, .hero-content, .hero-visual-container) ... */

.hero-floating-image {
  display: block;
  position: absolute;

  /* Posicionamiento y Tamaño (Tus valores) */
  right: -25%;
  top: 60%;
  /* Tu valor original */
  /* El transform: translateY(-50%) será el estado base de la animación */

  max-width: 850px;
  width: 150%;
  height: auto;

  object-fit: contain;
  border-radius: var(--radius-lg);
  z-index: 10;

  /* ---- NUEVO: Aplicar la animación de flotación ---- */
  animation-name: floatAnimation;
  /* Nombre de la keyframe animation */
  animation-duration: 4s;
  /* Duración de un ciclo completo de flotación */
  animation-timing-function: ease-in-out;
  /* Hace que la animación sea suave al inicio y al final */
  animation-iteration-count: infinite;
  /* Para que la animación se repita indefinidamente */
  animation-delay: 0.5s;
  /* Un pequeño retraso antes de que comience a flotar */
  /* (para que coincida con la aparición de la imagen si tiene un delay) */

  /* Aseguramos que el transform original para centrar se aplique como estado base
     y la animación trabaje sobre él. La keyframe ya lo considera. */
  transform: translateY(-50%);
  /* Mantenemos tu centrado vertical como base */
}

/* Ajustes para pantallas más pequeñas (Aquí la animación se desactivaría implícitamente
   porque volvemos a position: relative y quitamos el transform complejo, pero
   podrías desactivarla explícitamente si es necesario) */
@media (max-width: 1200px) {
  .hero-visual-container {
    grid-column: 1 / -1;
    order: 1;
    margin-bottom: 30px;
  }

  .hero-floating-image {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    /* Esto quitará el translateY(-50%) y la base de la animación */
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
    animation: none;
    /* ---- NUEVO: Desactivar la animación en pantallas pequeñas ---- */
  }
}

@media (max-width: 768px) {
  .hero-floating-image {
    width: 90%;
    max-width: 400px;
  }
}

/* ... (Estilos existentes de .hero-text-content y sus media queries) ... */

/* ... (Estilos generales y de desktop para .hero-section-v2, .hero-content, etc.) ... */

.hero-content {
  position: relative;
  display: grid;
  /* En desktop, tienes un grid de dos columnas, por ejemplo:
     grid-template-columns: 1.2fr 1fr; (texto a la izquierda, imagen a la derecha)
  */
  align-items: center;
  gap: 60px;
  /* O el gap que estés usando */
  color: var(--text-light-on-dark);
}

.hero-text-content {
  /* En desktop, este sería el primer elemento en el grid visualmente (izquierda) */
  /* grid-column: 1 / 2; (Si tienes la imagen en la segunda columna explícitamente) */
  position: relative;
  z-index: 15;
  /* Asegurar que el texto esté sobre la imagen si hay superposición */
  /* ... otros estilos del texto ... */
}

.hero-visual-container {
  /* En desktop, este sería el segundo elemento en el grid visualmente (derecha) */
  /* grid-column: 2 / 3; (Si tienes la imagen en la segunda columna explícitamente) */
  position: relative;
  /* Importante para que la imagen absoluta se posicione respecto a este */
  align-self: stretch;
  z-index: 5;
  /* Por si acaso, aunque la imagen flotante tendrá su propio z-index */
  /* ... otros estilos del contenedor visual ... */
}

.hero-floating-image {
  display: block;
  position: absolute;
  right: -25%;
  top: 60%;
  transform: translateY(-50%);
  max-width: 850px;
  width: 150%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  z-index: 10;
  animation-name: floatAnimation;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
}


/* ---- AJUSTES PARA MÓVIL Y ORDEN DE ELEMENTOS ---- */
@media (max-width: 1200px) {

  /* O el breakpoint donde cambias a una columna */
  .hero-content {
    grid-template-columns: 1fr;
    /* Cambiar a una sola columna */
    text-align: center;
    /* Centrar todo el contenido de la columna del hero */
  }

  .hero-text-content {
    /* grid-column: 1 / -1; Ya no es necesario especificar si es una sola columna */
    order: 1;
    /* ---- CLAVE: El texto va PRIMERO en el flujo visual ---- */
    text-align: center;
    /* Asegurar que el texto dentro de su contenedor esté centrado */
    /* ... otros estilos específicos para el texto en móvil si los necesitas ... */
  }

  .hero-text-content .hero-cta-group {
    justify-content: center;
    /* Centrar los botones dentro de su grupo */
  }

  .hero-visual-container {
    /* grid-column: 1 / -1; Ya no es necesario */
    order: 2;
    /* ---- CLAVE: El contenedor de la imagen va SEGUNDO, debajo del texto ---- */
    margin-top: 30px;
    /* Añadir un espacio entre el texto y la imagen */
    margin-bottom: 30px;
    /* Espacio después de la imagen antes del scroll-down indicator */
    /* Ya no necesitamos align-self: stretch aquí si la imagen tiene su propio tamaño */
  }

  .hero-floating-image {
    position: relative;
    /* Volver a posicionamiento normal */
    right: auto;
    top: auto;
    transform: none;
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
    /* Centrar la imagen horizontalmente */
    animation: none;
    /* Desactivar animación de flotación */
  }
}

@media (max-width: 768px) {
  .hero-floating-image {
    width: 190%;
    max-width: 500px;
    right: 60px;
  }

  .hero-visual-container {
    margin-top: 20px;
    /* Ajustar espacio si es necesario */
    margin-bottom: 20px;
  }
}

/* ... (Resto de tus estilos) ... */

/* ------------------- */
/* BOTONES CTA PREMIUM */
/* ------------------- */

.cta-button,
.cta-button-outline {
  display: inline-flex;
  /* Clave para alinear texto e icono */
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  /* Buen padding base */
  font-size: 1rem;
  /* Tamaño de fuente base */
  font-weight: 600;
  /* Un buen peso para Inter/Urbanist */
  text-decoration: none;
  border-radius: var(--radius-sm);
  /* Bordes sutilmente redondeados */
  transition:
    transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  border: 2px solid transparent;
  /* Borde base transparente para transiciones suaves */
  white-space: nowrap;
  position: relative;
  /* Para pseudo-elementos si los usamos para efectos avanzados */
  overflow: hidden;
  /* Para efectos de "fill" o "shine" */
  transform-style: preserve-3d;
  /* Para efectos 3D sutiles */
}

/* Icono dentro del botón */
.cta-button i,
.cta-button-outline i {
  margin-left: 12px;
  /* Espacio entre texto e icono */
  font-size: 1.1em;
  /* Un poco más grande que el texto del botón */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
  /* Optimización para la animación */
}

/* --- BOTÓN PRIMARIO (CTA Principal) --- */
.cta-button.primary-cta {
  background-color: var(--primary-color-main);
  color: var(--text-on-primary-cta);
  border-color: var(--primary-color-main);
  /* Borde del mismo color para solidez */
  box-shadow: 0 4px 15px rgba(4, 5, 76, 0.2), 0 2px 5px rgba(4, 5, 76, 0.15);
  /* Sombra más elaborada */
}

.cta-button.primary-cta:hover {
  background-color: var(--primary-color-medium);
  /* Un azul un poco más claro o diferente de tu paleta */
  border-color: var(--primary-color-medium);
  transform: translateY(-3px) scale(1.02);
  /* Sutil levantamiento y escalado */
  box-shadow: 0 7px 20px rgba(4, 5, 76, 0.25), 0 4px 8px rgba(4, 5, 76, 0.2);
}

.cta-button.primary-cta:hover i {
  transform: translateX(5px) scale(1.1);
  /* Icono se mueve y agranda */
}

.cta-button.primary-cta:active {
  /* Estado presionado */
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 2px 10px rgba(4, 5, 76, 0.15), 0 1px 3px rgba(4, 5, 76, 0.1);
}

/* --- BOTÓN OUTLINE (Secundario o sobre fondos oscuros) --- */
/* Para .cta-button-outline.light-outline (sobre hero oscuro) */
.cta-button-outline.light-outline {
  color: var(--text-light-on-dark);
  border-color: rgba(255, 255, 255, 0.5);
  /* Borde semitransparente */
}

.cta-button-outline.light-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  /* Relleno sutil al hover */
  color: var(--text-light-on-dark);
  /* Mantener color o hacerlo más brillante */
  border-color: var(--text-light-on-dark);
  /* Borde sólido al hover */
  transform: translateY(-2px);
}

.cta-button-outline.light-outline:hover i {
  transform: translateX(4px);
}

.cta-button-outline.light-outline:active {
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(0px);
}


/* Para .cta-button-outline.dark-outline (sobre fondos claros, ej. en footer) */
.cta-button-outline.dark-outline {
  color: var(--primary-color-main);
  border-color: var(--primary-color-main);
}

.cta-button-outline.dark-outline:hover {
  background-color: var(--primary-color-main);
  color: var(--text-on-primary-cta);
  transform: translateY(-2px);
}

.cta-button-outline.dark-outline:hover i {
  transform: translateX(4px) scale(1.05);
  color: var(--text-on-primary-cta);
  /* Asegurar que el icono también cambie */
}

.cta-button-outline.dark-outline:active {
  background-color: var(--primary-color-medium);
  transform: translateY(0px);
}


/* --- VARIANTES DE TAMAÑO (Ya las tenías, solo revisando) --- */
.cta-button.large-cta,
.cta-button-outline.large-outline {
  padding: 18px 42px;
  /* Un poco más de padding horizontal */
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  /* Sutil espaciado para look premium */
}

.cta-button.extra-large-cta {
  padding: 20px 50px;
  font-size: 1.15rem;
  border-radius: var(--radius-md);
  /* Mayor radio para botones más grandes */
  letter-spacing: 0.8px;
}

.cta-button.small-cta,
.cta-button-outline.small-cta {
  padding: 10px 25px;
  font-size: 0.9rem;
}

/* --- EFECTO DE "SHINE" SUTIL AL HOVER (Opcional, añade un toque premium) --- */
.cta-button::before,
.cta-button-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  /* Inicia fuera del botón */
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      /* Brillo más sutil */
      transparent);
  transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 0;
  /* Detrás del texto y el icono */
}

.cta-button:hover::before,
.cta-button-outline:hover::before {
  left: 100%;
  /* Mueve el brillo a través del botón */
}

/* Asegurar que el texto y el icono estén sobre el efecto ::before */
.cta-button span,
/* Si envuelves el texto en un span */
.cta-button i,
.cta-button-outline span,
.cta-button-outline i {
  position: relative;
  z-index: 1;
}

/* Adaptación para el botón de navbar (nav-cta) si quieres unificarlo */
.nav-cta {
  /* Heredará mucho de .cta-button, pero puedes ajustar padding/tamaño */
  padding: 10px 22px !important;
  /* Ejemplo de override */
  font-size: 0.9rem !important;
  /* El resto de los estilos y animaciones de .cta-button y .cta-button-outline se aplicarían
       dependiendo de si es primario o outline y si el navbar está scrolled o no.
       Asegúrate que las clases del navbar se combinen bien. */
}

.navbar-transparent .nav-cta {
  /* Hereda de light-outline */
  /* ... (estilos que ya tienes para .navbar-transparent .nav-cta) ... */
}

.navbar-scrolled .nav-cta {
  /* Hereda de primary-cta */
  /* ... (estilos que ya tienes para .navbar-scrolled .nav-cta) ... */
}

.pulse-cta.active-pulse {
  /* La animación de pulso se mantiene como la tenías */
}


/* Ajustes Responsivos para Botones (Opcional, si necesitas que cambien mucho) */
@media (max-width: 768px) {

  .cta-button,
  .cta-button-outline {
    padding: 14px 30px;
    /* Un poco menos de padding en móvil */
    font-size: 0.95rem;
  }

  .cta-button.large-cta,
  .cta-button-outline.large-outline {
    padding: 16px 35px;
    font-size: 1rem;
  }

  .cta-button.extra-large-cta {
    padding: 18px 40px;
    font-size: 1.05rem;
  }
}

/* ------------------- */
/* NAVBAR V2 - MENU LINKS & CTA */
/* ------------------- */
/* ... (tus estilos existentes de #navbar, .logo, etc.) ... */

.nav-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.nav-menu ul li {
  margin-left: 10px;
}

/* ESTILOS BASE PARA TODOS LOS ENLACES DEL MENÚ (EXCEPTO EL CTA POR AHORA) */
.nav-menu ul li a:not(.nav-cta) {
  /* Aplicar solo a links que NO son .nav-cta */
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease, opacity 0.3s ease;
  position: relative;
  padding: 10px 15px;
  /* Padding para acomodar el fondo */
  letter-spacing: 0.3px;
  border-radius: var(--radius-sm);
  /* Redondear para el fondo */
  overflow: hidden;
  /* Para el efecto de fondo */
  z-index: 1;
  /* Texto sobre el fondo animado */
}

/* Colores base de los links normales */
.navbar-transparent .nav-menu ul li a:not(.nav-cta) {
  color: var(--text-light-on-dark);
  opacity: 0.85;
}

.navbar-scrolled .nav-menu ul li a:not(.nav-cta) {
  color: var(--text-secondary-gray);
}

/* Hover y estado activo para links normales */
.navbar-transparent .nav-menu ul li a:not(.nav-cta):hover,
.navbar-transparent .nav-menu ul li a:not(.nav-cta).active-link {
  color: var(--text-light-on-dark);
  opacity: 1;
}

.navbar-scrolled .nav-menu ul li a:not(.nav-cta):hover,
.navbar-scrolled .nav-menu ul li a:not(.nav-cta).active-link {
  color: var(--primary-color-main);
}

/* --- FONDO SUTIL ANIMADO PARA LINKS NORMALES (Opción 2) --- */
.nav-menu ul li a:not(.nav-cta)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.35s ease;
  z-index: -1;
  border-radius: inherit;
}

/* Color del fondo animado para links normales */
.navbar-transparent .nav-menu ul li a:not(.nav-cta)::before {
  background-color: rgba(255, 255, 255, 0.1);
  /* Blanco sutil */
}

.navbar-scrolled .nav-menu ul li a:not(.nav-cta)::before {
  background-color: var(--accent-blue-light-ui);
  /* Azul claro UI */
}

/* Efecto al hover para links normales */
.nav-menu ul li a:not(.nav-cta):hover::before,
.nav-menu ul li a:not(.nav-cta).active-link::before {
  transform: scaleX(1);
  opacity: 1;
}


/* --- ESTILOS PARA EL BOTÓN CTA (.nav-cta) DENTRO DEL MENÚ --- */
/* Heredará de .cta-button y .primary-cta o .light-outline según el estado del navbar */
.nav-menu .nav-cta {
  /* Hereda padding, font-size, font-weight, etc., de los estilos .cta-button generales */
  /* Estos son overrides o ajustes específicos para el contexto del navbar */
  padding: 10px 22px !important;
  /* Ajustar padding si es necesario */
  font-size: 0.9rem !important;
  /* Ajustar tamaño de fuente si es necesario */
  border-radius: var(--radius-sm) !important;
  /* Asegurar consistencia de radio */
  /* El efecto ::before de shine de los botones CTA se aplicará si está definido en .cta-button */
}

/* Colores y estilos del .nav-cta según el estado del navbar (ya los tenías, solo para confirmar) */
.navbar-transparent .nav-cta {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--text-light-on-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  /* O 2px si tus CTAs tienen 2px */
  /* Aquí no hereda de .light-outline directamente, tiene su propio estilo de "ghost button" */
}

.navbar-transparent .nav-cta:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px);
  /* Animación de botón */
}

.navbar-transparent .nav-cta:hover i {
  transform: translateX(3px);
  /* Animación de icono */
}


.navbar-scrolled .nav-cta {
  background-color: var(--primary-color-main) !important;
  color: var(--text-on-primary-cta) !important;
  border-color: var(--primary-color-main) !important;
  box-shadow: var(--shadow-primary-cta);
  /* Sombra de botón primario */
  /* Hereda de .primary-cta */
}

.navbar-scrolled .nav-cta:hover {
  background-color: var(--primary-color-medium) !important;
  /* O var(--primary-color-darker) */
  border-color: var(--primary-color-medium) !important;
  transform: translateY(-3px) scale(1.02);
  /* Animación de botón primario */
  box-shadow: var(--shadow-primary-cta-hover);
}

.navbar-scrolled .nav-cta:hover i {
  transform: translateX(5px) scale(1.1);
  /* Animación de icono de botón primario */
}

/* Asegurarse que el ::after de subrayado no aplique al .nav-cta si lo tenías antes */
.nav-menu ul li a.nav-cta::after {
  display: none !important;
}

/* Animación de pulso (ya la tenías) */
.pulse-cta.active-pulse {
  /* ... tu animación de pulso ... */
}

/* ... (Estilos del hamburger menu y menú móvil) ... */

/* ------------------- */
/* HERO - KEY POINTS   */
/* ------------------- */

/* ... (Estilos existentes de .hero-section-v2, .hero-content, .hero-text-content etc.) ... */

.hero-key-points {
  display: flex;
  align-items: center;
  /* justify-content: flex-start; Si el texto del hero está alineado a la izquierda */
  justify-content: center;
  /* Si el texto del hero está centrado en algún breakpoint */
  gap: 25px;
  /* Espacio entre cada "frasecita" */
  margin-top: 25px;
  /* Espacio después del hero-subheadline */
  margin-bottom: 35px;
  /* Espacio antes del hero-cta-group */
  flex-wrap: wrap;
  /* Para que se ajusten en pantallas pequeñas */
}

.key-point-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Espacio entre el icono y el texto de la frase */
  font-size: 0.9rem;
  /* Tamaño de fuente sutil */
  font-weight: 500;
  /* Un peso medio para buena legibilidad */
  color: var(--text-light-on-dark);
  /* Mismo color que el subheadline del hero */
  opacity: 0.85;
  /* Ligeramente menos prominente que el subheadline */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.key-point-item:hover {
  opacity: 1;
  transform: translateY(-2px);
  /* Sutil efecto al pasar el mouse */
}

.key-point-item i {
  font-size: 1.1em;
  /* Icono ligeramente más grande que el texto */
  color: var(--accent-blue-electric);
  /* O un color de acento que combine bien */
  /* Alternativa: var(--text-light-on-dark) con opacity: 0.7 y al hover opacity: 1 */
}

/* Ajustes de delay para las animaciones de entrada */
/* Es bueno que estos puntos aparezcan después del texto principal pero antes de los botones */
.hero-key-points.reveal-on-scroll[data-animation="fadeInUp"] {
  /* El data-delay ya está en el HTML, pero podrías forzarlo aquí si fuera necesario,
     o si quisieras que cada item apareciera secuencialmente (requeriría más JS o CSS anidado) */
}


/* Responsividad para los Key Points */
@media (max-width: 1200px) {

  /* Cuando el hero-text-content se centra */
  .hero-key-points {
    justify-content: center;
    /* Asegurar centrado si no lo estaba ya */
  }
}

@media (max-width: 768px) {
  .hero-key-points {
    gap: 15px 20px;
    /* Reducir gap en móvil, el segundo valor es para el wrap */
    margin-top: 20px;
    margin-bottom: 30px;
    justify-content: center;
    /* Asegurar centrado */
  }

  .key-point-item {
    font-size: 0.85rem;
    /* Un poco más pequeño en móvil */
  }
}

@media (max-width: 480px) {
  .hero-key-points {
    flex-direction: column;
    /* Apilar verticalmente en pantallas muy pequeñas */
    align-items: center;
    /* Centrar cuando están en columna */
    gap: 12px;
  }

  .key-point-item {
    /* No se necesita hover en táctil, pero mantenemos el estilo base */
  }
}

/* Ajuste de los delays de animación para los elementos del hero
 para que aparezcan en una secuencia agradable:
 1. Headline
 2. Subheadline
 3. Key Points
 4. CTAs
 5. Imagen Flotante
*/
.hero-text-content.reveal-on-scroll[data-animation="fadeInUp"] {
  /* Asumiendo que este es el contenedor del H1 y P */
  /* Delay base (0 o el que tengas) */
}

.hero-subheadline.reveal-on-scroll[data-animation="fadeInUp"] {
  /* Si el P tiene su propia clase reveal */
  /* animation-delay: 100ms; (o el delay que corresponda) */
}

/* El .hero-key-points ya tiene data-delay="150" en el HTML */
/* El .hero-cta-group ya tiene data-delay="300" en el HTML */
/* El .hero-visual-container ya tiene data-delay="450" en el HTML */