/*
  STYLES.CSS - HAFIT V5 / ULTRA PREMIUM "HALF-A-MILLION" BUILD
  AUTHOR: HAFIT Elite Collective & AI Design Partner
  DESCRIPTION: A complete design system overhaul focusing on elite, modern startup aesthetics.
  This isn't just CSS; it's a statement.
*/

/* //--- 1. DESIGN SYSTEM & GLOBAL SETUP ---// */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-family: 'Montserrat', sans-serif;

  /* Paleta de colores de lujo. Profunda, sutil y con alto contraste. */
  --color-background: #050505;
  /* Un negro más rico que el puro #000 */
  --color-surface: #111111;
  /* Para tarjetas y superficies elevadas */
  --color-text-primary: #F5F5F5;
  /* Un blanco ligeramente más suave */
  --color-text-secondary: #8A8A8A;
  /* Gris para texto de apoyo */
  --color-border-subtle: #222222;
  /* Borde para separaciones finas */
  --color-border-highlight: #333333;
  /* Borde que aparece en hover */
  --color-accent-primary: #FFFFFF;
  --color-accent-secondary: #000000;

  /* Espaciado generoso para una sensación de lujo y aire. */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --spacing-xxl: 128px;

  /* Redondeado de startup, moderno y amigable. */
  --border-radius-md: 20px;
  --border-radius-lg: 30px;
  --border-radius-pill: 100px;

  /* Transiciones fluidas para una experiencia suave como la seda. */
  --transition-smooth: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 0.3s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: 17px;
  /* Base de 17px para mejor legibilidad */
  line-height: 1.7;
  overflow-x: hidden;
  /* Efecto de fondo sutil para evitar un negro plano */
  background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.03), transparent 30%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.03), transparent 30%);
}

body.no-scroll {
  overflow: hidden;
}

/* Tipografía de Alto Impacto */
h1,
h2,
h3,
h4 {
  color: var(--color-text-primary);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  /* Tighter tracking for display text */
  text-wrap: balance;
  /* Previene líneas huérfanas en títulos */
}

h1 {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
}

/* Títulos MASIVOS */
h2 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -0.03em;
  font-weight: 700;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p {
  margin-bottom: var(--spacing-md);
  max-width: 65ch;
}

a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-secondary);
}

/* Layout y Contenedores */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.section-padding {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}

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

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

.left-align p {
  margin-left: 0;
  margin-right: 0;
}

.section-title {
  margin-bottom: var(--spacing-lg);
}

.section-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  max-width: 720px;
  margin: 0 auto var(--spacing-xl);
}

.sub-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.sub-heading .material-symbols-outlined {
  font-size: 1.2rem;
}

/* Botones con sensación táctil */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: var(--border-radius-pill);
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  outline: none;
}

.btn:hover {
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.98);
}

.btn .material-symbols-outlined {
  font-size: 1.25rem;
  transition: transform var(--transition-fast);
}

.btn:hover .material-symbols-outlined {
  transform: translateX(4px);
}

.btn-primary {
  background-color: var(--color-accent-primary);
  color: var(--color-accent-secondary);
  box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 15px 30px -10px rgba(255, 255, 255, 0.4);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-border-highlight);
}

.btn-large {
  padding: 22px 40px;
  font-size: 1.1rem;
}

/* Animación de entrada - "The Domino Effect" */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);
  transition-delay: var(--animation-delay, 0s);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* //--- 2. COMPONENTES DE ÉLITE ---// */

/* Navbar Flotante */
.site-header {
  position: sticky;
  top: var(--spacing-md);
  width: calc(100% - (var(--spacing-md) * 2));
  left: var(--spacing-md);
  z-index: 100;
  border-radius: var(--border-radius-pill);
  transition: all var(--transition-fast);
}

.site-header.scrolled {
  background-color: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  padding-bottom: 12px;
}

.navbar-logo img {
  max-width: 110px;
  height: auto;
}

.nav-menu {
  display: flex;
  gap: var(--spacing-lg);
}

.nav-link {
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
}

.nav-link:hover {
  color: var(--color-text-primary);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.hamburger-menu {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
}

.hero-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Hero Section con Profundidad */
.hero-section {
  padding: var(--spacing-xl) 0 var(--spacing-xxl);
  text-align: center;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 800px;
  background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 70%);
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-ctas {
  display: flex;
  margin-bottom: var(--spacing-xl);
  gap: 1rem;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}

.hero-visual {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--border-radius-lg);
  padding: 1%;
  background: linear-gradient(145deg, var(--color-border-subtle) 0%, rgba(34, 34, 34, 0) 50%);
}

.hero-image-mockup {
  border-radius: calc(var(--border-radius-lg) - 10px);
  border: 1px solid #000;
  width: 100%;
  height: auto;
}

.trusted-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  font-size: 0.95rem;
}

.trusted-avatars {
  display: flex;
}

.trusted-avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--color-background);
  margin-left: -16px;
}

.trusted-avatars img:first-child {
  margin-left: 0;
}

/* Paneles con Borde de Gradiente */
.panel {
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  transition: all var(--transition-smooth);
}

