/* ==========================================================================
   Jose Llanos SEO — corporativa
   Tokens del brief: primario #10151e · secundario #8537d2 · acento #eef21c
   Kanit (headings) · Roboto (body) · radius 12px · minimalista tecnológico
   ========================================================================== */

/* ---- Fuentes autoalojadas ---- */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/kanit-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/kanit-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/kanit-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-var.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --primario: #10151e;
  --primario-d1: #0c0f16;
  --primario-d2: #080a0e;
  --primario-l1: #9fa1a5;
  --primario-l2: #dbdcdd;
  --secundario: #8537d2;
  --secundario-d1: #602897;
  --secundario-d2: #401a65;
  --secundario-l1: #ceafed;
  --secundario-l2: #ede1f8;
  --acento: #eef21c;
  --texto: #1a1a2e;
  --negro: #111827;
  --blanco: #ffffff;
  --radius: 12px;
  --font-h: 'Kanit', 'Trebuchet MS', sans-serif;
  --font-b: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --container: 1200px;
  --header-h: 72px;
  --wa: #25d366;
}

/* ---- Reset básico ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--primario-d2); }
/* Ronda 9 — diseño unificado en fondo oscuro (petición de José): el color
   base del texto es claro y TODAS las secciones viven sobre el mismo lienzo
   oscuro (html --primario-d2 + capa ambiental animada .ambient-bg). */
body {
  margin: 0;
  font-family: var(--font-b);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--primario-l2);
  background: transparent;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--secundario-l1); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-h);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .6em;
  color: var(--blanco);
}
/* Ronda 8 — tipografía de exhibición (referencias benscott / sharlee /
   Slider Revolution): los titulares mandan en la composición. H1 en
   mayúsculas, peso 700, mucho más grande que en rondas anteriores. */
h1 {
  font-size: clamp(2.3rem, 6vw, 5.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
}
h2 { font-size: clamp(1.8rem, 3.8vw, 3.3rem); font-weight: 700; line-height: 1.1; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

/* Palabra en contorno (stroke) dentro de un titular — estilo sharlee */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .88);
}
@supports not (-webkit-text-stroke: 1px #fff) {
  .outline { color: var(--blanco); }
}

/* Palabra con banda de color detrás (estilo benscott: el bloque acento
   asoma tras la parte baja de la palabra). Funciona en claro y oscuro:
   la banda solo cubre el tercio inferior, el texto conserva contraste. */
.hl {
  font-style: normal;
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.hl::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.1em;
  right: -.14em;
  bottom: .02em;
  height: .36em;
  background: var(--acento);
  transform: skewX(-8deg);
  transform-origin: 0 50%;
}
/* Con animaciones activas, la banda entra tras aterrizar las palabras */
.js-anim .hl::after { transform: scaleX(0) skewX(-8deg); transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.js-anim .hl.is-in::after { transform: scaleX(1) skewX(-8deg); }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--secundario); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---- Zonas oscuras (ronda 9: ahora es TODO; las secciones son
   transparentes para que la capa ambiental fija se vea a través, y la
   variante .alt aporta un velo sutil que conserva el ritmo visual) ---- */
.dark { background: transparent; color: var(--primario-l2); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--blanco); }
.dark a { color: var(--secundario-l1); }
.dark.alt { background: rgba(255, 255, 255, .025); }

/* ---- Eyebrow / etiquetas ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 14px;
}
/* Ronda 9 — punto que "respira" delante de cada eyebrow: latido ambiental
   constante y baratísimo (solo opacity/transform de un punto de 8px) */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
  margin-right: 10px;
  vertical-align: 1px;
  animation: eye-pulse 2.6s ease-in-out infinite;
}
@keyframes eye-pulse {
  0%, 100% { opacity: .4; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ---- Botones (ghost, peso 600, sin mayúsculas) ---- */
.btn {
  display: inline-block;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 15px 34px;
  border-radius: var(--radius);
  border: 2px solid var(--secundario);
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  text-decoration: none;
}
.btn:hover { background: var(--secundario); color: var(--blanco); text-decoration: none; transform: translateY(-2px); }
.btn-ghost2 { border-color: rgba(255,255,255,.4); color: var(--blanco); }
.btn-ghost2:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: var(--blanco); }
/* Ronda 9 — el botón principal respira un halo morado (loop suave; el área
   repintada es solo el propio botón) */
.btn:not(.btn-ghost2) { animation: btn-breathe 4.2s ease-in-out infinite; }
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(133, 55, 210, 0); }
  50% { box-shadow: 0 0 26px 2px rgba(133, 55, 210, .4); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Enlace con flecha (acento) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--acento);
}
.link-arrow::after { content: '→'; color: var(--acento); transition: transform .25s ease; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(5px); }
.dark .link-arrow { color: var(--acento); }
.dark .link-arrow::after { color: var(--acento); }

/* ==========================================================================
   Ronda 8 — Vuelve la barra de navegación clásica (las referencias de José
   usan menú visible: benscott, Slider Revolution). En desktop, logo +
   enlaces numerados en línea; en móvil/tablet, hamburguesa + overlay a
   pantalla completa (heredado de la ronda 5, que ahí sí funciona bien).
   IMPORTANTE: el fondo/blur del header vive en un ::before absoluto, no en
   el propio .site-header — un backdrop-filter en el header rompería el
   position:fixed del overlay móvil.
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform .35s ease;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled::before {
  background: rgba(8, 10, 14, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
/* Al bajar se retira la barra entera; al subir vuelve */
.site-header.is-hidden { transform: translateY(-102%); }
.site-header.nav-open { transform: none; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 0;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }

