/* ============================================================
   The G Agency — Sistema de diseño
   Propuesta de diseño UI/UX · Juan Devis's team · jul 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,500;1,600;1,700&display=swap');

:root {
  /* Identidad — sustituir por la marca real de The G Agency cuando la envíen */
  --violeta: #6D4AFF;
  --violeta-claro: #8B6FFF;
  --violeta-oscuro: #5433DB;
  --aqua: #2FE0C8;
  --aqua-suave: #7FF0E1;

  --oscuro: #0A0912;
  --oscuro-2: #131024;
  --claro: #F7F6FB;
  --blanco: #FFFFFF;
  --lavanda: #EFEBFF;

  --tinta: #14121F;
  --tinta-media: #5A5670;
  --tinta-suave: #8B8799;
  --borde: #E4E1F0;

  /* Pasteles de las tarjetas de industria */
  --past-1: #DDD8FF;
  --past-2: #FFD9E4;
  --past-3: #FFEFC7;
  --past-4: #C9F6EE;
  --past-5: #D9EBFF;

  --fuente: 'Outfit', system-ui, -apple-system, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;

  --r-s: 8px;
  --r-m: 16px;
  --r-l: 28px;
  --r-xl: 40px;

  --ancho: 1240px;
  --nav-alto: 76px;
  --cabecera-alto: 116px;   /* alto real de la cabecera; el hero sube por detrás */
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  background: var(--claro);
  color: var(--tinta);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5.1rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.85rem); letter-spacing: -0.02em; }
h4 { font-size: 1.12rem; letter-spacing: -0.01em; }

/* El gesto característico: palabra de acento en serif itálica */
.acento {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plomo {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--tinta-media);
  max-width: 60ch;
}

.tenue { color: var(--tinta-suave); }

/* ---------- Píldora de sección ---------- */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--violeta);
  border-radius: 100px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--violeta);
  margin-bottom: 22px;
}
.pildora::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aqua);
}

/* Misma lógica que el botón de borde: la píldora sobre fondo oscuro
   necesita el tratamiento claro en TODOS los contextos oscuros. */
