/* =====================================================================
   TUTEBEVACQUA.COM — hoja del rediseño (2026-08-15)

   NO TOCA EL REPRODUCTOR. Los estilos del video viven aparte, en
   assets/video-player/reproductor.css, tal cual estaban. Acá solo está
   lo que rodea: el fondo, el ritmo, la tipografía y las secciones.

   CRITERIO: negro, mucho aire, una sola familia tipográfica, un solo
   color de acento y casi ningún efecto. Lo premium acá es el espacio y
   la contención, no el brillo.
   ===================================================================== */

:root {
  --fondo:        #05070b;
  --fondo-2:      #0a0e15;
  --linea:        rgba(255, 255, 255, .08);
  --linea-viva:   rgba(255, 255, 255, .16);
  --texto:        #f2f5fa;
  --apagado:      #9aa6bb;
  --tenue:        #6b7688;
  --acento:       #6ba9ff;
  --acento-tenue: rgba(107, 169, 255, .12);

  /* Un solo ritmo vertical para toda la página: si cada sección elige su
     propio aire, la página se siente cosida a mano. */
  --aire:      clamp(72px, 11vw, 132px);
  --aire-poco: clamp(28px, 5vw, 48px);
  --ancho:     1120px;
  --radio:     16px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.tb {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* NADA SE VA DE COSTADO. Alcanza con que una caja se pase unos píxeles
     para que toda la página se arrastre en diagonal en el teléfono. */
  overflow-x: hidden;
}

.tb-ancho { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
@media (max-width: 520px) { .tb-ancho { width: min(var(--ancho), 100% - 32px); } }

.tb-seccion { padding-block: var(--aire); }
.tb-seccion + .tb-seccion { border-top: 1px solid var(--linea); }

/* ── Tipografía ────────────────────────────────────────────────────
   Títulos grandes de verdad y párrafos cortos. La regla que se sigue
   acá: antes 30% más larga que con letra chica para meter más. */
.tb-h2 {
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 18px;
  text-wrap: balance;
}
.tb-h3 {
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 600;
  margin: 0 0 8px;
}
.tb-p { color: var(--apagado); margin: 0 0 16px; max-width: 62ch; font-size: 17px; }
.tb-p.grande { font-size: clamp(18px, 2.3vw, 21px); color: #c9d3e3; }
.tb-eyebrow {
  display: inline-block; margin: 0 0 14px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento); font-weight: 600;
}

/* ── Botones ───────────────────────────────────────────────────────
   Cómodos con el dedo (48 px de alto) pero sin ser enormes. */
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: 100px; border: 1px solid transparent;
  font-size: 16px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tb-btn:active { transform: scale(.98); }
.tb-btn-1 { background: var(--texto); color: #06080d; }
.tb-btn-1:hover { background: #fff; }
.tb-btn-2 { background: transparent; color: var(--texto); border-color: var(--linea-viva); }
.tb-btn-2:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.04); }
.tb-btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .tb-btns .tb-btn { width: 100%; } }

/* ── Tarjetas ──────────────────────────────────────────────────────── */
.tb-card {
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  padding: 26px 24px;
}
.tb-grid { display: grid; gap: 16px; }
.tb-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.tb-grid.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .tb-grid.g3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tb-grid.g2 { grid-template-columns: 1fr; } }

