/* Protocolo Valdes · landings de captación
   Mobile first. El diseño de escritorio entra a partir de 960 px. */

:root {
  --negro: #070709;
  --superficie: #121216;
  --superficie-alta: #17171c;
  --franja: #0d0d11;
  --video: #0b0b0d;
  --linea: #24242a;
  --linea-media: #2e2e36;
  --linea-fuerte: #3a3a44;
  --blanco: #ffffff;
  --plata: #bfc1c3;
  --gris: #8c8c8c;
  --gris-claro: #9a9aa2;
  --panel-claro: #f5f4f1;
  --panel-linea: #dedbd3;
  --panel-texto: #1c1c21;
  --panel-titulo: #0b0b0d;
  --panel-borde: #d8d5cd;
  --panel-tenue: #55555c;
  --pastilla: #101013;
  --oro-profundo: #8a6a2a;
  --oro-plano: #ddbe73;
  --verde: #22c55e;
  --verde-texto: #4ade80;
  --verde-oscuro: #16a34a;
  --rojo: #d9381e;
  --tinta-boton: #1a1408;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --oro: url("assets/oro-metalico.webp");
  /* Arranca rápido y frena largo. El `ease-out` de fábrica es tan suave
     que un movimiento de 180 ms apenas se nota como respuesta. */
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, p { margin: 0; }

/* ---------- Piezas compartidas ---------- */

.contenedor {
  width: min(1200px, 100% - 40px);
  margin-inline: auto;
}

.titulo {
  font-family: var(--serif);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Frase clave de un título: itálica + oro metálico */
.oro-txt {
  background-image: var(--oro);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--oro-plano);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.06em;
}

.etiqueta {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid var(--linea-media);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--plata);
}

.etiqueta--clara {
  border-color: var(--panel-borde);
  background: var(--blanco);
  color: var(--panel-tenue);
}

.pastilla-vivo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  /* El borde va teñido de rojo para que el halo de detrás parezca salir de
     la pastilla y no flotar a su alrededor. */
  border: 1px solid rgba(217, 56, 30, 0.28);
  border-radius: 999px;
  background: var(--pastilla);
  position: relative;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--plata);
}

.pastilla-vivo strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--blanco);
}

/* La pastilla larga de /protocolo-tra: partida en dos líneas hasta los
   430 px de ancho, y en una con su punto medio desde ahí. */
.pastilla-vivo > span { text-align: center; }

.pastilla-vivo__punto { display: none; }

@media (min-width: 430px) {
  .pastilla-vivo__punto { display: inline; }

  .pastilla-vivo__corte { display: none; }
}

/* El punto late como el de una transmisión: se apaga a medias y suelta
   un anillo. Es un elemento de 8 px, así que animar su sombra no cuesta. */
.pastilla-vivo::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  animation: vivo 1.6s ease-out infinite;
}

/* El halo. Como el resplandor del botón: una capa aparte a la que sólo se
   le anima la opacidad. Va al doble de lento que el punto (3,2 s contra
   1,6 s) para que respire por debajo sin competir con él. */
.pastilla-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 18px 1px rgba(217, 56, 30, 0.32), 0 0 3px rgba(217, 56, 30, 0.35);
  opacity: 0.3;
  pointer-events: none;
  animation: vivo-halo 3.2s ease-in-out infinite;
}

@keyframes vivo-halo {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@keyframes vivo {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(217, 56, 30, 0.6); }
  60% { opacity: 0.45; box-shadow: 0 0 0 7px rgba(217, 56, 30, 0); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217, 56, 30, 0); }
}

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  height: 60px;
  margin-inline: auto;
  border: 1px solid rgba(255, 244, 210, 0.55);
  border-radius: 999px;
  /* Dos capas: un brillo en diagonal, aparcado fuera del botón, y debajo
     la textura de oro. El brillo sólo cruza al pasar el ratón. */
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 58%), var(--oro);
  background-size: 250% 100%, cover;
  background-position: 100% 0, center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 32px rgba(217, 185, 104, 0.28);
  color: var(--tinta-boton);
  font-family: var(--sans);
  /* 16 px desde los 381 de ancho, que es todo lo que no sea un teléfono
     chico. Por debajo encoge con la pantalla: el texto no puede partirse
     en dos líneas, y a 16 px medía 310 px en un botón de 280 —se salía
     15 px por cada lado en un teléfono de 320—. */
  font-size: clamp(13px, 4.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  /* El brillo va a 0 s aquí y a 0,7 s en :hover: cruza al entrar y, al
     salir, vuelve a su sitio de golpe en vez de cruzar otra vez al revés. */
  transition: transform 0.18s var(--salida), box-shadow 0.18s var(--salida), filter 0.18s var(--salida), background-position 0s;
}

