/* ============================================================
   misavatares estudio — sistema de diseño (estudio.misavatares.com)
   Misma familia visual que misavatares.com (página oficial de
   Apple + iOS Liquid Glass), con personalidad "estudio":
   más sobria, más blanco, menos cristal, una sola banda oscura
   de impacto por página (showcase en portada, cierre del manifiesto).
   Tipografía del sistema. CTA primaria azul sólida.
   Regla de la casa: la información JAMÁS depende solo del color.
   ============================================================ */

/* ---------- Tokens (compartidos con la web del producto) ---------- */

:root {
  /* Fondo y tinta (grises Apple) */
  --fondo: #fbfbfd;
  --fondo-2: #f5f5f7;
  --fondo-3: #ffffff;
  --tinta: #1d1d1f;
  --tinta-suave: #515154;
  --tinta-tenue: #6e6e73;

  /* Acento: azul Apple. AA sobre blanco (4.6:1). */
  --acento: #0071e3;
  --acento-vivo: #0077ed;
  --acento-tinta: #ffffff;
  --acento-suave: rgba(0, 113, 227, 0.08);
  --acento-oscuro: #2997ff; /* azul legible sobre negro */

  /* Líneas hairline */
  --linea: rgba(0, 0, 0, 0.08);
  --linea-fuerte: rgba(0, 0, 0, 0.16);

  /* Cristal claro */
  --cristal: rgba(255, 255, 255, 0.65);
  --cristal-panel: rgba(255, 255, 255, 0.72);
  --cristal-borde: rgba(255, 255, 255, 0.55);
  --cristal-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Cristal oscuro (bandas #000) */
  --cristal-osc: rgba(28, 28, 30, 0.55);
  --cristal-osc-borde: rgba(255, 255, 255, 0.14);

  /* Profundidad: contacto + ambiente */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 16px 48px rgba(0, 0, 0, 0.10);
  --sombra-3: 0 4px 12px rgba(0, 0, 0, 0.07), 0 32px 80px rgba(0, 0, 0, 0.16);

  /* Tipografía del sistema */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  /* Geometría */
  --radio: 24px;
  --radio-peq: 14px;
  --radio-pill: 980px;
  --ancho: 1100px;      /* el estudio respira: columna algo más contenida */
  --max-text: 44rem;

  /* La curva de Apple */
  --curva: cubic-bezier(0.28, 0.11, 0.32, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ---------- El ambiente: blobs de color muy suaves tras el cristal.
   Versión estudio: aún más contenida que en el producto. ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 16% -8%, rgba(88, 134, 255, 0.09), transparent 62%),
    radial-gradient(950px 700px at 90% 12%, rgba(168, 120, 255, 0.07), transparent 60%),
    radial-gradient(920px 720px at 50% 108%, rgba(255, 176, 130, 0.08), transparent 64%);
}

img, svg, video { max-width: 100%; display: block; }

a { color: var(--tinta); text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--acento); }
p a, li a { color: var(--acento); text-decoration: none; }
p a:hover, li a:hover { text-decoration: underline; text-decoration-color: var(--acento); }

::selection { background: rgba(0, 113, 227, 0.2); color: var(--tinta); }

.wrap {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* ---------- Tipografía ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.4vw, 5.5rem); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); margin-bottom: 0.45em; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.2rem, 2.3vw, 1.45rem); margin-bottom: 0.4em; letter-spacing: -0.015em; line-height: 1.22; }

.titulo-pagina { font-size: clamp(2.1rem, 5vw, 4.2rem); }

p { max-width: var(--max-text); }

.no-partir { white-space: nowrap; }
/* en pantallas ultraestrechas (<330px) se libera para no desbordar */
@media (max-width: 330px) { .no-partir { white-space: normal; } }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1.1em;
}

.lead {
  color: var(--tinta-suave);
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.006em;
  max-width: 54ch;
}

/* ---------- Navegación: píldora flotante de cristal ---------- */

.site-header {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 100;
  padding: 0 clamp(12px, 3vw, 24px);
  background: transparent;
}

.nav {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  height: 52px;
  padding: 0 8px 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--radio-pill);
  background: var(--cristal);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--cristal-borde);
  box-shadow: var(--cristal-brillo), 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.08);
}

.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.14rem;
  letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
  color: var(--tinta);
  /* Área táctil ≥44px sin cambiar el aspecto */
  display: inline-flex; align-items: center; min-height: 44px;
}
.brand .dot { color: var(--acento); }
/* inline-flex colapsa el espacio del HTML: lo restituye el margen */
.brand .sub-marca { font-weight: 500; color: var(--tinta-tenue); margin-left: 0.28em; }

.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav-links a {
  text-decoration: none; font-size: 0.92rem; font-weight: 500;
  color: var(--tinta-suave); transition: color 0.2s var(--curva);
  padding: 8px 0; display: inline-block;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--tinta); }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--tinta); font-weight: 600; }
.nav-links a.btn { padding: 8px 16px; }
.nav-links a.btn-primario,
.nav-links a.btn-primario:hover,
.nav-links a.btn-primario:focus-visible { color: var(--acento-tinta); }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--linea);
  color: var(--tinta); border-radius: var(--radio-pill); padding: 9px 16px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; cursor: pointer;
  min-height: 44px;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav { padding-right: 10px; }
  .nav-links {
    display: none;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--cristal-borde);
    border-radius: 22px;
    box-shadow: var(--cristal-brillo), var(--sombra-3);
    padding: 8px;
    overflow: hidden;
  }
  .nav-links.abierto { display: flex; }
  .nav-links li { border-top: 1px solid var(--linea); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 14px 18px; font-size: 1.02rem; min-height: 44px; border-radius: 12px; }
  .nav-links a:hover { background: rgba(0, 0, 0, 0.04); }
  .nav-links a.btn { margin: 10px 10px 6px; text-align: center; }
}

/* Los anclajes (#casos, #preguntas…) no deben quedar bajo la píldora */
[id] { scroll-margin-top: 90px; }

/* ---------- Botones: pastillas ---------- */

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 1.02rem;
  padding: 13px 26px; border-radius: var(--radio-pill); border: 1px solid transparent;
  line-height: 1.35; min-height: 44px; text-align: center;
  transition: transform 0.25s var(--curva), background 0.25s var(--curva),
              border-color 0.25s var(--curva), box-shadow 0.25s var(--curva);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* CTA primaria: azul sólido, innegociable */
.btn-primario { background: var(--acento); color: var(--acento-tinta); box-shadow: var(--sombra-1); }
.btn-primario:hover, .btn-primario:focus-visible { background: var(--acento-vivo); color: var(--acento-tinta); box-shadow: var(--sombra-2); }

/* Secundario: cristal */
.btn-secundario {
  background: rgba(255, 255, 255, 0.6);
  color: var(--tinta);
  border-color: var(--linea);
  box-shadow: var(--cristal-brillo), var(--sombra-1);
}
.btn-secundario:hover, .btn-secundario:focus-visible { border-color: var(--linea-fuerte); background: rgba(255, 255, 255, 0.85); box-shadow: var(--sombra-2); }

.btn-grande { font-size: 1.08rem; padding: 16px 32px; }