/* ── La historia: una línea de tiempo, no una biografía ───────────── */
.tb-linea { display: grid; gap: 0; margin-top: 34px; }
.tb-hito {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--linea);
}
.tb-hito:last-child { border-bottom: 1px solid var(--linea); }
.tb-hito b { color: var(--acento); font-size: 15px; font-variant-numeric: tabular-nums; }
.tb-hito p { margin: 0; color: var(--apagado); }
@media (max-width: 640px) {
  .tb-hito { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}

/* ── Los tres pasos: crear, validar, profesionalizar ──────────────── */
.tb-paso .n {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--linea-viva);
  font-size: 13px; color: var(--acento); margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

/* ── Qué incluye: lista, no muro de texto ─────────────────────────── */
.tb-incluye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-top: 30px; }
.tb-incluye > div { background: var(--fondo); padding: 22px 20px; }
.tb-incluye b { display: block; font-size: 16px; margin-bottom: 4px; }
.tb-incluye span { color: var(--tenue); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 860px) { .tb-incluye { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tb-incluye { grid-template-columns: 1fr; } }

/* ── Para quién es / para quién no ────────────────────────────────── */
.tb-si-no { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
@media (max-width: 760px) { .tb-si-no { grid-template-columns: 1fr; } }
.tb-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.tb-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--apagado); font-size: 16px; }
.tb-lista li i { font-style: normal; color: var(--acento); }
.tb-card.no .tb-lista li i { color: var(--tenue); }

/* ── Niveles ───────────────────────────────────────────────────────── */
.tb-nivel .tag {
  display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento); background: var(--acento-tenue);
  padding: 5px 11px; border-radius: 100px; margin-bottom: 14px;
}
.tb-nivel h3 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.02em; }
.tb-nivel .obj { color: var(--texto); font-size: 15.5px; margin: 0 0 14px; }

/* ── El precio: la sección que más se lee ─────────────────────────── */
.tb-precio {
  border: 1px solid var(--linea-viva); border-radius: 22px;
  padding: clamp(30px, 5vw, 54px);
  background: radial-gradient(120% 140% at 50% 0%, rgba(107,169,255,.09), transparent 62%), var(--fondo-2);
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.tb-faq { margin-top: 30px; border-top: 1px solid var(--linea); }
.tb-faq details { border-bottom: 1px solid var(--linea); }
.tb-faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-size: 17.5px; font-weight: 500;
}
.tb-faq summary::-webkit-details-marker { display: none; }
.tb-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--acento); font-size: 22px; line-height: 1; transition: transform .2s ease;
}
.tb-faq details[open] summary::after { content: "−"; }
.tb-faq .r { color: var(--apagado); padding: 0 0 22px; margin: 0; max-width: 68ch; }

/* ── Cierre ────────────────────────────────────────────────────────── */
.tb-cierre { text-align: center; padding-block: clamp(80px, 12vw, 150px); }
.tb-cierre .tb-p { margin-inline: auto; }
.tb-cierre .tb-btns { justify-content: center; }

/* ── Pie ───────────────────────────────────────────────────────────── */
.tb-pie { padding: 40px 0 60px; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 14px; }
.tb-pie a { color: var(--apagado); text-decoration: none; }
.tb-pie a:hover { color: var(--texto); }

/* ── CTA fija en el teléfono ───────────────────────────────────────
   La mayoría del tráfico entra desde Instagram y no vuelve a subir a
   buscar el botón. Aparece RECIÉN despues del video: mientras el video
   se está mirando, taparlo con una barra sería pelearle a la pieza que
   más convierte. */
.tb-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(5,7,11,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  transform: translateY(110%); transition: transform .28s ease;
}
.tb-fija.se-ve { transform: translateY(0); }
.tb-fija .tb-btn { width: 100%; }
@media (min-width: 861px) { .tb-fija { display: none; } }

/* ── Aparición al hacer scroll ─────────────────────────────────────
   Muy leve y solo hacia arriba. Si el JS no corre, se ve igual: el
   estado de reposo es visible (ver el <noscript> del HTML). */
.tb-ap { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tb-ap.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tb-ap { opacity: 1; transform: none; transition: none; } }

/* =====================================================================
   LOS TRES NIVELES — el centro comercial de la página
   Las TARJETAS estan mas abajo, clonadas de mateobevacqua.com.
   Aca queda solo la tabla comparativa de pantalla ancha y el cierre.
   ===================================================================== */