.nav-toggle {
  position: relative;
  z-index: 2;
  display: block;
  margin-left: auto;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 13, 19, .6);
  padding: 0;
  cursor: pointer;
  transition: border-color .25s ease;
}
.nav-toggle:hover { border-color: var(--acento); }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blanco);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Móvil/tablet: overlay a pantalla completa con enlaces numerados ---- */
.main-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 96px min(9vw, 120px) 72px;
  background: rgba(8, 10, 14, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.nav-open .main-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .32s ease;
}
.main-nav .idx-label {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--primario-l1);
  margin-bottom: 20px;
}
.main-nav a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: clamp(1.65rem, 4.6vh, 2.8rem);
  line-height: 1.3;
  color: var(--primario-l1);
  padding: 4px 0;
  border: 0;
  transition: color .22s ease, transform .22s ease;
}
.main-nav a i {
  font-style: normal;
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: .12em;
  color: var(--acento);
  min-width: 2.3em;
  opacity: .85;
}
.main-nav a:hover { color: var(--blanco); text-decoration: none; transform: translateX(10px); }
.main-nav a[aria-current="page"] { color: var(--blanco); }
.main-nav a[aria-current="page"]::after { content: '·'; color: var(--acento); margin-left: 14px; }

/* ---- Desktop (≥901px): enlaces en línea, sin hamburguesa ---- */
@media (min-width: 901px) {
  .nav-toggle { display: none; }
  .main-nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    margin-left: auto;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
  }
  .main-nav .idx-label { display: none; }
  .main-nav a {
    align-items: flex-start;
    gap: 5px;
    font-size: .98rem;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.4;
    color: var(--primario-l2);
    padding: 2px 0;
  }
  .main-nav a i {
    font-size: .6rem;
    min-width: auto;
    margin-top: 1px;
    letter-spacing: .04em;
  }
  .main-nav a:hover { transform: none; color: var(--blanco); }
  .main-nav a[aria-current="page"]::after { margin-left: 6px; }
}

@media (max-width: 640px) {
  .brand img { height: 28px; }
  .nav-toggle { width: 46px; height: 46px; }
  .header-inner { padding: 13px 0; }
  .main-nav { padding: 90px 30px 100px; }
  .main-nav a { font-size: clamp(1.4rem, 3.8vh, 2rem); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(720px 420px at 85% -10%, rgba(133,55,210,.32), transparent 65%),
    radial-gradient(520px 320px at -5% 110%, rgba(133,55,210,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  /* Ronda 9: sin color de cierre — el lienzo lo pone html + .ambient-bg */
  background-size: auto, auto, 44px 44px, 44px 44px;
  overflow: hidden;
}
.hero .container { position: relative; }
.hero-inner { padding: 84px 0 92px; max-width: 1000px; }
/* Ronda 8 — el H1 del hero crece hasta llenar la pantalla (referencias:
   el texto ES el hero). En páginas interiores sin foto puede ir aún más
   grande porque dispone de todo el ancho. */
.hero h1 { font-size: clamp(2.4rem, 6.6vw, 6.2rem); margin-bottom: .45em; }
.hero-grid h1 { font-size: clamp(2.3rem, 5.2vw, 5.2rem); }
.hero p.sub { font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--primario-l2); max-width: 720px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 56px;
  align-items: center;
  padding: 72px 0 88px;
}
.hero-grid .hero-inner { padding: 0; max-width: none; }
.hero-media { position: relative; justify-self: center; width: min(100%, 360px); }
.hero-media::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--secundario);
  border-radius: var(--radius);
  opacity: .75;
}
.hero-media::after {
  content: '';
  position: absolute;
  top: -14px;
  left: -14px;
  width: 64px;
  height: 64px;
  border-top: 4px solid var(--acento);
  border-left: 4px solid var(--acento);
  border-radius: 4px 0 0 0;
}
.hero-media img { position: relative; border-radius: var(--radius); width: 100%; object-fit: cover; }
.accent-word { color: var(--acento); }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 46px; padding: 60px 0 70px; }
  .hero-media { width: min(78%, 320px); }
  .hero-inner { padding: 60px 0 68px; }
}

/* ==========================================================================
   Secciones
   ========================================================================== */
