/* ================================================================
   MarketAds.co — DESIGN SYSTEM PREMIUM
   Fuente: Inter únicamente | Paleta: #07090F + #6D28FF
   Container: 1440px | Secciones: 160px
================================================================ */


/* ================================================================
   1. TOKENS — VARIABLES CSS
================================================================ */

:root {
  /* Colores */
  --c-base:          #07090F;
  --c-base-alt:      #0C0E18;
  --c-primario:      #6D28FF;
  --c-primario-osc:  #4C1D95;
  --c-primario-clar: #A78BFA;
  --c-texto:         #FFFFFF;
  --c-texto-sec:     #B5B5B5;
  --c-texto-ter:     #6B7280;
  --c-borde:         rgba(255,255,255,0.08);
  --c-borde-prim:    rgba(109,40,255,0.25);
  --c-verde-wa:      #25D366;
  --c-amber:         #F59E0B;

  /* Tipografía — Inter únicamente */
  --fuente:          'Inter', system-ui, -apple-system, sans-serif;

  /* Radios */
  --radio-sm:        0.5rem;
  --radio-md:        1rem;
  --radio-lg:        1.5rem;
  --radio-xl:        2rem;
  --radio-full:      9999px;

  /* Transiciones */
  --trans-rapida:    0.2s ease;
  --trans-media:     0.35s cubic-bezier(0.16,1,0.3,1);
  --trans-lenta:     0.6s cubic-bezier(0.16,1,0.3,1);

  /* Sombras */
  --sombra-prim:     0 0 60px rgba(109,40,255,0.25);
  --sombra-card:     0 8px 40px rgba(0,0,0,0.5);
}


/* ================================================================
   2. RESET Y BASE
================================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family:      var(--fuente);
  font-size:        1.25rem;        /* 20px */
  line-height:      1.7;
  color:            var(--c-texto);
  background-color: var(--c-base);
  overflow-x:       hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video {
  display:   block;
  max-width: 100%;
  height:    auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--fuente);
}

::selection {
  background: rgba(109,40,255,0.35);
  color:      #fff;
}

:focus-visible {
  outline:        2px solid var(--c-primario-clar);
  outline-offset: 3px;
  border-radius:  4px;
}


/* ================================================================
   3. TIPOGRAFÍA — ESCALA PREMIUM
================================================================ */

h1, h2, h3, h4 {
  font-family:    var(--fuente);
  line-height:    1;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 900; }
h2 { font-size: clamp(2.625rem, 5vw, 4rem); font-weight: 800; line-height: 1; }
h3 { font-size: 2rem; font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 600; }
p  { max-width: 650px; }

/* Hero H1 específico */
.hero__h1 {
  font-size:      clamp(1.75rem, 4.5vw, 64px);
  font-weight:    900;
  line-height:    0.88;
  letter-spacing: -0.02em;
  max-width:      18ch;
  color:          var(--c-texto);
  overflow-wrap:  break-word;
}

/* Saltos de línea: solo visibles en móvil */
.hero-br { display: none; }

.hero__h1 em {
  font-style: normal;
}

.hero__h1-acento {
  color:      var(--c-primario-clar);
  background: linear-gradient(135deg, #A78BFA 0%, #6D28FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Secciones titulares */
.sec-h2 {
  font-size:      clamp(1.75rem, 4.5vw, 64px);
  font-weight:    900;
  line-height:    0.95;
  letter-spacing: -0.02em;
  color:          var(--c-texto);
  max-width:      800px;
}

.sec-h2--claro { color: #fff; }

.sec-p {
  font-size:   1.25rem;
  line-height: 1.7;
  color:       var(--c-texto-sec);
  max-width:   650px;
}

.sec-p--claro {
  color: rgba(255,255,255,0.75);
}


/* ================================================================
   4. CONTENEDOR — 1440px / 80px / 48px / 24px
================================================================ */

.contenedor {
  width:          100%;
  max-width:      1440px;
  margin-inline:  auto;
  padding-inline: 1.5rem;           /* 24px móvil */
}

@media (min-width: 768px) {
  .contenedor { padding-inline: 3rem; }    /* 48px tablet */
}

@media (min-width: 1280px) {
  .contenedor { padding-inline: 5rem; }    /* 80px desktop */
}


/* ================================================================
   5. BOTONES
================================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  height:          60px;
  padding:         0 2.25rem;        /* 18px 36px equiv */
  font-family:     var(--fuente);
  font-size:       1rem;
  font-weight:     600;
  line-height:     1;
  letter-spacing:  -0.01em;
  border-radius:   var(--radio-full);
  white-space:     nowrap;
  transition:      background var(--trans-rapida),
                   color var(--trans-rapida),
                   transform var(--trans-rapida),
                   box-shadow var(--trans-rapida),
                   border-color var(--trans-rapida);
  cursor:          pointer;
  text-decoration: none;
}

.btn:hover    { transform: translateY(-2px); }
.btn:active   { transform: translateY(0); }

/* Primario */
.btn--primario {
  background:  var(--c-primario);
  color:       #fff;
  border:      2px solid transparent;
  box-shadow:  0 4px 20px rgba(109,40,255,0.35);
}

.btn--primario:hover {
  background: #7C3AED;
  box-shadow: 0 8px 32px rgba(109,40,255,0.5);
}

/* Fantasma */
.btn--fantasma {
  background:   transparent;
  color:        var(--c-texto-sec);
  border:       2px solid var(--c-borde);
}

.btn--fantasma:hover {
  color:        #fff;
  border-color: rgba(255,255,255,0.25);
}

/* Blanco */
.btn--blanco {
  background: #fff;
  color:      var(--c-primario);
  border:     2px solid transparent;
}

.btn--blanco:hover {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* WhatsApp */
.btn--whatsapp {
  background:  var(--c-verde-wa);
  color:       #fff;
  border:      2px solid transparent;
  box-shadow:  0 4px 20px rgba(37,211,102,0.35);
}

.btn--whatsapp:hover {
  background: #1EBE59;
  box-shadow: 0 8px 32px rgba(37,211,102,0.5);
}

/* Tamaños */
.btn--sm {
  height:  52px;
  padding: 0 1.5rem;
  font-size: 0.9375rem;
}

.btn--lg {
  height:    64px;
  padding:   0 2.5rem;
  font-size: 1.0625rem;
}


/* ================================================================
   6. BADGES
================================================================ */

.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.375rem;
  padding:       0.35rem 1rem;
  border-radius: var(--radio-full);
  font-size:     0.8125rem;
  font-weight:   600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge--prim {
  background:  rgba(109,40,255,0.12);
  color:       var(--c-primario-clar);
  border:      1px solid rgba(109,40,255,0.25);
}

.badge--claro {
  background:  rgba(255,255,255,0.08);
  color:       rgba(255,255,255,0.75);
  border:      1px solid rgba(255,255,255,0.12);
}

.badge--acento {
  background:  rgba(245,158,11,0.12);
  color:       var(--c-amber);
  border:      1px solid rgba(245,158,11,0.2);
}


/* ================================================================
   7. CABECERAS DE SECCIÓN
================================================================ */

.sec-header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            1.5rem;
  margin-bottom:  4rem;
}

.sec-header--claro .sec-h2 { color: #fff; }
.sec-header--claro .sec-p  { color: rgba(255,255,255,0.7); }


/* ================================================================
   8. ANIMACIONES AL SCROLL
================================================================ */

.animar-al-scroll,
.fade-up {
  opacity:   0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
}

.animar-al-scroll.visible,
.fade-up.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Retrasos escalonados */
.retraso-1 { transition-delay: 0.08s; }
.retraso-2 { transition-delay: 0.16s; }
.retraso-3 { transition-delay: 0.24s; }
.retraso-4 { transition-delay: 0.32s; }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .animar-al-scroll,
  .fade-up,
  * { animation: none !important; transition: none !important; }
}


/* ================================================================
   9. HEADER PREMIUM — BLANCO / STICKY
================================================================ */

/* ── Variables locales del nav ── */
:root {
  --nav-h:         80px;
  --nav-h-scroll:  68px;
  --nav-c-texto:   #111111;
  --nav-c-hover:   var(--c-primario);
  --nav-bg:        #ffffff;
  --nav-sombra:    0 2px 12px rgba(0,0,0,0.06);
  --nav-borde:     1px solid rgba(0,0,0,0.07);
}

/* ── Base ── */
.nav {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1000;
  height:     var(--nav-h);
  background: var(--nav-bg);
  border-bottom: var(--nav-borde);
  box-shadow: var(--nav-sombra);
  overflow:   visible;
  transition: height 0.3s ease,
              box-shadow 0.3s ease,
              backdrop-filter 0.3s ease;
}

/* Estado al hacer scroll */
.nav--scrolled {
  height:          var(--nav-h-scroll);
  box-shadow:      0 8px 32px rgba(0,0,0,0.09);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ── Inner: flexbox — logo izquierda, todo lo demás derecha ── */
.nav__inner {
  max-width:      1440px;
  margin-inline:  auto;
  padding-inline: 80px;
  height:         100%;
  display:        flex;
  align-items:    center;
  gap:            2.5rem;
}

/* ── Logo ── */
.nav__logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  flex-shrink:     0;
  transition:      opacity 0.3s ease;
}

.nav__logo:hover { opacity: 0.75; }

.nav__logo-img {
  height:      64px;
  width:       auto;
  display:     block;
  flex-shrink: 0;
}

/* ── Menú — empuja todo a la derecha ── */
.nav__centro {
  margin-left: auto;
}

.nav__lista {
  display:     flex;
  align-items: center;
  gap:         2rem;
  list-style:  none;
}

.nav__enlace {
  font-size:      16px;
  font-weight:    500;
  color:          var(--nav-c-texto);
  text-decoration: none;
  position:       relative;
  padding-bottom: 2px;
  transition:     color 0.3s ease;
  white-space:    nowrap;
}

.nav__enlace::after {
  content:       '';
  position:      absolute;
  bottom:        -2px;
  left:          0;
  width:         0;
  height:        2px;
  background:    var(--nav-c-hover);
  border-radius: 2px;
  transition:    width 0.3s ease;
}

.nav__enlace:hover,
.nav__enlace.activo {
  color: var(--nav-c-hover);
}

.nav__enlace:hover::after,
.nav__enlace.activo::after {
  width: 100%;
}

/* ── Acciones derecha ── */
.nav__acciones {
  display:     flex;
  align-items: center;
  gap:         0.875rem;
  flex-shrink: 0;
}

/* Botón WhatsApp */
.nav__wa {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  height:         44px;
  padding:        0 1.125rem;
  font-size:      0.9375rem;
  font-weight:    600;
  color:          #1A7A40;
  background:     rgba(37,211,102,0.08);
  border:         1.5px solid rgba(37,211,102,0.25);
  border-radius:  var(--radio-full);
  text-decoration: none;
  white-space:    nowrap;
  transition:     background 0.3s ease,
                  border-color 0.3s ease,
                  transform 0.3s ease;
}

.nav__wa:hover {
  background:   rgba(37,211,102,0.15);
  border-color: rgba(37,211,102,0.5);
  transform:    translateY(-2px);
}

/* CTA Agendar Auditoría */
.nav__cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          52px;
  padding:         0 28px;
  font-family:     var(--fuente);
  font-size:       15px;
  font-weight:     700;
  color:           #ffffff;
  background:      var(--c-primario);
  border-radius:   999px;
  border:          none;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  box-shadow:      0 4px 16px rgba(109,40,255,0.3);
  transition:      background 0.3s ease,
                   transform 0.3s ease,
                   box-shadow 0.3s ease;
}

.nav__cta:hover {
  background:  #7C3AED;
  transform:   translateY(-2px);
  box-shadow:  0 8px 24px rgba(109,40,255,0.45);
}

/* ── Hamburger (mobile) ── */
.nav__hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           44px;
  height:          44px;
  padding:         10px;
  border-radius:   12px;
  background:      none;
  border:          1.5px solid rgba(0,0,0,0.1);
  cursor:          pointer;
  transition:      background 0.3s ease, border-color 0.3s ease;
}