.boton svg { flex-shrink: 0; }

/* El resplandor que late. Es una capa aparte para animar sólo su
   opacidad: animar la sombra del propio botón obligaría a repintarlo. */
.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 10px 44px 6px rgba(217, 185, 104, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: latido 2.6s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Sólo donde hay ratón: en un táctil el :hover se queda pegado tras tocar. */
@media (hover: hover) and (pointer: fine) {
  .boton:hover {
    transform: translateY(-2px);
    background-position: 0 0, center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 16px 40px rgba(217, 185, 104, 0.42);
    filter: brightness(1.05);
    transition: transform 0.18s var(--salida), box-shadow 0.18s var(--salida), filter 0.18s var(--salida), background-position 0.7s var(--salida);
  }

  .pie__enlaces a:hover { color: var(--blanco); }
}

.boton:active {
  transform: translateY(0) scale(0.97);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(217, 185, 104, 0.25);
  filter: brightness(0.97);
  transition-duration: 0.06s;
}

.boton:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 3px;
}

/* Quien pide menos movimiento se queda sin latidos ni desplazamientos;
   los cambios de brillo y de sombra, que no mueven nada, siguen. */
@media (prefers-reduced-motion: reduce) {
  .pastilla-vivo::before,
  .pastilla-vivo::after,
  .boton::after { animation: none; }

  .pastilla-vivo::after { opacity: 0.6; }

  .boton,
  .boton:hover,
  .boton:active {
    transform: none;
    background-position: 100% 0, center;
  }
}

.tick {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--verde);
}

.tick--oscuro { background: var(--verde-oscuro); }

/* ---------- Al hacer scroll ---------- */

/* Lo que entra en pantalla sube 14 px y se aclara. Estas dos clases las
   pone y las quita el script: sin JavaScript nadie nace oculto. Cuando el
   bloque termina de entrar se le retiran las dos, para que la transición
   no se quede pegada al `transform` de las tarjetas que se inclinan. */
.revelar {
  opacity: 0;
  transform: translateY(14px);
}

.revelar--visto {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--salida), transform 0.6s var(--salida);
}

/* ---------- Hero con VSL (orgánico) ---------- */

.hero { position: relative; }

.hero__fondo,
.hero__sombra {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 560px;
}

.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El muro se ve entero arriba, detrás del logo, y se oscurece de golpe
   donde empieza el titular. Con el degradado suave de la entrega las
   frases doradas quedaban a 2,6:1 sobre las caras más claras del muro;
   así quedan a 4,7:1 (medido componiendo el muro con este degradado, a
   320, 390, 768, 960, 1440 y 1920 px). */
.hero__sombra {
  background: linear-gradient(180deg, rgba(7, 7, 9, 0.38) 0%, rgba(7, 7, 9, 0.5) 12%, rgba(7, 7, 9, 0.84) 20%, rgba(7, 7, 9, 0.9) 60%, rgba(7, 7, 9, 0.97) 88%, var(--negro) 100%);
}

.hero__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 14 px arriba y no 20: son parte de los 9 px que creció el logo. Se le
     descuentan a los huecos de alrededor para que el botón dorado siga
     terminando donde terminaba. */
  padding: 14px 20px 40px;
  text-align: center;
}

/* La sombra lo despega del muro, que detrás del logo se ve casi entero. */
.hero__logo {
  width: 250px;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(7, 7, 9, 0.85));
}

.hero .pastilla-vivo { margin-top: 11px; }

.hero__titulo {
  margin-top: 13px;
  max-width: 1180px;
  font-size: clamp(28px, 1.714vw + 21.3px, 46px);
  /* Un halo oscuro pegado a cada letra. Es `filter` y no `text-shadow`
     a propósito: en las frases doradas el relleno es un fondo recortado
     por el texto, y `text-shadow` se pinta ENCIMA de ese fondo, así que
     la sombra apagaba el oro en vez de separarlo del muro. */
  filter: drop-shadow(0 1px 3px rgba(7, 7, 9, 0.9)) drop-shadow(0 2px 18px rgba(7, 7, 9, 0.75));
}

.video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin-top: 18px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--video);
  overflow: hidden;
}

.hero .boton { margin-top: 16px; }

.hero__bajada {
  max-width: 720px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gris);
}

/* ---------- Hero con foto (Oportunidad y Trader) ---------- */

.escena {
  position: relative;
  height: clamp(330px, 12.38vw + 281.7px, 460px);
  overflow: hidden;
}

.escena__muro,
.escena__capa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.escena__muro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.escena__capa--oscurecer {
  background: linear-gradient(180deg, rgba(7, 7, 9, 0.3) 0%, rgba(7, 7, 9, 0.45) 50%, rgba(7, 7, 9, 0.7) 100%);
}

