/* ==========================================================================
   Vivir sin parches — Amazon Ember
   --------------------------------------------------------------------------
   La familia viene repartida en varios "family names" (Display, Display Heavy,
   Display Medium...). Estas reglas la unifican bajo dos nombres — uno de
   titulares y otro de texto — para poder usar font-weight con normalidad.

   Los .woff2 están autoalojados como assets de la página, así que la fuente
   la ven TODOS los visitantes (antes solo resolvían con local(), es decir,
   solo en equipos que la tuvieran instalada). local() se mantiene delante
   para ahorrar la descarga a quien ya la tenga en el sistema.
   ========================================================================== */

/* --- Titulares: Amazon Ember Display -------------------------------------- */

@font-face {
  font-family: "Amazon Ember Display";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("AmazonEmberDisplay-Light"), local("Amazon Ember Display Light"),
       url("qxn4wq2xm72i26zj3v9crfu4") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("AmazonEmberDisplay-Regular"), local("Amazon Ember Display"),
       url("p0mgaecmvhxs2n9zfgdklcfm") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("AmazonEmberDisplay-Medium"), local("Amazon Ember Display Medium"),
       url("va04xnk9ztlbdm08b0uckzay") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("AmazonEmberDisplay-Bold"), local("Amazon Ember Display Bold"),
       url("y7sgp7z3mfiv01zhvx1uwrit") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("AmazonEmberDisplay-Heavy"), local("Amazon Ember Display Heavy"),
       url("c6st6wane9kzgt2vzw6j3eyl") format("woff2");
}

/* --- Texto: Amazon Ember --------------------------------------------------- */

@font-face {
  font-family: "Amazon Ember Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("AmazonEmber-Regular"), local("Amazon Ember"),
       url("vfgdtgy0ziad06hgen7av5h4") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("AmazonEmber-Italic"),
       url("k085t1ryt87fxrrventpsvsv") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("AmazonEmber-Medium"), local("Amazon Ember Medium"),
       url("k5xdpandxpuqesukcd7fzki2") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("AmazonEmber-SemiBold"), local("Amazon Ember SemiBold"),
       url("nm63vebj9p8ia8tb4jg9eett") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("AmazonEmber-Bold"), local("Amazon Ember Bold"),
       url("e7kj72za626h4u75qx4n3tmy") format("woff2");
}

@font-face {
  font-family: "Amazon Ember Text";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("AmazonEmber-Heavy"), local("Amazon Ember Heavy"),
       url("t4oemsd05amct36toz7pn459") format("woff2");
}
/* ==========================================================================
   Vivir sin parches — Design tokens + base
   Funnel: MAU-LANZ-2609
   ========================================================================== */