.nav__hamburger:hover {
  background:   rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
}

.nav__ham-linea {
  width:         100%;
  height:        2px;
  background:    #111111;
  border-radius: 2px;
  transition:    transform 0.3s ease, opacity 0.3s ease;
  display:       block;
}

.nav__hamburger.abierto .nav__ham-linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.abierto .nav__ham-linea:nth-child(2) { opacity: 0; }
.nav__hamburger.abierto .nav__ham-linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay ── */
.nav__overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.35);
  z-index:    998;
  opacity:    0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.nav__overlay.activo {
  opacity:        1;
  pointer-events: all;
}

/* ── Panel lateral móvil ── */
.nav__panel {
  position:         fixed;
  top:              0;
  right:            0;
  bottom:           0;
  width:            min(340px, 88vw);
  background:       #ffffff;
  z-index:          999;
  display:          flex;
  flex-direction:   column;
  padding:          1.5rem;
  box-shadow:       -8px 0 40px rgba(0,0,0,0.12);
  transform:        translateX(100%);
  transition:       transform 0.35s cubic-bezier(0.16,1,0.3,1);
  overflow-y:       auto;
}

.nav__panel.abierto {
  transform: translateX(0);
}

.nav__panel-cab {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-bottom:  1.5rem;
  border-bottom:   1px solid rgba(0,0,0,0.06);
  margin-bottom:   1.5rem;
}

.nav__panel-logo {
  font-size: 1rem;
}

.nav__panel-cerrar {
  width:           40px;
  height:          40px;
  border-radius:   10px;
  border:          1.5px solid rgba(0,0,0,0.1);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #111;
  cursor:          pointer;
  background:      none;
  transition:      background 0.3s ease;
}

.nav__panel-cerrar:hover { background: rgba(0,0,0,0.05); }

.nav__panel-lista {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  flex:           1;
  list-style:     none;
}

.nav__panel-enlace {
  display:       block;
  padding:       0.875rem 1rem;
  font-size:     1.0625rem;
  font-weight:   600;
  color:         #111111;
  border-radius: 12px;
  text-decoration: none;
  transition:    background 0.3s ease, color 0.3s ease;
}

.nav__panel-enlace:hover {
  background: rgba(109,40,255,0.06);
  color:      var(--c-primario);
}

.nav__panel-pie {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding-top:    1.5rem;
  border-top:     1px solid rgba(0,0,0,0.06);
  margin-top:     1.5rem;
}

.nav__wa--panel {
  justify-content: center;
  height:         52px;
}

.nav__cta--panel {
  height:         52px;
  text-align:     center;
  width:          100%;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .nav__inner { padding-inline: 2rem; gap: 1rem; }
  .nav__lista { gap: 28px; }
}