.seccion-oscura .pildora,
.hero .pildora,
.cabecera-oscura .pildora {
  border-color: rgba(127, 240, 225, 0.45);
  color: var(--aqua-suave);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: var(--r-s);
  font-weight: 500;
  font-size: 0.97rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-principal {
  background: var(--violeta);
  color: #fff;
  box-shadow: 0 6px 22px rgba(109, 74, 255, .32);
}
.btn-principal:hover { background: var(--violeta-oscuro); box-shadow: 0 10px 30px rgba(109,74,255,.42); }

.btn-borde { border-color: var(--borde); color: var(--tinta); background: transparent; }
.btn-borde:hover { border-color: var(--violeta); color: var(--violeta); }

/* Botón de borde sobre fondo oscuro.
   ⚠️ Tiene que cubrir TODOS los contextos oscuros, no solo .seccion-oscura:
   la cabecera y el hero también son oscuros. Si se añade un contexto oscuro
   nuevo, hay que sumarlo aquí o el texto queda negro sobre negro. */
.seccion-oscura .btn-borde,
.cabecera-oscura .btn-borde,
.hero .btn-borde,
.pie .btn-borde {
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.seccion-oscura .btn-borde:hover,
.cabecera-oscura .btn-borde:hover,
.hero .btn-borde:hover,
.pie .btn-borde:hover {
  border-color: var(--aqua);
  color: var(--aqua);
}

.btn .flecha { transition: transform .2s ease; }
.btn:hover .flecha { transform: translateX(4px); }

/* ---------- Navegación flotante ---------- */
.nav-flotante {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(10, 9, 18, .93);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 100px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 18px 50px rgba(10, 9, 18, .38);
  max-width: calc(100vw - 32px);
}

.nav-flotante a {
  padding: 11px 19px;
  border-radius: 100px;
  color: rgba(255,255,255,.74);
  font-size: 0.92rem;
  font-weight: 450;
  transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}
.nav-flotante a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-flotante a.activo { color: #fff; background: rgba(255,255,255,.12); }
.nav-flotante a.nav-cta {
  background: var(--violeta);
  color: #fff;
  box-shadow: 0 4px 16px rgba(109,74,255,.45);
}
.nav-flotante a.nav-cta:hover { background: var(--violeta-claro); }

/* En escritorio los iconos no se usan: manda el texto, y el CTA cierra la fila */
.nav-icono { display: none; }
.nav-flotante .nav-mas { display: none; }
.nav-sabana { display: none; }
.nav-flotante a.nav-cta { order: 99; }

/* Cabecera superior con el logo */
.cabecera {
  padding: 30px 0;
  position: relative;
  z-index: 20;
}

/* La cabecera oscura NO lleva fondo propio: se apoya sobre el hero, que sube
   por detrás. Si le pusiéramos fondo plano, el resplandor del hero se cortaría
   en seco justo debajo y se vería una costura horizontal. */
.cabecera-oscura { background: transparent; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; }

.logo {
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.logo .punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--aqua);
  margin-left: 3px;
  margin-bottom: 12px;
}
.cabecera-oscura .logo { color: #fff; }

/* ---------- Secciones ---------- */
section { padding: clamp(70px, 9vw, 120px) 0; }

.seccion-oscura {
  background: var(--oscuro);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.seccion-oscura h1, .seccion-oscura h2, .seccion-oscura h3 { color: #fff; }
.seccion-oscura .plomo { color: rgba(255,255,255,.68); }

/* Malla de puntos del fondo oscuro */
.malla::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

.cabeza-seccion { margin-bottom: 56px; max-width: 780px; }
.cabeza-seccion.centrada { margin-left: auto; margin-right: auto; text-align: center; }
.cabeza-seccion .plomo { margin-top: 20px; }
.cabeza-seccion.centrada .plomo { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.hero {
  background: var(--oscuro);
  color: #fff;
  /* Sube por detrás de la cabecera para que el resplandor sea continuo */
  margin-top: calc(-1 * var(--cabecera-alto));
  padding: calc(var(--cabecera-alto) + 20px) 0 clamp(90px, 11vw, 150px);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 700px;
  background: radial-gradient(circle, rgba(109,74,255,.42) 0%, rgba(47,224,200,.10) 42%, transparent 68%);
  pointer-events: none;
}
.hero .contenedor { position: relative; z-index: 5; }

/* Lienzo de la red neuronal del hero. Lo inyecta main.js, así que si el
   script no corre el hero se ve igual, solo sin animación. */
.hero-red {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .85;
}

/* Resplandor del hero: deriva lenta, como una aurora */
.hero::after { animation: derivar 22s ease-in-out infinite alternate; }

@keyframes derivar {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  50%  { transform: translateX(-46%) translateY(22px) scale(1.06); }
  100% { transform: translateX(-54%) translateY(-14px) scale(1.02); }
}

/* Punto de la píldora: latido, como un sistema procesando */
.pildora::before { animation: latir 2.4s ease-in-out infinite; }

@keyframes latir {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(47,224,200,.5); }
  50%      { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(47,224,200,0); }
}

/* Cifras que se cuentan solas: mientras cuentan, tono tabular para que no bailen */
.metrica .cifra { font-variant-numeric: tabular-nums; }
.hero-centro { text-align: center; max-width: 940px; margin: 0 auto; }
.hero h1 { color: #fff; margin-bottom: 26px; }
.hero .plomo { color: rgba(255,255,255,.72); margin: 0 auto 38px; text-align: center; }
.hero-botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-nota {
  margin-top: 34px;
  font-size: .88rem;
  color: rgba(255,255,255,.5);
}

/* Prueba social encima del titular (como en la referencia del cliente).
   El texto es un marcador: la valoración real la pone el cliente. */
.prueba-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  flex-wrap: wrap;
  justify-content: center;
}
.prueba-social .estrellas {
  color: #FFC93D;
  letter-spacing: 2px;
  font-size: .95rem;
}

/* Franja de métricas del hero */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.metrica .cifra {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--aqua);
  line-height: 1;
}
.metrica .etiqueta { font-size: .88rem; color: rgba(255,255,255,.58); margin-top: 9px; }

/* ---------- Franja de logos ---------- */
.franja-logos { padding: 54px 0; background: var(--claro); border-bottom: 1px solid var(--borde); }
.franja-logos p { text-align: center; font-size: .88rem; color: var(--tinta-suave); margin-bottom: 30px; }
.logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 62px);
  flex-wrap: wrap;
  opacity: .42;
}
.logos span { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.03em; }

/* ---------- Rejilla de tarjetas ---------- */
.rejilla { display: grid; gap: 22px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 34px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tarjeta {
  position: relative;
  overflow: hidden;
}
.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(20,18,31,.09);
  border-color: var(--violeta);
}

/* Barrido de luz al pasar el ratón: lectura de "dato circulando" */
.tarjeta::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(109,74,255,.10), transparent);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.25,.8,.3,1);
  pointer-events: none;
}
.tarjeta:hover::after { left: 130%; }
.seccion-oscura .tarjeta::after {
  background: linear-gradient(100deg, transparent, rgba(47,224,200,.14), transparent);
}