:root {
  /* --- Marca: morados ------------------------------------------------- */
  --purple-950: #241663;
  --purple-900: #2c1c72;
  --purple-800: #34237f;
  --purple-700: #4b32a8;
  --purple-600: #5d41b9;
  --purple-500: #7b57d6;
  --purple-400: #9a78e4;
  --purple-300: #c9a6ee;
  --purple-100: #ece2fb;

  /* --- Acentos: sacados de los stickers de la mano -------------------- */
  --sticker-salmon: #e0805f;
  --sticker-plum: #2e1a47;
  --sticker-sage: #90a880;
  --sticker-lavender: #b9a5de;
  --sticker-slate: #4e6e78;
  --sticker-wine: #6a2450;
  --sticker-cream: #efe9e0;

  /* --- Neutros --------------------------------------------------------- */
  --ink: #1c1233;
  --ink-soft: #453a5e;
  --ink-muted: #6b6182;
  --surface: #ffffff;
  --surface-dim: #f6f2fd;

  /* --- Roles semanticos ------------------------------------------------ */
  --color-bg: var(--purple-600);
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-soft: rgba(255, 255, 255, 0.88);
  --color-cta: #5423bd;
  --color-cta-hover: #431a9e;
  --color-cta-text: #ffffff;
  --color-whatsapp: #128c4a;
  --color-whatsapp-hover: #0d7239;
  --color-focus: #ffd84d;

  /* --- Tipografia ------------------------------------------------------ */
  /* Amazon Ember: Display para titulares, Ember para texto.
     Figtree queda de red de seguridad hasta que la fuente se autoaloje. */
  --font-display: "Amazon Ember Display", "Figtree", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Amazon Ember Text", "Amazon Ember", "Figtree", ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.16rem + 0.9vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.24rem + 2.2vw, 3.25rem);
  --text-hero: clamp(2rem, 1.34rem + 2.7vw, 3.2rem);

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.55;

  /* --- Espaciado ------------------------------------------------------- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);
  --space-section: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --measure: 1360px;

  /* --- Radios, sombras, motion ---------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(36, 22, 99, 0.08),
    0 12px 28px -12px rgba(36, 22, 99, 0.35);
  --shadow-card-hover: 0 2px 4px rgba(36, 22, 99, 0.1),
    0 26px 48px -18px rgba(36, 22, 99, 0.48);
  --shadow-cta: 0 12px 26px -10px rgba(30, 12, 90, 0.8);
  --shadow-field: 0 1px 2px rgba(36, 22, 99, 0.1),
    0 10px 22px -14px rgba(36, 22, 99, 0.45);
  --shadow-cutout: drop-shadow(0 30px 45px rgba(28, 14, 78, 0.38));

  --duration-fast: 140ms;
  --duration-normal: 320ms;
  --duration-slow: 700ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* --- Grano compartido por las superficies moradas -------------------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Reset ligero
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }

ul[class] { padding: 0; list-style: none; }

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-dark);
  background-color: var(--purple-600);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 100;
  padding: 0.65rem 1rem;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-out-soft);
}
.skip-link:focus-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
   Vivir sin parches — Layout y componentes
   ========================================================================== */

/* --- Shell ---------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 880px; }

/* --- Stage: superficie morada continua (hero + agenda) -------------------- */

.stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(1.1rem, 0.9rem + 1vw, 1.75rem) var(--space-section);
  background:
    radial-gradient(
      118% 88% at 68% 34%,
      var(--purple-300) 0%,
      var(--purple-400) 22%,
      var(--purple-500) 44%,
      var(--purple-600) 68%,
      var(--purple-700) 100%
    );
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    102deg,
    rgba(36, 22, 99, 0.36) 0%,
    rgba(36, 22, 99, 0.27) 34%,
    rgba(36, 22, 99, 0.1) 62%,
    rgba(36, 22, 99, 0) 82%
  );
  pointer-events: none;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* La pagina de gracias centra el texto: el foco de luz sube y se atenua. */
.stage--calm {
  background: radial-gradient(
    125% 85% at 50% -12%,
    var(--purple-400) 0%,
    var(--purple-500) 32%,
    var(--purple-600) 60%,
    var(--purple-700) 84%,
    var(--purple-800) 100%
  );
}

.stage--calm::before { background-image: none; }

/* --- Masthead: logo + badge ---------------------------------------------- */

.masthead--center { justify-content: center; }

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: clamp(1.1rem, 0.8rem + 1.4vw, 1.75rem);
}

.brand { display: inline-block; }

.brand__logo {
  width: clamp(110px, 8.5vw, 142px);
  filter: drop-shadow(0 8px 16px rgba(28, 14, 78, 0.3));
  transform: rotate(-2deg);
}

.event-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(41, 24, 106, 0.42);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: var(--text-sm);
}

.event-badge__label {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.event-badge__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5b5b;
  box-shadow: 0 0 0 0 rgba(255, 91, 91, 0.65);
  animation: pulse 2.4s var(--ease-out-soft) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 91, 91, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 91, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 91, 91, 0); }
}