/* Enlace subordinado: nunca compite en peso visual con el CTA primario */
.enlace-discreto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta-tenue);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
}
.enlace-discreto:hover, .enlace-discreto:focus-visible { color: var(--tinta); text-decoration: underline; }

/* ---------- Secciones: compactas, con el aire mínimo que pide el cristal ---------- */

section { padding: clamp(44px, 6vw, 72px) 0; }

.section-line { border-top: 1px solid var(--linea); }

/* ---------- Hero ---------- */

.hero { padding: clamp(26px, 3.5vw, 48px) 0 clamp(22px, 3vw, 40px); }

/* Hero en dos columnas: mensaje + anuncio en vídeo */
.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.hero-main { display: flex; flex-direction: column; min-width: 0; }
.hero-acciones { margin-top: clamp(22px, 2.6vw, 30px); }
.hero-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow-x: clip;   /* recorta el sobrante lateral del coverflow (sin scroll horizontal) y deja respirar el glow en vertical */
}
.hero-carrusel {
  position: relative;
  width: 100%;
  max-width: 270px;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: var(--sombra-3);
  border: 1px solid var(--cristal-borde);
  background: #000;
  isolation: isolate;
}
/* Fuerza altura 9:16 exacta relativa al ancho (16/9 = 177.78%). Robusto en todo Safari, a diferencia de aspect-ratio con hijos absolutos. */
.hero-carrusel::before {
  content: "";
  display: block;
  padding-bottom: 177.78%;
}
.hc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  opacity: 0;
  transition: opacity 0.9s var(--curva);
}
.hc-video.activo { opacity: 1; }
.hero-video-nota {
  font-size: 0.82rem;
  color: var(--tinta-tenue);
  letter-spacing: 0.01em;
}
@media (max-width: 820px) {
  /* en móvil el vídeo entra entre el titular y el CTA (es la prueba, tiene que verse pronto) */
  .hero-grid { display: flex; flex-direction: column; gap: clamp(22px, 4vw, 30px); }
  .hero-main { display: contents; }
  .hero-texto { order: 1; }
  .hero-video { order: 2; }
  .hero-acciones { order: 3; margin-top: 0; }
  .hero-carrusel { max-width: 224px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-video { transition: none; }
}

/* ---------- Página Aplicar: formulario + panel de avatares ---------- */
.aplicar-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.aplicar-panel {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aplicar-panel .hero-carrusel { max-width: 100%; }
.panel-nota {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--tinta-tenue);
  text-align: center;
  max-width: none;
}
.panel-nota b {
  display: block;
  margin-bottom: 4px;
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 650;
  color: var(--tinta, #1d1d1f);
  letter-spacing: -0.01em;
}
.panel-puntos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.panel-puntos li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  max-width: none;
}
.panel-puntos li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--acento);
  font-weight: 700;
}
@media (max-width: 900px) {
  .aplicar-grid { grid-template-columns: 1fr; gap: 24px; }
  .aplicar-panel {
    position: static;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }
  .aplicar-panel .hero-carrusel { max-width: 150px; }
  .panel-nota, .panel-puntos { flex: 1; min-width: 180px; text-align: left; }
}

.hero h1 {
  max-width: 17ch;
  margin-bottom: 0.42em;
  /* GRANDE pero un punto menor: el vídeo manda, y sale a 2 líneas */
  font-size: clamp(2rem, 1rem + 3.3vw, 3.75rem);
  line-height: 1.05;
}

.hero .lead {
  margin-bottom: 0.5em;
  max-width: 30ch;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 400;
  color: var(--tinta-suave);
  line-height: 1.38;
  letter-spacing: -0.01em;
}
.hero .lead b { color: var(--tinta); font-weight: 600; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}

.hero-nota { font-size: 0.92rem; color: var(--tinta-tenue); letter-spacing: 0.01em; }

/* ---------- Showcase: banda oscura con los ads reales ---------- */

.showcase {
  background: #000;
  color: #f5f5f7;
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 60px) 0;
}
.showcase::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 560px at 15% 8%, rgba(60, 110, 255, 0.16), transparent 62%),
    radial-gradient(900px 560px at 88% 92%, rgba(255, 140, 90, 0.10), transparent 62%);
}
.showcase > * { position: relative; }

.showcase-cabecera { margin-bottom: clamp(22px, 3.5vw, 36px); }
.showcase-cabecera .eyebrow { color: var(--acento-oscuro); margin-bottom: 0.9em; }
.showcase-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: #a1a1a6;
  line-height: 1.5;
  max-width: 52ch;
}

/* Pista: por defecto, carril con scroll-snap (móvil y sin JS) */
.marquee {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* aire para que la sombra de las tarjetas no se recorte */
  padding: 6px 0 22px;
}
.marquee::-webkit-scrollbar { display: none; }

.marquee-pista {
  display: flex;
  width: max-content;
  list-style: none;
  padding-inline: max(24px, calc((100vw - var(--ancho)) / 2));
}

.tarjeta-ad {
  position: relative;
  flex: none;
  width: clamp(200px, 17vw + 96px, 262px);
  margin-right: clamp(14px, 1.8vw, 24px);
  border-radius: 28px;
  overflow: hidden;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.55);
  scroll-snap-align: center;
  transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva);
}
/* Altura 9:16 exacta relativa al ancho (robusto en todo Safari) */
.tarjeta-ad::before { content: ""; display: block; padding-bottom: 177.78%; }
.tarjeta-ad:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 36px 90px rgba(0, 0, 0, 0.65); }

.tarjeta-ad video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover !important; display: block; }

/* Marquee en bucle (lo activa el JS en pantallas grandes, duplicando la pista) */
@keyframes desliza-marquee {
  to { transform: translateX(-50%); }
}
.marquee-pista.en-bucle {
  padding-inline: 0;
  animation: desliza-marquee 55s linear infinite;
}
.marquee:has(.en-bucle) { overflow: hidden; }
.marquee:has(.en-bucle):hover .marquee-pista,
.marquee:has(.en-bucle):focus-within .marquee-pista { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee-pista.en-bucle { animation: none; }
  .marquee:has(.en-bucle) { overflow-x: auto; }
}

.showcase-nota {
  display: block;
  font-size: 0.92rem;
  color: #a1a1a6;
  margin-top: 8px;
}

/* ---------- Banda oscura de impacto (cierre del manifiesto) ---------- */