@media (max-width: 1023px) {
  .nav__inner {
    padding-inline: 1.5rem;
    justify-content: space-between;
  }
  .nav__centro   { display: none; }
  .nav__acciones { display: none; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 479px) {
  .nav__inner { padding-inline: 1rem; }
}

/* ── Compensar el header fijo en el hero ── */
body { padding-top: var(--nav-h); }


/* ================================================================
   10. HERO
================================================================ */

.hero {
  position:   relative;
  display:    flex;
  flex-direction: column;
  overflow:   hidden;
}

/* Fondo */
.hero__fondo {
  position: absolute;
  inset:    0;
  pointer-events: none;
  z-index:  0;
}

.hero__mesh {
  position:  absolute;
  inset:     0;
  background:
    radial-gradient(ellipse 80% 60% at 60% -10%, rgba(109,40,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 80%, rgba(76,29,149,0.12) 0%, transparent 50%);
}

.hero__rejilla {
  position:         absolute;
  inset:            0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image:      radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
}

.hero__glow {
  position:      absolute;
  border-radius: var(--radio-full);
  filter:        blur(80px);
  pointer-events: none;
}

.hero__glow--1 {
  width:      600px;
  height:     600px;
  background: radial-gradient(circle, rgba(109,40,255,0.2) 0%, transparent 70%);
  right:      5%;
  top:        -100px;
}

.hero__glow--2 {
  width:      400px;
  height:     400px;
  background: radial-gradient(circle, rgba(76,29,149,0.15) 0%, transparent 70%);
  left:       -50px;
  bottom:     10%;
}

.hero__glow--3 {
  width:      300px;
  height:     300px;
  background: radial-gradient(circle, rgba(109,40,255,0.1) 0%, transparent 70%);
  right:      30%;
  bottom:     -50px;
}

/* Contenedor hero */
.hero__contenedor {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding-block:  3rem 4rem;
  gap:            3rem;
}

@media (min-width: 1024px) {
  .hero__contenedor {
    flex-direction: row;
    align-items:    center;
    gap:            4rem;
    padding-block:  0.5rem 0.5rem;
  }
}

/* Columna texto */
.hero__col-texto {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            2rem;
  flex:           1;
  min-width:      0;
}

/* Badge */
.hero__badge {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  padding:     0.375rem 1rem;
  border-radius: var(--radio-full);
  background:  rgba(109,40,255,0.1);
  border:      1px solid rgba(109,40,255,0.2);
  font-size:   0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:       var(--c-primario-clar);
}

.hero__badge-dot {
  width:        6px;
  height:       6px;
  border-radius: var(--radio-full);
  background:   var(--c-primario-clar);
  animation:    pulsar-punto 2s ease-in-out infinite;
}

/* CTA row */
.hero__ctas {
  display:  flex;
  flex-wrap: wrap;
  gap:      1rem;
  margin-top: 1.5rem;
}

/* Sub */
.hero__sub {
  font-size:   1.25rem;
  line-height: 1.65;
  color:       var(--c-texto-sec);
  max-width:   600px;
}

/* Social proof */
.hero__proof {
  display:     flex;
  align-items: center;
  gap:         1.25rem;
  flex-wrap:   wrap;
}

.hero__proof-item {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
}

.hero__proof-n {
  font-size:   1.5rem;
  font-weight: 900;
  color:       #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hero__proof-l {
  font-size:  0.8125rem;
  color:      var(--c-texto-ter);
  font-weight: 500;
}

.hero__proof-sep {
  width:      1px;
  height:     2.5rem;
  background: var(--c-borde);
  flex-shrink: 0;
}

/* Microcopy de confianza — solo visible en mobile */
.hero__microcopy { display: none; }

/* Scroll indicator */
.hero__scroll {
  position:         absolute;
  bottom:           2rem;
  left:             50%;
  transform:        translateX(-50%);
  z-index:          1;
  animation:        flotar-p 2.5s ease-in-out infinite;
}


/* ══ HERO VISUAL ══════════════════════════════════════════════ */

.hero__col-visual {
  display:          flex;
  justify-content:  center;
  flex-shrink:      0;
  width:            100%;
}

@media (min-width: 1024px) {
  .hero__col-visual {
    width: auto;
  }
}

.hero-visual {
  position:   relative;
  width:      min(88vw, 340px);
  height:     auto;
  min-height: 0;
}

@media (min-width: 1024px) {
  .hero-visual {
    width:      430px;
    min-height: 0;
    height:     calc(100vh - var(--nav-h) - 1rem);
    max-height: 540px;
  }
}

@media (min-width: 1280px) {
  .hero-visual {
    width:      470px;
    height:     calc(100vh - var(--nav-h) - 1rem);
    max-height: 580px;
  }
}

/* ══════════════════════════════════════════
   HERO MÓVIL — optimizado DeepLook style
   Solo afecta ≤ 767px
══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Hero section: overflow visible para que el círculo no se corte */
  .hero { overflow: visible; }

  /* Contenedor: flat flex-column — col-texto será transparente */
  .hero__contenedor {
    align-items:    center !important;
    flex-direction: column !important;
    padding-top:    16px !important;
    padding-bottom: 0 !important;
    gap:            6px !important;
    text-align:     center;
  }

  /* Aplanar col-texto: sus hijos (h1, sub, ctas) pasan a ser
     hijos directos del contenedor y se pueden reordenar con order */
  .hero__col-texto { display: contents !important; }

  /* Badge: fuera */
  .hero__badge { display: none !important; }

  /* ── Orden de aparición en mobile ──
     1 H1 · 2 Sub · 3 Foto · 4 CTA      */

  /* H1: 3 líneas exactas con saltos controlados */
  .hero-br    { display: block !important; }
  .hero__h1 {
    order:          1 !important;
    font-size:      clamp(1.625rem, 7vw, 2rem) !important;
    font-weight:    900 !important;
    line-height:    0.95 !important;
    letter-spacing: -0.04em !important;
    max-width:      90vw !important;
    width:          90vw !important;
    text-align:     center !important;
    margin:         0 !important;
  }

  /* Subtítulo */
  .hero__sub {
    order:       2 !important;
    font-size:   0.8rem !important;
    max-width:   none !important;
    text-align:  center;
    line-height: 1.5;
    margin:      0 !important;
  }

  /* Proof: oculto */
  .hero__proof { display: none !important; order: 5 !important; }

  /* Visual: orden 3 — foto aparece después del subtítulo */
  .hero__col-visual {
    order:           3 !important;
    justify-content: center;
    margin-top:      8px;
  }
  .hero-visual {
    width:      min(86vw, 270px) !important;
    height:     260px !important;
    min-height: 0 !important;
  }

  /* CTA: orden 4 — subido 24px respecto a la versión anterior */
  .hero__ctas {
    order:          4 !important;
    flex-direction: column !important;
    width:          100% !important;
    align-self:     stretch !important;
    gap:            0 !important;
    margin-top:     -4px !important;
  }
  .hero__ctas .btn {
    width:           100% !important;
    text-align:      center;
    justify-content: center;
  }
  .hero__ctas .btn--fantasma { display: none !important; }

  /* Microcopy de confianza debajo del CTA */
  .hero__microcopy {
    display:        flex !important;
    flex-direction: column;
    gap:            5px;
    margin-top:     12px;
    list-style:     none;
    padding:        0;
    width:          100%;
  }
  .hero__microcopy li {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   0.72rem;
    color:       rgba(255,255,255,0.55);
    text-align:  left;
    line-height: 1.3;
  }
  .hero__microcopy-check {
    color:       var(--c-primario);
    font-weight: 700;
    font-size:   0.78rem;
    flex-shrink: 0;
  }

  /* Círculo: centrado + glow radial morado premium */
  .hv-foto {
    transform:  translate(-50%, -50%) !important;
    box-shadow:
      0 0 0 3px  rgba(109,40,255,0.55),
      0 0 0 10px rgba(109,40,255,0.18),
      0 0 70px 28px rgba(109,40,255,0.45),
      0 20px 50px rgba(0,0,0,0.55) !important;
  }

  /* Glows: ajustados al nuevo tamaño */
  .hv-glow--ext { inset: -35px; }
  .hv-glow--int { inset: -12px; }

  /* KPIs +247% y +74%: esquinas inferiores del círculo
     El visual mide 195px; el círculo baja hasta ~142px  */
  .hv-kpi {
    display:   flex !important;
    min-width: 72px !important;
    padding:   0.22rem 0.38rem !important;
    gap:       0.03rem !important;
  }
  .hv-kpi__n  { font-size: 0.9rem !important; }
  .hv-kpi__l  { font-size: 0.52rem !important; }
  .hv-kpi--1,
  .hv-kpi--2  { display: none !important; }
  .hv-kpi--3  { top: auto !important; left: -2px !important;  bottom: 4px !important; }
  .hv-kpi--4  { top: auto !important; right: -2px !important; bottom: 4px !important; }

  /* ── 5 íconos de plataformas alrededor del círculo ──
     Visual 260px · círculo Ø240px · centro en y=130px
     Google Ads  → arriba izquierda  (top: 3%)
     Meta        → arriba derecha    (top: 3%)
     TikTok      → izquierda media   (top: 46%)
     Instagram   → derecha media     (top: 46%)
     Facebook    → abajo centro      (top: 72%)        */
  .hv-logos       { display: block !important; }

  /* Stagger flotante independiente por ícono */
  .hv-logo--gg    { display: flex !important; top:  3% !important; left:  -3% !important; animation-delay: 0s   !important; animation-duration: 3.8s !important; }
  .hv-logo--meta  { display: flex !important; top:  3% !important; right: -3% !important; animation-delay: 0.5s !important; animation-duration: 4.3s !important; }
  .hv-logo--tt    { display: flex !important; top: 46% !important; left:  -3% !important; animation-delay: 0.9s !important; animation-duration: 3.5s !important; }
  .hv-logo--ig    { display: flex !important; top: 46% !important; right: -3% !important; animation-delay: 1.4s !important; animation-duration: 4.1s !important; }
  .hv-logo--fb    { display: flex !important; top: 72% !important; left: calc(50% - 19px) !important; animation-delay: 1.8s !important; animation-duration: 3.7s !important; }

  .hv-logo__ico     { width: 38px !important; height: 38px !important; border-radius: 9px !important; }
  .hv-logo__ico svg { width: 24px !important; height: 24px !important; }
  .hv-logo span     { font-size: 0.54rem !important; }

  /* Halos y scroll: ocultar */
  .hv-halo      { display: none; }
  .hero__scroll { display: none !important; }

  /* Cinta de logos: mayor visibilidad + separación del CTA */
  .logos-bar {
    padding-top:    36px !important;
    padding-bottom: 32px !important;
    margin-top:     0 !important;
    border-top:     none !important;
  }
  .logos-bar__item {
    font-size:      0.9rem !important;
    font-weight:    600 !important;
    color:          rgba(255,255,255,0.72) !important;
    letter-spacing: 0.01em;
  }
  .logos-bar__sep {
    color: rgba(109,40,255,0.6) !important;
  }
}

/* ── TABLET (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Centrado también en tablet */
  .hero__contenedor {
    align-items:   center;
    padding-block: 2.5rem 3.5rem;
    gap:           2.5rem;
    text-align:    center;
  }

  .hero__col-texto { align-items: center; }

  /* H1 grande */
  .hero__h1 {
    font-size:   clamp(2.75rem, 5.5vw, 3.5rem);
    line-height: 1.06;
  }

  /* Visual más grande en tablet */
  .hero-visual { width: min(60vw, 400px); }

  /* CTAs lado a lado */
  .hero__ctas { flex-direction: row; }
}