.nv-tabla-caja { display: none; }
@media (min-width: 900px) {
  .nv-tabla-caja {
    display: block; margin-top: 44px;
    border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  }
}
.nv-tabla { width: 100%; border-collapse: collapse; }
.nv-caption {
  text-align: left; padding: 20px 22px 16px; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
}
.nv-tabla thead th {
  text-align: center; padding: 14px 16px 18px; font-size: 16px; font-weight: 600;
  border-bottom: 1px solid var(--linea-viva); vertical-align: bottom;
}
.nv-tabla thead th small { display: block; color: var(--tenue); font-size: 12.5px; font-weight: 400; margin-top: 3px; }
.nv-tabla tbody th {
  text-align: left; font-weight: 500; font-size: 15.5px;
  padding: 15px 22px; border-bottom: 1px solid var(--linea); width: 44%;
}
.nv-tabla tbody th small { display: block; color: var(--tenue); font-size: 13px; font-weight: 400; margin-top: 3px; max-width: 46ch; }
.nv-tabla tbody td {
  text-align: center; padding: 15px 12px; border-bottom: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}
.nv-tabla tbody tr:last-child th, .nv-tabla tbody tr:last-child td { border-bottom: 0; }
.nv-si { color: var(--acento); font-size: 17px; }
.nv-no { color: rgba(255,255,255,.18); }
.nv-n  { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }

.nv-cierre {
  margin-top: 40px; padding: 30px 26px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--fondo-2);
}
.nv-cierre .tb-p { margin-bottom: 20px; }

/* =====================================================================
   "LA PÁGINA SIGUE" — el aviso debajo del botón del hero

   POR QUÉ EXISTE: abajo del botón el fondo se vuelve negro y no hay
   ninguna señal de que haya más. El que entra desde Instagram no
   scrollea a ver si aparece algo: se va. Este bloque tiene que entrar
   en la PRIMERA pantalla y decir qué hay abajo, no solo "bajá".
   ===================================================================== */
.tb-sigue {
  display: block; max-width: 420px; margin: 22px auto 0;
  padding: 14px 18px 16px; text-align: center; text-decoration: none;
  border: 1px solid var(--linea); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition: border-color .2s ease, background .2s ease;
}
.tb-sigue:hover { border-color: var(--linea-viva); background: rgba(255,255,255,.06); }
.tb-sigue-t { display: block; color: var(--texto); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.tb-sigue-s { display: block; color: var(--apagado); font-size: 13.5px; margin-top: 3px; line-height: 1.4; }
/* La flecha se mueve apenas: alcanza para que el ojo la registre. */
.tb-sigue-f {
  display: block; width: 11px; height: 11px; margin: 10px auto 0;
  border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
  transform: rotate(45deg); animation: tbBaja 1.9s ease-in-out infinite;
}
@keyframes tbBaja { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(3px,3px); } }
@media (prefers-reduced-motion: reduce) { .tb-sigue-f { animation: none; } }

/* El corte a negro dejaba un hueco muerto entre el botón y lo que sigue. */
.vsl-hero { padding-bottom: 26px !important; }

/* =====================================================================
   LAS TARJETAS DE NIVEL — clonadas de mateobevacqua.com

   Los valores salieron de assets/css/styles.css de la mentoría (bloque
   .plan-card). Se mantiene su color por nivel —cian, violeta, dorado—,
   sus pastillas y sus renglones. Lo único que cambia: acá se ven SIEMPRE
   (en la web de Mateo son la versión de teléfono de una tabla) y el
   título, el subtítulo y la pila de "2 meses" quedan como estaban.
   ===================================================================== */