.seccion-oscura {
  background: #000;
  color: #f5f5f7;
  position: relative;
  overflow: hidden;
  border-top: none;
}
.seccion-oscura::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 18% 0%, rgba(60, 110, 255, 0.14), transparent 60%),
    radial-gradient(800px 520px at 85% 100%, rgba(150, 90, 255, 0.10), transparent 60%);
}
.seccion-oscura > * { position: relative; }
.seccion-oscura h1, .seccion-oscura h2, .seccion-oscura h3 { color: #f5f5f7; }
.seccion-oscura .eyebrow { color: var(--acento-oscuro); }
.seccion-oscura .lead, .seccion-oscura .texto-suave { color: #a1a1a6; }
.seccion-oscura .lead strong { color: #f5f5f7; }
.seccion-oscura .hero-nota { color: #a1a1a6; }
.seccion-oscura p a, .seccion-oscura li a { color: var(--acento-oscuro); }
.seccion-oscura .btn-secundario {
  background: rgba(255, 255, 255, 0.1); color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.seccion-oscura .btn-secundario:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- Rejillas ---------- */

.grid-2 { display: grid; gap: clamp(22px, 4vw, 48px); }
.grid-2 > * { min-width: 0; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-3 > * { min-width: 0; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Citas / manifiesto (extracto en portada) ---------- */

.cita-bloque {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 26ch;
  text-wrap: balance;
}
.cita-bloque em { font-style: normal; color: var(--acento); }

.firma {
  margin-top: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* ---------- Fases (metodología): línea de tiempo sobria ---------- */

.fases {
  list-style: none;
  position: relative;
  max-width: 56rem;
}

.fase {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(20px, 3.5vw, 38px);
  padding: clamp(20px, 3vw, 32px) 0;
  position: relative;
}
.fase + .fase { border-top: 1px solid var(--linea); }

.fase-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--acento);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--linea);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  line-height: 1;
  box-shadow: var(--cristal-brillo), var(--sombra-1);
}

/* línea vertical que conecta las fases */
.fase::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--linea);
  z-index: -1;
}
.fase:first-child::before { top: clamp(20px, 3vw, 32px); }
.fase:last-child::before { bottom: auto; height: clamp(20px, 3vw, 32px); }

.fase h3 { margin-bottom: 0.4em; padding-top: 0.6rem; }

.fase .fase-tiempo {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 0.95rem;
}

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

.fase .entregable {
  margin-top: 1.15rem;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  background: var(--cristal-panel);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--linea);
  outline-offset: -1px;
  border-radius: var(--radio-peq);
  padding: 14px 18px;
  box-shadow: var(--cristal-brillo), var(--sombra-1);
}
.fase .entregable strong { color: var(--tinta); font-weight: 600; }

/* ---------- Cards: lectura de cristal SIN blur (el blur se reserva) ---------- */

.card {
  background: var(--cristal-panel);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--linea);
  outline-offset: -1px;
  border-radius: var(--radio);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: var(--cristal-brillo), var(--sombra-1);
  transition: box-shadow 0.25s var(--curva), transform 0.25s var(--curva);
}
.card:hover { box-shadow: var(--cristal-brillo), var(--sombra-2); transform: translateY(-2px); }

/* Plan recomendado: el que queremos que se cierre. Se distingue por forma
   (anillo azul + elevación), no solo por color — regla de la casa. */
.card-destacada {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
  box-shadow: var(--cristal-brillo), var(--sombra-2);
  transform: translateY(-4px);
}
.card-destacada:hover { transform: translateY(-6px); box-shadow: var(--cristal-brillo), var(--sombra-3); }
@media (max-width: 760px) {
  .card-destacada { transform: none; }
  .card-destacada:hover { transform: translateY(-2px); }
}

/* ---------- Cifras de impacto bajo el hero ---------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  margin: clamp(34px, 5vw, 56px) auto 0;
  max-width: 580px;
  padding: clamp(16px, 3vw, 24px) clamp(6px, 1.5vw, 14px);
  background: var(--cristal);
  border: 1px solid var(--cristal-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.cifra {
  position: relative;
  text-align: center;
  padding: 0 clamp(4px, 2vw, 18px);
}
/* separadores finos entre columnas (Apple-native) */
.cifra + .cifra::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 58%;
  width: 1px;
  background: var(--cristal-borde);
}
.cifra dt {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.cifra dd {
  margin-top: 7px;
  font-size: clamp(0.7rem, 2.3vw, 0.86rem);
  line-height: 1.3;
  color: var(--tinta-tenue);
  text-wrap: balance;
}

.card h3 { margin-bottom: 0; }
.card p { color: var(--tinta-suave); font-size: 0.99rem; }

.card .marca-unico {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-suave);
  border: 1px solid rgba(0, 113, 227, 0.35);
  border-radius: var(--radio-pill);
  padding: 5px 13px;
}

/* ---------- Casos (placeholders honestos) ---------- */

.caso {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  padding: clamp(26px, 3vw, 36px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}

.caso .caso-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.caso .caso-estado {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}

.caso p { color: var(--tinta-suave); font-size: 0.95rem; }

/* ---------- Listas filtro (para ti / no para ti) ---------- */

.filtro {
  background: var(--cristal-panel);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--linea);
  outline-offset: -1px;
  border-radius: var(--radio);
  padding: clamp(26px, 3.5vw, 38px);
  box-shadow: var(--cristal-brillo), var(--sombra-1);
}

.filtro ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }

.filtro li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  color: var(--tinta-suave);
}

.filtro .signo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  background: var(--fondo-2);
  color: var(--tinta);
  margin-top: 0.2rem;
}
.filtro-si .signo { border-color: rgba(0, 113, 227, 0.4); color: var(--acento); background: var(--acento-suave); }

.filtro h3 { margin-bottom: 1.4rem; }
.filtro .filtro-sub {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 0.5rem;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq details {
  background: var(--cristal-panel);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--linea);
  outline-offset: -1px;
  border-radius: 18px;
  box-shadow: var(--cristal-brillo), var(--sombra-1);
  transition: box-shadow 0.25s var(--curva);
}
.faq details[open] { box-shadow: var(--cristal-brillo), var(--sombra-2); }

.faq summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  letter-spacing: -0.01em;
  padding: 19px 54px 19px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
  border-radius: 18px;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--acento);
  transition: transform 0.25s var(--curva);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq .faq-cuerpo { padding: 0 22px 22px; color: var(--tinta-suave); }
.faq .faq-cuerpo p { max-width: 68ch; }
.faq .faq-cuerpo p + p { margin-top: 0.9rem; }

/* ---------- CTA final ---------- */

.cta-final { text-align: center; }
.cta-final h2 { margin-inline: auto; max-width: 22ch; }
.cta-final .lead { margin-inline: auto; margin-bottom: 1.5em; }
.cta-final .hero-nota { display: block; margin-top: 1.2rem; }

/* ---------- Página de texto (manifiesto, legal, método, formulario) ---------- */

.pagina-texto > section:first-child,
.pagina-texto > article > section:first-child { padding-top: clamp(48px, 7vw, 88px); }

.prosa { max-width: var(--max-text); }
.prosa h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.prosa h3 { margin: 2rem 0 0.7rem; }
.prosa p + p { margin-top: 1.15rem; }
.prosa p, .prosa li { color: var(--tinta-suave); }
.prosa ul, .prosa ol { margin: 1.15rem 0 1.15rem 1.4rem; }
.prosa li + li { margin-top: 0.5rem; }
.prosa strong { color: var(--tinta); }

.prosa .destacado {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--tinta);
  margin: 2.2rem 0;
  padding: 22px 26px;
  background: var(--cristal-panel);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--linea);
  outline-offset: -1px;
  border-left: 3px solid var(--acento);
  border-radius: 6px 18px 18px 6px;
  box-shadow: var(--cristal-brillo), var(--sombra-1);
}

.manifiesto-cuerpo p {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.7;
  color: var(--tinta-suave);
}
.manifiesto-cuerpo p + p { margin-top: 1.25rem; }
.manifiesto-cuerpo .grande {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--tinta);
  text-wrap: balance;
}
.manifiesto-cuerpo .grande strong { font-weight: 600; }

/* ---------- Formulario: campos de cristal ---------- */