/* Glow exterior/interior */
.hv-glow {
  position:      absolute;
  border-radius: var(--radio-full);
  pointer-events: none;
  z-index:       1;
}

.hv-glow--ext {
  inset:      -80px;
  background: radial-gradient(ellipse, rgba(109,40,255,0.25) 0%, transparent 65%);
  filter:     blur(40px);
}

.hv-glow--int {
  inset:      -30px;
  background: radial-gradient(ellipse, rgba(109,40,255,0.15) 0%, transparent 60%);
  filter:     blur(20px);
}

/* Halos giratorios */
.hv-halo {
  position:      absolute;
  top:           50%;
  left:          50%;
  border-radius: var(--radio-full);
  border:        1px solid;
  transform-origin: center;
  pointer-events: none;
  z-index:       2;
}

.hv-halo--1 {
  width:  420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-color:   rgba(109,40,255,0.2);
  animation:      girar-halo 20s linear infinite;
}

.hv-halo--2 {
  width:  320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-color:   rgba(109,40,255,0.12);
  animation:      girar-halo 14s linear infinite reverse;
}

.hv-halo--3 {
  width:  520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-color:   rgba(109,40,255,0.06);
  animation:      girar-halo 28s linear infinite;
}

/* Foto circular */
.hv-foto {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, calc(-50% - 1.5cm));
  z-index:       5;
  border-radius: var(--radio-full);
  overflow:      hidden;
  box-shadow:
    0 0 0 3px rgba(109,40,255,0.4),
    0 0 0 8px rgba(109,40,255,0.12),
    0 32px 80px rgba(0,0,0,0.7);
}

/* Dimensiones progresivas */
.hv-foto {
  width:  min(78vw, 240px);
  height: min(78vw, 240px);
}

@media (min-width: 480px) {
  .hv-foto { width: 260px; height: 260px; }
}

@media (min-width: 768px) {
  .hv-foto { width: 300px; height: 300px; }
}

@media (min-width: 1024px) {
  .hv-foto { width: 360px; height: 360px; }
}

@media (min-width: 1280px) {
  .hv-foto { width: 400px; height: 400px; }
}

.hv-foto__img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: top center;
  display:        block;
}

/* Partículas */
.hv-particulas {
  position:       absolute;
  inset:          0;
  z-index:        3;
  pointer-events: none;
}

.hv-p {
  position:      absolute;
  border-radius: var(--radio-full);
  background:    var(--c-primario);
}

.hv-p-1 { width: 6px; height: 6px; top: 15%; left: 8%;  opacity: 0.7; animation: flotar-p 3.5s ease-in-out infinite; }
.hv-p-2 { width: 4px; height: 4px; top: 30%; right: 5%; opacity: 0.5; animation: flotar-p 4.2s ease-in-out infinite 0.5s; }
.hv-p-3 { width: 8px; height: 8px; top: 65%; left: 3%;  opacity: 0.6; animation: flotar-p 3.8s ease-in-out infinite 1s; }
.hv-p-4 { width: 5px; height: 5px; bottom: 20%; right: 8%; opacity: 0.4; animation: flotar-p 5s ease-in-out infinite 0.3s; }
.hv-p-5 { width: 3px; height: 3px; top: 10%; right: 20%; opacity: 0.5; animation: flotar-p 4.5s ease-in-out infinite 1.5s; }
.hv-p-6 { width: 6px; height: 6px; bottom: 30%; left: 10%; opacity: 0.35; animation: flotar-p 6s ease-in-out infinite 0.8s; }

/* KPI Tarjetas */
.hv-kpi {
  position:        absolute;
  display:         flex;
  flex-direction:  column;
  gap:             0.2rem;
  padding:         0.875rem 1.25rem;
  background:      rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border:          1px solid rgba(255,255,255,0.1);
  border-radius:   1.5rem;
  z-index:         8;
  min-width:       130px;
  box-shadow:      0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  animation:       flotar-tarjeta 4s ease-in-out infinite;
}

@media (min-width: 1024px) {
  .hv-kpi {
    min-width: 118px;
    padding: 0.75rem 1rem;
  }
}

@media (min-width: 1280px) {
  .hv-kpi {
    min-width: 132px;
    padding: 0.875rem 1.125rem;
  }
}

.hv-kpi__n {
  font-size:   2.25rem;
  font-weight: 900;
  color:       #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 1280px) {
  .hv-kpi__n { font-size: 2.5rem; }
}

.hv-kpi__l {
  font-size:  0.75rem;
  color:      var(--c-texto-sec);
  font-weight: 500;
}

/* Posiciones de tarjetas — esquinas del círculo */
.hv-kpi--1 { top:  2%;  left:  -2%; animation-delay: 0s;   animation-duration: 4.2s; }
.hv-kpi--2 { top:  2%;  right: -2%; animation-delay: 0.5s; animation-duration: 3.8s; }
.hv-kpi--3 { top: 63%;  left:  -2%; animation-delay: 1s;   animation-duration: 4.5s; }
.hv-kpi--4 { top: 63%;  right: -2%; animation-delay: 0.8s; animation-duration: 3.5s; }

/* KPI móvil — controlado por el bloque hero móvil */

/* Logos plataformas — Iconos orbitando el círculo */
.hv-logos {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        9;
}

.hv-logo {
  position:       absolute;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
  animation:      flotar-tarjeta 3.5s ease-in-out infinite;
}

.hv-logo__ico {
  width:           52px;
  height:          52px;
  border-radius:   13px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  box-shadow:      0 8px 24px rgba(0,0,0,0.5),
                   0 0 0 1px rgba(255,255,255,0.08);
}

.hv-logo__ico svg {
  width:  34px;
  height: 34px;
}

.hv-logo span {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  color:          rgba(255,255,255,0.8);
  text-transform: uppercase;
  white-space:    nowrap;
}

/* Posiciones: laterales del círculo entre KPIs + Facebook abajo al centro */
.hv-logo--tt   { top: 22%;  left:  -13%; animation-delay: 0s;   animation-duration: 3.6s; }
.hv-logo--gg   { top: 46%;  left:  -13%; animation-delay: 0.5s; animation-duration: 4.2s; }
.hv-logo--meta { top: 22%;  right: -13%; animation-delay: 0.8s; animation-duration: 3.5s; }
.hv-logo--ig   { top: 46%;  right: -13%; animation-delay: 1.3s; animation-duration: 4s;   }
.hv-logo--fb   { top: 76%;  left: calc(50% - 26px); animation-delay: 1.8s; animation-duration: 3.8s; }

/* hv-logos visible en móvil — controlado por el bloque hero móvil */


/* ================================================================
   11. LOGOS BAR — MARQUEE
================================================================ */

.logos-bar {
  position:   relative;
  padding-block: 1.25rem;
  border-top:    1px solid var(--c-borde);
  border-bottom: 1px solid var(--c-borde);
  overflow:      hidden;
}

.logos-bar::before,
.logos-bar::after {
  content:    '';
  position:   absolute;
  top:        0;
  bottom:     0;
  width:      100px;
  z-index:    2;
  pointer-events: none;
}

.logos-bar::before {
  left:       0;
  background: linear-gradient(to right, var(--c-base) 0%, transparent 100%);
}

.logos-bar::after {
  right:      0;
  background: linear-gradient(to left, var(--c-base) 0%, transparent 100%);
}

.logos-bar__track-wrap {
  overflow: hidden;
}

.logos-bar__track {
  display:    inline-flex;
  gap:        1.5rem;
  animation:  marquee-desplazar 30s linear infinite;
  white-space: nowrap;
}

.logos-bar__item {
  font-size:   0.875rem;
  font-weight: 500;
  color:       var(--c-texto-ter);
  letter-spacing: 0.01em;
  flex-shrink:  0;
}

.logos-bar__sep {
  color:      rgba(255,255,255,0.15);
  flex-shrink: 0;
}


/* ================================================================
   12. SERVICIOS — CARRUSEL STORYTELLING PREMIUM
================================================================ */

/* ── Sección ── */
.servicios {
  padding-block: 3.5rem 6rem;
  background:    var(--c-base);
  position:      relative;
  overflow:      hidden;
}

.sv-fondo {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        0;
}

.sv-glow {
  position:  absolute;
  width:     1000px;
  height:    700px;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(109,40,255,0.07) 0%, transparent 65%);
  filter:    blur(100px);
}

/* ── Encabezado ── */
.sv-enc {
  position:   relative;
  z-index:    1;
  text-align: center;
  max-width:  900px;
  margin:     0 auto 4rem;
}