.section { padding: clamp(84px, 9vw, 130px) 0; }
.section-tight { padding: 62px 0; }
.section-head { max-width: 860px; margin-bottom: clamp(46px, 5vw, 70px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* (Ronda 9: las secciones claras desaparecen — todo el sitio es oscuro) */
@media (max-width: 700px) { .section { padding: 62px 0; } }

/* ---- Grid de tarjetas ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: clamp(32px, 3vw, 44px) clamp(28px, 2.6vw, 38px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.45); border-color: var(--secundario); }
.card h3 { margin-top: 0; }
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: rgba(133, 55, 210, .18);
  color: var(--secundario-l1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; }

/* ---- Placa de insignias de partner (badges oficiales reales, ronda 9) ----
   Las insignias oficiales (Google, Meta, HubSpot) llegan con su propio
   fondo de marca — nunca se recolorea ni se les quita el fondo (rompería
   las normas de uso de cada marca). Se apoyan sobre una placa clara propia
   para que se lean con nitidez sobre el resto de la web, ya en oscuro. */
.partner-card { display: flex; flex-direction: column; }
.badge-plate {
  background: #f4f4f6;
  border-radius: calc(var(--radius) - 4px);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-plate img { width: 100%; height: auto; max-width: 220px; }
.badge-plate-blue { background: #3b5998; }

/* ---- Números / counters ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr; } }
/* Ronda 9c — bloque de 2 estadísticas (sin revelar nº de proyectos activos):
   se centra y se limita de ancho para no quedar descuadrado a lo largo. */
.stats-2 { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; max-width: 760px; margin: 0 auto; }
@media (max-width: 820px) { .stats-2 { grid-template-columns: 1fr; max-width: 420px; } }
.stats-4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .stats-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats-4 { grid-template-columns: 1fr; } }
.stat {
  border: 1px solid rgba(255,255,255,.09);
  border-left: 4px solid var(--acento);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  padding: 30px 28px;
}
.stat .num {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--blanco);
  line-height: 1.02;
  display: block;
  margin-bottom: 12px;
}
.stat .num em { font-style: normal; color: var(--acento); }
.stat p { margin: 0; color: var(--primario-l2); }

/* ---- Pasos / proceso resumen ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: paso; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 26px 24px 24px; border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); background: rgba(255,255,255,.035); }
.step .n {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1rem;
  color: var(--blanco);
  background: var(--secundario);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.12rem; }
.step p { margin: 0; font-size: .98rem; }

/* ---- Timeline (página proceso) ---- */
.timeline { position: relative; max-width: 860px; margin: 0 auto; }
.timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--secundario), var(--secundario-l1));
}
.phase { position: relative; padding: 0 0 46px 84px; }
.phase:last-child { padding-bottom: 0; }
.phase-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primario-d1);
  border: 2px solid var(--secundario);
  color: var(--secundario-l1);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.phase .meta {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--secundario-l1);
  background: rgba(133, 55, 210, .18);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.phase-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
@media (max-width: 720px) {
  .phase { padding-left: 66px; }
  .phase-dot { width: 46px; height: 46px; font-size: 1.1rem; }
  .timeline::before { left: 22px; }
  .phase-cols { grid-template-columns: 1fr; }
}
.phase-box { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: 22px 22px 14px; }
.phase-box h4 { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--secundario-l1); margin-bottom: 10px; }
.phase-box ul { margin: 0 0 8px; padding-left: 1.1em; }
.phase-box li { margin-bottom: 7px; font-size: .98rem; }

/* ---- Lista "qué no hago" ---- */
.no-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.no-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.no-list .x {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(133, 55, 210, .2);
  color: var(--secundario-l1);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.no-list p { margin: 0; }

/* ---- FAQ (details) ---- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 21px 54px 21px 26px;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--blanco);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-h);
  font-size: 1.5rem;
  color: var(--secundario);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details[open] { border-color: var(--secundario-l1); }
.faq .faq-body { padding: 0 24px 20px; }
.faq .faq-body p { margin: 0; }
.dark .faq details { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.09); }
.dark .faq summary { color: var(--blanco); }
.dark .faq summary::after { color: var(--acento); }

/* ---- Casos (proyectos) — ronda 8: paneles de color con presencia
   (referencia benscott: bloques saturados a página con sombra desplazada).
   Alternan morado y azul-noche; texto siempre blanco. ---- */
.case {
  position: relative;
  background: linear-gradient(135deg, var(--secundario-d2) 0%, var(--secundario-d1) 55%, var(--secundario) 130%);
  border: 0;
  border-radius: var(--radius);
  padding: clamp(36px, 4.5vw, 64px) clamp(30px, 4vw, 60px);
  margin-bottom: 52px;
  color: var(--primario-l2);
  box-shadow: 12px 12px 0 rgba(238, 242, 28, .85);
  transition: box-shadow .3s ease, transform .3s ease;
}
.case:nth-of-type(even) {
  background: linear-gradient(135deg, var(--primario-d1) 0%, var(--primario) 60%, #1b2334 130%);
  box-shadow: 12px 12px 0 var(--secundario);
}
.case:hover { transform: translate(-3px, -3px); box-shadow: 17px 17px 0 rgba(238, 242, 28, .85); }
.case:nth-of-type(even):hover { box-shadow: 17px 17px 0 var(--secundario); }
.case > p { max-width: 900px; }
.case strong { color: var(--blanco); }
.case a { color: var(--acento); }
.case-tag {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  background: rgba(8, 10, 14, .35);
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 20px;
}
.case h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--blanco);
}
.case-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; margin-top: 22px; }
@media (max-width: 760px) { .case-cols { grid-template-columns: 1fr; } }
.case-cols h4 { font-size: .92rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.case-cols .did h4 { color: var(--acento); }
.case-cols .got h4 { color: var(--blanco); }
.case-cols ul { margin: 0; padding-left: 1.15em; }
.case-cols li { margin-bottom: 8px; font-size: .98rem; }
.case-result {
  background: rgba(8, 10, 14, .38);
  border-radius: var(--radius);
  border-left: 4px solid var(--acento);
  padding: 24px 26px;
}
.callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(133, 55, 210, .13);
  border: 1px solid rgba(133, 55, 210, .42);
  border-radius: var(--radius);
  padding: 22px 26px;
  max-width: 860px;
}
.callout .ico { flex-shrink: 0; color: var(--secundario-l1); margin-top: 3px; }
.callout p { margin: 0; }