.escena__capa--lados {
  background: linear-gradient(90deg, rgba(7, 7, 9, 0.9) 0%, rgba(7, 7, 9, 0) 16%, rgba(7, 7, 9, 0) 84%, rgba(7, 7, 9, 0.9) 100%);
}

.escena__capa--base {
  background: linear-gradient(180deg, rgba(7, 7, 9, 0) 0%, rgba(7, 7, 9, 0) 55%, rgba(7, 7, 9, 0.75) 82%, var(--negro) 100%);
}

/* La foto se centra por el eje de la cabeza (42,3 % del ancho del recorte),
   no por el borde: un brazo se abre más que el otro. */
.escena__persona {
  position: absolute;
  top: 10px;
  left: 50%;
  width: clamp(340px, 16.95vw + 273.9px, 518px);
  max-width: none;
  transform: translateX(-42.3%);
}

.escena__logo {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 0.76vw + 21px, 32px);
  width: clamp(250px, 14.29vw + 194.3px, 400px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 14px rgba(7, 7, 9, 0.9));
}

.hero--foto .hero__contenido { padding-top: 6px; }

.hero--foto .pastilla-vivo { margin-top: 0; }

/* Aquí el titular va sobre negro liso, debajo de la escena: no necesita halo. */
.hero--foto .hero__titulo {
  max-width: 1100px;
  font-size: clamp(26px, 1.524vw + 20.1px, 42px);
  filter: none;
}

/* ---------- Secciones ---------- */

.seccion { padding-top: 64px; }

.seccion__cabecera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.seccion__titulo {
  margin-top: 14px;
  font-size: clamp(30px, 1.714vw + 23.3px, 48px);
}

.seccion__bajada {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gris);
}

/* Clases */

.clases { padding-top: 48px; }

.clases__grilla {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.clase {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea-media);
  border-radius: 14px;
  background: var(--superficie);
  overflow: hidden;
}

.clase__miniatura {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--linea);
}

.clase__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  padding: 18px 20px 20px;
}

.clase__numero {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.clase__titulo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 350;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.clase__nota {
  font-size: 14px;
  line-height: 1.45;
  color: var(--gris);
}

.clase__texto {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  padding-bottom: 10px;
}

.clase__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 14px;
  color: var(--plata);
}

.clase__datos span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.clases .boton { margin-top: 24px; }

/* ¿Es para ti? */

.para-ti__grilla {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.para-ti__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--linea-media);
  border-radius: 14px;
  background: var(--superficie);
}

.para-ti__item div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.para-ti__rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-texto);
}

.para-ti__texto {
  font-size: 16px;
  line-height: 1.5;
}

/* ¿Por qué es diferente? Panel claro */

.diferente .contenedor { width: min(1200px, 100% - 24px); }

.diferente__panel {
  display: flex;
  flex-direction: column;
  padding: 30px 20px 10px;
  border-radius: 22px;
  background: var(--panel-claro);
  color: var(--panel-titulo);
}

.diferente__panel .seccion__titulo i { color: var(--oro-profundo); }

.diferente__lista {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.diferente__lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--panel-texto);
}

.diferente__lista li + li { border-top: 1px solid var(--panel-linea); }

/* Fases. Franja apenas más clara */

.fases {
  margin-top: 64px;
  padding: 52px 0 56px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--franja);
}

.fases__grilla {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.fase {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 14px;
  background: var(--superficie-alta);
}

.fase__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fase__numero {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blanco);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--negro);
}

.fase__fecha {
  font-size: 13px;
  font-weight: 500;
  color: var(--plata);
}

.fase__titulo {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea-media);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 350;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* 40 px desde los 400 de ancho; por debajo encoge con la pantalla, porque
   la cifra entera («+$250.000 USD») no puede partirse en dos líneas.
   `tabular-nums` da el mismo ancho a todos los dígitos: mientras la cifra
   cuenta desde cero, el número no tiembla. */