.panel::before {
  /* El glow sutil en el fondo */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(400px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.1), transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.panel:hover::before {
  opacity: 1;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.panel-header .material-symbols-outlined {
  font-size: 2.2rem;
  color: var(--color-text-primary);
  background-color: rgba(255, 255, 255, 0.05);
  padding: var(--spacing-sm);
  border-radius: 50%;
}

.panel-title {
  margin-bottom: 0;
}

.panel-content h4 {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.panel-content ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.panel-content ul li {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.solution-panel {
  border-color: var(--color-border-highlight);
}

/* Secciones de Features */
.feature-section {
  padding: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xxl);
  align-items: center;
  padding: var(--spacing-xxl) 0;
}

.feature-grid.reverse .feature-visual {
  order: -1;
}

.feature-visual img {
  width: 100%;
  border-radius: var(--border-radius-md);
}

.feature-text ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.feature-text ul li {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.feature-text .material-symbols-outlined {
  color: var(--color-text-primary);
}

/* Pricing Cards de Lujo */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.pricing-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.pricing-card.recommended {
  border-color: var(--color-accent-primary);
  background: linear-gradient(to bottom, #1A1A1A, #111111);
  transform: scale(1.05);
}

.recommended-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-accent-primary);
  color: var(--color-accent-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
}

.plan-description {
  min-height: 3.5em;
  color: var(--color-text-secondary);
}

.price-tag {
  margin: var(--spacing-lg) 0 var(--spacing-xl);
}

.price-amount {
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.features-list {
  text-align: left;
  margin-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.features-list li {
  align-items: flex-start;
}

.pricing-card .btn {
  width: 100%;
}

/* FAQ Elegante */
.faq-container {
  max-width: 900px;
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) 0;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.faq-icon {
  transition: transform 0.4s var(--transition-smooth);
  color: var(--color-text-secondary);
}

.faq-item.open .faq-icon {
  transform: rotate(135deg);
  color: var(--color-text-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.faq-answer p {
  padding-bottom: var(--spacing-lg);
  max-width: 90%;
}

/* Final CTA y Footer */
.final-cta-section {
  background-color: var(--color-surface);
  border-radius: 40px;
  padding: var(--spacing-xxl) var(--spacing-lg);
}

.site-footer {
  padding: var(--spacing-xxl) 0 var(--spacing-lg);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-branding {
  max-width: 280px;
}

.footer-branding p {
  font-size: 0.95rem;
}

.footer-logo img {
  max-width: 120px;
  margin-bottom: var(--spacing-md);
}

.footer-links {
  display: flex;
  gap: var(--spacing-xl);
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer-column h4 {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.footer-column a {
  font-size: 1rem;
  font-weight: 500;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.footer-social-icons {
  display: flex;
  gap: var(--spacing-lg);
}

.footer-social-icons a {
  color: var(--color-text-secondary);
}

.footer-social-icons a:hover {
  color: var(--color-text-primary);
}

/* //--- 3. MEDIA QUERIES ---// */
@media (max-width: 992px) {
  .site-header {
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
  }

  .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    font-size: 1.5rem;
  }

  .nav-menu.active {
    display: flex;
  }

  .hamburger-menu {
    display: block;
    z-index: 101;
  }

  .navbar-actions .btn-primary {
    display: none;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .feature-grid.reverse .feature-visual {
    order: 0;
  }

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

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

  .feature-text ul {
    margin: var(--spacing-xl) auto;
    width: fit-content;
    text-align: left;
  }
}

@media (max-width: 768px) {
  h1 {
    letter-spacing: -0.03em;
  }

  h2 {
    letter-spacing: -0.02em;
  }

  .problem-solution-grid,
  .pricing-grid,
  .onboarding-steps {
    grid-template-columns: 1fr;
  }

  .footer-top {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-xl);
  }

  .footer-links {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-xl);
  }

  .footer-bottom {
    flex-direction: column-reverse;
    gap: var(--spacing-lg);
  }
}

/* ============================================= */
/* === ESTILOS PREMIUM PARA VERSIÓN MÓVIL === */
/* ============================================= */
@media (max-width: 768px) {

  .panel {
    padding: var(--spacing-);
  }

  .footer-branding {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;

  }

  /* --- 1. AJUSTES GLOBALES Y ESPACIADO --- */

  /* Espaciado lateral para que el contenido no toque los bordes */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Reduce el espaciado vertical entre secciones en móvil */
  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Ajuste de tipografía para mejor legibilidad */
  h1,
  .hero-title {
    font-size: 2.25rem;
    /* ~36px */
    line-height: 1.2;
  }

  h2,
  .section-title {
    font-size: 1.875rem;
    /* ~30px */
    line-height: 1.25;
  }

  /* Centra títulos que estaban alineados a la izquierda en desktop */
  .section-title.left-align,
  .section-subtitle.left-align {
    text-align: center;
  }

  /* Oculta el botón principal de la demo en la barra de navegación para evitar redundancia */
  .navbar-actions .btn {
    display: none;
  }


  /* --- 2. BARRA DE NAVEGACIÓN (NAVBAR) Y MENÚ MÓVIL --- */

  /* Estilos para el menú de navegación cuando está activo (abierto) */
  .nav-menu.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.98);
    /* Fondo oscuro semitransparente */
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    /* Espacio entre los enlaces del menú */
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
    z-index: 99;
  }

  /* Estilo para los enlaces dentro del menú móvil */
  .nav-menu .nav-link {
    font-size: 1.25rem;
    /* Letra más grande para fácil selección */
    font-weight: 600;
  }

  /* Evita el scroll del body cuando el menú está abierto */
  body.no-scroll {
    overflow: hidden;
  }


  /* --- 3. SECCIÓN HERO --- */

  .hero-content {
    flex-direction: column;
    gap: 3rem;
    /* Espacio entre el texto y la imagen */
    text-align: center;
  }

  .hero-ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* Espacio entre los botones de acción */
  }

  .hero-ctas .btn {
    width: 100%;
    max-width: 350px;
    /* Ancho máximo para los botones */
  }

  .trusted-by {
    justify-content: center;
    /* Centra los avatares y texto */
  }


  /* --- 4. SECCIONES CON GRIDS (REJILLAS) --- */

  /* Aplica un layout de una sola columna a todas las rejillas */
  .logo-grid,
  .problem-solution-grid,
  .pillars-grid,
  .feature-grid,
  .stats-grid,
  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    /* Espaciado uniforme entre los elementos de la rejilla */
  }

  .logo-grid {
    gap: 2rem;
  }

  /* Las secciones de Features también se apilan verticalmente */

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }

  .feature-text {
    text-align: center;
    /* Centra todo el texto de las features */
  }

  /* Asegura que la lista de checks en las features se vea bien centrada */
  .feature-text ul {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    /* Mantiene el texto alineado a la izquierda */
    text-align: left;
    gap: 0.75rem;
  }


  /* --- 5. TARJETAS DE PRECIOS Y TESTIMONIOS --- */

  .pricing-grid,
  .testimonial-grid {
    gap: 1.5rem;
  }


  /* --- 6. SECCIÓN DE PREGUNTAS FRECUENTES (FAQ) --- */

  .faq-container {
    max-width: 100%;
    /* Ocupa el ancho completo del contenedor */
  }

  .faq-question {
    padding: 1rem 1.25rem;
  }

  .faq-answer {
    padding: 0 1.25rem 1rem;
  }


  /* --- 7. PIE DE PÁGINA (FOOTER) --- */

  .footer-container,
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
    /* Espacio entre los bloques del footer */
  }

  .footer-links {
    flex-direction: column;
    gap: 2rem;
    /* Espacio entre las columnas de enlaces */
    width: 100%;
    align-items: center;
  }

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

  .footer-bottom {
    gap: 1.5rem;
    /* Menor espacio para el copyright y redes sociales */
  }
}

/* ========================================================= */
/* === SOLUCIÓN DEFINITIVA Y PREMIUM PARA NAVEGACIÓN MÓVIL === */
/* ========================================================= */

/* --- 1. BOTÓN HAMBURGUESA (LA ANIMACIÓN DE LÍNEAS A 'X') --- */
.hamburger-menu {
  display: none;
  /* Oculto por defecto, solo se mostrará en móvil */
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  /* Siempre por encima de todo */
  position: relative;
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #F5F5F5;
  /* Color de las líneas */
  border-radius: 3px;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
  transform-origin: center;
}

.hamburger-menu .line1 {
  transform: translateY(-8px);
}

.hamburger-menu .line3 {
  transform: translateY(8px);
}

/* --- Animación a 'X' cuando el menú está abierto --- */
.hamburger-menu[aria-expanded="true"] .line1 {
  transform: translateY(0) rotate(45deg);
}

.hamburger-menu[aria-expanded="true"] .line2 {
  opacity: 0;
  transform: translateX(20px);
}

.hamburger-menu[aria-expanded="true"] .line3 {
  transform: translateY(0) rotate(-45deg);
}

/* --- 2. EL MENÚ DE NAVEGACIÓN (ANIMACIÓN DE APERTURA PREMIUM) --- */
.nav-menu {
  /* En escritorio, se comporta normal */
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* --- 3. RESPONSIVE A PARTIR DE 768px (TABLETS Y MÓVILES) --- */
@media (max-width: 768px) {

  .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 800px;
    background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 70%);
    z-index: -1;
  }

  /* --- MOSTRAMOS EL BOTÓN HAMBURGUESA Y OCULTAMOS LINKS NORMALES --- */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  /* Ocultamos el botón principal de la demo y los links en la barra */
  .navbar-actions .btn-primary {
    display: none;
  }

  .site-header .nav-menu {
    display: none;
    /* Ocultamos el nav por defecto */
  }

  /* --- ESTILO DEL MENÚ CUANDO ESTÁ ACTIVO (PANTALLA COMPLETA) --- */
  .nav-menu.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* CENTRADO VERTICAL PERFECTO */
    align-items: center;
    /* CENTRADO HORIZONTAL PERFECTO */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    background-color: rgba(5, 5, 5, 0.9);
    /* Fondo oscuro con transparencia */
    backdrop-filter: blur(12px);
    /* Efecto de cristal esmerilado, muy premium */
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;

    /* ANIMACIÓN DE APERTURA: entra con un fundido y ligero zoom */
    opacity: 0;
    transform: scale(0.98);
    animation: fadeInMenu 0.4s ease-out forwards;
  }

  @keyframes fadeInMenu {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* --- ENLACES DEL MENÚ (ANIMACIÓN ESCALONADA) --- */
  .nav-menu.active .nav-link {
    font-size: 1.5rem;
    /* Letras grandes y claras */
    font-weight: 600;
    color: #F5F5F5;
    padding: 1rem;

    /* Estado inicial para la animación de entrada */
    opacity: 0;
    transform: translateY(20px);

    /* La animación que los hará aparecer */
    animation: slideInLink 0.5s ease-out forwards;
  }

  /* Delay escalonado para que aparezcan uno tras otro */
  .nav-menu.active .nav-link:nth-child(1) {
    animation-delay: 0.2s;
  }

  .nav-menu.active .nav-link:nth-child(2) {
    animation-delay: 0.3s;
  }

  .nav-menu.active .nav-link:nth-child(3) {
    animation-delay: 0.4s;
  }

  .nav-menu.active .nav-link:nth-child(4) {
    animation-delay: 0.5s;
  }

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

  /* Evita el scroll del body cuando el menú está abierto */
  body.no-scroll {
    overflow: hidden;
  }

  /* ============================================== */
  /* === OTROS AJUSTES MÓVILES QUE YA TE HABÍA DADO === */
  /* === LOS INCLUYO DE NUEVO PARA QUE TODO ESTÉ JUNTO === */
  /* ============================================== */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  h1,
  .hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  h2,
  .section-title {
    font-size: 1.875rem;
    line-height: 1.25;
  }

  .section-title.left-align,
  .section-subtitle.left-align {
    text-align: center;
  }

  .hero-content {
    flex-direction: column;
    gap: 3rem;
    text-align: center;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-ctas .btn {
    width: 100%;
    max-width: 350px;
  }

  .trusted-by {
    justify-content: center;
  }

  .logo-grid,
  .problem-solution-grid,
  .pillars-grid,
  .feature-grid,
  .stats-grid,
  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .feature-text ul {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.75rem;
  }

  .footer-container,
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
  }

  .footer-links {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    align-items: center;
  }

  .footer-bottom {
    gap: 1.5rem;
  }


  .navbar-container {
    padding-bottom: 12px;
    padding-top: 30px;
  }

}

/* ======================================================= */
/* === MEJORA PREMIUM: SECCIÓN PROBLEMA/SOLUCIÓN (V2) === */
/* ======================================================= */

.problem-solution-grid {
  display: grid;
  /* El diseño de 3 columnas: Panel, Flecha, Panel */
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

/* Estilo de la flecha central de transformación */
.solution-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-arrow .material-symbols-outlined {
  font-size: 4rem;
  color: var(--color-border-highlight);
  font-weight: 200;
  transition: transform var(--transition-fast);
}

/* Estilo para las imágenes dentro de los paneles */
.panel-image {
  width: 100%;
  height: 200px;
  /* Altura fija para consistencia */
  object-fit: cover;
  /* Asegura que la imagen cubra el espacio sin deformarse */
  border-radius: calc(var(--border-radius-lg) - 10px);
  margin-bottom: var(--spacing-lg);
  opacity: 0.9;
  border: 1px solid var(--color-border-subtle);
}

/* Distinción visual para cada panel */
.problem-panel {
  /* Borde rojo sutil para indicar "problema" */
  border: 1px solid hsl(0, 25%, 20%);
}

.solution-panel {
  /* Borde blanco/brillante para indicar "solución" */
  border: 1px solid hsl(0, 0%, 30%);
}

/* Iconos de cabecera con colores temáticos */
.panel-header .icon-problem {
  color: #ff5252;
  /* Rojo de error */
  background-color: rgba(255, 82, 82, 0.1);
}

.panel-header .icon-solution {
  color: #42a5f5;
  /* Azul de tecnología/éxito */
  background-color: rgba(66, 165, 245, 0.1);
}

/* Iconos de la lista con colores para legibilidad */
.panel-content ul li .material-symbols-outlined {
  color: var(--color-text-secondary);
}

/* ============================================== */
/* === AJUSTES MÓVILES PARA LA NUEVA SECCIÓN === */
/* ============================================== */
@media (max-width: 768px) {
  .problem-solution-grid {
    /* En móvil, volvemos a una sola columna */
    grid-template-columns: 1fr;
    gap: 2rem;
    /* Reducimos el espacio vertical */
  }

  .solution-arrow .material-symbols-outlined {
    /* La flecha ahora apunta hacia abajo */
    transform: rotate(90deg);
  }
}

/* ======================================================= */
/* === MEJORA PREMIUM: SECCIÓN PILARES (V2) === */
/* ======================================================= */

.pillars-grid {
  display: grid;
  /* Fila de 3 columnas en escritorio */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.pillar-item {
  /* Usamos flexbox para alinear el contenido internamente */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Alinea todo a la izquierda */
  text-align: left;

  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);

  position: relative;
  /* Indispensable para el efecto de glow */
  overflow: hidden;
  /* Mantiene el glow dentro de la tarjeta */

  /* Transición suave para el hover */
  transition: transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

/* --- El Efecto de Glow Interactivo --- */
.pillar-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;

  /* Gradiente radial que sigue al mouse (requiere JS que ya tienes) */
  background: radial-gradient(350px circle at var(--x) var(--y), rgba(255, 255, 255, 0.1), transparent 70%);

  transition: opacity var(--transition-smooth);
}

/* --- Estilo al pasar el mouse --- */
.pillar-item:hover {
  transform: translateY(-10px);
  border-color: var(--color-border-highlight);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
}

.pillar-item:hover::before {
  opacity: 1;
  /* Muestra el glow */
}


/* --- Iconos como Protagonistas --- */
.pillar-icon-wrapper {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-lg);
  border-radius: 50%;
  /* Círculo perfecto */

  /* Centrado perfecto del ícono dentro del círculo */
  display: grid;
  place-items: center;

  /* Gradiente sutil para darle profundidad */
  background: linear-gradient(145deg, #2a2a2a, var(--color-surface));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  transition: all var(--transition-fast);
}

.pillar-item:hover .pillar-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.pillar-icon-wrapper .material-symbols-outlined {
  font-size: 32px;
  color: var(--color-text-primary);
}


/* --- Tipografía y Espaciado Interno de Lujo --- */
.pillar-item h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.pillar-item p {
  color: var(--color-text-secondary);
  margin-bottom: 0;
  /* Quitamos el margen inferior para que se alinee bien */
  font-size: 1rem;
}


/* ============================================== */
/* === AJUSTES MÓVILES PARA LA SECCIÓN PILARES === */
/* ============================================== */
@media (max-width: 768px) {
  .pillars-grid {
    /* En móvil, se convierte en una sola columna */
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* Un poco menos de espacio que en desktop */
  }

  .pillar-item {
    /* Centramos el contenido en móvil para mejor impacto */
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    /* Ajustamos el padding para pantallas pequeñas */
  }
}

/* ======================================================= */
/* === MEJORA PREMIUM: SECCIÓN RESULTADOS (V2) === */
/* ======================================================= */

.cta-section-dark {
  /* Fondo más rico con un gradiente sutil para darle profundidad */
  background: linear-gradient(180deg, var(--color-surface) 0%, #080808 100%);
  position: relative;
  overflow: hidden;
}

/* Glow decorativo en el fondo para un look tech */
.cta-section-dark::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  width: 1000px;
  height: 1000px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 60%);
  z-index: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  position: relative;
  /* Para que esté por encima del glow del fondo */
  z-index: 1;
}

.stat-item {
  background: rgba(255, 255, 255, 0.03);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border-subtle);
  /* Acento de gradiente en el borde superior, un toque muy premium */
  border-top: 2px solid;
  border-image-source: linear-gradient(90deg, transparent, var(--color-border-highlight), transparent);
  border-image-slice: 1;
  transition: all var(--transition-fast);
}

.stat-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stat-number {
  display: block;
  /* Números GIGANTES y responsivos */
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--spacing-sm);

  /* El truco de lujo: gradiente en el texto */
  background: linear-gradient(135deg, #FFFFFF, #BDBDBD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.stat-label {
  display: block;
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

/* Adaptación móvil */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ================================================================= */
/* === TESTIMONIOS (V3.2 - SIN OVERFLOW, DISEÑO FINAL) === */
/* ================================================================= */

.testimonial-system-wrapper {
  position: relative;
  /* El ancho máximo aplica al contenedor, no a elementos internos que puedan salirse */
  max-width: 750px;
  /* Reducido ligeramente para más aire a los lados */
  margin: 0 auto;
  /* Contenedor principal que previene el overflow */
  width: 100%;
  padding: 0 1rem;
  /* Espaciado interno para móvil */
}

.testimonial-fader {
  position: relative;
  min-height: 350px;
  transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.testimonial-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;

  /* --- LA NUEVA COREOGRAFÍA DE TRANSICIÓN --- */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    /* (1) La desaparición: 0.5s */
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    /* (2) El movimiento: 0.5s */
    visibility 0s 0.5s;
  /* (3) Ocultar después de 0.5s */

  /* El resto de los estilos se mantienen igual... */
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
}

.testimonial-card.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  z-index: 1;

  /* --- EL SECRETO: RETRASAR LA ENTRADA --- */
  transition-delay: 0.3s;
  /* (4) La aparición se retrasa 0.3 segundos */
}

.testimonial-quote-icon {
  position: absolute;
  top: 10px;
  left: 30px;
  font-size: 8rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05);
  line-height: 1;
  z-index: 0;
  user-select: none;
}

.testimonial-card blockquote {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--color-border-highlight);
}