.plan-cards { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 980px) { .plan-cards { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.plan-card {
  border: 1px solid var(--linea-viva); border-radius: 18px;
  background: rgba(255,255,255,.035); backdrop-filter: blur(8px);
  padding: 22px 20px;
}
.plan-card.l1 { border-top: 3px solid #38bdf8; }
.plan-card.l2 { border-top: 3px solid #a78bfa; }
.plan-card.l3 { border-top: 3px solid #f5c45e; }

.pc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--linea-viva); }
.pc-name { font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; }
.plan-card.l1 .pc-name { color: #67e8f9; }
.plan-card.l2 .pc-name { color: #a78bfa; }
.plan-card.l3 .pc-name { color: #f5c45e; }
.pc-sub { font-size: .86rem; color: var(--apagado); }
.pc-dur { display: inline-block; font-weight: 700; font-size: .74rem; color: #04231a;
  background: linear-gradient(135deg,#3ddc97,#22c55e); padding: 3px 11px; border-radius: 100px;
  margin-top: 3px; box-shadow: 0 4px 12px rgba(61,220,151,.28); }
.pc-lema { font-size: .9rem; color: var(--apagado); line-height: 1.5; margin: 0 0 14px; }

.plan-card .pc-list { list-style: none; display: block; margin: 0 0 18px; padding: 0; }
.plan-card .pc-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
  column-gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.plan-card .pc-list li:last-child { border-bottom: 0; }
.plan-card .pc-mk { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.plan-card.l1 .pc-mk { background: rgba(56,189,248,.15); color: #67e8f9; box-shadow: inset 0 0 0 1px rgba(56,189,248,.3); }
.plan-card.l2 .pc-mk { background: rgba(167,139,250,.16); color: #c4b5fd; box-shadow: inset 0 0 0 1px rgba(167,139,250,.32); }
.plan-card.l3 .pc-mk { background: rgba(245,196,94,.14); color: #f5c45e; box-shadow: inset 0 0 0 1px rgba(245,196,94,.3); }
.plan-card .pc-txt { display: flex; flex-direction: column; gap: 2px; font-size: .93rem;
  color: var(--texto); font-weight: 500; line-height: 1.35; }
.plan-card .pc-n { font-style: normal; font-size: .78rem; color: var(--apagado); font-weight: 400; line-height: 1.35; }
.plan-card .pc-q { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  font-size: .95rem; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px;
  display: grid; place-items: center; }
.plan-card.l1 .pc-q { color: #67e8f9; background: rgba(56,189,248,.14); box-shadow: inset 0 0 0 1px rgba(56,189,248,.3); }
.plan-card.l2 .pc-q { color: #c4b5fd; background: rgba(167,139,250,.15); box-shadow: inset 0 0 0 1px rgba(167,139,250,.32); }
.plan-card.l3 .pc-q { color: #f5c45e; background: rgba(245,196,94,.13); box-shadow: inset 0 0 0 1px rgba(245,196,94,.3); }
.pc-total { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; font-size: .68rem; padding: 3px 9px; border-radius: 100px;
  white-space: nowrap; color: #05070f; background: #e9eefb; }
.plan-card.l1 .pc-total { background: linear-gradient(135deg,#38bdf8,#67e8f9); }
.plan-card.l2 .pc-total { background: linear-gradient(135deg,#a78bfa,#c4b5fd); }
.plan-card.l3 .pc-total { background: linear-gradient(135deg,#f5c45e,#fcd98a); }
.plan-card .tb-btn { width: 100%; }

/* =====================================================================
   LA PILA DEL HERO

   Venia en amarillo (#f5c45e) sobre un fondo azulado: dos colores que no
   se hablan, y el unico amarillo de toda la pagina. Se pasa al acento
   del sitio, mas contenido y mas legible sobre negro.

   SE CORRIGE DESDE ACA Y NO EN EL ARCHIVO DEL REPRODUCTOR: ese archivo
   se mantiene igual al original a proposito, y este es un color del
   hero, no del video.
   ===================================================================== */
.vsl-hero .v-pill {
  color: #cfe0ff;
  background: rgba(107, 169, 255, .10);
  border-color: rgba(107, 169, 255, .28);
  letter-spacing: .01em;
}

/* =====================================================================
   QUE LA BARRA FIJA NO TAPE EL FINAL DE LA PAGINA

   La barra vive por encima del contenido, asi que el ultimo parrafo
   quedaba debajo: el aviso legal del pie se cortaba a la mitad. Y es
   justo el que no se puede tapar.

   Se le reserva su alto al final de la pagina. El numero no es a ojo:
   son los 52 px del boton + 10 arriba + 10 abajo + el borde, y ademas
   `env(safe-area-inset-bottom)` para la franja del iPhone.
   ===================================================================== */
@media (max-width: 860px) {
  .tb-pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   YA NO ES UNA PASTILLA: ES SOLO EL TEXTO

   Antes iba adentro de una cápsula con borde y fondo. Pedido del
   2026-08-17: que sea únicamente el texto. Se le sacan el borde, el
   fondo y el relleno, y queda como un rótulo suelto arriba del titular,
   que es más limpio y no le compite al h1.

   Se apaga desde acá y no en el archivo del reproductor, que se mantiene
   igual al original a propósito. Los `!important` son porque
   reproductor.css define esas mismas propiedades y no se toca.
   ===================================================================== */
.vsl-hero .v-pill {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: min(560px, calc(100% - 32px));
  text-align: center;
  line-height: 1.35;
}

/* En el teléfono la frase entera cae en TRES renglones. Se parte en el
   separador —que es donde corta el sentido— y queda en dos.
   `balance` no alcanzaba: reparte mejor los renglones, pero no cambia
   cuántos son. */
.vsl-hero .v-pill-sep { opacity: .5; }
@media (max-width: 620px) {
  .vsl-hero .v-pill {
    display: grid; gap: 1px; text-align: center;
    font-size: 11.5px;
    padding: 0 !important;
    max-width: calc(100% - 40px);
    /* Con `display: grid` deja de ser una caja en línea y el
       `text-align: center` del hero ya no la centra: hay que centrarla a
       ella. Sin esto el rótulo quedaba 14 px corrido a la izquierda. */
    margin-inline: auto;
  }
  .vsl-hero .v-pill-sep { display: none; }
  .vsl-hero .v-pill-b { opacity: .82; }
}

/* =====================================================================
   EL SUBTITULO DEL HERO, DESPEGADO DEL BORDE EN EL TELEFONO

   El hero no tiene margen lateral propio: `.v-hero` va con
   `padding: 18px 0` y el `*` del reproductor le saca el padding a todo
   lo de adentro, asi que el parrafo ocupa el ancho entero de la
   pantalla. La frase es larga y el renglon del medio llegaba a tocar
   los bordes. Medido en un marco del ancho real de cada telefono:

     375 -> 4,5 px    390 -> 12 px    402 (iPhone 17 Pro) -> 3,1 px
     414 -> 9,1 px    430 -> 17,1 px

   Con 18 px de sangria ninguno baja de 17 px y no aparece scroll
   horizontal en ninguno. En el de 402 el parrafo pasa a tres renglones
   y el video baja 21 px, que sigue entrando de sobra en la primera
   pantalla (arranca a 242 px de 874).

   SOLO EL SUBTITULO. El titulo ya queda a 17 px por su cuenta, y
   apretarlo le agrega dos renglones y empuja el video: en una landing
   de video, eso cuesta mas de lo que arregla.
   ===================================================================== */
@media (max-width: 720px) {
  .vsl-hero .sub { padding-left: 18px; padding-right: 18px; }
}

/* =====================================================================
   EL RESPLANDOR DEL BOTON DEL HERO

   Venia con una sombra de 40 px de desenfoque en azul, que se derramaba
   sobre el texto de abajo: "Gratuita y sin compromiso" quedaba nadando
   en una nube celeste y costaba leerlo. Y justo debajo esta el bloque
   que avisa que la pagina sigue, que es el que NO puede perder contraste.

   Se achica y se baja la opacidad: el boton conserva su relieve -sigue
   siendo lo mas luminoso de la pantalla- pero deja de invadir lo que
   tiene alrededor. Se corrige desde aca y no en el archivo del
   reproductor, que se mantiene igual al original.
   ===================================================================== */
.vsl-hero .v-btn-primary {
  box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}
.vsl-hero .v-btn-primary:hover {
  box-shadow: 0 12px 26px rgba(37, 99, 235, .34);
}
/* Y un poco de aire entre el boton y lo que sigue, para que la
   separacion la haga el espacio y no la luz. */
.vsl-hero .cta-row .micro { margin-top: 12px; }

/* =====================================================================
   EL BOTON DE AGENDAR — NEON DE VERDAD

   La primera version solo le cambio el color y quedo en un boton azul
   comun. Neon no es un color: es luz. Se arma en capas, que es como se
   ve un tubo de neon real:

     1. el filo             — un anillo claro pegado al borde
     2. el halo cercano     — brillante y corto, lo que "enciende"
     3. el halo medio       — mas suave y abierto
     4. el apoyo            — la sombra que lo separa del fondo
     5. el brillo interior  — la luz sobre el borde de arriba
     6. el texto            — con su propio resplandor

   Y LATE, apenas. Un neon fijo se lee como un boton pintado; el pulso es
   lo que lo hace parecer encendido.

   EL HALO ES CORTO A PROPOSITO. El del hero venia con 40 px de desenfoque
   abierto y se derramaba sobre el texto de abajo. Aca la luz es MAS
   intensa pero MAS pegada al boton: brilla mucho y moja poco.
   ===================================================================== */
.tb-btn-1 {
  background: linear-gradient(120deg, #2f7bff, #5aa9ff);
  color: #fff;
  border: 1px solid rgba(147, 197, 253, .6);
  text-shadow: 0 0 10px rgba(219, 234, 254, .5);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, .40),
    0 0 10px rgba(59, 130, 246, .85),
    0 0 22px rgba(59, 130, 246, .50),
    0 6px 22px rgba(37, 99, 235, .32),
    inset 0 1px 0 rgba(255, 255, 255, .38);
  animation: tbNeon 2.8s ease-in-out infinite;
}
@keyframes tbNeon {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(96, 165, 250, .40),
      0 0 10px rgba(59, 130, 246, .85),
      0 0 22px rgba(59, 130, 246, .50),
      0 6px 22px rgba(37, 99, 235, .32),
      inset 0 1px 0 rgba(255, 255, 255, .38);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(147, 197, 253, .55),
      0 0 16px rgba(96, 165, 250, 1),
      0 0 34px rgba(59, 130, 246, .62),
      0 6px 26px rgba(37, 99, 235, .38),
      inset 0 1px 0 rgba(255, 255, 255, .5);
  }
}
.tb-btn-1:hover {
  background: linear-gradient(120deg, #3d88ff, #6fb6ff);
  animation: none;
  box-shadow:
    0 0 0 1px rgba(191, 219, 254, .65),
    0 0 20px rgba(96, 165, 250, 1),
    0 0 42px rgba(59, 130, 246, .7),
    0 8px 30px rgba(37, 99, 235, .42),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* Quien pidio menos animaciones en su telefono no ve el pulso, pero SI
   el neon: lo que sobra es el movimiento, no la luz. */
@media (prefers-reduced-motion: reduce) { .tb-btn-1 { animation: none; } }

/* En la barra fija late igual pero con el halo mas corto: justo debajo
   esta el aviso legal del pie y no puede quedar lavado. */
.tb-fija .tb-btn-1 {
  animation: none;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, .40),
    0 0 10px rgba(59, 130, 246, .7),
    0 0 18px rgba(59, 130, 246, .34),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}