/* ---- Sobre mí ---- */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.about-media { position: relative; width: min(100%, 340px); justify-self: center; }
.about-media::before {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--secundario);
  border-radius: var(--radius);
  opacity: .5;
}
.about-media img { position: relative; border-radius: var(--radius); }
.tag-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; }
.tag-list li {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 500;
  font-size: .98rem;
}

/* ---- Certificados ---- */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.cert-card img { width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
.cert-card .cert-body { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; }
.cert-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.cert-card .ent { font-size: .9rem; color: var(--primario-l1); margin: 0 0 14px; }
.cert-card .link-arrow { margin-top: auto; font-size: .95rem; }

.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } }
.tool {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.tool strong { font-family: var(--font-h); font-weight: 500; color: var(--blanco); display: block; margin-bottom: 4px; }
.tool p { margin: 0; font-size: .95rem; }

/* ---- Contacto ---- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 34px 32px;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 500; font-size: .95rem; margin-bottom: 6px; color: var(--blanco); }
.field .opt { color: var(--primario-l1); font-weight: 400; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-b);
  font-size: 1rem;
  color: var(--blanco);
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--primario-l1); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--secundario);
  box-shadow: 0 0 0 3px rgba(133, 55, 210, .3);
}
.field textarea { min-height: 140px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--secundario); }
.form-msg { display: none; margin-top: 16px; padding: 16px 18px; border-radius: var(--radius); font-size: .98rem; }
.form-msg.ok { display: block; background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.35); color: #9fe8bc; }
.form-msg.err { display: block; background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.35); color: #f3b3b3; }
.contact-direct { display: grid; gap: 14px; }
.contact-direct .item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.contact-direct .ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(133, 55, 210, .18);
  color: var(--secundario-l1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-direct .ico svg { width: 20px; height: 20px; }
.contact-direct strong { display: block; font-family: var(--font-h); font-weight: 500; color: var(--blanco); }
.contact-direct p { margin: 0; font-size: .97rem; }

/* ---- CTA final ---- */
.cta-final { text-align: center; }
.cta-final .inner { max-width: 840px; margin: 0 auto; }
.cta-final h2 { font-size: clamp(2.1rem, 4.6vw, 4.1rem); text-transform: uppercase; line-height: 1.06; }
.cta-final p { color: var(--primario-l2); font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.cta-final .btn-row { justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: rgba(8, 10, 14, .72); color: var(--primario-l1); font-size: .96rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr 1.1fr;
  gap: 40px;
  padding: 64px 0 48px;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: var(--blanco);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.site-footer a { color: var(--primario-l1); }
.site-footer a:hover { color: var(--blanco); }
.footer-brand img { height: 46px; width: auto; margin-bottom: 18px; }
.footer-nav ul, .footer-legal ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li, .footer-legal li { margin-bottom: 10px; }
.footer-news p { margin-bottom: 14px; }
.footer-news .news-row { display: flex; gap: 10px; }
.footer-news input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-b);
  font-size: .95rem;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--blanco);
}
.footer-news input[type="email"]::placeholder { color: var(--primario-l1); }
.footer-news input[type="email"]:focus { outline: none; border-color: var(--secundario); }
.footer-news .btn { padding: 10px 20px; font-size: .92rem; color: var(--blanco); }
.footer-news .check { margin-top: 12px; font-size: .85rem; color: var(--primario-l1); }
.footer-news .form-msg { font-size: .9rem; padding: 10px 14px; }
.footer-news .form-msg.ok { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.35); color: #9fe8bc; }
.footer-news .form-msg.err { background: rgba(255,80,80,.12); border-color: rgba(255,80,80,.35); color: #f3b3b3; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: .88rem;
}
.footer-bottom p { margin: 0; }
.ig-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.ig-link svg { width: 18px; height: 18px; }