.event-badge__date { font-weight: 500; color: #fff; }

/* En movil la pastilla ocupa demasiado y parte la fecha en tres lineas:
   se queda en texto plano, dos lineas, un punto mas pequeno. */
@media (max-width: 767px) {
  .event-badge {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .event-badge__label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .event-badge__date {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--color-text-on-dark-soft);
  }
}

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

.hero { position: relative; z-index: 2; }

.hero__copy { max-width: 40rem; }

.hero__title {
  font-size: var(--text-hero);
  font-weight: 400;
  margin-bottom: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  text-shadow: 0 2px 20px rgba(30, 14, 82, 0.18);
}

.hero__title strong { font-weight: 800; }

/* Saltos de linea controlados: ningun renglon acaba en preposicion o
   articulo. Tres lineas cuando la columna aguanta (como en la referencia),
   cuatro en tamanos intermedios, y ajuste automatico en movil estrecho. */
.hero-br { display: none; }

.hero__lede {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  max-width: 44rem;
  margin-bottom: clamp(1.2rem, 0.9rem + 1.2vw, 1.6rem);
}

/* --- Formulario ----------------------------------------------------------- */

.signup { max-width: 34rem; }

.signup__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.field { flex: 1 1 13rem; }

.field__input {
  width: 100%;
  padding: 1.15rem 1.25rem;
  border: 1.5px solid rgba(28, 18, 51, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-field);
  transition: border-color var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft);
}

.field__input::placeholder { color: var(--ink-muted); }

.field__input:hover { border-color: rgba(84, 35, 189, 0.35); }

.field__input:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--shadow-field), 0 0 0 4px rgba(255, 216, 77, 0.4);
}

.field__input[aria-invalid="true"] { border-color: #ff6b6b; }

.field__error {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #ffffff;
}

.btn {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.2rem 2.15rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-cta);
  color: var(--color-cta-text);
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft);
}

.btn:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(30, 12, 90, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn:active { transform: translateY(0) scale(0.99); }

.btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }

.btn--block { width: 100%; }

@media (min-width: 560px) {
  .btn--block { width: auto; min-width: 19rem; }
}

.btn--lg {
  padding: 1.2rem 2.2rem;
  font-size: var(--text-lg);
  letter-spacing: 0.005em;
  text-transform: none;
}

.btn--whatsapp { background: var(--color-whatsapp); }
.btn--whatsapp:hover { background: var(--color-whatsapp-hover); }

.btn__icon { width: 1.4em; height: 1.4em; flex: none; }