.author-info p {
  margin: 0;
  line-height: 1.3;
}

.author-name {
  font-weight: 700;
  color: var(--color-text-primary);
}

.author-title {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}


/* --- Navegación Fina y Elegante - CORREGIDA --- */
.testimonial-navigation {
  /* Separamos la navegación de las tarjetas para un control total */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  /* Aseguramos que no se salga del viewport */
  width: 100%;
}

.slider-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--spacing-sm);
  transition: all var(--transition-fast);
  z-index: 10;
  /* Para estar sobre otros elementos si es necesario */
}

.slider-btn:hover:not(:disabled) {
  color: var(--color-text-primary);
  transform: scale(1.1);
}

.slider-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: scale(1);
}

/* --- Paginación Elegante: Barras --- */
.pagination-bars {
  display: flex;
  gap: 8px;
}

.pagination-bar {
  width: 30px;
  height: 4px;
  border-radius: var(--border-radius-pill);
  background-color: var(--color-border-subtle);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.pagination-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-text-primary);
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pagination-bar.active::before {
  transform: translateX(0);
}

/* ======================================================= */
/* === Media Query Específica para MÓVIL (PULIDO FINAL) === */
/* ======================================================= */
@media (max-width: 768px) {
  .testimonial-system-wrapper {
    /* Eliminamos el padding lateral para que los elementos internos controlen el espaciado */
    padding: 0;
    max-width: 90vw;
  }

  .testimonial-fader {
    /* Añadimos padding aquí para que la tarjeta no toque los bordes */
    padding: 0 1rem;
  }

  .testimonial-card {
    padding: 1.5rem;
    /* Padding interno más pequeño en móvil */
  }

  .testimonial-quote-icon {
    /* Hacemos el icono de comilla más sutil en móvil */
    font-size: 6rem;
    left: 1rem;
  }

  /* Hacemos los botones más grandes y fáciles de tocar, y los separamos más */
  .testimonial-navigation {
    justify-content: space-between;
    /* Empuja los botones a los extremos */
    padding: 0 1rem;
    /* Espaciado lateral para la navegación */
    gap: 0;
    /* Quitamos el gap, space-between se encarga */
  }

  .slider-btn {
    padding: 1rem;
    /* Área de toque mucho más grande */
  }
}