.fase__cifra {
  align-self: flex-start;
  font-size: clamp(31px, 10vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fase__moneda {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.fase__nota {
  margin-top: -8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gris-claro);
}

/* Una tarjeta con la cifra sola, sin fase ni título (/protocolo-tra).
   Centrada, porque en escritorio ocupa el ancho de las dos de arriba y
   alineada a la izquierda quedaba un renglón perdido en una caja enorme. */
.fase--dato {
  align-items: center;
  text-align: center;
}

.fase--dato .fase__cifra { align-self: center; }

.fases .boton { margin-top: 28px; }

/* La línea chica debajo de un botón («100% gratis · …»). */
.boton__nota {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--gris);
}

/* Cierre. Tampoco venía en el diseño: son las piezas de las otras
   secciones, centradas también en el teléfono porque es un remate, no un
   bloque de lectura. */
.cierre { padding: 64px 0 20px; }

.cierre .seccion__cabecera {
  align-items: center;
  text-align: center;
}

.cierre .seccion__titulo { margin-top: 0; }

.cierre .seccion__bajada { max-width: 560px; }

.cierre .boton { margin-top: 24px; }

/* Pie. No venía en el diseño: está armado con las piezas que ya había
   (contenedor, logo, plata y gris). El aviso de riesgo es el de /vsl. */

.pie { padding: 36px 0 44px; }

.pie__interior {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.pie__logo { width: 150px; }

/* Con seis enlaces ya no entran en una línea de celular: se parten. El
   `gap` vertical es chico porque cada enlace ya trae su propio relleno. */
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  font-size: 14px;
}

.pie__empresa { font-size: 14px; color: var(--plata); }
.pie__empresa strong { font-weight: 600; color: var(--blanco); }
.pie__empresa a { color: inherit; text-decoration: none; }
.pie__empresa a:hover { text-decoration: underline; }

.pie__enlaces a {
  padding: 6px 0;
  color: var(--plata);
  text-decoration: none;
}

.pie__enlaces a:hover { text-decoration: underline; }

.pie__enlaces a:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 3px;
}

.pie__aviso {
  max-width: 760px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gris);
}

/* ---------- Escritorio ---------- */

@media (min-width: 960px) {
  .boton {
    width: 380px;
    height: 64px;
    margin-inline: auto;
    font-size: 17px;
  }

  .hero__fondo,
  .hero__sombra { height: 640px; }

  .hero__sombra {
    background: linear-gradient(180deg, rgba(7, 7, 9, 0.4) 0%, rgba(7, 7, 9, 0.55) 13%, rgba(7, 7, 9, 0.84) 20%, rgba(7, 7, 9, 0.88) 55%, rgba(7, 7, 9, 0.97) 90%, var(--negro) 100%);
  }

  .hero__contenido { padding: 18px 40px 0; }

  .hero__logo { width: 330px; }

  .hero .pastilla-vivo {
    margin-top: 12px;
    font-size: 15px;
  }

  .hero__titulo { margin-top: 15px; }

  .video {
    margin-top: 28px;
    border-radius: 14px;
  }

  .hero .boton { margin-top: 22px; }

  .hero__bajada { font-size: 16px; }

  .escena__capa--lados {
    background: linear-gradient(90deg, rgba(7, 7, 9, 0.9) 0%, rgba(7, 7, 9, 0) 18%, rgba(7, 7, 9, 0) 82%, rgba(7, 7, 9, 0.9) 100%);
  }

  .hero--foto .hero__contenido { padding: 6px 20px 0; }

  .hero--foto .pastilla-vivo { margin-top: 0; }

  .hero--foto .hero__titulo { margin-top: 16px; }

  .hero--foto .boton { margin-top: 16px; }

  .hero--foto .hero__bajada { font-size: 17px; }

  .seccion { padding-top: 120px; }

  .seccion__cabecera {
    align-items: center;
    text-align: center;
  }

  .etiqueta { align-self: center; }

  .seccion__titulo {
    max-width: 900px;
    margin-top: 16px;
    line-height: 1.08;
  }

  .seccion__bajada {
    margin-top: 12px;
    font-size: 17px;
  }

  .clases { padding-top: 96px; }

  .clases__grilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
  }

  .clase__cuerpo { padding: 22px 24px 24px; }

  .clase__titulo { font-size: 24px; }

  .clases .boton { margin-top: 36px; }

  .para-ti__grilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
  }

  .para-ti__item { padding: 24px; }

  .diferente .contenedor { width: min(1200px, 100% - 40px); }

  .diferente__panel {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding: 64px;
    border-radius: 28px;
  }

  .diferente__panel .seccion__cabecera {
    align-items: flex-start;
    text-align: left;
  }

  .diferente__panel .etiqueta { align-self: flex-start; }

  .diferente__lista { margin-top: 0; }

  .diferente__lista li { font-size: 18px; }

  .fases {
    margin-top: 120px;
    padding: 96px 0;
  }

  .fases .seccion__titulo { max-width: 1000px; }

  .fases__grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(1000px, 100%);
    margin: 44px auto 0;
  }

  .fase { padding: 32px; }

  .fase--dato { grid-column: 1 / -1; }

  .fase__titulo { font-size: 26px; }

  .fase__cifra { font-size: 52px; }

  .fases .boton { margin-top: 44px; }

  /* Con cuatro puntos, tres columnas dejan uno suelto: van de dos en dos. */
  .para-ti__grilla--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cierre { padding: 104px 0 36px; }

  .cierre .boton { margin-top: 32px; }

  .pie { padding: 56px 0 64px; }

  .pie__interior {
    align-items: center;
    text-align: center;
  }

  .pie__enlaces { justify-content: center; }
}