.formulario {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.campo { display: flex; flex-direction: column; gap: 0.55rem; }

.campo label { font-size: 0.95rem; font-weight: 600; color: var(--tinta); }

.campo .ayuda { font-size: 0.85rem; color: var(--tinta-tenue); margin-top: -0.2rem; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="url"],
.campo select,
.campo textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-peq);
  color: var(--tinta);
  font: inherit;
  padding: 13px 16px;
  min-height: 48px;
  box-shadow: var(--cristal-brillo);
  transition: border-color 0.2s var(--curva), box-shadow 0.2s var(--curva), background 0.2s var(--curva);
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-tenue); }

.campo textarea { min-height: 7.5rem; resize: vertical; }

.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-tenue); }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  background: #fff;
  box-shadow: 0 0 0 4px var(--acento-suave);
}

.campo-radio fieldset {
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--linea);
  outline-offset: -1px;
  border-radius: 18px;
  background: var(--cristal-panel);
  box-shadow: var(--cristal-brillo), var(--sombra-1);
  padding: 16px 20px 20px;
}
.campo-radio legend { font-size: 0.95rem; font-weight: 600; padding: 0 8px; }
.campo-radio .opciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.campo-radio .opciones label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  font-weight: 400;
  color: var(--tinta-suave);
  cursor: pointer;
  padding: 8px 10px;
  min-height: 40px;
  border-radius: 12px;
  transition: background 0.15s var(--curva);
}
.campo-radio .opciones label:hover { background: rgba(0, 0, 0, 0.04); }
.campo-radio input {
  margin-top: 0.3rem;
  accent-color: var(--acento);
  width: 1.05rem;
  height: 1.05rem;
}

.campo-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.campo-check input {
  margin-top: 0.25rem;
  accent-color: var(--acento);
  width: 1.05rem;
  height: 1.05rem;
}

/* honeypot: fuera de vista para humanos, presente para bots */
.campo-web2 {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-error {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--linea);
  outline-offset: -1px;
  border-left: 3px solid var(--tinta);
  border-radius: 6px 14px 14px 6px;
  background: var(--cristal-panel);
  box-shadow: var(--cristal-brillo), var(--sombra-1);
  padding: 16px 19px;
  font-size: 0.95rem;
  color: var(--tinta);
}
.form-error.visible { display: block; }
.form-error strong { display: block; margin-bottom: 0.3rem; }

/* ---------- Pie ---------- */

.site-footer {
  border-top: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.55);
  padding: 48px 0 calc(32px + env(safe-area-inset-bottom));
  font-size: 0.92rem;
  color: var(--tinta-suave);
}

.footer-grid { display: grid; gap: 28px; margin-bottom: 32px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.site-footer .brand { font-size: 1.1rem; }
.site-footer p { font-size: 0.92rem; }

.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.site-footer a { color: var(--tinta-suave); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--tinta); text-decoration: underline; }
/* la marca del pie no es un enlace más */
.site-footer a.brand,
.site-footer a.brand:hover,
.site-footer a.brand:focus-visible { color: var(--tinta); text-decoration: none; }

.footer-titulo {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.footer-legal {
  border-top: 1px solid var(--linea);
  padding-top: 24px;
  font-size: 0.85rem;
  color: var(--tinta-tenue);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
}
.footer-legal a { color: var(--tinta-tenue); }

.sello-ia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.72);
  padding: 6px 14px;
  color: var(--tinta-suave);
  box-shadow: var(--cristal-brillo);
}

/* ---------- Aparición al hacer scroll (la activa main.js; sin JS nada se oculta) ---------- */

.revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
}
.revelar.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
}

/* ---------- Utilidades ---------- */

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.centrado { text-align: center; }
.texto-suave { color: var(--tinta-suave); }
.texto-mute { color: var(--tinta-tenue); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: #fff;
  padding: 12px 19px;
  z-index: 200;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radio-peq) 0;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Accesibilidad ---------- */

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}

/* ---------- Fallbacks del cristal ---------- */

@supports not (backdrop-filter: blur(1px)) {
  .nav { background: rgba(255, 255, 255, 0.94); }
  .nav-links { background: #ffffff; }
}

@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  .nav, .nav-links { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card, .filtro, .faq details, .fase .entregable, .prosa .destacado,
  .campo-radio fieldset, .form-error, .fase-num, .sello-ia { background: #ffffff; }
  .caso { background: var(--fondo-2); }
  .site-footer { background: var(--fondo-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   INTRO — preloader con barra + reveal del hero palabra a palabra
   ============================================================ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.7s var(--curva);
}
#preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 460px at 16% 22%, rgba(255,176,120,0.12), transparent 62%),
    radial-gradient(520px 420px at 84% 82%, rgba(168,120,255,0.07), transparent 60%);
}
#preloader.oculto { opacity: 0; pointer-events: none; }
.preloader-inner { position: relative; text-align: center; padding: 0 24px; }
.preloader-texto {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3.1rem);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(8px);
  animation: preAparece 0.7s var(--curva) 0.1s forwards;
}
.preloader-texto em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
}
@keyframes preAparece { to { opacity: 1; transform: translateY(0); } }
.preloader-barra {
  display: block;
  width: min(280px, 60vw);
  height: 1px;
  margin: 24px auto 0;
  background: rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
}
.preloader-barra i {
  position: absolute;
  left: 0; top: 0; height: 100%;
  width: 0;
  background: #fff;
  animation: preCarga 1.9s var(--curva) 0.15s forwards;
}
@keyframes preCarga { to { width: 100%; } }

/* Reveal del titular palabra a palabra (sube desde abajo) */
.reveal-palabras span { display: inline-block; }
.intro-activa .reveal-palabras span { opacity: 0; transform: translateY(0.5em); }
.intro-lista .reveal-palabras span {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s var(--curva);
}
.intro-lista .reveal-palabras span:nth-child(1) { transition-delay: 0.06s; }
.intro-lista .reveal-palabras span:nth-child(2) { transition-delay: 0.15s; }
.intro-lista .reveal-palabras span:nth-child(3) { transition-delay: 0.24s; }
.intro-lista .reveal-palabras span:nth-child(4) { transition-delay: 0.33s; }

@media (prefers-reduced-motion: reduce) {
  #preloader { display: none; }
  .reveal-palabras span { opacity: 1 !important; transform: none !important; }
}

/* ---------- Comparativa: la forma de siempre vs nosotros ---------- */
.comparativa { align-items: stretch; }
.comp-col {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(24px, 3vw, 34px);
  background: var(--fondo-3);
}
.comp-destacada { border: 2px solid var(--tinta); box-shadow: var(--sombra-2); }
.comp-titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 16px; }
.comp-lista { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.comp-lista li { position: relative; padding-left: 30px; font-size: 0.98rem; max-width: none; line-height: 1.4; }
.comp-lista li::before { position: absolute; left: 0; top: -1px; font-weight: 700; font-size: 1.05rem; }
.comp-no li { color: var(--tinta-tenue); }
.comp-no li::before { content: "\2715"; color: var(--tinta-tenue); }
.comp-si li { color: var(--tinta); }
.comp-si li::before { content: "\2713"; color: var(--acento); }

/* Lista con check (sección productora) */
.lista-check { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lista-check li { position: relative; padding-left: 26px; font-size: 0.98rem; color: var(--tinta-suave); max-width: none; line-height: 1.4; }
.lista-check li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--acento); font-weight: 700; }