/* ===================================================================== */
/* === MEJORA PREMIUM: SECCIÓN DE PRECIOS (V3 - CARGADA DE FEATURES) === */
/* ===================================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* Gradiente de fondo sutil que le da textura */
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  /* Un padding más controlado */
  text-align: left;
  position: relative;
  overflow: visible;

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border-color: var(--color-border-highlight);
}

.pricing-card.recommended {
  border: 2px solid var(--color-accent-primary);
  /* Un glow sutil para la tarjeta recomendada */
  box-shadow: 0 0 40px -10px rgba(255, 255, 255, 0.2);
  transform: scale(1.03);
  z-index: 1;
}

.pricing-card.recommended:hover {
  transform: scale(1.03) translateY(-12px);
  box-shadow: 0 25px 60px -10px rgba(255, 255, 255, 0.25);
}

.recommended-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-accent-primary);
  color: var(--color-accent-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.plan-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.plan-description {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  min-height: 2.5em;
  /* Un poco menos de altura, más compacto */
  margin-bottom: var(--spacing-lg);
}

.price-tag {
  display: flex;
  align-items: baseline;
  margin: 0 0 var(--spacing-lg);
  /* Espaciado ajustado */
  color: var(--color-text-primary);
}

.price-currency {
  font-size: 1.5rem;
  font-weight: 600;
}

.price-amount {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}

.price-period {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-left: var(--spacing-sm);
}

.price-amount-custom {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0 var(--spacing-lg);
  display: block;
}

/* --- Lista de features MÁS COMPACTA Y ELEGANTE --- */
.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-lg);
  /* Menos espacio antes del botón */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Menos espacio entre ítems */
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  /* Texto de features ligeramente más pequeño y refinado */
}

/* El nuevo separador de categorías */
.features-list .feature-category {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  margin-top: 0.75rem;
  /* Espacio antes de una nueva categoría */
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border-subtle);
  width: 70%;
}

.features-list .feature-category:first-child {
  margin-top: 0;
}