/* ⚠️ De aquí al final: los módulos de la orgánica con su copy propio,
   tal como los entregó diseño el 2026-10-01 (las 439 líneas que su
   `styles.css` añadía a la hoja de la primera entrega). Van sin tocar.
   Su LEEME pedía reemplazar la hoja entera por la suya; no se hizo porque
   esta ya no es aquélla —lleva la pastilla, los estados del botón, el pie
   y todo lo de /protocolo-tra—, y añadir sólo lo nuevo da lo mismo sin
   perder nada. Comprobado antes de pegarlo: ninguna de sus 33 clases
   existía, y las 18 variables que usa están en `:root`. */

/* ==========================================================
   Landing orgánica (copy propio). Módulos nuevos.
   Todo lo de arriba se mantiene porque lo usa oportunidad.html.
   ========================================================== */

.seccion__entrada {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--plata);
}

.sello {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blanco);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--negro);
}

.tick--rojo { background: var(--rojo); }

/* ¿Qué es el Protocolo Valdes? El nombre va como logo dentro del título */

.que-es { padding-top: 48px; }

.titulo__logo {
  display: inline-block;
  width: 250px;
  margin-top: 12px;
  vertical-align: -12px;
}

.bloques {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--linea-media);
  border-radius: 14px;
  background: var(--superficie);
}

.bloque__cabecera {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bloque__titulo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 350;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.bloque__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0 34px;
  border-top: 1px solid var(--linea);
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
  color: var(--plata);
}

.bloque__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bloque__lista li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 1px;
  margin-top: 10px;
  background: #55555c;
}

.bloque__lista strong {
  font-weight: 600;
  color: var(--blanco);
}

/* ¿Cómo funciona? Una tarjeta por semana */

.semanas {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.semana {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea-media);
  border-radius: 14px;
  background: var(--superficie);
  overflow: hidden;
}

.semana__imagen {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--linea);
}

.semana__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 18px 20px 20px;
}

.semana__fecha {
  font-size: 14px;
  font-weight: 500;
  color: var(--plata);
}

.semana__texto {
  flex-basis: 100%;
  font-size: 15px;
  line-height: 1.5;
  color: var(--plata);
}

.funciona .boton { margin-top: 24px; }

/* ¿Por qué hago el Protocolo? Panel claro */

.motivo .contenedor { width: min(1200px, 100% - 24px); }

.panel-claro {
  display: flex;
  flex-direction: column;
  padding: 30px 20px 6px;
  border-radius: 22px;
  background: var(--panel-claro);
  color: #0b0b0d;
}

.panel-claro .seccion__titulo i { color: var(--oro-profundo); }

.motivos {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.motivo__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0;
}

.motivo__item + .motivo__item { border-top: 1px solid var(--panel-linea); }

.motivo__item div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.motivo__rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-oscuro);
}

.motivo__rotulo--rojo { color: var(--rojo); }

.motivo__texto {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--panel-texto);
}

/* ¿Qué viene después? Dos opciones, la segunda destacada */

.opciones {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--linea-media);
  border-radius: 14px;
  background: var(--superficie);
  font-size: 16px;
  line-height: 1.5;
  color: var(--plata);
}

.opcion p { margin-top: 4px; }

.opcion__numero {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #55555c;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  color: var(--plata);
}

.opcion--destacada {
  border-color: rgba(217, 185, 104, 0.6);
  background: var(--superficie-alta);
  color: var(--blanco);
}

.opcion--destacada .opcion__numero {
  border: none;
  background-image: var(--oro);
  background-size: cover;
  background-position: center;
  font-weight: 700;
  color: var(--tinta-boton);
}

/* ¿Cómo conseguir la segunda opción? Franja con el logo de Valdes Capital */

.incubadora {
  margin-top: 64px;
  padding: 52px 0 56px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--franja);
  text-align: center;
}

.incubadora .contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.incubadora .seccion__titulo { margin-top: 0; }

.incubadora__rotulo {
  margin-top: 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.incubadora__logo {
  width: 250px;
  margin-top: 18px;
}

.incubadora__texto {
  max-width: 720px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--plata);
}

.incubadora .boton { margin-top: 28px; }

/* Clases como último módulo */

.clases--final {
  padding-top: 64px;
  padding-bottom: 64px;
}

.clases--final .clases__grilla { margin-top: 20px; }