/* ---------- Tier premium: Marca Personal ---------- */
.tier-premium {
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  padding: clamp(24px, 3.2vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  background: var(--fondo-3);
  box-shadow: var(--sombra-2);
}
.tier-premium h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 0.3em; }
.tier-premium .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .tier-premium { flex-direction: column; align-items: flex-start; }
  .tier-premium .btn { width: 100%; text-align: center; }
}

/* ---------- Intro v2: marca viva + firma (identidad misavatares) ---------- */
.pre-marca {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translateY(10px);
  animation: preMarca 0.9s var(--curva) 0.2s forwards;
}
.pre-punto {
  color: var(--acento-oscuro);
  display: inline-block;
  transform-origin: center 70%;
  text-shadow: 0 0 22px rgba(41, 151, 255, 0.75);
  animation: prePunto 1.5s ease 1.0s infinite;
}
@keyframes preMarca {
  from { opacity: 0; transform: translateY(10px); letter-spacing: 0.12em; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: -0.03em; }
}
@keyframes prePunto {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.4);  opacity: 0.65; }
}
.pre-firma {
  display: block;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.85rem, 1.7vw, 1.1rem);
  letter-spacing: 0.01em;
  opacity: 0;
  animation: preAparece 0.9s ease 0.75s forwards;
}
/* barra de carga en el azul de marca */
.preloader-barra i { background: var(--acento-oscuro); }
@media (prefers-reduced-motion: reduce) {
  .pre-marca, .pre-firma { opacity: 1; transform: none; animation: none; }
  .pre-punto { animation: none; }
}

/* ---------- Intro v3: frase que despierta + marca misavatares.com ---------- */
.pre-frase {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.7rem);
  letter-spacing: -0.025em;
  opacity: 0;
  transform: translateY(10px);
  animation: preMarca 0.9s var(--curva) 0.2s forwards;
}
.pre-frase em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
}
.pre-marca {
  display: block;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  letter-spacing: 0.005em;
  opacity: 0;
  animation: preAparece 0.9s ease 0.75s forwards;
}
.pre-marca .pre-punto { color: var(--acento-oscuro); font-weight: 700; }

/* ---------- Intro v4: "Escala sin límites" palabra a palabra, premium suave ---------- */
.pre-frase { animation: none !important; opacity: 1 !important; transform: none !important; }
.pre-frase > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(4px);
}
.pre-frase > span:nth-child(1) { animation: prePalabra 0.85s cubic-bezier(0.22,0.7,0.25,1) 0.25s forwards; }
.pre-frase > span:nth-child(2) { animation: prePalabra 0.85s cubic-bezier(0.22,0.7,0.25,1) 0.48s forwards; }
.pre-frase > span:nth-child(3) { animation: prePalabra 0.85s cubic-bezier(0.22,0.7,0.25,1) 0.71s forwards; }
@keyframes prePalabra {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pre-em { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; }
/* la marca entra tras la frase; barra un poco más larga para que se disfrute */
.pre-marca { animation: preAparece 0.9s ease 1.55s forwards; }
.preloader-barra i { animation: preCarga 2.3s var(--curva) 0.2s forwards; }
@media (prefers-reduced-motion: reduce) {
  .pre-frase > span { opacity: 1; transform: none; filter: none; animation: none; }
}

/* ============================================================
   iOS 26 · LIQUID GLASS — capa de mejora de diseño (jul 2026)
   Materiales translúcidos por capas, borde especular, esquinas
   continuas, profundidad suave y "chosen" por tinte + glow (no
   por borde negro). No cambia la estructura ni el contenido.
   ============================================================ */
:root {
  --radio: 26px;
  --radio-peq: 15px;
  --radio-grande: 34px;

  --vidrio-blur: saturate(180%) blur(22px);
  /* borde especular tipo cristal líquido: brillo arriba + anillo + rebote inferior */
  --vidrio-luz:
    inset 0 1.2px 0.5px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 -16px 34px -22px rgba(255, 255, 255, 0.55);
  --vidrio-sombra:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 12px 26px -10px rgba(16, 24, 40, 0.12),
    0 34px 64px -28px rgba(16, 24, 40, 0.16);
  --vidrio-fondo: rgba(255, 255, 255, 0.55);
  --vidrio-solido: rgba(255, 255, 255, 0.72);

  /* tinte azul para lo "elegido" */
  --azul-tinte: rgba(0, 113, 227, 0.07);
  --azul-borde: rgba(0, 113, 227, 0.34);
  --azul-glow: 0 0 0 1px rgba(0, 113, 227, 0.26), 0 10px 34px -8px rgba(0, 113, 227, 0.30);
}

/* Ambiente más rico y vivo tras el cristal */
body::before {
  background:
    radial-gradient(1200px 820px at 12% -10%, rgba(80, 132, 255, 0.15), transparent 60%),
    radial-gradient(1020px 760px at 92% 6%, rgba(170, 120, 255, 0.11), transparent 58%),
    radial-gradient(1040px 800px at 50% 112%, rgba(255, 168, 120, 0.11), transparent 62%),
    radial-gradient(720px 700px at 80% 76%, rgba(90, 200, 245, 0.08), transparent 60%);
}

/* ---- Tarjetas de contenido → cristal líquido real ---- */
.card,
.filtro,
.comp-col,
.faq details,
.fase .entregable,
.form-error {
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  background: var(--vidrio-solido);
  border: 1px solid rgba(255, 255, 255, 0.6);
  outline: none !important;
  box-shadow: var(--vidrio-luz), var(--vidrio-sombra);
}
.card { border-radius: var(--radio-grande); }
.card:hover,
.filtro:hover {
  transform: translateY(-3px);
  box-shadow: var(--vidrio-luz),
    0 4px 10px rgba(16, 24, 40, 0.06),
    0 26px 54px -14px rgba(16, 24, 40, 0.20);
}

/* ---- Lo "elegido": tinte azul + glow, nunca borde negro duro ---- */
.comp-destacada,
.card-destacada,
.tier-premium {
  border: 1px solid var(--azul-borde) !important;
  outline: none !important;
  background:
    linear-gradient(180deg, rgba(0, 113, 227, 0.08), rgba(255, 255, 255, 0.74)) !important;
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  box-shadow: var(--vidrio-luz), var(--azul-glow), var(--vidrio-sombra) !important;
}

/* ---- Badges de paso (01·02·03) → chip de cristal con tinte azul ---- */
.fase-num {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(0, 113, 227, 0.10)) !important;
  border: 1px solid rgba(0, 113, 227, 0.22) !important;
  box-shadow: var(--vidrio-luz), 0 6px 16px -6px rgba(0, 113, 227, 0.30) !important;
  color: var(--acento) !important;
}

/* ---- Barra de cifras: cristal con especular ---- */
.cifras {
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  background: var(--vidrio-fondo);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--vidrio-luz), var(--vidrio-sombra);
}

/* ---- Nav: cristal líquido con más profundidad ---- */
.nav {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--vidrio-luz), 0 10px 34px -8px rgba(16, 24, 40, 0.16);
}