/* El icono responde al hover de su tarjeta */
.icono { transition: transform .3s cubic-bezier(.25,.8,.3,1), background .3s ease; }
.tarjeta:hover .icono { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.tarjeta h3 { margin-bottom: 13px; }
.tarjeta p { color: var(--tinta-media); font-size: .98rem; }

.seccion-oscura .tarjeta {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.1);
}
.seccion-oscura .tarjeta:hover { border-color: var(--aqua); box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.seccion-oscura .tarjeta p { color: rgba(255,255,255,.64); }

.icono {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--lavanda);
  color: var(--violeta);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  font-size: 1.35rem;
}
.seccion-oscura .icono { background: rgba(47,224,200,.13); color: var(--aqua); }

.numero {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.5rem;
  color: var(--violeta);
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}
.seccion-oscura .numero { color: var(--aqua); }

/* ---------- Tarjetas apiladas de industria ---------- */
.apiladas { position: relative; }
.apilada {
  position: sticky;
  border-radius: var(--r-xl);
  padding: clamp(34px, 4.5vw, 56px);
  margin-bottom: 22px;
  min-height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.apilada:nth-child(1) { background: var(--past-1); top: 90px; }
.apilada:nth-child(2) { background: var(--past-2); top: 110px; }
.apilada:nth-child(3) { background: var(--past-3); top: 130px; }
.apilada:nth-child(4) { background: var(--past-4); top: 150px; }
.apilada:nth-child(5) { background: var(--past-5); top: 170px; }

.apilada .sector {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 14px;
  display: block;
}
.apilada h3 { margin-bottom: 16px; }
.apilada p { color: rgba(20,18,31,.72); font-size: 1rem; margin-bottom: 24px; }

.apilada-datos { display: flex; gap: 34px; flex-wrap: wrap; }
.apilada-datos div span { display: block; font-size: .8rem; color: rgba(20,18,31,.52); }
.apilada-datos div strong { font-size: 1.12rem; font-weight: 600; }

.apilada-visual {
  background: rgba(255,255,255,.62);
  border-radius: var(--r-l);
  min-height: 210px;
  display: grid;
  place-items: center;
  color: rgba(20,18,31,.32);
  font-size: .88rem;
  border: 1px dashed rgba(20,18,31,.16);
  padding: 20px;
  text-align: center;
}

/* ---------- Proceso en pasos ---------- */
.pasos { display: grid; gap: 0; }
.paso {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid var(--borde);
  align-items: start;
}
.paso:last-child { border-bottom: 1px solid var(--borde); }
.seccion-oscura .paso { border-color: rgba(255,255,255,.12); }
.paso .indice {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.1rem;
  color: var(--violeta);
  line-height: 1;
}
.seccion-oscura .paso .indice { color: var(--aqua); }
.paso h3 { margin-bottom: 10px; }
.paso p { color: var(--tinta-media); max-width: 62ch; }
.seccion-oscura .paso p { color: rgba(255,255,255,.62); }
.paso .entrega {
  margin-top: 14px;
  font-size: .86rem;
  color: var(--tinta-suave);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.paso .entrega em {
  font-style: normal;
  background: var(--lavanda);
  color: var(--violeta);
  padding: 5px 12px;
  border-radius: 100px;
}
.seccion-oscura .paso .entrega em { background: rgba(47,224,200,.12); color: var(--aqua); }

/* ---------- Casos / testimonios ---------- */
.caso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.caso:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(20,18,31,.1); }
.caso-imagen {
  height: 210px;
  display: grid;
  place-items: center;
  color: rgba(20,18,31,.34);
  font-size: .86rem;
  text-align: center;
  padding: 16px;
}
.caso-cuerpo { padding: 30px; }
.caso-cuerpo .sector {
  font-family: var(--serif);
  font-style: italic;
  color: var(--violeta);
  font-size: 1rem;
  display: block;
  margin-bottom: 10px;
}
.caso-cuerpo p { color: var(--tinta-media); font-size: .97rem; margin-top: 12px; }
.caso-metricas {
  display: flex;
  gap: 26px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  flex-wrap: wrap;
}
.caso-metricas strong { display: block; font-size: 1.5rem; color: var(--violeta); letter-spacing: -.03em; }
.caso-metricas span { font-size: .8rem; color: var(--tinta-suave); }

.cita {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 36px;
}
.cita blockquote {
  font-size: 1.1rem;
  line-height: 1.55;
  margin-bottom: 24px;
  letter-spacing: -.01em;
}
.cita-autor { display: flex; align-items: center; gap: 14px; }
.cita-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--lavanda);
  color: var(--violeta);
  display: grid; place-items: center;
  font-weight: 600;
}
.cita-autor strong { display: block; font-size: .96rem; }
.cita-autor span { font-size: .84rem; color: var(--tinta-suave); }