@media (min-width: 960px) {
  .seccion__entrada {
    max-width: 760px;
    margin-top: 14px;
    font-size: 18px;
  }

  .que-es { padding-top: 96px; }

  .titulo__logo {
    width: 380px;
    margin-top: 16px;
    vertical-align: -18px;
  }

  .bloques {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(1000px, 100%);
    margin: 36px auto 0;
  }

  .bloque {
    gap: 16px;
    padding: 28px;
  }

  .bloque__cabecera { gap: 14px; }

  .bloque__titulo { font-size: 26px; }

  .bloque__lista {
    gap: 9px;
    padding: 16px 0 0 36px;
    font-size: 16px;
  }

  .semanas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(1100px, 100%);
    margin: 40px auto 0;
  }

  .semana__pie {
    gap: 8px 12px;
    padding: 22px 24px 24px;
  }

  .semana__fecha { font-size: 15px; }

  .funciona .boton { margin-top: 36px; }

  .motivo .contenedor { width: min(1200px, 100% - 40px); }

  .panel-claro {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding: 64px;
    border-radius: 28px;
  }

  .panel-claro .seccion__cabecera {
    align-items: flex-start;
    text-align: left;
  }

  .panel-claro .etiqueta { align-self: flex-start; }

  .motivos { margin-top: 0; }

  .motivo__item {
    gap: 14px;
    padding: 22px 0;
  }

  .motivo__item:first-child { padding-top: 0; }

  .motivo__texto { font-size: 18px; }

  .opciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(1000px, 100%);
    margin: 36px auto 0;
  }

  .opcion {
    gap: 16px;
    padding: 28px;
    font-size: 17px;
  }

  .opcion p { margin-top: 5px; }

  .opcion__numero {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .incubadora {
    margin-top: 120px;
    padding: 96px 0;
  }

  .incubadora .seccion__titulo { max-width: 1040px; }

  .incubadora__rotulo {
    margin-top: 36px;
    font-size: 13px;
  }

  .incubadora__logo {
    width: 340px;
    margin-top: 22px;
  }

  .incubadora__texto {
    margin-top: 30px;
    font-size: 18px;
  }

  .incubadora .boton { margin-top: 36px; }

  .clases--final {
    padding-top: 120px;
    padding-bottom: 0;
  }

  .clases--final .clases__grilla { margin-top: 40px; }
}

/* ==========================================================
   Retoques sobre los módulos de la orgánica (Gastón, 2026-10-01).
   Van DESPUÉS del bloque de diseño y sin tocarlo, para que se
   vea qué vino en la entrega y qué se cambió luego.
   ========================================================== */

/* ── Las dos tarjetas de «¿Qué es?» ──
   Venían planas: un tick verde, el título y una lista con guiones. Ahora
   llevan un filo dorado arriba, un número grande de fondo —el mismo
   recurso de las miniaturas de las clases— y un icono dorado. */
.bloque {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--linea-fuerte);
  background: linear-gradient(165deg, var(--superficie-alta) 0%, var(--superficie) 62%);
  transition: transform 0.3s var(--salida), border-color 0.3s var(--salida);
}

/* El foco de luz. Lo mueve el script con el cursor; en un teléfono no
   hay cursor y se queda apagado. */
.bloque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--foco-x, 50%) var(--foco-y, 0%), rgba(217, 185, 104, 0.16), rgba(217, 185, 104, 0) 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.bloque::after {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 185, 104, 0), rgba(230, 204, 136, 0.75) 50%, rgba(217, 185, 104, 0));
  pointer-events: none;
}

/* Abajo a la derecha, que es donde la tarjeta queda vacía: arriba se
   montaba sobre el final del título. */
.bloque__numero {
  position: absolute;
  right: 16px;
  bottom: -10px;
  z-index: -1;
  font-family: var(--serif);
  font-size: 92px;
  font-weight: 350;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  user-select: none;
}

.bloque__cabecera { align-items: center; }

.bloque__icono {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(217, 185, 104, 0.42);
  border-radius: 12px;
  background: rgba(217, 185, 104, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.12);
  color: var(--oro-plano);
}

/* La lista arranca alineada con el título: 44 px del icono y 12 de hueco. */
.bloque__lista {
  gap: 10px;
  padding-left: 56px;
  border-top-color: var(--linea-media);
}

/* El punto se alinea con la PRIMERA línea del renglón, no con el centro:
   hay renglones que en el teléfono ocupan dos. */
.bloque__lista li::before {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--oro-plano);
  box-shadow: 0 0 8px rgba(217, 185, 104, 0.55);
}

.bloque__lista strong { color: var(--oro-plano); }