/* ---- Botones ---- */
.btn-primario {
  background: linear-gradient(180deg, #1a86f0, #0071e3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 10px 24px -8px rgba(0, 113, 227, 0.55);
}
.btn-primario:hover, .btn-primario:focus-visible {
  background: linear-gradient(180deg, #2b90f5, #0a7bef);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 16px 34px -8px rgba(0, 113, 227, 0.60);
}
.btn-secundario {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: var(--vidrio-luz), var(--sombra-1);
}

/* ---- Chips: marca única / estado ---- */
.card .marca-unico,
.caso .caso-estado {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---- Vídeo del hero y tarjetas: esquina continua algo mayor ---- */
.hero-carrusel { border-radius: 46px; }

/* ---- Banda oscura: tarjetas de cristal oscuro (si las hubiera) ---- */
.seccion-oscura .card,
.seccion-oscura .filtro {
  background: rgba(40, 40, 44, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.18),
    0 24px 60px -20px rgba(0, 0, 0, 0.6) !important;
}

/* ---- Rendimiento: en móviles sin soporte de blur, fondo más sólido ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .filtro, .comp-col, .faq details, .cifras, .nav, .btn-secundario {
    background: rgba(255, 255, 255, 0.94);
  }
}

/* ============================================================
   HERO · COVERFLOW — central nítido + laterales detrás, desenfocados
   ============================================================ */
.hero-coverflow {
  --cf-w: clamp(168px, 15vw, 200px);
  --cf-shift: 0.82;        /* desplazamiento lateral (× ancho central): laterales ENTERAS, sin quedar tapadas por la central */
  --cf-side: 0.62;         /* escala de los laterales: enteros y redonditos, dentro de cuadro */
  --cf-radio: 24px;        /* bordes redonditos, iguales en todas las tarjetas */
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  height: calc(var(--cf-w) * 1.7778);
  perspective: 1600px;
  overflow: visible;       /* el recorte lateral lo hace .hero-video (overflow-x: clip) */
  /* SIN máscara: los laterales tienen borde sólido de tarjeta, cero difuminado a blanco */
}
/* Resplandor / globo de luz detrás del central: bloom blanco + halo azul Apple.
   Vive por detrás de las tarjetas (z-index 0) y asoma como aura alrededor. */
.hero-coverflow::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--cf-w) * 1.5);
  height: calc(var(--cf-w) * 2.2);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(41, 151, 255, 0.28), rgba(41, 151, 255, 0.07) 55%, transparent 80%);
  filter: blur(26px);
  animation: cf-resplandor 7.5s var(--curva) infinite;
}
@keyframes cf-resplandor {
  0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.05); }
}
.cf-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cf-w);
  border-radius: var(--cf-radio);
  overflow: hidden;
  background: #0a0a0a center / cover no-repeat;   /* poster inline como fondo → nunca negro */
  box-shadow: var(--vidrio-luz), 0 34px 74px -22px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) scale(0.62);
  opacity: 0;
  /* SOLO transform y filter transicionan: la opacidad NUNCA cambia en rotación → cero disolvencia.
     (la opacidad 0 inicial la sube el JS al primer render, tapada por la intro) */
  transition: transform 0.7s var(--curva), filter 0.7s var(--curva);
  will-change: transform;
  pointer-events: none;
}
.cf-item::before { content: ""; display: block; padding-bottom: 177.78%; }
.cf-item video, .cf-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover !important; display: block; }

/* estados — TODAS las tarjetas visibles son OPACAS (opacity 1): no hay transparencias ni fundidos. */
/* CENTRAL: 100% limpio, nítido, sin blur. Aro especular + halo azul (resplandor) + profundidad. */
.cf-item.cf-centro {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; filter: none; z-index: 3;
  box-shadow:
    var(--vidrio-luz),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 52px -6px rgba(41, 151, 255, 0.5),           /* resplandor azul alrededor */
    0 18px 46px -12px rgba(41, 151, 255, 0.34),
    0 40px 84px -28px rgba(0, 0, 0, 0.5);
}
/* LATERALES: personas de verdad, sólidas, por detrás. Sin blur, sin transparencia; solo un pelín
   más oscuras para dar profundidad, y su propio resplandor. */
.cf-item.cf-izq {
  transform: translate(-50%, -50%) translateX(calc(var(--cf-w) * var(--cf-shift) * -1)) scale(var(--cf-side));
  opacity: 1; filter: brightness(0.92); z-index: 2;
  /* el radio se compensa por la escala para que se vea tan redondito como el central */
  border-radius: calc(var(--cf-radio) / var(--cf-side));
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.5);
}
.cf-item.cf-der {
  transform: translate(-50%, -50%) translateX(calc(var(--cf-w) * var(--cf-shift))) scale(var(--cf-side));
  opacity: 1; filter: brightness(0.92); z-index: 2;
  border-radius: calc(var(--cf-radio) / var(--cf-side));
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.5);
}
/* Los de más allá: OPACOS también, pero fuera de cuadro (recortados). Entran/salen deslizando,
   sin aparecer ni desaparecer con fundido. */
.cf-item.cf-oculto-izq {
  transform: translate(-50%, -50%) translateX(calc(var(--cf-w) * -2.05)) scale(0.74);
  opacity: 1; filter: brightness(0.8); z-index: 1;
}
.cf-item.cf-oculto-der {
  transform: translate(-50%, -50%) translateX(calc(var(--cf-w) * 2.05)) scale(0.74);
  opacity: 1; filter: brightness(0.8); z-index: 1;
}
@media (max-width: 820px) {
  .hero-coverflow {
    --cf-w: clamp(150px, 38vw, 190px);
    --cf-shift: 0.82;
    --cf-side: 0.60;
    --cf-radio: 22px;
  }
}
@media (max-width: 560px) {
  /* En móvil: central grande y limpio; los laterales ENTEROS con esquinas redondeadas,
     dentro de la pantalla (no cortados en el borde). */
  .hero-coverflow {
    --cf-w: clamp(124px, 34vw, 140px);
    --cf-shift: 0.82;
    --cf-side: 0.58;
    --cf-radio: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-coverflow::before { animation: none; }
}

/* ---- Nav CTA "Reserva tu llamada": más presencia y profundidad ---- */
.nav-links a.btn-primario {
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 10px 20px;
  background: linear-gradient(180deg, #2b90f5 0%, #0071e3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 8px 22px -6px rgba(0, 113, 227, 0.65);
}
.nav-links a.btn-primario:hover,
.nav-links a.btn-primario:focus-visible {
  background: linear-gradient(180deg, #3a99f7 0%, #0a7bef 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.14),
    0 14px 30px -6px rgba(0, 113, 227, 0.7);
}

/* ---- Hero: sellos de confianza (sustituyen la línea gris de condiciones) ---- */
.hero-sellos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 0;
  max-width: none;
}
.hero-sellos li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--tinta-suave);
  background: var(--vidrio-solido);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--vidrio-luz), 0 5px 14px -6px rgba(16, 24, 40, 0.12);
  border-radius: var(--radio-pill);
  padding: 6px 12px 6px 10px;
}
.hero-sellos li::before {
  content: "✓";
  color: var(--acento);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
}
/* Sello de escasez: distinto por forma + tinte (no solo color) */
.hero-sellos .sello-plazas {
  color: var(--acento);
  font-weight: 600;
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.12), var(--vidrio-solido));
  border-color: var(--azul-borde);
  box-shadow: var(--vidrio-luz), var(--azul-glow);
}
.hero-sellos .sello-plazas::before {
  content: "◆";
  font-size: 0.66rem;
  color: var(--acento);
}
@media (max-width: 400px) {
  .hero-sellos li { font-size: 0.78rem; padding: 6px 12px 6px 10px; }
}