/* ==========================================================================
   WhatsApp flotante (desktop) + barra móvil Llamada/WhatsApp
   ========================================================================== */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  box-shadow: 0 -4px 16px rgba(0,0,0,.22);
}
.mobile-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 8px;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
}
.mobile-cta a:hover { text-decoration: none; }
.mobile-cta .call { background: var(--secundario-d1); }
.mobile-cta .wa { background: var(--wa); }
.mobile-cta svg { width: 20px; height: 20px; fill: #fff; }
@media (max-width: 767px) {
  .wa-float { display: none; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 54px; }
}

/* ==========================================================================
   Animaciones — GSAP + ScrollTrigger + Lenis (ver assets/js/animations.js)
   La clase js-anim la pone un script inline en <head> solo si hay JS y el
   usuario NO tiene prefers-reduced-motion. Sin ella, todo es visible.
   ========================================================================== */
.js-anim .reveal,
.js-anim .hero-inner > * { opacity: 0; }
/* Ronda 3 — LCP: la foto del hero (candidato LCP habitual) nunca se oculta
   por opacidad; su entrada es solo transform (ver prepararPrimerViewport). */
.js-anim .hero .hero-media { opacity: 1; }
main { overflow-x: clip; }
.js-anim .timeline::before { transform: scaleY(var(--tlp, 1)); transform-origin: top center; }

/* Lenis (scroll suave) — CSS recomendado */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Header con estado tras hacer scroll: el fondo lo pinta .site-header::before
   (ver bloque de navegación, ronda 8) */

/* Micro-interacciones extra */
.btn:active { transform: translateY(0) scale(.97); }
.faq details { transition: border-color .25s ease; }
.faq details:hover { border-color: var(--secundario-l1); }
.card-icon, .contact-direct .ico, .no-list .x { will-change: transform; }
.tool { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tool:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.4); border-color: var(--secundario); }
.tag-list li { transition: border-color .25s ease, box-shadow .25s ease; }
.tag-list li:hover { border-color: var(--secundario); box-shadow: 0 8px 20px rgba(0,0,0,.4); }

/* Iconos Lucide auxiliares */
.t-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(133, 55, 210, .18);
  color: var(--secundario-l1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.t-ico svg { width: 20px; height: 20px; }
.tag-list .tag-ico { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--secundario-l1); }
.tag-list .tag-ico svg { width: 17px; height: 17px; }
.li-ico { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--secundario-l1); }
.li-ico svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal, .js-anim .hero-inner > * { opacity: 1; }
  * { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Ronda 2 — Transición entre páginas
   Entrada: fundido breve al cargar (solo con JS activo y sin reduced-motion,
   porque depende de la clase js-anim). Salida: main.js pone .is-leaving en
   <html> antes de navegar a un enlace interno. Sin JS no pasa nada.
   ========================================================================== */
/* Entrada: un velo FIJO por encima que se desvanece. Nunca se anima la
   opacidad del body: un ancestro con opacity animada suprime los registros
   LCP de todo su contenido (medido en ronda 3: la foto del hero no emitía
   registro y el LCP caía en elementos tardíos). El velo es oscuro (ronda 7),
   igual que el vacío que deja la salida de la página anterior: navegar se
   siente como atravesar el túnel hasta el siguiente acto. */
@keyframes page-enter { from { opacity: 1; } to { opacity: 0; } }
.js-anim body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--primario-d2);
  pointer-events: none;
  opacity: 0;
  animation: page-enter .3s ease-out;
}
body { transition: opacity .22s ease; }
main { transition: transform .22s ease; }
html.is-leaving body { opacity: 0; }
html.is-leaving main { transform: translateY(10px); }

/* ==========================================================================
   Ronda 2 — Fondo animado del hero (geometría #10151e + acento #eef21c)
   Blobs de gradiente a la deriva muy lenta, inyectados por animations.js.
   Solo transform, capas absolutas: coste de composición mínimo.
   ========================================================================== */
.hero-anim-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-anim-bg .hb { position: absolute; border-radius: 50%; will-change: transform; }
.hb-1 { width: 560px; height: 560px; top: -20%; right: -10%; background: radial-gradient(circle, rgba(133,55,210,.22), transparent 62%); animation: hb-drift-1 26s ease-in-out infinite alternate; }
.hb-2 { width: 440px; height: 440px; bottom: -26%; left: -12%; background: radial-gradient(circle, rgba(133,55,210,.15), transparent 62%); animation: hb-drift-2 34s ease-in-out infinite alternate; }
.hb-3 { width: 260px; height: 260px; top: 10%; left: 36%; background: radial-gradient(circle, rgba(238,242,28,.06), transparent 60%); animation: hb-drift-3 30s ease-in-out infinite alternate; }
@keyframes hb-drift-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-70px, 46px) scale(1.14); } }
@keyframes hb-drift-2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(64px, -38px) scale(1.1); } }
@keyframes hb-drift-3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(48px, 34px) scale(1.22); } }

/* ==========================================================================
   Ronda 3 — Táctil: en pantallas sin hover real, un toque deja el estado
   :hover "pegado" hasta el siguiente toque. Se neutralizan los hover que
   desplazan o levantan elementos para que nada quede colgado fuera de sitio.
   ========================================================================== */
@media (hover: none) {
  .btn:hover { transform: none; }
  .card:hover, .cert-card:hover, .tool:hover { transform: none; box-shadow: none; }
  .card:hover, .tool:hover { border-color: rgba(255,255,255,.09); }
  .tag-list li:hover { box-shadow: none; border-color: rgba(255,255,255,.12); }
  .wa-float:hover { transform: none; }
  .link-arrow:hover::after { transform: none; }
}

/* ==========================================================================
   Ronda 3 — Página 404
   ========================================================================== */
.e404-num {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(4.6rem, 16vw, 8.5rem);
  line-height: 1;
  color: var(--blanco);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: .06em;
}
.e404-num .lupa {
  width: .82em;
  height: .82em;
  color: var(--acento);
  flex-shrink: 0;
}
/* La lupa "busca" la página — solo transform, y el bloque global de
   prefers-reduced-motion ya anula esta animación si procede. */