/* ── La opción 2 de «¿Qué viene después?» ──
   Un brillo dorado que recorre el borde y un resplandor que respira.
   El ángulo del degradado es una propiedad registrada (@property) para
   poder animarla; donde no exista, el borde queda dorado y quieto. */
@property --giro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.opcion--destacada {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(var(--superficie-alta), var(--superficie-alta)) padding-box,
    conic-gradient(from var(--giro), rgba(217, 185, 104, 0.34) 0deg, rgba(217, 185, 104, 0.34) 210deg, #f6e7b4 315deg, rgba(217, 185, 104, 0.34) 360deg) border-box;
  animation: giro 5.5s linear infinite;
}

.opcion--destacada::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 44px 3px rgba(217, 185, 104, 0.34);
  opacity: 0;
  pointer-events: none;
  animation: latido 3.4s ease-in-out infinite;
}

@keyframes giro {
  to { --giro: 360deg; }
}

/* ── Las imágenes de las semanas ──
   El marco recorta el acercamiento: sin él, la foto ampliada se montaba
   sobre la fecha de debajo. */
.semana__marco {
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}

.semana__marco .semana__imagen {
  border-bottom: none;
  transition: transform 0.9s var(--salida);
}

/* ── El botón de debajo de las clases ── */
.clases--final .boton { margin-top: 28px; }

@media (hover: hover) and (pointer: fine) {
  .bloque:hover {
    transform: translateY(-3px);
    border-color: rgba(217, 185, 104, 0.45);
  }

  .bloque:hover::before { opacity: 1; }

  .semana:hover .semana__imagen { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .opcion--destacada,
  .opcion--destacada::after { animation: none; }

  .opcion--destacada::after { opacity: 0.6; }

  .bloque,
  .bloque:hover { transform: none; }

  .semana:hover .semana__imagen { transform: none; }
}

@media (min-width: 960px) {
  .bloque__numero {
    right: 24px;
    bottom: -14px;
    font-size: 128px;
  }

  .bloque__icono {
    width: 48px;
    height: 48px;
  }

  .bloque__lista { padding-left: 62px; }

  .clases--final { padding-bottom: 24px; }

  .clases--final .boton { margin-top: 44px; }
}

/* ==========================================================
   Segunda tanda de retoques (Gastón, 2026-10-01). Estos ya no
   son sólo de la orgánica: las etiquetas, «¿Es para ti?» y las
   fases están en las otras dos landings.
   ========================================================== */

/* ── Las etiquetas de encima de cada título ──
   El mismo brillo que recorre el borde de la opción 2, más lento y más
   tenue: es un detalle, no un reclamo. Usa `--giro` y `@keyframes giro`,
   que ya están definidos arriba. */
.etiqueta {
  border-color: transparent;
  background:
    linear-gradient(var(--superficie), var(--superficie)) padding-box,
    conic-gradient(from var(--giro), var(--linea-media) 0deg, var(--linea-media) 235deg, rgba(230, 204, 136, 0.8) 318deg, var(--linea-media) 360deg) border-box;
  animation: giro 7s linear infinite;
}

.etiqueta--clara {
  border-color: transparent;
  background:
    linear-gradient(var(--blanco), var(--blanco)) padding-box,
    conic-gradient(from var(--giro), var(--panel-borde) 0deg, var(--panel-borde) 235deg, rgba(138, 106, 42, 0.85) 318deg, var(--panel-borde) 360deg) border-box;
}

/* ── «¿Qué viene después?»: las dos opciones ──
   La 1 es el camino que no se recomienda, y se nota: borde punteado,
   sin fondo, texto apagado. La 2 lleva el peso: más ancha en escritorio,
   un reflejo dorado en la esquina y las negritas. */
.opcion {
  position: relative;
  transition: transform 0.3s var(--salida);
}

.opcion__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.opcion__rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.opcion p { margin-top: 0; }

.opcion__numero {
  width: 38px;
  height: 38px;
  font-size: 16px;
  font-weight: 700;
}

.opcion:not(.opcion--destacada) {
  border-style: dashed;
  background: transparent;
  color: var(--gris-claro);
}

.opcion:not(.opcion--destacada) .opcion__numero {
  border-color: var(--linea-fuerte);
  color: var(--gris);
}

.opcion--destacada {
  color: var(--plata);
  background:
    radial-gradient(85% 130% at 100% 0%, rgba(217, 185, 104, 0.14), rgba(217, 185, 104, 0) 62%) padding-box,
    linear-gradient(var(--superficie-alta), var(--superficie-alta)) padding-box,
    conic-gradient(from var(--giro), rgba(217, 185, 104, 0.34) 0deg, rgba(217, 185, 104, 0.34) 210deg, #f6e7b4 315deg, rgba(217, 185, 104, 0.34) 360deg) border-box;
}

.opcion--destacada .opcion__rotulo { color: var(--oro-plano); }

.opcion--destacada strong {
  font-weight: 600;
  color: var(--blanco);
}

/* El 2 en blanco sobre negro, con un aro dorado: sobre el relleno de oro
   de la entrega, el número oscuro se perdía. */
.opcion--destacada .opcion__numero {
  border: 1.5px solid var(--oro-plano);
  background: var(--negro);
  color: var(--blanco);
  box-shadow: 0 0 0 4px rgba(217, 185, 104, 0.12), 0 0 20px rgba(217, 185, 104, 0.4);
}

/* ── «¿Cómo funciona?»: las fotos, más bajas ──
   16/10 en vez de 4/3, para dejarle sitio a la descripción de cada semana.
   El encuadre sube (18 %) porque en las dos fotos la cara está arriba. */
.semana__marco .semana__imagen {
  aspect-ratio: 16 / 10;
  object-position: center 18%;
}

.semana__texto { color: var(--gris-claro); }

/* ── «¿Es para ti?» (Oportunidad y Trader) ──
   El mismo trato que las tarjetas de «¿Qué es?», en verde: es el color
   del «Lo es si». El tick deja de ser un círculo relleno y pasa a una
   insignia; su trazo viene oscuro en el HTML y aquí se aclara. */
.para-ti__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--linea-fuerte);
  background: linear-gradient(165deg, var(--superficie-alta) 0%, var(--superficie) 62%);
  transition: transform 0.3s var(--salida), border-color 0.3s var(--salida);
}