/* ============================================================
   SECCIÓN TESIS · el muro que se llena (demuestra el volumen)
   ============================================================ */
.muro {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 1180px;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}
@media (min-width: 640px) { .muro { grid-template-columns: repeat(8, 1fr); gap: 6px; } }
@media (min-width: 1000px) { .muro { grid-template-columns: repeat(12, 1fr); } }

.muro-celda {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: var(--fondo-2);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
}
.muro-celda::before { content: ""; display: block; padding-bottom: 133.33%; } /* retrato 3:4, muro denso */
.muro-celda img, .muro-celda video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.muro.dentro .muro-celda { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .muro-celda { opacity: 1; transform: none; transition: none; }
}

.muro-pie {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--tinta-tenue);
  max-width: none;
}

/* Métricas de la tesis (sustituyen los 3 cards de texto) */
.tesis-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 6vw, 64px);
  margin-top: clamp(30px, 4vw, 48px);
}
.tm { display: flex; flex-direction: column; }
.tm b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tm > span { margin-top: 8px; font-size: 0.9rem; line-height: 1.3; color: var(--tinta-tenue); }
.tm b .num, .tm b .mx { font-size: inherit; color: inherit; margin: 0; font-style: normal; }

.tesis-cierre {
  margin-top: clamp(24px, 3.5vw, 36px);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--tinta-suave);
  max-width: 52ch;
}
.tesis-cierre a { color: var(--acento); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tesis-cierre a:hover { text-decoration: underline; }

/* ---- Sección de dolores (PAS): cards con marca ✕ neutra (no depende del color) ---- */
.dolores { align-items: stretch; }
.dolor-item h3 { position: relative; padding-left: 1.7em; }
.dolor-item h3::before {
  content: "\2715";               /* ✕ */
  position: absolute; left: 0; top: 0.02em;
  color: var(--tinta-tenue);
  font-weight: 700;
  font-size: 0.92em;
}
.dolor-item p { color: var(--tinta-suave); }

/* ---- CTA final: garantías cristalizadas ---- */
.oferta-garantias {
  list-style: none;
  margin: clamp(22px, 3vw, 30px) auto clamp(26px, 3.5vw, 34px);
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: left;
}
.oferta-garantias li {
  position: relative;
  padding-left: 30px;
  color: var(--tinta-suave);
  font-size: 1.02rem;
  line-height: 1.4;
  max-width: none;
}
.oferta-garantias li::before {
  content: "\2713";               /* ✓ */
  position: absolute; left: 0; top: 0;
  color: var(--acento);
  font-weight: 700;
}

/* ---- Hero: revelación del sistema con nombre (tono Apple: dicho una vez) ---- */
.sistema-reveal {
  margin-top: 12px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--tinta-tenue);
  max-width: 50ch;
}
.sistema-reveal b { font-weight: 600; color: var(--tinta); }

/* ---- Hero: línea de delegación (la frase que más vende, con jerarquía propia) ---- */
.hero-delega {
  margin-top: 10px;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 42ch;
}
.hero-delega b { color: var(--tinta); font-weight: 600; }
.hero-delega b { font-weight: 600; }

/* ============================================================
   AUDIT jul-2026 · mejoras de conversión y ritmo visual
   ============================================================ */

/* Ritmo de fondos: secciones en gris Apple suave */
.seccion-suave { background: var(--fondo-2); }

/* Utilidad de medida (sustituye estilos inline) */
.max-60ch { max-width: 60ch; }

/* Showcase: línea de reto/prueba bajo el marquee (banda oscura) */
.showcase-reto {
  margin-top: clamp(18px, 2.5vw, 28px);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: #a1a1a6;
  max-width: 52ch;
}
.showcase-reto::first-line { color: #f5f5f7; }

/* Flujo del arbitraje EEUU: 3 pasos con flecha */
.flujo-arbitraje {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  counter-reset: paso;
}
.flujo-arbitraje li {
  position: relative;
  flex: 1 1 200px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--radio);
  background: var(--vidrio-solido);
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--vidrio-luz), var(--sombra-1);
}
.flujo-arbitraje li b { font-weight: 600; color: var(--tinta); font-size: 1.02rem; }
.flujo-arbitraje li span { font-size: 0.9rem; color: var(--tinta-tenue); line-height: 1.35; }
/* flecha entre pasos (desktop) */
@media (min-width: 720px) {
  .flujo-arbitraje { gap: 34px; }
  .flujo-arbitraje li + li::before {
    content: "\2192";  /* → */
    position: absolute;
    left: -27px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tinta-tenue);
  }
}

/* Planes: ancla de precio + línea de contexto por plan */
.ancla-precio {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--tinta-suave);
  max-width: 54ch;
}
.plan-para { font-size: 0.9rem; color: var(--tinta-tenue); line-height: 1.4; }

/* Resultados: tarjetas de caso = misma familia de superficie (fuera el dashed placeholder) */
.caso {
  background: var(--vidrio-solido) !important;
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--vidrio-luz), var(--vidrio-sombra);
}
.caso .caso-estado::before { content: "\25CF\00a0"; font-size: 0.72em; } /* ● + espacio: estado por símbolo, no solo color */

/* CTA final en banda oscura: gravedad del cierre */
.cta-final.seccion-oscura .oferta-garantias li { color: #d2d2d7; }
.cta-final.seccion-oscura .oferta-garantias li::before { color: var(--acento-oscuro); }
.cta-final.seccion-oscura .lead strong { color: #f5f5f7; }

/* ---- Oferta de entrada: anuncio gratis (panel destacado, baja fricción) ---- */
.oferta-gratis { text-align: center; }
.oferta-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 54px) clamp(22px, 4vw, 48px);
  border-radius: var(--radio-grande);
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.09), var(--vidrio-solido));
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid var(--azul-borde);
  box-shadow: var(--vidrio-luz), var(--azul-glow), var(--vidrio-sombra);
}
.oferta-panel .lead { margin-inline: auto; max-width: 52ch; }
.oferta-panel .hero-nota { display: block; margin-top: 14px; }

/* ============================================================
   PULIDO PRO jul-2026 · promo-card, dolores animados, destello muro
   ============================================================ */

/* --- Panel "anuncio gratis": tarjeta de cristal premium --- */
.promo-card {
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--radio-grande);
  background: var(--vidrio-solido);
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--vidrio-luz), var(--vidrio-sombra);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
  transition: box-shadow 0.4s var(--curva), transform 0.4s var(--curva);
}
.promo-card:hover { transform: translateY(-4px); box-shadow: var(--vidrio-luz), 0 34px 70px -20px rgba(16, 24, 40, 0.22); }
.promo-card .hero-carrusel { max-width: 260px !important; margin: 0 auto !important; border-radius: 30px; }
.promo-card-cuerpo { display: flex; flex-direction: column; gap: 9px; padding: 0 6px 6px; }
.promo-card-titulo {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.14rem, 1.7vw, 1.36rem); letter-spacing: -0.015em;
  line-height: 1.18; color: var(--tinta);
}
.promo-card-sub { font-size: 0.92rem; color: var(--tinta-tenue); line-height: 1.45; }
.promo-card-lista { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 4px 0 0; padding: 0; max-width: none; }
.promo-card-lista li { position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--tinta-suave); max-width: none; }
.promo-card-lista li::before { content: "\2713"; position: absolute; left: 0; color: var(--acento); font-weight: 700; }