@keyframes lupa-busca {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-.05em, .04em) rotate(-10deg); }
  55% { transform: translate(.06em, -.03em) rotate(8deg); }
  80% { transform: translate(-.02em, -.05em) rotate(-4deg); }
}
.e404-num .lupa { animation: lupa-busca 5.5s ease-in-out infinite; }
/* El número y la lista de atajos pintan siempre (no entran en el juego de
   reveals del hero: heroIntro no los gestiona y quedarían ocultos) */
.js-anim .hero-inner > .e404-num,
.js-anim .hero-inner > .e404-links { opacity: 1; }
.e404-links { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .98rem; }
.e404-links a { color: var(--secundario-l1); }

/* ---- Página legal ---- */
.legal-body { max-width: 800px; }
.legal-body h2 { font-size: 1.4rem; margin-top: 2em; }
.legal-body h2:first-child { margin-top: 0; }

/* ---- Hero interior compacto ---- */
.page-hero .hero-inner { padding: 64px 0 68px; }

/* ==========================================================================
   Ronda 4 — "Presentación" · efectos superllamativos
   Todo lo de esta ronda respeta prefers-reduced-motion: los elementos los
   inyecta animations.js (que no se ejecuta con movimiento reducido) o son
   animaciones CSS que anula el bloque global de reduced-motion.
   ========================================================================== */

/* ---- Barra de progreso de scroll (inyectada por JS) ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  background: linear-gradient(90deg, var(--secundario), var(--acento));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---- Cursor personalizado (solo puntero fino; inyectado por JS) ---- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--acento);
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--acento);
  mix-blend-mode: difference;
  transition: width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, opacity .25s ease;
}
.cursor-ring.is-link {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: var(--secundario-l1);
}
.cursor-ring.is-hidden, .cursor-dot.is-hidden { opacity: 0; }

/* ---- Header al bajar: la barra entera se retira (is-hidden) y vuelve al
   subir; con el menú móvil abierto permanece visible (ver bloque ronda 8) ---- */

/* ---- Palabra gigante de fondo por sección (inyectada por JS) ---- */
.section, .section-tight { position: relative; overflow-x: clip; }
.section > .container, .section-tight > .container { position: relative; z-index: 1; }
/* Se pinta como SVG inline a propósito: el texto SVG queda excluido del
   algoritmo de LCP (un bloque de texto HTML así de grande se convertiría
   en candidato LCP y, al inyectarse por JS, hundiría la métrica). */
.bg-word {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: clamp(4.6rem, 15vw, 11.5rem);
  pointer-events: none;
  user-select: none;
}
.bg-word text {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(4.6rem, 15vw, 11.5rem);
  letter-spacing: .02em;
  fill: transparent;
  stroke: rgba(255, 255, 255, .06);
  stroke-width: 1;
}

/* ---- Marquee de servicios (decorativo, aria-hidden) ---- */
.marquee {
  background: rgba(12, 15, 22, .55);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
  padding: 24px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: mq-slide 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  flex-shrink: 0;
}
.mq-group span {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}
.mq-group .mq-dot { color: var(--acento); font-size: 1.4em; }
@keyframes mq-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Tilt 3D en tarjetas (JS añade .has-tilt e inyecta el brillo) ---- */
.has-tilt { position: relative; }
.has-tilt, .has-tilt:hover {
  transition: box-shadow .25s ease, border-color .25s ease;
}
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(133, 55, 210, .13), transparent 65%);
}
.dark .tilt-glare { background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .14), transparent 65%); }
.has-tilt:hover .tilt-glare { opacity: 1; }

/* ---- Brillo que recorre los botones al pasar el ratón ---- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn:hover::before { left: 135%; }
@media (hover: none) { .btn::before { display: none; } }

/* ---- Palabra acento del H1: gradiente vivo en movimiento ---- */
.js-anim .accent-word {
  background: linear-gradient(90deg, var(--acento) 20%, #fdfec1 42%, var(--acento) 64%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accent-shimmer 5.5s linear infinite;
}
@keyframes accent-shimmer { from { background-position: 0% 0; } to { background-position: -220% 0; } }

/* ---- Aura giratoria tras la foto del hero (inyectada por JS) ---- */
.hero-media .photo-aura {
  position: absolute;
  inset: -36px;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(133, 55, 210, .55) 26%, transparent 40%, transparent 58%, rgba(238, 242, 28, .22) 72%, transparent 86%);
  filter: blur(34px);
  opacity: .8;
  animation: aura-spin 16s linear infinite;
  pointer-events: none;
}
@keyframes aura-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- Indicador de scroll en el hero de Inicio (inyectado por JS) ---- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 14px;
  pointer-events: none;
}
.scroll-cue::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--acento);
  animation: cue-drop 1.9s ease-in-out infinite;
}
@keyframes cue-drop {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translateY(16px); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}
@media (max-width: 820px) { .scroll-cue { display: none; } }

/* ---- Fondo 3D del hero de Inicio (Three.js, solo desktop) ---- */
.hero-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.hero-3d.is-on { opacity: 1; }
.hero-3d canvas { display: block; width: 100%; height: 100%; }
.hero.has-3d .hero-anim-bg { opacity: .45; }
.hero .container { z-index: 1; }