/* ---------- Blog ---------- */
.articulo {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.articulo:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(20,18,31,.1); }
.articulo-imagen { height: 190px; display: grid; place-items: center; color: rgba(20,18,31,.3); font-size: .84rem; }
.articulo-cuerpo { padding: 26px; }
.etiqueta-cat {
  display: inline-block;
  font-size: .76rem;
  font-weight: 500;
  color: var(--violeta);
  background: var(--lavanda);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.articulo-cuerpo h3 { font-size: 1.22rem; margin-bottom: 10px; }
.articulo-cuerpo p { font-size: .94rem; color: var(--tinta-media); }
.articulo-meta { margin-top: 18px; font-size: .82rem; color: var(--tinta-suave); }

.destacado {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 34px;
}
.destacado-imagen { min-height: 330px; display: grid; place-items: center; color: rgba(20,18,31,.32); }
.destacado-cuerpo { padding: clamp(30px, 4vw, 52px); align-self: center; }

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo label { font-size: .9rem; font-weight: 500; }
.campo input, .campo select, .campo textarea {
  font-family: var(--fuente);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--blanco);
  color: var(--tinta);
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--violeta);
  box-shadow: 0 0 0 4px rgba(109,74,255,.13);
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.aviso-form {
  font-size: .84rem;
  color: var(--tinta-suave);
  margin-top: 4px;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--borde); }