/* --- Dolores (PAS): badge redondo + hover con vida --- */
.dolor-item { transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva); }
.dolor-item h3 { padding-left: 2.5em; }
.dolor-item h3::before {
  content: "\2715";
  left: 0; top: -0.05em;
  width: 1.7em; height: 1.7em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.045);
  color: var(--tinta-tenue);
  font-size: 0.68em; font-weight: 700;
  transition: transform 0.4s var(--curva), background 0.4s var(--curva), color 0.4s var(--curva);
}
.dolor-item:hover { transform: translateY(-6px); box-shadow: var(--vidrio-luz), 0 30px 64px -18px rgba(16, 24, 40, 0.24); }
.dolor-item:hover h3::before { transform: scale(1.15); background: rgba(0, 0, 0, 0.08); color: var(--tinta); }

/* --- Muro de caras: destello al pasar el ratón --- */
@media (hover: hover) {
  .muro.dentro .muro-celda { transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva), filter 0.45s var(--curva); }
  .muro-celda:hover {
    transform: scale(1.07) !important;
    z-index: 6;
    box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.45);
    filter: brightness(1.06) saturate(1.05);
  }
  .muro-celda::after {
    content: "";
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.6) 50%, transparent 66%);
    transform: translateX(-130%);
    opacity: 0;
  }
  .muro-celda:hover::after { animation: destello 0.8s var(--curva); }
}
@keyframes destello {
  0% { transform: translateX(-130%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

/* ============================================================
   PULIDO PRO (2) · métricas con contador, callout, flujo arbitraje
   ============================================================ */

/* Métricas de la tesis: subrayado de acento que entra + números tabulares */
.tm b { position: relative; display: inline-block; padding-bottom: 8px; }
.tm b .num { font-variant-numeric: tabular-nums; }
.tm b .mx { font-style: normal; }
.tm b::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 3px; width: 0; border-radius: 2px;
  background: var(--acento);
  transition: width 0.8s var(--curva) 0.25s;
}
.tesis-metricas.dentro .tm b::after { width: 44px; }

/* Callout del ancla de precio: panel con empaque + botón */
.tesis-callout {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(16px, 2.5vw, 26px);
  margin-top: clamp(28px, 4vw, 42px);
  padding: clamp(22px, 3vw, 30px) clamp(24px, 3.5vw, 38px);
  border-radius: var(--radio-grande);
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.08), var(--vidrio-solido));
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid var(--azul-borde);
  box-shadow: var(--vidrio-luz), var(--azul-glow), var(--vidrio-sombra);
}
.tesis-callout p { margin: 0; max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--tinta); line-height: 1.4; }
.tesis-callout p b { font-weight: 600; }
.tesis-callout .btn { flex: none; }

/* Flujo del arbitraje: pasos numerados + hover + flecha animada */
.flujo-arbitraje li { padding-top: 42px; transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva); }
.paso-n {
  position: absolute; top: 16px; left: 20px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--acento);
}
.flujo-arbitraje li b { font-size: 1.05rem; }
.flujo-arbitraje li .paso-d { font-size: 0.9rem; color: var(--tinta-tenue); line-height: 1.35; }
.flujo-arbitraje li:hover { transform: translateY(-5px); box-shadow: var(--vidrio-luz), 0 26px 54px -16px rgba(16, 24, 40, 0.22); }
@media (min-width: 720px) {
  .flujo-arbitraje li + li::before { animation: flechaPulso 1.9s ease-in-out infinite; }
}
@keyframes flechaPulso {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.5; }
  50% { transform: translateY(-50%) translateX(5px); opacity: 1; }
}

/* ---- Móvil: hero más compacto + eyebrow en una sola línea ---- */
@media (max-width: 560px) {
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; margin-bottom: 0.9em; }
  .hero-texto .eyebrow { white-space: nowrap; }
  .hero { padding-top: clamp(18px, 3vw, 32px); }
  .hero-grid { gap: 18px; }
  .hero .lead { margin-bottom: 0.4em; }
  .hero-delega { margin-top: 8px; }
}

/* ---- Móvil: hero centrado y equilibrado ---- */
@media (max-width: 560px) {
  .hero-texto { text-align: center; }
  .hero-texto .lead,
  .hero-texto .hero-delega { margin-left: auto; margin-right: auto; }
  .hero-acciones { align-items: center; }
  .hero-ctas { justify-content: center; }
  .hero-sellos { justify-content: center; }
}

/* ============================================================
   PULIDO MÓVIL jul-2026 · showcase, métricas horizontal, FX muro, centrados
   ============================================================ */

/* Showcase: texto limpio (fuera el two-tone roto), centrado */
.showcase-reto { text-align: center; margin-left: auto; margin-right: auto; color: #a1a1a6; }
.showcase-reto::first-line { color: inherit; }
.showcase-reto b { color: #f5f5f7; font-weight: 600; }

/* Muro: destello aleatorio constante (funciona en todos los dispositivos) */
.muro-celda::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-140%); opacity: 0;
}
.muro-celda.fx::after { animation: destello 0.95s var(--curva); }
.muro-celda.fx { z-index: 4; }

/* Móvil: métricas en HORIZONTAL, botones centrados, arbitraje aireado */
@media (max-width: 560px) {
  /* métricas en una fila de 3, más compactas */
  .tesis-metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
  .tm b { font-size: clamp(1.5rem, 8.5vw, 2.2rem); padding-bottom: 6px; }
  .tesis-metricas.dentro .tm b::after { width: 28px; height: 2px; }
  .tm > span { font-size: 0.76rem; line-height: 1.25; }

  /* callout del precio: apilado y centrado */
  .tesis-callout { flex-direction: column; text-align: center; align-items: center; }
  .tesis-callout p { margin-left: auto; margin-right: auto; }

  /* botones sueltos de sección, centrados */
  .tesis-cierre { text-align: center; }
  #resultados .mt-3 { text-align: center; }
  .tier-premium { text-align: center; }

  /* arbitraje: más aire, menos colapsado */
  #guiones .flujo-arbitraje { gap: 16px; margin-top: clamp(26px, 6vw, 34px); }
  #guiones .flujo-arbitraje li { padding: 44px 22px 22px; }
  #guiones .texto-suave { margin-top: clamp(28px, 7vw, 40px); }
}

/* ── Plan Starter (low ticket) ─────────────────────────────────── */
.starter-incluye {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.starter-incluye li {
  position: relative;
  padding-left: 32px;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--tinta, #1d1d1f);
}
.starter-incluye li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 700;
  color: var(--azul, #0071e3);
}
.starter-ancla {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--vidrio-fondo, rgba(0,113,227,0.06));
  border: 1px solid var(--linea, #d2d2d7);
}
.starter-ancla p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--tinta-tenue, #424245);
}
.starter-ancla b { color: var(--tinta, #1d1d1f); }