/* ---- Timeline (proceso): pulso del punto al activarse ---- */
.phase-dot { transition: border-color .3s ease, box-shadow .3s ease; }
.phase-dot.is-lit { border-color: var(--acento); box-shadow: 0 0 0 5px rgba(238, 242, 28, .16); }
.phase-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  opacity: 0;
  pointer-events: none;
}
.phase-dot.is-lit::after { animation: dot-ping .9s ease-out 1; }
@keyframes dot-ping {
  from { transform: scale(1); opacity: .8; }
  to { transform: scale(1.9); opacity: 0; }
}

/* ---- Brillo que barre las tarjetas de certificados ---- */
.cert-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .7s ease;
}
.cert-card { position: relative; }
.cert-card:hover::after { left: 150%; }
@media (hover: none) { .cert-card::after { display: none; } }

/* ---- Texto que se "enciende" palabra a palabra con el scroll ---- */
[data-scrub-text] .sw { opacity: .14; }

/* ==========================================================================
   Ronda 5 — Estructura de presentación por actos
   Cada página es un acto: hero a pantalla (casi) completa, escenas
   fijadas al scroll (pin de GSAP, solo desktop, ver buildScenes en
   animations.js), contador de escena y enlace al siguiente acto.
   Nada de este bloque oculta contenido por CSS: las escenas esconden sus
   piezas con estilos inline de GSAP, así que sin JS todo queda visible.
   ========================================================================== */

/* ---- El hero abre cada acto ocupando la pantalla ----
   Nota: con el hero en flex-column, un .container con margin:auto pasa a
   ancho shrink-to-fit (los márgenes auto anulan el stretch): se fuerza
   width:100% para que el contenido no quede centrado-encogido. */
@media (min-width: 821px) {
  .hero { display: flex; flex-direction: column; justify-content: center; min-height: 92vh; min-height: 92svh; }
  .hero.page-hero { min-height: 80vh; min-height: 80svh; }
  /* Páginas legales: solo un título, sin subtítulo — un hero a 80vh dejaba
     media pantalla vacía en 2K. Versión compacta. */
  .hero.page-hero.hero-slim { min-height: 0; }
  .hero.page-hero.hero-slim .hero-inner { padding: 150px 0 64px; }
  .hero > .container { width: 100%; }
}
@media (max-width: 820px) {
  .hero.page-hero { display: flex; flex-direction: column; justify-content: center; min-height: 56vh; min-height: 56svh; }
  .hero.page-hero > .container { width: 100%; }
  .hero.page-hero .hero-inner { padding: 92px 0 54px; }
  .hero:not(.page-hero) .hero-grid { padding-top: 96px; }
}

/* ---- Siguiente acto: cada página desemboca en la siguiente ---- */
.next-act {
  display: block;
  background: rgba(12, 15, 22, .55);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 64px 0 70px;
  text-decoration: none;
  overflow: hidden;
}
.next-act:hover { text-decoration: none; background: rgba(8, 10, 14, .75); }
.next-act .na-label {
  display: block;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 12px;
}
.next-act .na-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--blanco);
}
.next-act .na-num {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .42);
}
.next-act .na-title::after { content: '→'; color: var(--acento); transition: transform .3s ease; }
.next-act:hover .na-title::after { transform: translateX(16px); }

/* ==========================================================================
   Pantallas 2K/QHD (≥1800px): el lienzo se quedaba perdido en 2560px de
   ancho. Se ensancha el contenedor y sube la base tipográfica (ronda 7,
   conservado y ampliado en ronda 8).
   ========================================================================== */
@media (min-width: 1800px) {
  html { font-size: 120%; }
  :root { --container: 1480px; }
  .hero-media { width: min(100%, 470px); }
  .about-media { width: min(100%, 430px); }
  .hero-grid { gap: 90px; }
  .section-head { max-width: 940px; }
  .faq { max-width: 980px; }
  .hero p.sub { max-width: 780px; }
  .hero-inner { max-width: 1180px; }
}

/* ==========================================================================
   Ronda 9 — Movimiento ambiental constante en TODA la web
   La capa .ambient-bg la inyecta animations.js en cada página (fixed,
   z-index -1: pinta por encima del fondo de html pero debajo de todo el
   contenido). Blobs de gradiente a la deriva + chispas que ascienden.
   Solo transform/opacity (capas compuestas, sin repintados); en móvil
   animations.js inyecta menos piezas. Con prefers-reduced-motion no se
   inyecta siquiera (animations.js corta antes), y el bloque de abajo la
   oculta por si acaso.
   ========================================================================== */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ambient-bg .ab { position: absolute; border-radius: 50%; will-change: transform; }