.sv-h2 {
  font-size:      clamp(1.75rem, 4.5vw, 64px);
  font-weight:    900;
  line-height:    0.88;
  letter-spacing: -0.02em;
  color:          #fff;
  margin-block:   0.4rem 1.25rem;
}

.sv-intro {
  font-size:   1.0625rem;
  color:       var(--c-texto-sec);
  line-height: 1.7;
  max-width:   600px;
  margin-inline: auto;
}

/* ── Carrusel ── */
.sv-car {
  position: relative;
  z-index:  1;
}

/* ── Flechas ── */
.sv-flecha {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:          1px solid rgba(255,255,255,0.08);
  color:           rgba(255,255,255,0.6);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
}

.sv-flecha:hover {
  background:   rgba(109,40,255,0.18);
  border-color: rgba(109,40,255,0.35);
  color:        #fff;
  transform:    translateY(-50%) scale(1.08);
}

.sv-flecha--izq { left:  -28px; }
.sv-flecha--der { right: -28px; }

@media (max-width: 1200px) {
  .sv-flecha--izq { left:  0; }
  .sv-flecha--der { right: 0; }
}

@media (max-width: 767px) {
  .sv-flecha { display: none; }
}

/* ── Slides ── */
.sv-slides {
  position:   relative;
  min-height: 520px;
}

.sv-slide {
  display: none;
}