.legal-note {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  max-width: 41rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

.legal-note a {
  color: rgba(255, 255, 255, 0.92);
  text-underline-offset: 2px;
}

.legal-note a:hover { color: #fff; }

.form-status {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
}


/* --- Franja superior con la cuenta atras -------------------------------- */

/* Oculta hasta que el JS pone los numeros: asi nunca se ve con guiones y
   la banda no aparece vacia si el script no llega a cargar. */
.topbar { display: none; }

.topbar[data-ready] {
  display: block;
  background: var(--purple-950);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem clamp(0.7rem, 0.3rem + 1.2vw, 1.2rem);
  padding-block: 0.7rem;
}

.countdown__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.countdown__units {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem clamp(0.7rem, 0.3rem + 1.2vw, 1.2rem);
}

.countdown__unit {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.countdown__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.countdown__name {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.countdown--live .countdown__units { display: none; }

.countdown--live .countdown__label {
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  color: #fff;
}

/* --- Mano con parches ------------------------------------------------------ */

.stage__visual {
  margin: clamp(2rem, 1rem + 5vw, 3rem) auto -3rem;
  width: min(78%, 420px);
  filter: var(--shadow-cutout);
}

/* Apilada, la foto termina en un corte recto a media muneca. Se difumina
   el ultimo tramo. El filtro se quita: sombra + mascara a la vez hacen que
   el navegador dibuje la sombra siguiendo el rectangulo de la imagen. */
@media (max-width: 1199px) {
  .stage__visual { filter: none; }

  .stage__visual img {
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
  }
}

/* --- Agenda ---------------------------------------------------------------- */

.agenda {
  position: relative;
  z-index: 2;
  margin-top: clamp(3rem, 2rem + 5vw, 6rem);
}

.agenda__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

.agenda__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);
}

.step-card {
  --accent: var(--purple-500);
  --accent-ink: color-mix(in srgb, var(--accent) 76%, #1c1233);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

.step-card:nth-child(1) { --accent: var(--sticker-salmon); }
.step-card:nth-child(2) { --accent: var(--sticker-slate); }
.step-card:nth-child(3) { --accent: var(--sticker-sage); }
.step-card:nth-child(4) { --accent: var(--sticker-wine); }

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.step-card__index {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-ink);
}

/* Regla corta bajo el numero: marca el acento sin el filete de plantilla. */
.step-card__rule {
  width: 2.25rem;
  height: 3px;
  margin: 0.75rem 0 0.9rem;
  border-radius: 2px;
  background: var(--accent);
}

.step-card__title {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.7rem;
}

/* Solo cuando las tarjetas van una al lado de otra: reservar dos lineas hace
   que los cuatro cuerpos arranquen a la misma altura. Apiladas sobraria. */
@media (min-width: 560px) {
  .step-card__title { min-height: 2.4em; }
}

.step-card__text { font-size: 0.9375rem; line-height: 1.55; }

/* --- Banda profunda: Borja ------------------------------------------------- */

.band {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.band--deep {
  overflow: visible;
  background:
    /* Fundido con el morado de arriba: sin esto la union es un corte seco. */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--purple-700) 92%, transparent) 0%,
      rgba(75, 50, 168, 0) clamp(90px, 12vw, 190px)),
    radial-gradient(90% 120% at 18% 100%, var(--purple-800) 0%, var(--purple-950) 62%),
    var(--purple-950);
  padding-block: 0 var(--space-section);
}

.band--deep::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.author {
  display: grid;
  gap: clamp(0.5rem, 0.2rem + 2vw, 3rem);
  align-items: end;
}

.author__portrait {
  position: relative;
  width: min(72%, 340px);
  margin-inline: auto;
  margin-top: calc(var(--space-section) * -0.35);
  filter: drop-shadow(0 26px 40px rgba(12, 5, 44, 0.55));
}

/* Halo detras del retrato: lo integra en la banda en vez de recortarlo. */
.author__portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -22% -4% -22%;
  background: radial-gradient(
    58% 58% at 50% 60%,
    rgba(154, 120, 228, 0.34) 0%,
    rgba(154, 120, 228, 0) 72%
  );
  pointer-events: none;
}

/* Apilado sobre el texto, el retrato acaba en un corte recto: se difumina.
   Igual que con la mano, el filtro se quita para no dibujar el halo. */
@media (max-width: 759px) {
  .author__portrait { filter: none; }

  .author__portrait img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  }

  .author__portrait::after { display: none; }
}

/* Sombra de contacto: sin ella el recorte flota. */
.author__portrait::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  bottom: -10px;
  height: 42px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(9, 4, 34, 0.6) 0%,
    rgba(9, 4, 34, 0) 72%
  );
  pointer-events: none;
}

.author__body {
  /* Sin esto, el ancho minimo de la franja de logos infla la rejilla y
     saca la pagina de la pantalla en movil. */
  min-width: 0;
  padding-block: var(--space-lg) 0;
}

.author__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}

.author__text {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-on-dark-soft);
  max-width: 40rem;
}

/* --- Franja de medios ------------------------------------------------------ */

.trust {
  display: block;
  width: min(100%, 46rem);
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* En pantallas estrechas los logos se quedarian en 15 px de alto: mejor
   que la franja conserve su tamano y se desplace. */
/* Los logos vienen en negro sobre transparente: sobre la banda oscura van
   en blanco, que es como estaban en la referencia. */
.trust img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

/* --- Pagina de gracias ----------------------------------------------------- */

.thanks { position: relative; z-index: 2; text-align: center; }

.thanks__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem;
  margin-bottom: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(41, 24, 106, 0.4);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thanks__title {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}

.thanks__lede {
  font-size: var(--text-lg);
  color: var(--color-text-on-dark-soft);
  max-width: 44rem;
  margin-inline: auto;
}

.video {
  position: relative;
  margin: clamp(2rem, 1.4rem + 2.4vw, 3rem) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--purple-950);
  box-shadow: 0 30px 70px -28px rgba(14, 6, 52, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  padding: var(--space-md);
  border: 0;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(80% 100% at 50% 0%, var(--purple-600) 0%, var(--purple-950) 78%);
}

.video__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.video__play {
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  color: var(--color-cta);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.video__facade:hover .video__play { transform: scale(1.08); }

.video__label {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.after-video {
  max-width: 46rem;
  margin: clamp(1.75rem, 1.2rem + 2vw, 2.5rem) auto 0;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text-on-dark-soft);
  text-align: center;
}

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

.cta-block .btn { max-width: 33rem; width: 100%; }

.microcopy {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.86);
  max-width: 32rem;
  text-align: center;
}

.fallback-note {
  max-width: 44rem;
  margin: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem) auto 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(36, 22, 99, 0.35);
  font-size: var(--text-base);
  color: var(--color-text-on-dark-soft);
  text-align: center;
}