.ab-1 {
  width: max(480px, 52vw);
  height: max(480px, 52vw);
  top: -22%;
  left: -16%;
  background: radial-gradient(circle, rgba(133, 55, 210, .16), transparent 62%);
  animation: ab-drift-1 44s ease-in-out infinite alternate;
}
.ab-2 {
  width: max(420px, 44vw);
  height: max(420px, 44vw);
  bottom: -24%;
  right: -14%;
  background: radial-gradient(circle, rgba(96, 40, 151, .22), transparent 64%);
  animation: ab-drift-2 56s ease-in-out infinite alternate;
}
.ab-3 {
  width: max(260px, 26vw);
  height: max(260px, 26vw);
  top: 34%;
  left: 58%;
  background: radial-gradient(circle, rgba(238, 242, 28, .05), transparent 60%);
  animation: ab-drift-3 38s ease-in-out infinite alternate;
}
@keyframes ab-drift-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vw, 7vh) scale(1.18); } }
@keyframes ab-drift-2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-8vw, -6vh) scale(.94); } }
@keyframes ab-drift-3 { from { transform: translate(0, 0) scale(.92); } to { transform: translate(-10vw, 9vh) scale(1.2); } }

/* Ronda 9b — Móvil "espectacular": una mancha extra (más pequeña que la
   de escritorio, así que no suma coste real) y una banda de luz diagonal
   que cruza toda la pantalla muy despacio. Solo existen en el DOM cuando
   la página es estrecha (animations.js las omite en escritorio). */
.ab-3m {
  width: max(220px, 60vw);
  height: max(220px, 60vw);
  top: 44%;
  left: 30%;
  background: radial-gradient(circle, rgba(238, 242, 28, .08), transparent 60%);
  animation: ab-drift-3 30s ease-in-out infinite alternate;
}
.ambient-bg .ab-sweep {
  position: absolute;
  inset: -20% -45%;
  background: linear-gradient(115deg, transparent 42%, rgba(133, 55, 210, .2) 50%, transparent 58%);
  animation: ab-sweep-move 13s ease-in-out infinite;
  will-change: transform;
}
@keyframes ab-sweep-move {
  0%, 100% { transform: translate(-16%, -8%) rotate(8deg); }
  50% { transform: translate(16%, 10%) rotate(8deg); }
}

/* Ronda 9b — Táctil: brillo en bucle que sustituye al tilt/glare de ratón
   (tiltCards, solo escritorio). animations.js añade .mob-sheen a las
   tarjetas y activa .is-inview solo mientras están en pantalla — fuera de
   vista la animación queda en pausa (coste real ≈ 0). Con ratón fino
   (hover: hover) no se define nada aquí: manda tiltCards. */
@media (hover: none) {
  .mob-sheen { position: relative; }
  .mob-sheen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%);
    background-size: 250% 100%;
    opacity: 0;
    animation: mob-sheen-move 3.6s ease-in-out infinite;
    animation-play-state: paused;
  }
  .mob-sheen.is-inview::after { animation-play-state: running; }
}
@keyframes mob-sheen-move {
  0%, 100% { opacity: 0; background-position: 130% 0; }
  35% { opacity: .9; }
  65% { opacity: .9; background-position: -30% 0; }
  90%, 100% { opacity: 0; }
}

/* Ronda 9b — Barra inferior móvil (Llamar / WhatsApp): filo superior con
   un brillo que recorre el degradado de marca en bucle, para que la barra
   se sienta "viva" incluso sin tocarla. */
@media (max-width: 767px) {
  .mobile-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--acento), var(--secundario-l1), var(--acento));
    background-size: 200% 100%;
    animation: mcta-shimmer 3.5s linear infinite;
  }
}
@keyframes mcta-shimmer { from { background-position: 0% 0; } to { background-position: -200% 0; } }

/* Chispas que suben lentamente por la página (JS fija --sx, --sd, --ss por
   chispa: deriva lateral, duración y tamaño). Loop infinito por CSS. */
.ambient-bg .spark {
  position: absolute;
  bottom: -3vh;
  width: var(--ss, 4px);
  height: var(--ss, 4px);
  border-radius: 50%;
  background: var(--sc, rgba(206, 175, 237, .8));
  opacity: 0;
  will-change: transform, opacity;
  animation: spark-rise var(--sd, 24s) linear infinite;
  animation-delay: var(--sy, 0s);
}
@keyframes spark-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .65; }
  85% { opacity: .2; }
  100% { transform: translate(var(--sx, 0px), -112vh); opacity: 0; }
}

/* WhatsApp flotante: anillo de pulso perpetuo */
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  animation: wa-ping 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-ping {
  0% { transform: scale(1); opacity: .65; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* La banda de acento (.hl) tiene un brillo interior que la recorre en loop */
.hl::after {
  background: linear-gradient(100deg, var(--acento) 0%, #f7fa6e 45%, var(--acento) 90%);
  background-size: 220% 100%;
  animation: hl-sheen 5.5s linear infinite;
}
@keyframes hl-sheen { from { background-position: 0% 0; } to { background-position: 220% 0; } }

/* El filo acento de las estadísticas late suavemente */
.stat { position: relative; }
.stat::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 12%;
  bottom: 12%;
  width: 4px;
  border-radius: 4px;
  background: var(--acento);
  filter: blur(7px);
  opacity: 0;
  animation: stat-glow 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stat-glow { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }

/* ---- Reduced motion: por si algún navegador ejecuta JS igualmente ---- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .cursor-dot, .cursor-ring, .scroll-cue, .hero-3d, .ambient-bg { display: none !important; }
  .site-header.is-hidden { transform: none; }
  .js-anim .accent-word { animation: none; }
  .js-anim .hl::after { transform: scaleX(1) skewX(-8deg); }
  [data-scrub-text] .sw { opacity: 1; }
}