.sv-slide.activo {
  display:               grid;
  grid-template-columns: 44fr 56fr;
  gap:                   6rem;
  align-items:           center;
  animation:             svEntrada 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* ── Columna izquierda ── */
.sv-slide__izq {
  position: relative;
  display:  flex;
  align-items: flex-start;
}

.sv-slide__num-bg {
  position:    absolute;
  top:         -2rem;
  left:        -1.5rem;
  font-size:   clamp(9rem, 16vw, 17rem);
  font-weight: 900;
  line-height: 1;
  color:       rgba(109,40,255,0.045);
  user-select: none;
  pointer-events: none;
  z-index:     0;
  letter-spacing: -0.06em;
}

.sv-slide__cont {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  gap:            1.75rem;
  padding-top:    1rem;
}

.sv-slide__tope {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.sv-slide__idx {
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  color:          rgba(255,255,255,0.3);
  font-variant-numeric: tabular-nums;
}

.sv-slide__etiq {
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--c-primario-clar);
  padding:        0.25rem 0.75rem;
  border:         1px solid rgba(167,139,250,0.2);
  border-radius:  var(--radio-full);
  background:     rgba(109,40,255,0.08);
}

.sv-slide__nombre {
  font-size:      clamp(1.75rem, 4.5vw, 64px);
  font-weight:    900;
  line-height:    0.95;
  letter-spacing: -0.02em;
  color:          #fff;
}

.sv-slide__desc {
  font-size:   1rem;
  color:       var(--c-texto-sec);
  line-height: 1.75;
  max-width:   420px;
}

/* ── KPI block ── */
.sv-kpi-bloque {
  display:      flex;
  align-items:  center;
  gap:          1.25rem;
  padding:      1.25rem 1.5rem;
  background:   rgba(255,255,255,0.03);
  border:       1px solid rgba(255,255,255,0.07);
  border-left:  3px solid var(--c-primario);
  border-radius: 0 1rem 1rem 0;
}

.sv-kpi-n {
  font-size:      clamp(2.75rem, 4.5vw, 4rem);
  font-weight:    900;
  line-height:    1;
  letter-spacing: -0.04em;
  background:     linear-gradient(135deg, #fff 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space:    nowrap;
}

.sv-kpi-texto {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}

.sv-kpi-label {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       #fff;
  line-height: 1.2;
}

.sv-kpi-sub {
  font-size:  0.8125rem;
  color:      var(--c-texto-ter);
  font-weight: 500;
}

/* ── Columna derecha: ilustración ── */
.sv-slide__der {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.sv-slide__ilus {
  position:        relative;
  width:           100%;
  background:      rgba(255,255,255,0.02);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:          1px solid rgba(255,255,255,0.065);
  border-radius:   1.75rem;
  overflow:        hidden;
  box-shadow:
    0 0 0 1px rgba(109,40,255,0.08),
    0 32px 80px rgba(0,0,0,0.55),
    0 0 100px rgba(109,40,255,0.04);
  aspect-ratio:    580 / 440;
}

.sv-slide__ilus svg {
  display: block;
  width:   100%;
  height:  100%;
}

/* Glow morado + borde brillante sobre el video (desktop y tablet) */
.sv-slide__ilus::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse at 50% 0%, rgba(109,40,255,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index:        3;
}
.sv-slide__ilus::after {
  content:        '';
  position:       absolute;
  top: 0; left: 0; right: 0;
  height:         1px;
  background:     linear-gradient(90deg, transparent 0%, rgba(167,139,250,0.45) 50%, transparent 100%);
  pointer-events: none;
  z-index:        4;
}

/* ── Video en servicios — única pieza visual por tarjeta ── */
.sv-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    2;
}

/* ── Tabs de navegación ── */
.sv-tabs-nav {
  margin-top: 5rem;
  position:   relative;
  z-index:    1;
}

.sv-tabs {
  display:       flex;
  border-top:    1px solid rgba(255,255,255,0.06);
  overflow-x:    auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sv-tabs::-webkit-scrollbar { display: none; }

.sv-tab {
  flex:            1;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             0.3rem;
  padding:         1.375rem 1.5rem 1.25rem;
  border-top:      2px solid transparent;
  color:           rgba(255,255,255,0.35);
  cursor:          pointer;
  transition:      color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  white-space:     nowrap;
}

.sv-tab:hover {
  color:      rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.02);
}

.sv-tab.activo {
  border-color: var(--c-primario);
  color:        #fff;
  background:   rgba(109,40,255,0.05);
}

.sv-tab__n {
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          rgba(255,255,255,0.25);
  display:        block;
  margin-bottom:  0.1rem;
}

.sv-tab.activo .sv-tab__n {
  color: var(--c-primario-clar);
}

.sv-tab__nombre {
  font-size:   0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Responsive tablet ── */
@media (max-width: 1023px) {
  .sv-slide.activo {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }
  .sv-slide__num-bg { font-size: 8rem; top: -1rem; left: -0.75rem; }
  .sv-slide__der    { display: none; }
  .sv-slide__desc   { max-width: none; }
  .sv-tab           { padding: 1rem; }
}

/* 768px: mostrar ilustración también en iPad mini portrait */
@media (min-width: 768px) and (max-width: 1023px) {
  .sv-slide.activo  { display: flex !important; flex-direction: column !important; gap: 2rem; }
  .sv-slide__izq    { display: contents; }
  .sv-slide__cont   { display: contents; }
  .sv-slide__num-bg { display: none !important; }
  .sv-slide__tope   { order: 1; }
  .sv-slide__nombre { order: 2; }
  .sv-slide__desc   { order: 3; max-width: none; }
  .sv-slide__der    { order: 4; display: block !important; width: 100%; }
  .sv-kpi-bloque    { order: 5; }
  .sv-slide .btn    { order: 6; }
  .sv-slide__ilus {
    width:  78%;
    margin: 0 auto;
    position: relative;
    border-radius:    1.5rem;
    border:           1px solid rgba(109,40,255,0.25);
    box-shadow: 0 0 60px 16px rgba(109,40,255,0.2), 0 28px 70px rgba(0,0,0,0.65);
    aspect-ratio: 580 / 440;
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════
   SERVICIOS MOBILE — premium visual-first
   Layout: título → desc → imagen → KPI → CTA
══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .servicios    { padding-block: 3.5rem; }
  .sv-h2        { letter-spacing: -0.02em; }
  .sv-enc       { margin-bottom: 2.5rem; }
  .sv-tabs-nav  { margin-top: 2.5rem; }
  .sv-tab       { min-width: 100px; padding: 0.75rem 0.875rem; }
  .sv-tab__nombre { font-size: 0.75rem; }

  /* ── Slide: flex column para reordenar con order ── */
  .sv-slide.activo {
    display:        flex !important;
    flex-direction: column !important;
    gap:            1.25rem;
  }

  /* Transparentar wrappers: izq y cont pasan sus hijos
     directamente al flex container del slide */
  .sv-slide__izq  { display: contents; }
  .sv-slide__cont { display: contents; }

  /* Número decorativo: fuera en mobile */
  .sv-slide__num-bg { display: none !important; }

  /* ── Orden visual ── */
  .sv-slide__tope   { order: 1; }
  .sv-slide__nombre { order: 2; }
  .sv-slide__desc   { order: 3; max-width: none; }

  /* Imagen: visible, orden 4, hero visual premium */
  .sv-slide__der {
    order:   4;
    display: block !important;
    width:   100%;
  }

  .sv-kpi-bloque { order: 5; }
  .sv-slide .btn { order: 6; width: 100%; text-align: center; justify-content: center; }

  /* ── Ilustración mobile — glassmorphism + glow morado ── */
  .sv-slide__ilus {
    width:            90%;
    margin:           0 auto;
    position:         relative;
    border-radius:    1.25rem;
    border:           1px solid rgba(109,40,255,0.3);
    background:       rgba(8,10,20,0.88);
    backdrop-filter:  blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
      0 0 0 1px rgba(109,40,255,0.1),
      0 0 0 6px  rgba(109,40,255,0.06),
      0 0 60px 18px rgba(109,40,255,0.25),
      0 28px 70px rgba(0,0,0,0.7);
    aspect-ratio: 580 / 440;
    overflow:     hidden;
  }

  /* Glow radial sobre el video */
  .sv-slide__ilus::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse at 50% 0%, rgba(109,40,255,0.14) 0%, transparent 65%);
    pointer-events: none;
    z-index:    3;
  }

  /* Borde brillante superior */
  .sv-slide__ilus::after {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     1px;
    background: linear-gradient(90deg, transparent 0%, rgba(167,139,250,0.5) 50%, transparent 100%);
    pointer-events: none;
    z-index:    4;
  }

  .sv-slide__ilus svg {
    display:  block;
    width:    100%;
    height:   100%;
    position: relative;
    z-index:  0;
  }

  /* KPI y CTA compactos */
  .sv-kpi-n      { font-size: 2.25rem; }
  .sv-kpi-bloque { padding: 0.875rem 1rem; }
  .sv-kpi-label  { font-size: 0.875rem; }
  .sv-kpi-sub    { font-size: 0.75rem; }
}


/* ================================================================
   13. NÚMEROS
================================================================ */

.numeros {
  padding-block: 5rem;
  border-top:    1px solid var(--c-borde);
  border-bottom: 1px solid var(--c-borde);
}

.numeros__rejilla {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   2rem;
}

@media (min-width: 768px) {
  .numeros__rejilla { grid-template-columns: repeat(4, 1fr); }
}

.num-bloque {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  text-align:     center;
  padding:        2rem 1.5rem;
  border-right:   1px solid var(--c-borde);
}

.num-bloque:last-child { border-right: none; }

.num-bloque__c {
  font-size:      clamp(2.5rem, 5vw, 4.5rem);
  font-weight:    900;
  color:          #fff;
  line-height:    1;
  letter-spacing: -0.04em;
  display:        block;
  background:     linear-gradient(135deg, #fff 0%, var(--c-primario-clar) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.num-bloque__l {
  font-size:   1rem;
  font-weight: 700;
  color:       #fff;
}

.num-bloque__s {
  font-size:  0.875rem;
  color:      var(--c-texto-ter);
  font-weight: 500;
}


/* ================================================================
   14. DIFERENCIADORES
================================================================ */

.diferenciadores {
  padding-block: 6rem;
}

.diferenciadores__cont {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

@media (min-width: 1024px) {
  .diferenciadores__cont {
    flex-direction: row;
    align-items:    flex-start;
    gap:            6rem;
  }
}

.diferenciadores__izq {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            1.5rem;
  flex:           0 0 auto;
}

@media (min-width: 1024px) {
  .diferenciadores__izq { max-width: 440px; position: sticky; top: 100px; }
}

.diferenciadores__lista {
  display:        flex;
  flex-direction: column;
  gap:            0;
  flex:           1;
}

.dif-item {
  display:     flex;
  align-items: flex-start;
  gap:         1.25rem;
  padding:     1.75rem 0;
  border-bottom: 1px solid var(--c-borde);
}

.dif-item:first-child { padding-top: 0; }
.dif-item:last-child  { border-bottom: none; }

.dif-item__ico {
  width:          36px;
  height:         36px;
  border-radius:  var(--radio-full);
  background:     rgba(109,40,255,0.12);
  border:         1px solid rgba(109,40,255,0.25);
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--c-primario-clar);
  font-size:      0.875rem;
  font-weight:    700;
  flex-shrink:    0;
}

.dif-item strong {
  display:     block;
  font-weight: 700;
  font-size:   1.125rem;
  color:       #fff;
  margin-bottom: 0.375rem;
}

.dif-item p {
  font-size:  1rem;
  color:      var(--c-texto-sec);
  line-height: 1.6;
  max-width:  none;
}


/* ================================================================
   15. CASOS DE ÉXITO — CARRUSEL PREMIUM
================================================================ */

/* ── Sección base ── */
.casos {
  padding-block: 6rem;
  background:    var(--c-base);
  position:      relative;
  overflow:      hidden;
}

/* ── Fondo decorativo ── */
.casos__fondo {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        0;
}

.casos__fondo-glow {
  position:  absolute;
  width:     900px;
  height:    900px;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(109,40,255,0.09) 0%, transparent 70%);
  filter:    blur(80px);
}

.casos__fondo-rejilla {
  position:         absolute;
  inset:            0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:  72px 72px;
  mask-image:       radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
}

/* ── Encabezado ── */
.casos__enc {
  position:   relative;
  z-index:    1;
  text-align: center;
  max-width:  700px;
  margin:     0 auto 5rem;
}

.casos__h2 {
  font-size:      clamp(1.75rem, 4.5vw, 64px);
  font-weight:    900;
  line-height:    0.95;
  letter-spacing: -0.02em;
  color:          #fff;
  margin-block:   1rem 1.25rem;
}

.casos__intro {
  font-size:  1.0625rem;
  color:      var(--c-texto-sec);
  line-height: 1.65;
}

/* ── Contenedor del carrusel ── */
.casos-car {
  position: relative;
  z-index:  1;
}

/* ── Flechas de navegación ── */
.casos-flecha {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:          1px solid rgba(255,255,255,0.1);
  color:           rgba(255,255,255,0.7);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--trans-rapida), border-color var(--trans-rapida),
                   color var(--trans-rapida), transform 0.3s ease;
  cursor:          pointer;
}

.casos-flecha:hover {
  background:   rgba(109,40,255,0.2);
  border-color: rgba(109,40,255,0.4);
  color:        #fff;
  transform:    translateY(-50%) scale(1.08);
}

.casos-flecha--izq { left:  -26px; }
.casos-flecha--der { right: -26px; }

@media (max-width: 1200px) {
  .casos-flecha--izq { left:  0; }
  .casos-flecha--der { right: 0; }
}

@media (max-width: 767px) {
  .casos-flecha { display: none; }
}

/* ── Slides container ── */
.casos-slides {
  position:   relative;
  min-height: 480px;
}

/* ── Slide individual ── */
.caso-slide {
  display: none;
}

.caso-slide.activo {
  display:               grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:                   5rem;
  align-items:           center;
  animation:             casoEntrada 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* ── Columna izquierda ── */
.caso-slide__izq {
  display:        flex;
  flex-direction: column;
  gap:            1.75rem;
}

.caso-slide__meta {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.caso-slide__num {
  font-size:      5rem;
  font-weight:    900;
  line-height:    1;
  letter-spacing: -0.05em;
  color:          rgba(109,40,255,0.15);
  font-variant-numeric: tabular-nums;
  user-select:    none;
}

.caso-slide__sector {
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--c-primario-clar);
  padding:        0.375rem 0.875rem;
  border:         1px solid rgba(167,139,250,0.25);
  border-radius:  var(--radio-full);
  background:     rgba(109,40,255,0.08);
}

.caso-slide__h3 {
  font-size:      clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight:    900;
  line-height:    1.1;
  letter-spacing: -0.03em;
  color:          #fff;
}

.caso-slide__desc {
  font-size:   1rem;
  color:       var(--c-texto-sec);
  line-height: 1.7;
}

/* ── KPIs ── */
.caso-slide__kpis {
  display: flex;
  gap:     2rem;
}

.caso-kpi {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  padding-left:   1.25rem;
  border-left:    2px solid rgba(109,40,255,0.4);
}

.caso-kpi__n {
  font-size:      clamp(2.25rem, 3.5vw, 3.25rem);
  font-weight:    900;
  line-height:    1;
  letter-spacing: -0.04em;
  color:          #fff;
  background:     linear-gradient(135deg, #fff 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.caso-kpi__l {
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--c-texto-ter);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Columna derecha: mockup ── */
.caso-slide__der {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.caso-slide__mockup {
  width:           100%;
  max-width:       540px;
  background:      rgba(255,255,255,0.025);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border:          1px solid rgba(255,255,255,0.07);
  border-radius:   1.5rem;
  overflow:        hidden;
  box-shadow:
    0 0 0 1px rgba(109,40,255,0.1),
    0 24px 60px rgba(0,0,0,0.5),
    0 0 80px rgba(109,40,255,0.06);
  aspect-ratio:    520 / 380;
}

.caso-slide__mockup svg {
  display: block;
  width:   100%;
  height:  100%;
}

/* ── Navegación inferior ── */
.casos-nav-inf {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             2rem;
  margin-top:      3.5rem;
}

.casos-dots {
  display: flex;
  gap:     0.625rem;
}

.casos-dot {
  width:         8px;
  height:        8px;
  border-radius: var(--radio-full);
  background:    rgba(255,255,255,0.18);
  transition:    background var(--trans-rapida), width 0.3s ease;
  cursor:        pointer;
}

.casos-dot.activo {
  background: var(--c-primario);
  width:      32px;
}

.casos-dot:hover:not(.activo) {
  background: rgba(255,255,255,0.35);
}

.casos-contador {
  font-size:   0.875rem;
  font-weight: 700;
  color:       var(--c-texto-ter);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ── CTA inferior ── */
.casos__cta-bloque {
  position:   relative;
  z-index:    1;
  text-align: center;
  margin-top: 5rem;
  padding:    3rem;
  background: rgba(255,255,255,0.02);
  border:     1px solid var(--c-borde);
  border-radius: 2rem;
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:         1.5rem;
}

.casos__cta-bloque p {
  font-size:   1.25rem;
  font-weight: 600;
  color:       var(--c-texto-sec);
  margin:      0;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .caso-slide.activo {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }

  .caso-slide__num { font-size: 3.5rem; }

  .caso-slide__kpis { gap: 1.25rem; }

  .caso-slide__der { display: none; }
}

@media (max-width: 767px) {
  .casos { padding-block: 4rem; }

  .casos__h2 { font-size: clamp(1.625rem, 7vw, 2rem); }

  .caso-kpi__n  { font-size: 2rem; }
  .casos-car    { padding-inline: 0; }

  .casos-nav-inf { margin-top: 2.5rem; }
  .casos__cta-bloque { padding: 2rem 1.5rem; }
  .casos__cta-bloque p { font-size: 1rem; }
}


/* ================================================================
   16. FUNDADOR — EDITORIAL
================================================================ */

.fundador {
  position:      relative;
  padding-block: 6rem;
  overflow:      hidden;
}

.fundador__bg {
  position: absolute;
  inset:    0;
  pointer-events: none;
}

.fundador__bg-glow {
  position:  absolute;
  width:     800px;
  height:    800px;
  right:     -200px;
  top:       50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(109,40,255,0.1) 0%, transparent 70%);
  filter:    blur(60px);
}

.fundador__cont {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

@media (min-width: 1024px) {
  .fundador__cont {
    flex-direction: row;
    align-items:    center;
    gap:            6rem;
  }
}

.fundador__foto-wrap {
  flex-shrink: 0;
  width:       min(100%, 400px);
  display:     flex;
  flex-direction: column;
  align-items:   center;
  gap:           1.25rem;
}

.fundador__foto-marco {
  width:         min(100%, 400px);
  aspect-ratio:  3 / 4;
  border-radius: 2rem;
  overflow:      hidden;
  border:        1px solid var(--c-borde);
  box-shadow:    0 0 0 1px rgba(109,40,255,0.2), 0 32px 80px rgba(0,0,0,0.5);
  position:      relative;
}

.fundador__foto-marco::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(7,9,15,0.4) 0%, transparent 60%);
  z-index:    1;
  pointer-events: none;
}

.fundador__foto-img {
  width:           100%;
  height:          100%;
  max-width:       100%;
  display:         block;
  object-fit:      cover;
  object-position: top center;
}

.fundador__foto-estado {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.875rem;
  color:       var(--c-texto-sec);
  font-weight: 500;
}

.fundador__foto-dot {
  width:        8px;
  height:       8px;
  border-radius: var(--radio-full);
  background:   #22C55E;
  animation:    pulsar-punto 2s ease-in-out infinite;
  flex-shrink:  0;
}

.fundador__info {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  flex:           1;
}

.fundador__nombre {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
}

.fundador__rol {
  font-size:  1.125rem;
  color:      var(--c-primario-clar);
  font-weight: 600;
  max-width:   none;
}

.fundador__quote {
  font-size:   1.25rem;
  line-height: 1.65;
  color:       rgba(255,255,255,0.75);
  border-left: 3px solid var(--c-primario);
  padding-left: 1.5rem;
  font-style:  normal;
  max-width:   600px;
}

.fundador__stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
  padding:               1.5rem;
  background:            rgba(255,255,255,0.03);
  border:                1px solid var(--c-borde);
  border-radius:         1.25rem;
}

.fundador__stat {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  text-align:     center;
}

.fundador__stat-n {
  font-size:   2rem;
  font-weight: 900;
  color:       #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  display:     block;
}

.fundador__stat-l {
  font-size:  0.8125rem;
  color:      var(--c-texto-sec);
  font-weight: 500;
}


/* ================================================================
   17. TESTIMONIOS
================================================================ */

.testimonios {
  padding-block: 6rem;
  border-top:    1px solid var(--c-borde);
}

.test-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.5rem;
  margin-top:            0;
}

@media (min-width: 768px) {
  .test-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .test-grid { grid-template-columns: repeat(3, 1fr); }
}

.test-card {
  display:         flex;
  flex-direction:  column;
  gap:             1.25rem;
  padding:         2rem;
  background:      rgba(255,255,255,0.03);
  border:          1px solid var(--c-borde);
  border-radius:   1.5rem;
  transition:      border-color var(--trans-media), background var(--trans-media);
}

.test-card:hover {
  border-color: var(--c-borde-prim);
  background:   rgba(109,40,255,0.05);
}

.test-card__stars {
  color:     var(--c-amber);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
}

.test-card blockquote {
  font-size:   1.0625rem;
  line-height: 1.65;
  color:       rgba(255,255,255,0.8);
  font-style:  italic;
  flex:        1;
  max-width:   none;
}

.test-card footer {
  display:     flex;
  align-items: center;
  gap:         0.875rem;
}

.test-card__av {
  width:           42px;
  height:          42px;
  border-radius:   var(--radio-full);
  background:      rgba(109,40,255,0.2);
  border:          1px solid rgba(109,40,255,0.3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.8125rem;
  font-weight:     800;
  color:           var(--c-primario-clar);
  flex-shrink:     0;
}

.test-card footer cite {
  display:     block;
  font-style:  normal;
  font-weight: 700;
  color:       #fff;
  font-size:   0.9375rem;
}

.test-card footer span {
  display:   block;
  font-size: 0.8125rem;
  color:     var(--c-texto-ter);
}


/* ================================================================
   18. METODOLOGÍA
================================================================ */

.metodologia {
  padding-block: 6rem;
  background: linear-gradient(180deg, var(--c-base) 0%, var(--c-base-alt) 100%);
}

.meto-lista {
  display:        flex;
  flex-direction: column;
  position:       relative;
  margin-top:     3rem;
}

.meto-lista::before {
  content:    '';
  position:   absolute;
  left:       1.5rem;
  top:        0;
  bottom:     0;
  width:      1px;
  background: linear-gradient(to bottom, var(--c-primario), transparent);
  opacity:    0.3;
}

@media (min-width: 768px) {
  .meto-lista { padding-left: 1.5rem; }
}

.meto-item {
  display:     flex;
  gap:         2rem;
  padding:     2rem 0;
  border-bottom: 1px solid var(--c-borde);
  position:    relative;
}

.meto-item:last-child { border-bottom: none; }

.meto-item__n {
  font-size:   3rem;
  font-weight: 900;
  color:       rgba(109,40,255,0.25);
  line-height: 1;
  letter-spacing: -0.05em;
  flex-shrink: 0;
  width:       3rem;
  text-align:  right;
}

.meto-item__c {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.meto-item__c h3 {
  font-size:   1.375rem;
  font-weight: 700;
  color:       #fff;
  letter-spacing: -0.02em;
}

.meto-item__c p {
  font-size:  1rem;
  color:      var(--c-texto-sec);
  line-height: 1.65;
  max-width:   none;
}

.meto-item__t {
  display:       inline-block;
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--c-primario-clar);
  background:    rgba(109,40,255,0.1);
  border:        1px solid rgba(109,40,255,0.2);
  border-radius: var(--radio-full);
  padding:       0.25rem 0.75rem;
}

.metodologia__cta {
  margin-top:  4rem;
  text-align:  center;
}


/* ================================================================
   19. CTA MEDIA
================================================================ */

.cta-media {
  position:      relative;
  padding-block: 5rem;
  overflow:      hidden;
}

.cta-media__bg {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, var(--c-primario-osc) 0%, var(--c-primario) 100%);
  z-index:    0;
}

.cta-media__bg::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-media__cont {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.75rem;
  text-align:     center;
}

.cta-media__cont .sec-h2 {
  max-width: 700px;
  text-align: center;
  margin-inline: auto;
}

.cta-media__cont .sec-p {
  max-width: 560px;
  text-align: center;
  margin-inline: auto;
}

.cta-media__garantias {
  display:  flex;
  flex-wrap: wrap;
  gap:      1rem 2rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.cta-media__garantias li {
  font-size:  0.9375rem;
  color:      rgba(255,255,255,0.8);
  font-weight: 600;
}


/* ================================================================
   20. FAQ
================================================================ */

.faq {
  padding-block: 6rem;
}

.faq__acordeon {
  display:        flex;
  flex-direction: column;
  max-width:      800px;
  margin:         0 auto;
}

.ac-item {
  border-bottom:  1px solid var(--c-borde);
  transition:     border-color var(--trans-rapida);
}

.ac-item:first-child { border-top: 1px solid var(--c-borde); }

.ac-item.activo { border-color: rgba(109,40,255,0.3); }

.ac-item__pregunta {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.5rem 0;
  text-align:      left;
  font-size:       1.0625rem;
  font-weight:     600;
  color:           rgba(255,255,255,0.85);
  transition:      color var(--trans-rapida);
}

.ac-item__pregunta:hover       { color: #fff; }
.ac-item.activo .ac-item__pregunta { color: #fff; }

.ac-item__ico {
  width:      20px;
  height:     20px;
  flex-shrink: 0;
  transition:  transform var(--trans-media);
  color:       var(--c-texto-ter);
}

.ac-item.activo .ac-item__ico { transform: rotate(180deg); }

.ac-item__respuesta {
  overflow: hidden;
}

.ac-item__respuesta p {
  padding:   0 0 1.5rem;
  font-size: 1rem;
  color:     var(--c-texto-sec);
  line-height: 1.7;
  max-width:   none;
}

.faq__cta {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1rem;
  margin-top:      4rem;
  text-align:      center;
}

.faq__cta p {
  color:   var(--c-texto-sec);
  max-width: none;
}


/* ================================================================
   21. CONTACTO
================================================================ */

.contacto {
  padding-block: 6rem;
  background: linear-gradient(180deg, var(--c-base) 0%, var(--c-base-alt) 100%);
}

.contacto__cont {
  display:         flex;
  justify-content: center;
}

.contacto__box {
  max-width:       680px;
  width:           100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1.75rem;
  text-align:      center;
  padding:         3rem;
  background:      rgba(255,255,255,0.03);
  border:          1px solid var(--c-borde);
  border-radius:   2rem;
}

.contacto__wa-ico { flex-shrink: 0; }

.contacto__box .sec-h2  { text-align: center; margin-inline: auto; }
.contacto__box .sec-p   { text-align: center; margin-inline: auto; }

.contacto__sep {
  display:     flex;
  align-items: center;
  gap:         1rem;
  width:       100%;
  color:       var(--c-texto-ter);
  font-size:   0.875rem;
}

.contacto__sep span:first-child,
.contacto__sep span:last-child {
  flex:       1;
  height:     1px;
  background: var(--c-borde);
}

.contacto__opciones {
  display:  flex;
  flex-wrap: wrap;
  gap:      1rem;
  justify-content: center;
}

.contacto__opcion {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--c-texto-sec);
  padding:     0.625rem 1.25rem;
  border:      1px solid var(--c-borde);
  border-radius: var(--radio-full);
  transition:  color var(--trans-rapida), border-color var(--trans-rapida);
}

.contacto__opcion:hover { color: #fff; border-color: rgba(255,255,255,0.2); }


/* ================================================================
   22. PIE DE PÁGINA
================================================================ */

.pie {
  border-top: 1px solid var(--c-borde);
}

.pie__cont {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   3rem;
  padding-block:         4rem;
}

@media (min-width: 768px) {
  .pie__cont { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.pie__marca {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.pie__logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
}

.pie__logo-img {
  height:      160px;
  width:       auto;
  display:     block;
  flex-shrink: 0;
}

.pie__marca p {
  font-size:  0.9375rem;
  color:      var(--c-texto-ter);
  line-height: 1.65;
  max-width:   280px;
}

.pie__redes {
  display:  flex;
  gap:      0.75rem;
  flex-wrap: wrap;
}

.pie__red {
  width:           36px;
  height:          36px;
  border-radius:   var(--radio-sm);
  border:          1px solid var(--c-borde);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  font-weight:     700;
  color:           var(--c-texto-ter);
  transition:      color var(--trans-rapida), border-color var(--trans-rapida), background var(--trans-rapida);
}

.pie__red:hover {
  color:        #fff;
  border-color: rgba(255,255,255,0.2);
  background:   rgba(255,255,255,0.06);
}

.pie__col h3 {
  font-size:   0.8125rem;
  font-weight: 700;
  color:       #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}

.pie__col ul {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.pie__col li a {
  font-size:  0.9375rem;
  color:      var(--c-texto-ter);
  transition: color var(--trans-rapida);
}

.pie__col li a:hover { color: #fff; }

.pie__copy {
  border-top: 1px solid var(--c-borde);
  padding-block: 1.5rem;
}

.pie__copy-cont {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             1rem;
}

.pie__copy span {
  font-size: 0.875rem;
  color:     var(--c-texto-ter);
}

.pie__legal {
  display:  flex;
  gap:      1rem;
  align-items: center;
}

.pie__legal a {
  font-size:  0.875rem;
  color:      var(--c-texto-ter);
  transition: color var(--trans-rapida);
}

.pie__legal a:hover { color: #fff; }

.pie__legal span { color: var(--c-texto-ter); }


/* ================================================================
   23. WHATSAPP FLOTANTE
================================================================ */

.wa-float {
  position:  fixed;
  bottom:    2rem;
  right:     2rem;
  z-index:   900;
}

.wa-float__pulso {
  position:      absolute;
  inset:         -8px;
  border-radius: var(--radio-full);
  background:    rgba(37,211,102,0.25);
  animation:     pulsar-wa 2.5s ease-in-out infinite;
}

.wa-float__btn {
  position:        relative;
  width:           62px;
  height:          62px;
  border-radius:   var(--radio-full);
  background:      var(--c-verde-wa);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 24px rgba(37,211,102,0.45);
  transition:      transform var(--trans-media), box-shadow var(--trans-media);
}

.wa-float__btn:hover {
  transform:  scale(1.1);
  box-shadow: 0 8px 32px rgba(37,211,102,0.6);
}

.wa-float__tooltip {
  position:    absolute;
  right:       calc(100% + 0.75rem);
  top:         50%;
  transform:   translateY(-50%);
  background:  rgba(7,9,15,0.95);
  backdrop-filter: blur(12px);
  border:      1px solid var(--c-borde);
  border-radius: var(--radio-full);
  padding:     0.5rem 1rem;
  font-size:   0.875rem;
  font-weight: 600;
  color:       #fff;
  white-space: nowrap;
  opacity:     0;
  pointer-events: none;
  transition:  opacity var(--trans-rapida);
}

.wa-float:hover .wa-float__tooltip { opacity: 1; }


/* ================================================================
   24. RESPONSIVE — AJUSTES FINALES MÓVIL
================================================================ */

@media (max-width: 767px) {
  .sec-header { gap: 1rem; margin-bottom: 2.5rem; }

  /* Títulos de sección: misma escala mobile que el H1 del hero */
  .sec-h2,
  .sv-h2,
  .casos__h2 { font-size: clamp(1.625rem, 7vw, 2rem); line-height: 0.95; letter-spacing: -0.02em; }

  /* <br> de títulos de servicio: ocultos en layouts de columna (mobile y tablet) */
  .sv-br, .sv-guion { display: none; }

  /* Títulos de servicio: unificados, -18%, menos saltos de línea */
  .sv-slide__nombre {
    font-size:      clamp(1.75rem, 8vw, 2.75rem);
    line-height:    0.85;
    letter-spacing: -0.03em;
    width:          100%;
  }
  .servicios .contenedor  { padding-inline: 1rem; }

  .sec-p      { font-size: 1.125rem; }

  .numeros__rejilla { gap: 1rem; }
  .num-bloque { border-right: none; border-bottom: 1px solid var(--c-borde); padding: 1.25rem; }
  .num-bloque:last-child { border-bottom: none; }

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

  .meto-lista::before { display: none; }
  .meto-item { flex-direction: column; gap: 0.75rem; }
  .meto-item__n { text-align: left; width: auto; }

  .contacto__box { padding: 1.5rem; border-radius: 1.25rem; }

  .pie__cont { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .pie__marca { grid-column: 1 / -1; }

  .wa-float { bottom: 1.25rem; right: 1.25rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero__h1,
  .sv-h2 { font-size: clamp(3.5rem, 7vw, 5rem); line-height: 0.88; }
  .sv-br, .sv-guion { display: none; }
}