.faq-item { border-bottom: 1px solid var(--borde); }
.faq-pregunta {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--fuente);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--tinta);
  text-align: left;
  padding: 25px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  letter-spacing: -.01em;
}
.faq-pregunta .mas {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--lavanda);
  color: var(--violeta);
  display: grid; place-items: center;
  font-size: 1.15rem;
  transition: transform .25s ease, background .2s ease;
}
.faq-item.abierto .mas { transform: rotate(45deg); background: var(--violeta); color: #fff; }
.faq-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease, padding .32s ease;
}
.faq-respuesta p { color: var(--tinta-media); padding-bottom: 25px; max-width: 78ch; }
.faq-item.abierto .faq-respuesta { max-height: 340px; }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-caja {
  background: linear-gradient(135deg, var(--violeta) 0%, var(--violeta-oscuro) 55%, #2A1B7A 100%);
  border-radius: var(--r-xl);
  padding: clamp(50px, 7vw, 88px) clamp(28px, 5vw, 70px);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-caja::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.cta-caja > * { position: relative; z-index: 2; }
.cta-caja h2 { color: #fff; margin-bottom: 18px; }
.cta-caja p { color: rgba(255,255,255,.82); max-width: 54ch; margin: 0 auto 34px; }
.cta-caja .btn-principal { background: #fff; color: var(--violeta); box-shadow: 0 8px 26px rgba(0,0,0,.22); }
.cta-caja .btn-principal:hover { background: var(--claro); }
.cta-caja .btn-borde { border-color: rgba(255,255,255,.4); color: #fff; }
.cta-caja .btn-borde:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
.cta-botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Pie ---------- */
.pie {
  background: var(--oscuro);
  color: rgba(255,255,255,.62);
  padding: 76px 0 130px;
}
.pie-rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 42px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pie h4 { color: #fff; margin-bottom: 18px; font-size: .93rem; letter-spacing: .02em; text-transform: uppercase; }
.pie ul li { margin-bottom: 11px; }
.pie ul a { font-size: .95rem; transition: color .18s ease; }
.pie ul a:hover { color: var(--aqua); }
.pie-intro p { font-size: .95rem; margin-top: 16px; max-width: 34ch; }
.pie-abajo {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .87rem;
  color: rgba(255,255,255,.45);
}

/* ---------- Banda de aviso del prototipo ---------- */
.aviso-prototipo {
  background: var(--aqua);
  color: #06201C;
  text-align: center;
  font-size: .87rem;
  font-weight: 500;
  padding: 11px 20px;
}
.aviso-prototipo strong { font-weight: 700; }

/* ============================================================
   TRANSICIÓN ENTRE PÁGINAS
   Una cortina oscura con la malla de puntos de la marca barre la
   pantalla al salir y se retira al entrar.

   ⚠️ Regla de seguridad: la cortina lleva SIEMPRE pointer-events:none,
   así que aunque por lo que sea se quedara visible, nunca bloquearía
   un clic. Y el script de la cabecera la retira a los 1,2 s pase lo
   que pase, sin depender de que la animación llegue a ejecutarse.
   ============================================================ */

html.entrando::before,
html.saliendo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--oscuro-2) 0%, var(--oscuro) 55%, #1B1140 100%);
}

/* Entrada: la cortina ya está puesta y se retira hacia arriba */
html.entrando::before {
  transform-origin: top;
  animation: cortina-fuera .62s cubic-bezier(.7,0,.25,1) forwards;
}

/* Salida: la cortina entra desde abajo antes de cambiar de página */
html.saliendo::before {
  transform-origin: bottom;
  animation: cortina-dentro .42s cubic-bezier(.55,0,.35,1) forwards;
}

@keyframes cortina-fuera {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}
@keyframes cortina-dentro {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.entrando::before,
  html.saliendo::before { display: none; }
}

/* ---------- Entrada del hero ----------
   El contenido del hero entra con un fundido suave que enlaza con la cortina.

   ⚠️ Sin fill-mode y sin delays, a propósito. El estado normal de estos
   elementos es visible; la animación solo añade el movimiento. Si no llega a
   ejecutarse (pestaña oculta, movimiento reducido), el hero se ve igual.
   La sensación de cascada se consigue con duraciones distintas, no con
   retardos: un retardo obligaría a fijar el fotograma inicial (invisible)
   mientras espera, y ese es justo el fallo que nos costó media tarde. */
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.hero-red                  { animation: hero-entra 1.4s ease-out; }
.hero-centro .prueba-social{ animation: hero-entra .55s cubic-bezier(.2,.7,.3,1); }
.hero-centro .pildora      { animation: hero-entra .68s cubic-bezier(.2,.7,.3,1); }
.hero-centro h1            { animation: hero-entra .84s cubic-bezier(.2,.7,.3,1); }
.hero-centro .plomo        { animation: hero-entra .98s cubic-bezier(.2,.7,.3,1); }
.hero-centro .hero-botones { animation: hero-entra 1.1s cubic-bezier(.2,.7,.3,1); }
.hero-centro .hero-nota    { animation: hero-entra 1.2s cubic-bezier(.2,.7,.3,1); }
.hero .metricas            { animation: hero-entra 1.3s cubic-bezier(.2,.7,.3,1); }

/* Una vez terminada la entrada, el script retira las animaciones para que el
   estado final no dependa de ellas en ningún caso. */
.hero.hero-listo .hero-red,
.hero.hero-listo .hero-centro > *,
.hero.hero-listo .metricas { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-red,
  .hero-centro > *,
  .hero .metricas { animation: none; }
}

/* ---------- Animación de entrada ----------
   Diseñada para no poder fallar: por defecto TODO es visible. El contenido solo
   se oculta si el script confirmó que puede volver a mostrarlo (clase js-revelar
   en <html>), y la reaparición usa una animación con "forwards", que fija el
   estado final, en vez de una transición que puede quedarse a medias. */
.revelar { opacity: 1; }

html.js-revelar .revelar {
  opacity: 0;
  transform: translateY(26px);
}
/* El estado final se declara en CSS, NO se delega a la animación.
   Motivo: las animaciones no se ejecutan en pestañas ocultas ni en contenido
   que el navegador no está pintando, y si el estado final dependiera de ellas
   el bloque se quedaría invisible. Así, la animación solo aporta el movimiento:
   si no llega a correr, el contenido se ve igual, sin transición. */
html.js-revelar .revelar.visible {
  opacity: 1;
  transform: none;
  /* Sin fill-mode a propósito: "both" o "backwards" fijarían el fotograma
     inicial (opacidad 0) mientras la animación no arranca, y en una pestaña
     oculta eso deja el bloque invisible. Sin fill-mode manda el valor
     declarado arriba, y la animación solo aporta el movimiento cuando corre. */
  animation: aparecer .6s cubic-bezier(.2,.7,.3,1);
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js-revelar .revelar { opacity: 1; transform: none; }
  .apilada { position: static; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .destacado { grid-template-columns: 1fr; }
  .destacado-imagen { min-height: 220px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 34px; }
  .apilada { grid-template-columns: 1fr; }
  .apilada-visual { min-height: 160px; order: -1; }
}

@media (max-width: 720px) {
  section { padding: 62px 0; }
  .campo-doble { grid-template-columns: 1fr; }
  .paso { grid-template-columns: 1fr; gap: 12px; }
  .paso .indice { font-size: 1.7rem; }
  .metricas { grid-template-columns: 1fr 1fr; gap: 26px; }
  .apilada { position: static; margin-bottom: 18px; }
  .hero-botones .btn, .cta-botones .btn { width: 100%; justify-content: center; }

  /* ---------- Navegación móvil ----------
     Barra inferior con icono sobre etiqueta y botón central elevado, siguiendo
     la referencia que mandó el cliente (captura de designmonks.agency en móvil). */
  .nav-flotante {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    max-width: none;
    border-radius: 22px;
    padding: 8px 6px;
    justify-content: space-around;
    gap: 0;
  }

  .nav-flotante .solo-escritorio { display: none; }

  .nav-flotante a,
  .nav-flotante .nav-mas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
    border-radius: 14px;
    background: none;
    border: 0;
    font-family: var(--fuente);
    cursor: pointer;
    color: rgba(255,255,255,.7);
  }

  .nav-flotante .nav-icono {
    display: block;
    font-size: 1.22rem;
    line-height: 1;
  }
  .nav-flotante .nav-texto { font-size: .68rem; letter-spacing: .01em; }

  .nav-flotante a.activo,
  .nav-flotante .nav-mas.activo { background: none; color: #fff; }
  .nav-flotante a.activo .nav-icono,
  .nav-flotante .nav-mas.activo .nav-icono { color: var(--aqua); }

  /* Botón central elevado. Se anula el order de escritorio para que quede
     en medio, entre Solutions y Stories, como en la referencia del cliente. */
  .nav-flotante a.nav-cta {
    order: 0;
    flex: 0 0 auto;
    width: 58px; height: 58px;
    margin-top: -26px;
    border-radius: 20px;
    justify-content: center;
    gap: 0;
    box-shadow: 0 8px 22px rgba(109,74,255,.55);
    border: 3px solid var(--oscuro);
  }
  .nav-flotante a.nav-cta .nav-icono { font-size: 1.35rem; }
  .nav-flotante a.nav-cta .nav-texto { display: none; }

  .nav-flotante .nav-mas { display: flex; }

  /* Sábana con el resto de enlaces */
  .nav-sabana {
    display: block;
    position: fixed;
    left: 12px; right: 12px;
    bottom: 92px;
    z-index: 99;
    background: rgba(10, 9, 18, .97);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 18px 50px rgba(10,9,18,.5);
  }
  .nav-sabana[hidden] { display: none; }
  .nav-sabana a {
    display: block;
    padding: 13px 16px;
    border-radius: 12px;
    color: rgba(255,255,255,.82);
    font-size: .95rem;
  }
  .nav-sabana a:hover, .nav-sabana a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }

  /* Sitio para que el contenido no quede debajo de la barra */
  .pie { padding-bottom: 150px; }
}

@media (max-width: 480px) {
  .pie-rejilla { grid-template-columns: 1fr; }
  .tarjeta { padding: 26px; }
  .caso-metricas { gap: 18px; }
  .metricas { grid-template-columns: 1fr; text-align: left; }
}