/* --- Bloques extra de la pagina de gracias ------------------------------- */

.extra {
  max-width: 44rem;
  margin: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem) auto 0;
  padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
}

.extra__title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.extra__text {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-on-dark-soft);
  max-width: 34rem;
  margin-inline: auto;
}

.extra__note {
  min-height: 1.4rem;
  margin-top: 0.9rem;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.72);
}

/* Botones secundarios: no deben competir con el CTA de WhatsApp. */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(41, 24, 106, 0.34);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft);
}

.chip:hover {
  background: rgba(41, 24, 106, 0.62);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.chip:active { transform: translateY(0); }

.chip--wa {
  background: var(--color-whatsapp);
  border-color: transparent;
}

.chip--wa:hover { background: var(--color-whatsapp-hover); border-color: transparent; }

/* El mensaje que se va a compartir, para que se vea antes de enviarlo. */
.share__message {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid rgba(255, 255, 255, 0.32);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(41, 24, 106, 0.32);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-on-dark-soft);
  text-align: left;
}

.share__link {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  word-break: break-all;
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-lg);
  background: var(--purple-950);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--text-xs);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.site-footer__logo {
  width: 108px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.72;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* --- Reveal on scroll ------------------------------------------------------ */

/* Solo se ocultan si hay JS: sin él, el contenido se ve igual. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

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

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 760px) {
  .author {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr);
  }

  .author__portrait {
    width: 100%;
    max-width: 430px;
    /* El recorte llega al borde inferior de la banda: asi el corte recto de
       la foto lee como "esta detras", no como una imagen cortada a medias. */
    margin: 0 0 calc(var(--space-section) * -1);
    align-self: end;
  }

  .author__portrait::after { display: none; }

  .author__body { padding-block: var(--space-xl) 0; }
}

@media (min-width: 1200px) {
  /* Titular calibrado para que los saltos forzados entren sin desbordar. */
  :root { --text-hero: clamp(2.5rem, 1.9rem + 0.85vw, 2.9rem); }

  .stage { padding-bottom: clamp(3rem, 1rem + 4vw, 4.5rem); }

  .hero__copy { max-width: min(44rem, 52vw); }

  /* La mano se apoya en el borde inferior del bloque morado y el brazo baja
     por detras de las tarjetas, en vez de quedar cortado en el aire. */
  .stage__visual {
    position: absolute;
    z-index: 1;
    bottom: 0;
    /* En pantallas anchas la mano se despega hacia el borde para no
       acercarse al titular; en las estrechas se apoya en el limite. */
    right: max(0px, calc((100vw - var(--measure)) / 2 - 8rem));
    width: clamp(400px, 52vw, 660px);
    margin: 0;
    pointer-events: none;
  }

  .agenda__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .agenda { margin-top: clamp(1.75rem, 0.5rem + 3vw, 3rem); }

  .author__portrait { margin-top: clamp(-7rem, -3rem - 4vw, -3rem); }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-br--all,
  .hero-br--md { display: inline; }
  .hero__title { text-wrap: normal; }
}

@media (min-width: 1400px) {
  .hero-br--all,
  .hero-br--lg { display: inline; }
  .hero__title { text-wrap: normal; }
}