.para-ti__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(300px circle at var(--foco-x, 50%) var(--foco-y, 0%), rgba(74, 222, 128, 0.13), rgba(74, 222, 128, 0) 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.para-ti__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0), rgba(74, 222, 128, 0.6) 50%, rgba(74, 222, 128, 0));
  pointer-events: none;
}

.para-ti__item .tick {
  width: 34px;
  height: 34px;
  margin-top: 0;
  border: 1px solid rgba(74, 222, 128, 0.42);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.12);
}

.para-ti__item .tick svg {
  width: 16px;
  height: 16px;
  stroke: var(--verde-texto);
}

/* ── Las fases (Oportunidad y Trader) ──
   Un filo dorado arriba, que es el color de sus cifras, y nada más: ya
   tienen el conteo. */
.fase {
  position: relative;
  background: linear-gradient(165deg, var(--superficie-alta) 0%, var(--superficie) 70%);
  transition: transform 0.3s var(--salida), border-color 0.3s var(--salida);
}

.fase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 185, 104, 0), rgba(230, 204, 136, 0.7) 50%, rgba(217, 185, 104, 0));
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .opcion--destacada:hover { transform: translateY(-3px); }

  .para-ti__item:hover {
    transform: translateY(-3px);
    border-color: rgba(74, 222, 128, 0.4);
  }

  .para-ti__item:hover::before { opacity: 1; }

  .fase:hover {
    transform: translateY(-3px);
    border-color: rgba(217, 185, 104, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .etiqueta { animation: none; }

  .opcion,
  .opcion--destacada:hover,
  .para-ti__item,
  .para-ti__item:hover,
  .fase,
  .fase:hover { transform: none; }
}

@media (min-width: 960px) {
  .opciones { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }

  .opcion__numero {
    width: 40px;
    height: 40px;
  }

  .opcion p { margin-top: 0; }
}

/* ==========================================================
   El subtítulo del hero de la orgánica (2026-10-03).
   La bajada (`.hero__bajada`) es letra chica y gris debajo del botón, y
   para la frase de los 100k y 260k quedaba corta: Gastón la pidió arriba
   del botón y con jerarquía de subtítulo. Va entre el video y el botón.
   Es una clase aparte y no un cambio de `.hero__bajada` porque
   Oportunidad y Trader siguen con la bajada tal cual.
   ========================================================== */

.hero__subtitulo {
  /* El ancho del video: los dos caen en la misma columna. */
  max-width: 640px;
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--plata);
  /* Renglones parejos: sin esto, «gratis.» quedaba solo en el último. */
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(7, 7, 9, 0.85);
}

.hero__subtitulo strong {
  font-weight: 600;
  color: var(--blanco);
}

/* El titular propio es corto y en escritorio dejaba «cómo aquí 👇» solo en
   el segundo renglón. Sólo en la orgánica (`hero--vsl`): los de Oportunidad
   y Trader se parten como en la entrega. */
.hero--vsl .hero__titulo { text-wrap: balance; }

@media (min-width: 960px) {
  .hero__subtitulo {
    margin-top: 24px;
    font-size: 21px;
  }
}