.features-list .material-symbols-outlined {
  font-size: 1.25rem;
  /* Íconos un poco más pequeños y sutiles */
  color: var(--color-text-primary);
  font-variation-settings: 'FILL' 1;
}

.pricing-card .btn {
  width: 100%;
  margin-top: auto;
}


/* --- Media Query para MÓVIL (DISEÑO FINAL) --- */
@media (max-width: 768px) {
  .pricing-grid {
    gap: 1.5rem;
  }

  .pricing-card.recommended {
    transform: scale(1);
    box-shadow: 0 0 30px -15px rgba(255, 255, 255, 0.2);
  }
}

/* =================================================================== */
/* === FAQ PREMIUM (V4 - BLAZING FAST & ULTRA-LIGHT ANIMATION) === */
/* =================================================================== */

.faq-premium-accordion {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-premium-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq-premium-item:hover {
  background-color: #1a1a1a;
  border-color: var(--color-border-highlight);
}

.faq-premium-question {
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  color: var(--color-text-primary);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.faq-premium-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, background-color 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-premium-icon .material-symbols-outlined {
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.faq-premium-item.is-open .faq-premium-question .faq-premium-icon {
  background-color: var(--color-text-primary);
  transform: rotate(180deg);
}

.faq-premium-item.is-open .faq-premium-question .faq-premium-icon .material-symbols-outlined {
  transform: rotate(-135deg);
  color: var(--color-accent-secondary);
}


/* --- ANIMACIÓN ULTRA-PERFORMANTE Y RÁPIDA --- */
.faq-premium-answer-wrapper {
  overflow: hidden;
  max-height: 0;
  /* Por defecto, está colapsado */
  /* La transición de max-height es rápida y con una curva de aceleración profesional */
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* El estado abierto cambia el max-height para crear el espacio */
.faq-premium-item.is-open .faq-premium-answer-wrapper {
  max-height: 500px;
  /* Un valor seguro que sea mayor que el contenido */
}

/* El contenido interno es el que tiene la animación visual de fade y slide */
.faq-premium-answer-content {
  opacity: 0;
  transform: translateY(-15px);
  /* Empieza ligeramente arriba */
  /* La transición visual es aún más rápida para una sensación instantánea */
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Cuando el item está abierto, el contenido se muestra */
.faq-premium-item.is-open .faq-premium-answer-content {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------- */


.faq-premium-answer-content p {
  padding: 0 1.5rem 1.5rem 1.5rem;
  margin: 0;
  max-width: 100%;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Media Query para móviles */
@media (max-width: 768px) {
  .faq-premium-question {
    font-size: 1rem;
    padding: 1rem 1.25rem;
  }

  .faq-premium-answer-content p {
    padding: 0 1.25rem 1.25rem 1.25rem;
  }
}

/* =================================================================== */
/* === FAQ PREMIUM (V4.1 - SUPER SMOOTH & LIGHTWEIGHT ANIMATION) === */
/* =================================================================== */

.faq-premium-accordion {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Espacio entre items del FAQ */
}

.faq-premium-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  /* Clave para la animación de max-height */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq-premium-item:hover {
  background-color: #1a1a1a;
  /* Un poco más oscuro al hacer hover */
  border-color: var(--color-border-highlight);
}

.faq-premium-question {
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  color: var(--color-text-primary);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.faq-premium-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Transición suave del fondo */
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-premium-icon .material-symbols-outlined {
  color: var(--color-text-secondary);
  font-weight: 600;
  /* Asegura que el icono '+' sea visible */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- ESTADO ABIERTO DEL ITEM --- */
.faq-premium-item.is-open .faq-premium-question .faq-premium-icon {
  /* Opcional: Cambiar fondo y color del icono al abrir, como en tu original */
  background-color: var(--color-text-primary);
}

.faq-premium-item.is-open .faq-premium-icon .material-symbols-outlined {
  transform: rotate(45deg);
  /* Rota el icono '+' para que parezca una 'x' */
  color: var(--color-accent-secondary);
  /* Opcional: Cambia el color del icono */
}

/* --- ANIMACIÓN DE APERTURA/CIERRE DEL CONTENIDO --- */

/* Contenedor de la respuesta (controla la altura) */
.faq-premium-answer-wrapper {
  overflow: hidden;
  max-height: 0;
  /* Colapsado por defecto */
  /* Transición suave y rápida para la altura */
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-premium-item.is-open .faq-premium-answer-wrapper {
  max-height: 500px;
  /* Un valor lo suficientemente grande para tu contenido. Ajústalo si tienes respuestas muy largas. */
}

/* Contenido interno de la respuesta (texto con fade y slide) */
.faq-premium-answer-content {
  opacity: 0;
  transform: translateY(-10px);
  /* Comienza ligeramente arriba */
  padding: 0 1.5rem;
  /* Padding horizontal, el vertical se da con el p */
  /* El contenido aparece con un pequeño retraso y una animación fluida */
  transition: opacity 0.25s ease-out 0.1s, transform 0.25s ease-out 0.1s;
}

.faq-premium-item.is-open .faq-premium-answer-content {
  opacity: 1;
  transform: translateY(0);
}

.faq-premium-answer-content p {
  /* El padding-top se quita de aquí para evitar doble padding si el wrapper lo tuviera. */
  /* El padding-bottom da el espacio final. */
  padding-bottom: 1.5rem;
  margin: 0;
  /* Resetea el margen por defecto del párrafo */
  max-width: 100%;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* --- AJUSTES PARA MÓVILES --- */
@media (max-width: 768px) {
  .faq-premium-question {
    font-size: 1rem;
    padding: 1rem 1.25rem;
  }

  .faq-premium-answer-content {
    padding: 0 1.25rem;
    /* Ajusta padding horizontal para móviles */
  }

  .faq-premium-answer-content p {
    padding-bottom: 1.25rem;
    /* Ajusta padding inferior para móviles */
  }

  .final-cta-section {
    padding: 50px 20px;
  }
}

/* ======================================================= */
/* === FINAL CTA SECTION (PREMIUM UPGRADE) === */
/* ======================================================= */

.final-cta-section {
  /* El fondo ya es var(--color-surface) y tiene border-radius: 40px */
  /* Añadimos un sutil gradiente de fondo para más profundidad */
  background-image: linear-gradient(160deg, var(--color-surface) 0%, #0a0a0a 100%);
  position: relative;
  /* Para el posicionamiento de elementos decorativos */
  overflow: hidden;
  /* Para contener efectos de glow si se extienden */
}

.contact-card-premium {
  background-color: rgba(17, 17, 17, 0.7);
  /* Ligeramente más oscuro o igual que var(--color-surface) con transparencia */
  backdrop-filter: blur(15px);
  /* Efecto glassmorphism sutil si el fondo del section tiene textura */
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  /* Un radio consistente con otros paneles */
  padding: var(--spacing-xl) var(--spacing-lg);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6),
    /* Sombra más profunda y difusa */
    inset 0 1px 0px rgba(255, 255, 255, 0.05);
  /* Ligero borde interno superior */
  position: relative;
  /* Necesario para el pseudo-elemento de glow y el icono flare */
  z-index: 1;
  max-width: 800px;
  /* Limita el ancho para mejor legibilidad */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Efecto de Glow Interactivo (similar al de .panel) --- */
.contact-card-premium::before {
  content: "";
  position: absolute;
  inset: -1px;
  /* Para que el glow cubra el borde */
  border-radius: inherit;
  /* Un gradiente radial más intenso para el CTA final */
  background: radial-gradient(700px circle at var(--x-cta, 50%) var(--y-cta, 50%), rgba(255, 255, 255, 0.12), transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  z-index: -1;
  /* Detrás del contenido del card */
}

.contact-card-premium:hover::before {
  opacity: 1;
}

/* --- Icono Decorativo Superior (Opcional) --- */
.cta-icon-flare {
  width: 80px;
  height: 80px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.cta-icon-flare .material-symbols-outlined {
  font-size: 3rem;
  color: var(--color-text-primary);
  opacity: 0.8;
}

/* --- Ajustes de Tipografía y Espaciado Interno --- */
.contact-card-premium .section-title {
  margin-bottom: var(--spacing-md);
  /* Puedes hacerlo ligeramente más grande si quieres */
  /* font-size: clamp(2.8rem, 7vw, 5rem); */
}

.contact-card-premium .section-subtitle {
  margin-bottom: var(--spacing-xl);
  color: var(--color-text-secondary);
  /* Asegura el color correcto */
  max-width: 600px;
  /* Control para que no sea muy ancho */
  line-height: 1.8;
  /* Un poco más de aire */
}

/* --- Botón Principal --- */
.contact-card-premium .cta-main-button {
  /* El estilo base de .btn .btn-primary .btn-large ya es bueno */
  /* Podemos añadir una sombra más pronunciada específica para este botón */
  box-shadow: 0 12px 35px -8px rgba(255, 255, 255, 0.35);
  margin-bottom: var(--spacing-xl);
  /* Más espacio antes del subtexto */
  transform: scale(1.05);
  /* Ligeramente más grande por defecto */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card-premium .cta-main-button:hover {
  transform: scale(1.1) translateY(-3px);
  /* Efecto de elevación más notorio */
  box-shadow: 0 18px 40px -10px rgba(255, 255, 255, 0.45);
}

.contact-card-premium .cta-main-button .material-symbols-outlined {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Transición más suave para el ícono */
}

.contact-card-premium .cta-main-button:hover .material-symbols-outlined {
  transform: translateX(6px) rotate(10deg);
  /* Movimiento más dinámico */
}


/* --- Subtexto Premium --- */
.cta-subtext-premium {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: calc(var(--spacing-sm) + 2px) var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-pill);
  background-color: rgba(255, 255, 255, 0.02);
  /* Fondo casi imperceptible */
  transition: all var(--transition-fast);
}

.contact-card-premium:hover .cta-subtext-premium {
  /* Sutil efecto al hacer hover en la tarjeta */
  border-color: var(--color-border-highlight);
  background-color: rgba(255, 255, 255, 0.04);
}

.cta-subtext-premium .material-symbols-outlined {
  font-size: 1.2rem;
  color: var(--color-accent-primary);
  /* Icono blanco para destacar */
  opacity: 0.7;
}

/* --- Ajustes para Móvil --- */
@media (max-width: 768px) {
  .contact-card-premium {
    padding: var(--spacing-lg) var(--spacing-md);
    /* Menos padding en móvil */
  }

  .cta-icon-flare {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-md);
  }

  .cta-icon-flare .material-symbols-outlined {
    font-size: 2rem;
  }

  .contact-card-premium .cta-main-button {
    transform: scale(1);
    /* Tamaño normal en móvil */
    padding: 18px 28px;
    /* Ajuste de padding si es necesario */
  }

  .cta-subtext-premium {
    font-size: 0.85rem;
    padding: var(--spacing-sm) calc(var(--spacing-md) - 4px);
  }
}

/* ======================================================= */
/* === FINAL CTA SECTION (PREMIUM UPGRADE V2 - MOBILE 2-COL) === */
/* ======================================================= */

/* Estilos anteriores para .final-cta-section, .contact-card-premium, etc. se mantienen */
/* ... (todos los estilos de la versión anterior que te proporcioné) ... */

.contact-card-premium {
  /* ... (tus estilos existentes para .contact-card-premium) ... */
  /* Aseguramos que el display por defecto sea flex column para desktop y tablets grandes */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Esto ya lo tenías, es bueno para el icono flare */
}

/* Contenedor del contenido principal del CTA */
.cta-content-wrapper {
  display: flex;
  flex-direction: column;
  /* Por defecto una sola columna (desktop y tablet) */
  align-items: center;
  /* Centra las columnas cuando son una sola */
  width: 100%;
  gap: var(--spacing-lg);
  /* Espacio entre el texto y las acciones en layout de columna */
}

.cta-text-column {
  text-align: center;
  /* Mantenemos el texto centrado por defecto */
  width: 100%;
}

.contact-card-premium .cta-text-column .section-title {
  /* Los estilos del título se mantienen, asegúrate de que no haya conflictos */
  margin-bottom: var(--spacing-md);
}

.contact-card-premium .cta-text-column .section-subtitle {
  /* Los estilos del subtítulo se mantienen */
  margin-bottom: 0;
  /* Quitamos el margen inferior aquí si el gap del wrapper lo maneja */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centra el botón y el subtexto */
  gap: var(--spacing-md);
  /* Espacio entre el botón y el subtexto */
  width: 100%;
}

.contact-card-premium .cta-main-button {
  /* ... (tus estilos existentes para .cta-main-button) ... */
  margin-bottom: 0;
  /* El gap del .cta-actions-column maneja el espacio */
  width: 100%;
  /* Hacemos que ocupe el ancho de su columna */
  max-width: 380px;
  /* Un ancho máximo para el botón */
}

.cta-subtext-premium {
  /* ... (tus estilos existentes para .cta-subtext-premium) ... */
  width: fit-content;
  /* Para que no ocupe todo el ancho innecesariamente */
}


/* --- AJUSTES PARA MÓVIL (DOS COLUMNAS) --- */
/* Usaremos un breakpoint un poco más grande para que las dos columnas tengan espacio, ej. 768px o 600px */
/* Ajusta el `max-width` según cómo se vea mejor el contenido. */
/* Si el contenido es muy largo, quizás 2 columnas no sea ideal en pantallas muy pequeñas. */

@media (max-width: 768px) {
  .contact-card-premium {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .cta-icon-flare {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-lg);
    /* Más espacio antes del contenido principal */
  }

  .cta-icon-flare .material-symbols-outlined {
    font-size: 2rem;
  }

  .cta-content-wrapper {
    flex-direction: row;
    /* CAMBIO CLAVE: dos columnas en fila */
    align-items: flex-start;
    /* Alinea las columnas arriba si tienen alturas diferentes */
    gap: var(--spacing-md);
    /* Espacio entre las dos columnas */
  }

  .cta-text-column {
    flex: 1 1 55%;
    /* La columna de texto puede tomar un poco más de espacio */
    text-align: left;
    /* Alineamos el texto a la izquierda en dos columnas */
  }

  .contact-card-premium .cta-text-column .section-title,
  .contact-card-premium .cta-text-column .section-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    /* Para que no se limite por el max-width anterior */
  }

  .contact-card-premium .cta-text-column .section-subtitle {
    font-size: 0.95rem;
    /* Podrías ajustar el tamaño del subtítulo */
  }


  .cta-actions-column {
    flex: 1 1 45%;
    /* La columna de acciones toma el espacio restante */
    align-items: center;
    /* Puedes cambiar a flex-start o flex-end si prefieres */
    justify-content: center;
    /* Centra el contenido verticalmente si hay espacio */
    gap: var(--spacing-md);
  }

  .contact-card-premium .cta-main-button {
    transform: scale(1);
    padding: 16px 24px;
    /* Ajuste de padding si es necesario */
    font-size: 0.95rem;
    /* Botón ligeramente más pequeño */
    width: 100%;
    /* Ocupa el ancho de su columna */
    max-width: none;
    /* Quitamos el max-width para que se ajuste a la columna */
  }

  .contact-card-premium .cta-main-button span:first-child {
    /* El texto del botón */
    white-space: normal;
    /* Permite que el texto del botón se divida en líneas si es necesario */
    text-align: center;
  }


  .cta-subtext-premium {
    font-size: 0.8rem;
    padding: calc(var(--spacing-sm) - 2px) var(--spacing-md);
    text-align: center;
    /* Centra el texto del subtexto si se divide en líneas */
    width: 100%;
    /* Que ocupe el ancho de su columna para mejor centrado */
    box-sizing: border-box;
  }
}

/* Podrías añadir un breakpoint intermedio si es necesario, por ejemplo para tablets pequeñas en vertical */
@media (max-width: 480px) {

  /* Para pantallas muy pequeñas, podríamos volver a una columna */
  .cta-content-wrapper {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .cta-text-column {
    text-align: center;
    /* Volvemos a centrar el texto */
    flex-basis: auto;
    /* Reseteamos la base flexible */
  }

  .contact-card-premium .cta-text-column .section-subtitle {
    margin-bottom: var(--spacing-md);
    /* Espacio antes de las acciones */
  }

  .cta-actions-column {
    flex-basis: auto;
    /* Reseteamos la base flexible */
    width: 100%;
    /* Que ocupe todo el ancho disponible */
  }

  .contact-card-premium .cta-main-button {
    max-width: 320px;
    /* Un max-width para el botón en layout de 1 columna */
    margin-left: auto;
    margin-right: auto;
  }

  .cta-subtext-premium {
    width: fit-content;
    /* Que se ajuste al contenido */
    margin-left: auto;
    margin-right: auto;
  }
}

/* ... (otros estilos CSS previos se mantienen) ... */

/* ========================================================= */
/* === SOLUCIÓN DEFINITIVA Y PREMIUM PARA NAVEGACIÓN MÓVIL === */
/* ===         >>>>> VERSIÓN "MÁS ACA VERGA" <<<<<         === */
/* ========================================================= */

/* --- 1. BOTÓN HAMBURGUESA (ANIMACIÓN MEJORADA) --- */
.hamburger-menu {
  display: none;
  width: 40px !important;
  height: 40px !important;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  position: relative;
  box-sizing: content-box;
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 3px;
  /* O 2.5px para un look más fino */
  background-color: #F5F5F5;
  border-radius: 3px;
  position: absolute;
  left: 0;
  /* Curva de animación más elegante y dinámica para las líneas */
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease-in-out;
  transform-origin: center;
}

.hamburger-menu .line1 {
  transform: translateY(-8px);
}

.hamburger-menu .line3 {
  transform: translateY(8px);
}

/* Estado abierto con rotación más pronunciada */
.hamburger-menu[aria-expanded="true"] .line1 {
  transform: translateY(0) rotate(135deg);
  /* Era 45deg */
}

.hamburger-menu[aria-expanded="true"] .line2 {
  opacity: 0;
  transform: scaleX(0);
  /* Desaparece encogiéndose */
}

.hamburger-menu[aria-expanded="true"] .line3 {
  transform: translateY(0) rotate(-135deg);
  /* Era -45deg */
}

/* --- 2. EL MENÚ DE NAVEGACIÓN (COMPORTAMIENTO ESCRITORIO) --- */
.nav-menu {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

/* --- 3. RESPONSIVE A PARTIR DE 768px (TABLETS Y MÓVILES) --- */
@media (max-width: 768px) {

  .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 800px;
    background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 70%);
    z-index: -1;
  }

  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .navbar-actions .btn-primary {
    display: none;
  }

  /* --- CONTENEDOR DEL MENÚ DE NAVEGACIÓN MÓVIL "MÁS VERGA" --- */
  .site-header .nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;

    /* FONDO CON MÁS BLUR Y OPACIDAD AJUSTADA */
    background-color: rgba(5, 5, 5, 0.88);
    /* Ligeramente menos opaco para que el blur destaque más */
    backdrop-filter: blur(25px);
    /* AUMENTAMOS EL BLUR */
    -webkit-backdrop-filter: blur(25px);
    z-index: 1000;

    opacity: 0;
    /* Animación de entrada más dinámica: un poco más desde arriba y con un scale más notorio */
    transform: translateY(-60px) scale(0.92);
    pointer-events: none;
    visibility: hidden;

    /* TRANSICIÓN MÁS LARGA Y CON CURVA ELEGANTE (easeOutExpo) */
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s 0.5s;
    gap: 1rem;
    /* Reducimos el gap para que los elementos más grandes no se separen tanto */
  }

  .site-header .nav-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  /* --- ENLACES DEL MENÚ "MÁS VERGAS" --- */
  .site-header .nav-menu .nav-link {
    font-family: var(--font-family);
    /* Asegurar la fuente correcta */
    font-size: 1.85rem;
    /* Un poco más grandes */
    font-weight: 700;
    color: #F0F0F0;
    /* Un blanco un poco más suave */
    letter-spacing: 0.02em;
    /* Sutil espaciado para un look más aireado */
    padding: 1rem 2rem;
    text-decoration: none;
    text-align: center;
    width: 90%;
    max-width: 320px;
    border-radius: 18px;
    /* Redondeo más generoso */

    opacity: 0;
    /* Movimiento de entrada más exagerado y cool */
    transform: translateY(40px) scale(0.85) skewY(-3deg);

    /* Curva easeOutExpo para un efecto de salida rápido y desaceleración suave */
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s,
      background-color 0.25s ease-out;
  }

  /* Efecto hover más interactivo */
  .site-header .nav-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* Hover más perceptible */
    /* Para el estado no activo, el transform de hover solo se aplica si el elemento es visible */
    /* y el skew se corrige si se hace hover antes de la animación de entrada completa (raro pero posible) */
    transform: scale(1.03) skewY(0deg);
  }


  .site-header .nav-menu.active .nav-link {
    opacity: 1;
    transform: translateY(0) scale(1) skewY(0deg);
    /* Se normaliza el skew */
  }

  /* Al hacer hover cuando el menú está ACTIVO y el enlace ha entrado */
  .site-header .nav-menu.active .nav-link:hover {
    transform: scale(1.03) skewY(0deg);
    /* Asegura que el skew se mantenga corregido y aplique el scale */
  }


  /* Delays escalonados un poco más pronunciados para un efecto de cascada claro */
  .site-header .nav-menu.active .nav-link:nth-child(1) {
    transition-delay: 0.18s, 0.18s, 0s;
  }

  /* opacity, transform, bg-color */
  .site-header .nav-menu.active .nav-link:nth-child(2) {
    transition-delay: 0.23s, 0.23s, 0s;
  }

  .site-header .nav-menu.active .nav-link:nth-child(3) {
    transition-delay: 0.28s, 0.28s, 0s;
  }

  .site-header .nav-menu.active .nav-link:nth-child(4) {
    transition-delay: 0.33s, 0.33s, 0s;
  }

  /* ... (Resto de tus estilos para .container, .section-padding, etc. que ya estaban bien) ... */

  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  h1,
  .hero-title {
    font-size: 2.85rem;
    line-height: 1.2;
  }

  h2,
  .section-title {
    font-size: 1.875rem;
    line-height: 1.25;
  }

  .section-title.left-align,
  .section-subtitle.left-align {
    text-align: center;
  }

  .hero-content>div:first-child {
    text-align: center;
  }


  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-ctas .btn {
    width: 100%;
    max-width: 350px;
  }

  .trusted-by {
    justify-content: center;
  }

  .logo-grid,
  .problem-solution-grid,
  .pillars-grid,
  .stats-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-xl);
  }

  .feature-grid.reverse .feature-visual {
    order: 0;
  }

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

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


  .feature-text ul {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.75rem;
    margin: var(--spacing-xl) auto;
    width: fit-content;
  }

  .footer-container,
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
  }

  .footer-links {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    align-items: center;
  }

  .footer-bottom {
    gap: 1.5rem;
  }


  .navbar-container {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
  }
}

/* ... (resto de tus estilos CSS) ... */

/* ... (otros estilos CSS previos se mantienen) ... */

/* ========================================================= */
/* === SOLUCIÓN DEFINITIVA Y PREMIUM PARA NAVEGACIÓN MÓVIL === */
/* ===         >>>>> VERSIÓN "ULTRA SMOOTH" <<<<<          === */
/* ========================================================= */

/* --- 1. BOTÓN HAMBURGUESA (ANIMACIÓN ELEGANTE) --- */
.hamburger-menu {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  position: relative;
  box-sizing: content-box;
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 2.5px;
  /* Un poco más fino para elegancia */
  background-color: #F5F5F5;
  border-radius: 3px;
  position: absolute;
  left: 0;
  /* Curva suave y rápida */
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center;
}

.hamburger-menu .line1 {
  transform: translateY(-7px);
  /* Ajuste sutil */
}

.hamburger-menu .line3 {
  transform: translateY(7px);
  /* Ajuste sutil */
}

.hamburger-menu[aria-expanded="true"] .line1 {
  transform: translateY(0) rotate(45deg);
}

.hamburger-menu[aria-expanded="true"] .line2 {
  opacity: 0;
  transform: scaleX(0.1);
  /* Desaparece más sutilmente */
}

.hamburger-menu[aria-expanded="true"] .line3 {
  transform: translateY(0) rotate(-45deg);
}

/* --- 2. EL MENÚ DE NAVEGACIÓN (COMPORTAMIENTO ESCRITORIO) --- */
.nav-menu {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

/* --- 3. RESPONSIVE A PARTIR DE 768px (TABLETS Y MÓVILES) --- */
@media (max-width: 768px) {

  .hero-section::before {
    /* ... (tu estilo para hero-section::before) ... */
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 800px;
    background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 70%);
    z-index: -1;
  }

  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .navbar-actions .btn-primary {
    display: none;
  }

  /* --- CONTENEDOR DEL MENÚ DE NAVEGACIÓN MÓVIL "ULTRA SMOOTH" --- */
  .site-header .nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;

    background-color: rgba(10, 10, 10, 0.85);
    /* Un negro un poco más suave y ligeramente más transparente */
    backdrop-filter: blur(20px);
    /* Un blur efectivo pero no excesivo */
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;

    opacity: 0;
    /* Inicio de la animación: un poco más arriba y ligeramente encogido */
    transform: translateY(-30px) scale(0.97);
    pointer-events: none;
    visibility: hidden;

    /* CURVA DE TRANSICIÓN SUPER SUAVE (easeInOutSine) y duración ajustada */
    transition: opacity 0.45s cubic-bezier(0.37, 0, 0.63, 1),
      transform 0.45s cubic-bezier(0.37, 0, 0.63, 1),
      visibility 0s 0.45s;
    gap: 0.8rem;
    /* Gap más pequeño para que los elementos se sientan más juntos */

    /* Pista al navegador para optimizar (usar con moderación) */
    will-change: transform, opacity;
  }

  .site-header .nav-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  /* --- ENLACES DEL MENÚ "ULTRA SMOOTH" --- */
  .site-header .nav-menu .nav-link {
    font-family: var(--font-family);
    font-size: 1.7rem;
    font-weight: 600;
    /* Ligeramente menos bold para suavidad visual */
    color: #F5F5F5;
    letter-spacing: 0.01em;
    padding: 0.9rem 1.8rem;
    text-decoration: none;
    text-align: center;
    width: 88%;
    max-width: 310px;
    border-radius: 16px;

    opacity: 0;
    /* Animación de entrada: un sutil slide y scale, sin skew para mejor rendimiento */
    transform: translateY(25px) scale(0.95);

    /* CURVA DE TRANSICIÓN SUAVE Y DURACIÓN ADECUADA */
    transition: opacity 0.4s cubic-bezier(0.37, 0, 0.63, 1) 0s,
      transform 0.4s cubic-bezier(0.37, 0, 0.63, 1) 0s,
      background-color 0.2s ease-out;

    /* Pista al navegador para optimizar (usar con moderación) */
    will-change: transform, opacity;
  }

  .site-header .nav-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.07);
    transform: scale(1.02);
    /* Hover sutil */
  }


  .site-header .nav-menu.active .nav-link {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .site-header .nav-menu.active .nav-link:hover {
    transform: scale(1.02);
    /* Mantener el hover también en estado activo */
  }


  /* Delays escalonados para una cascada suave y notable */
  .site-header .nav-menu.active .nav-link:nth-child(1) {
    transition-delay: 0.15s, 0.15s, 0s;
  }

  /* opacity, transform, bg-color */
  .site-header .nav-menu.active .nav-link:nth-child(2) {
    transition-delay: 0.20s, 0.20s, 0s;
  }

  .site-header .nav-menu.active .nav-link:nth-child(3) {
    transition-delay: 0.25s, 0.25s, 0s;
  }

  .site-header .nav-menu.active .nav-link:nth-child(4) {
    transition-delay: 0.30s, 0.30s, 0s;
  }

  /* ... (Resto de tus estilos para .container, .section-padding, etc. que ya estaban bien) ... */

  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  h1,
  .hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  h2,
  .section-title {
    font-size: 1.875rem;
    line-height: 1.25;
  }

  .section-title.left-align,
  .section-subtitle.left-align {
    text-align: center;
  }

  .hero-content>div:first-child {
    text-align: center;
  }


  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-ctas .btn {
    width: 100%;
    max-width: 350px;
  }

  .trusted-by {
    justify-content: center;
  }

  .logo-grid,
  .problem-solution-grid,
  .pillars-grid,
  .stats-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-xl);
  }

  .feature-grid.reverse .feature-visual {
    order: 0;
  }

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

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


  .feature-text ul {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.75rem;
    margin: var(--spacing-xl) auto;
    width: fit-content;
  }

  .footer-container,
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
  }

  .footer-links {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    align-items: center;
  }

  .footer-bottom {
    gap: 1.5rem;
  }


  .navbar-container {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
  }
}

/* ... (resto de tus estilos CSS) ... */