/* ==========================================================================
   WhizYum — Landing /para-nutriologos
   Sistema de diseño standalone (sin Bootstrap, sin build step).

   Convención de namespaces: TODO lleva prefijo `wy-` para no colisionar con
   las hojas del panel (dashboard/meals) que sí usan Bootstrap.

   Paleta: ink verde profundo + esmeralda + lima, sobre crema cálido.
   Racional: clínico y confiable (verde) sin parecer "app de fitness" neón,
   con un acento lima que da energía sin perder seriedad.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   1. Tokens

   LOS TOKENS SE FUERON de este archivo (2026-10-03).

   Este documento era el dueno de la marca, y eso hacia que la pagina que
   vende fuera dueña del color: login, register, panel y app del paciente
   tenian que tomarlo prestado de un archivo de landing, con sus propias
   copias (un #1E7A4B en el panel, un #4F944F en layout/app, y el #7F00FF
   morado en config/brand.php al lado de este verde).

   Ahora viven en `brand.css` y este archivo los consume. Se carga SIEMPRE
   despues de `brand.css`; si quitas ese link, esta hoja no tiene colores.
   La justificacion de la paleta (por que verde y no morado) quedo alli,
   junto con los valores. --*/

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body.wy-body {
  margin: 0;
  font-family: var(--wy-font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--wy-text-700);
  background: var(--wy-cream-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.wy-nav-open {
  overflow: hidden;
}

.wy-body img {
  max-width: 100%;
  display: block;
}

/* Selector SIN prefijo de clase a propósito: con `.wy-body a` (0,1,1) ganaba
   en especificidad a `.wy-btn--primary` (0,1,0) y los botones heredaban el
   color del padre — el CTA lima salía con texto blanco y el CTA del nav con
   texto oscuro sobre verde. */
a {
  color: inherit;
  text-decoration: none;
}

.wy-body button {
  font: inherit;
  cursor: pointer;
}

/* Anillo de foco de dos tonos.
   El verde de marca solo (outline brand-400) daba 2.43:1 sobre el crema, por
   debajo del 3:1 que WCAG 2.1 SC 1.4.11 exige para indicadores de foco. Sobre
   las secciones oscuras sí pasaba (3.75:1), pero tras convertir el hero a
   superficie clara el crema es ~82% de la página. El anillo interior oscuro
   aporta 16.6:1 sobre crema y el verde exterior mantiene contraste sobre
   ink-800, así que el indicador se ve en cualquier fondo. */
.wy-body :focus-visible {
  outline: 3px solid var(--wy-brand-400);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(10, 31, 23, 0.92);
  border-radius: 4px;
}

.wy-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wy-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--wy-ink-800);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--wy-r-sm) var(--wy-r-sm);
  font-weight: 600;
  transition: top 0.2s var(--wy-ease);
}

.wy-skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   3. Primitivas de layout
   -------------------------------------------------------------------------- */
.wy-container {
  width: 100%;
  max-width: var(--wy-container);
  margin-inline: auto;
  padding-inline: var(--wy-gutter);
}

.wy-section {
  padding-block: var(--wy-section);
  position: relative;
  /* `clip` (no `hidden`) evita que los elementos decorativos se conviertan en
     scroll horizontal, sin crear un contenedor de scroll. Necesario porque
     .wy-step__line se sale 2rem a la derecha por diseño. */
  overflow-x: clip;
}

.wy-section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.wy-section--cream {
  background: var(--wy-cream-100);
}

.wy-section--dark {
  background: var(--wy-ink-800);
  color: #fff;
}

.wy-section--dark h2,
.wy-section--dark h3 {
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Tipografía
   -------------------------------------------------------------------------- */
.wy-display {
  font-size: clamp(2.35rem, 5.6vw, 4.15rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--wy-text-900);
  margin: 0;
  text-wrap: balance;
}

.wy-h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 800;
  color: var(--wy-text-900);
  margin: 0;
  text-wrap: balance;
}

.wy-h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--wy-text-900);
  margin: 0;
}

.wy-serif-accent {
  font-family: var(--wy-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wy-brand-500);
}

.wy-section--dark .wy-serif-accent {
  color: var(--wy-lime-400);
}

.wy-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: var(--wy-text-600);
  margin: 0;
  text-wrap: pretty;
}

.wy-section--dark .wy-lead {
  color: rgba(255, 255, 255, 0.76);
}

/* La calculadora y el CTA final tienen fondo oscuro pero NO llevan la clase
   `wy-section--dark`, así que sin esto heredaban el color de texto oscuro
   sobre fondo oscuro (ratio 2.47:1 — ilegible). */
.wy-roi .wy-lead,
.wy-cta .wy-lead {
  color: rgba(255, 255, 255, 0.82);
}

.wy-roi .wy-eyebrow,
.wy-cta .wy-eyebrow {
  color: var(--wy-brand-300);
}

/* El hero ahora es claro, así que toma los valores por defecto de la landing:
   texto oscuro y eyebrow en teal de marca. */
.wy-hero .wy-lead {
  color: var(--wy-text-600);
}

.wy-hero .wy-eyebrow {
  color: var(--wy-brand-600);
}

.wy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wy-brand-600);
  margin: 0 0 1.1rem;
}

.wy-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wy-brand-500), var(--wy-lime-500));
}

.wy-section--dark .wy-eyebrow {
  color: var(--wy-brand-300);
}

.wy-muted {
  color: var(--wy-text-500);
}

.wy-section--dark .wy-muted {
  color: rgba(255, 255, 255, 0.6);
}

.wy-section-head {
  max-width: 42rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.wy-section-head .wy-lead {
  margin-top: 1.1rem;
}

.wy-section-head--left {
  margin-inline: 0;
  text-align: left;
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.wy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--wy-r-full);
  font-size: 0.97rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: transform 0.22s var(--wy-ease), box-shadow 0.22s var(--wy-ease),
    background-color 0.22s var(--wy-ease), color 0.22s var(--wy-ease),
    border-color 0.22s var(--wy-ease);
  white-space: nowrap;
}

.wy-btn:hover {
  transform: translateY(-2px);
}

.wy-btn:active {
  transform: translateY(0);
}

.wy-btn--primary {
  /* El gradiente arrancaba en brand-500 (#0A9A73), donde el blanco del label
     daba 3.57:1 — por debajo de AA en un texto de 15.5 px. Bajando el arranque
     a brand-600, los dos extremos pasan (5.3:1 y 8.2:1) sin perder el "verde
     = acción" ni el contraste contra el crema. */
  background: linear-gradient(135deg, var(--wy-brand-600), var(--wy-brand-700));
  color: #fff;
  box-shadow: 0 6px 20px rgba(10, 154, 115, 0.3);
}

.wy-btn--primary:hover {
  box-shadow: 0 12px 32px rgba(10, 154, 115, 0.42);
  color: #fff;
}

.wy-btn--lime {
  background: var(--wy-lime-400);
  color: var(--wy-ink-900);
  box-shadow: 0 6px 20px rgba(205, 255, 79, 0.28);
}

.wy-btn--lime:hover {
  background: var(--wy-lime-500);
  box-shadow: 0 12px 34px rgba(205, 255, 79, 0.4);
  color: var(--wy-ink-900);
}

.wy-btn--ghost {
  background: transparent;
  color: var(--wy-text-900);
  border-color: var(--wy-sand-300);
}

.wy-btn--ghost:hover {
  border-color: var(--wy-text-900);
  background: rgba(10, 31, 23, 0.03);
  color: var(--wy-text-900);
}

.wy-section--dark .wy-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.wy-section--dark .wy-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.wy-btn--lg {
  padding: 1.1rem 2rem;
  font-size: 1.03rem;
}

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

.wy-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Microcopy bajo el CTA */
.wy-cta-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--wy-text-500);
}

.wy-cta-note li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.wy-cta-note svg {
  flex: none;
  color: var(--wy-brand-500);
}

/* La calculadora y el CTA final llevan fondo oscuro y no usan
   `.wy-section--dark`; el hero ya es claro y toma el color normal. */
.wy-section--dark .wy-cta-note,
.wy-roi .wy-cta-note,
.wy-cta .wy-cta-note {
  color: rgba(255, 255, 255, 0.82);
}

.wy-section--dark .wy-cta-note svg,
.wy-roi .wy-cta-note svg,
.wy-cta .wy-cta-note svg {
  color: var(--wy-brand-300);
}

/* --------------------------------------------------------------------------
   6. Nav
   -------------------------------------------------------------------------- */
.wy-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 0.9rem;
  transition: background-color 0.3s var(--wy-ease), box-shadow 0.3s var(--wy-ease),
    padding 0.3s var(--wy-ease), border-color 0.3s var(--wy-ease);
  border-bottom: 1px solid transparent;
}

.wy-nav--stuck {
  padding-block: 0.55rem;
  background: rgba(252, 251, 247, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--wy-sand-300);
  box-shadow: 0 1px 24px rgba(10, 31, 23, 0.05);
}

.wy-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wy-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
  color: var(--wy-text-900);
  flex: none;
}

/* El hero pasó a superficie clara, así que el nav ya no cambia de color al
   hacer scroll: se mantiene oscuro en los dos estados y sólo suma fondo y
   borde. Eso elimina de raíz el "flash" que antes había que igualar a fuerza
   con duraciones distintas, y con él la mitad de las reglas --stuck. */
.wy-nav__links a {
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--wy-text-600);
  transition: color 0.3s var(--wy-ease);
}

.wy-nav__links a:hover {
  color: var(--wy-text-900);
}

.wy-nav__cta {
  display: none;
}

.wy-nav .wy-btn--ghost {
  color: var(--wy-text-900);
  border-color: var(--wy-sand-400);
}

.wy-nav .wy-btn--ghost:hover {
  color: var(--wy-text-900);
  background: rgba(10, 31, 23, 0.04);
  border-color: var(--wy-text-900);
}

.wy-nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--wy-sand-400);
  background: transparent;
  color: var(--wy-text-900);
  transition: background-color 0.2s var(--wy-ease);
}

.wy-logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--wy-brand-400), var(--wy-brand-600));
  box-shadow: 0 3px 10px rgba(10, 154, 115, 0.35);
  flex: none;
}

.wy-logo__mark svg {
  width: 19px;
  height: 19px;
  color: #fff;
}

/* El logo base es oscuro porque el nav ahora vive sobre el hero claro. El
   footer sigue siendo una superficie oscura, así que necesita su variante
   explícita: sin esto el logo del footer quedaba en 1.46:1, invisible. */
.wy-footer .wy-logo {
  color: #fff;
}

/* Con el drawer abierto el nav (z-index:100) queda POR ENCIMA del drawer
   (z-index:99) y sobre su fondo ink-800. Como el nav vive sobre el hero claro,
   el wordmark y el icono del menú están en --wy-text-900 (#0A1F17) y quedaban
   en 1.90:1 sobre #0D5248: invisibles. Este estado sólo existe en móvil y con
   JS, así que la auditoría de contraste del estado en reposo no lo detecta. */
body.wy-nav-open .wy-logo {
  color: #fff;
}

body.wy-nav-open .wy-nav__toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}

.wy-nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wy-nav__cta {
  display: none;
}

.wy-nav__toggle svg {
  width: 22px;
  height: 22px;
}

/* Drawer móvil */
.wy-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--wy-ink-800);
  padding: 6.5rem var(--wy-gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--wy-ease), transform 0.28s var(--wy-ease),
    visibility 0.28s;
}

.wy-drawer--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Sólo los enlaces de navegación del drawer. El selector es `> a:not(.wy-btn)`
   a propósito: con `.wy-drawer a` (especificidad 0,1,1) esta regla le ganaba a
   `.wy-btn--lime` (0,1,0) y el botón de "Probar 14 días gratis" quedaba con texto
   blanco sobre lima (1.17:1), sin padding interior —el texto pegado al borde de la
   píldora— y con un hairline blanco. El mismo `a` also alcanzaba al enlace
   "Entrar" del pie, que se partía en dos líneas con borde inferior. */
.wy-drawer > a:not(.wy-btn) {
  display: block;
  padding: 1rem 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wy-drawer > a:not(.wy-btn):hover {
  color: var(--wy-lime-400);
}

.wy-drawer > a.wy-btn {
  margin-top: 1.75rem;
  width: 100%;
}

.wy-drawer__foot a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wy-drawer__foot a:hover {
  color: var(--wy-lime-400);
}

.wy-drawer__foot {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.wy-hero {
  position: relative;
  /* Superficie CLARA. Decisión 2026-09-30: los dos competidores directos en
     México (HeyNutre y Avena) usan fondo claro con un teal/azul saturado, y
     en los datos de conversión de SaaS el fondo claro gana (4.2 % vs 3.5 %,
     donde el oscuro sólo recupera en herramientas de developers). El verde
     se mantiene como tono de marca, pero deja de ser superficie dominante:
     ahora la firma es el crema cálido con acentos de teal. */
  background: linear-gradient(180deg, #FDFCF9 0%, #F4F0E6 100%);
  color: var(--wy-text-900);
  padding-top: clamp(7rem, 13vw, 10.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Auroras de fondo: sobre crema van más sutiles y en verde-menta, no verde
   neón. Un glow fuerte sobre fondo claro se ensucia en lugar de dar profundidad. */
.wy-hero::before,
.wy-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
  pointer-events: none;
}

.wy-hero::before {
  width: 46rem;
  height: 46rem;
  top: -18rem;
  right: -10rem;
  background: radial-gradient(
    circle,
    rgba(20, 184, 140, 0.17) 0%,
    rgba(20, 184, 140, 0) 70%
  );
}

.wy-hero::after {
  width: 34rem;
  height: 34rem;
  bottom: -14rem;
  left: -8rem;
  background: radial-gradient(
    circle,
    rgba(186, 230, 60, 0.16) 0%,
    rgba(186, 230, 60, 0) 70%
  );
}

/* Grano sutil: evita el look "degradado plano" */
.wy-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Overlay sobre un fondo claro aclara en vez de dar textura, así que baja. */
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.wy-hero__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
}

.wy-hero__title {
  color: var(--wy-text-900);
}

/* El acento serif pasa de lima a teal de marca: la lima sobre crema da sólo
   1.6:1 y además lee "app de fitness", no clínica. El teal-600 da 5.2:1. */
.wy-hero__title .wy-serif-accent {
  color: var(--wy-brand-600);
}

.wy-hero__lead {
  margin-top: 1.5rem;
  max-width: 34rem;
}

.wy-hero .wy-btn-row {
  margin-top: 2.25rem;
}

/* Chips de confianza */
.wy-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

.wy-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border-radius: var(--wy-r-full);
  background: #fff;
  border: 1px solid var(--wy-sand-300);
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--wy-text-700);
  box-shadow: var(--wy-sh-sm);
}

.wy-trust svg {
  width: 14px;
  height: 14px;
  color: var(--wy-brand-600);
  flex: none;
}

/* --------------------------------------------------------------------------
   8. Mock de WhatsApp (la pieza central del hero)
   -------------------------------------------------------------------------- */
.wy-mock-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 4.5rem;
}

.wy-phone {
  position: relative;
  width: min(100%, 360px);
  background: #0B141A;
  border-radius: 42px;
  padding: 11px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: wy-float 7s ease-in-out infinite;
}

@keyframes wy-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.wy-phone__screen {
  background: #ECE5DD;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 596px;
  position: relative;
}

.wy-phone__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  background: var(--wy-cream-50);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex: none;
}

.wy-phone__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--wy-brand-400), var(--wy-brand-600));
  flex: none;
}

.wy-phone__avatar svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.wy-phone__name {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--wy-text-900);
  line-height: 1.2;
}

.wy-phone__status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  color: var(--wy-brand-600);
  font-weight: 550;
}

.wy-phone__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wy-wa-green);
}

.wy-phone__chat {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 0.75rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #111b21;
  scrollbar-width: thin;
}

.wy-phone__chat::-webkit-scrollbar {
  width: 4px;
}

.wy-phone__chat::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  border-radius: 4px;
}

/* Burbujas */
.wy-bubble {
  max-width: 84%;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.42;
  /* Color EXPLÍCITO: el mock vive dentro del hero (color: #fff) y sin esto
     el texto de las burbujas salía blanco sobre fondo blanco. */
  color: #111b21;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
  animation: wy-pop 0.5s var(--wy-ease-out) both;
}

.wy-bubble--in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 4px;
}

.wy-bubble--out {
  align-self: flex-end;
  background: var(--wy-wa-bubble);
  border-top-right-radius: 4px;
}

@keyframes wy-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.wy-bubble__time {
  display: block;
  text-align: right;
  font-size: 0.65rem;
  /* 0.42 daba 3.04:1 sobre la burbuja blanca. A 0.58 da 5.1:1. */
  color: rgba(0, 0, 0, 0.58);
  margin-top: 0.2rem;
}

.wy-bubble__img {
  margin: -0.55rem -0.7rem 0.35rem;
  border-radius: 12px 12px 4px 12px;
  overflow: hidden;
  line-height: 0;
}

.wy-bubble__img img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}

/* Estado "analizando" */
.wy-typing {
  display: flex;
  gap: 4px;
  padding: 0.35rem 0;
}

.wy-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  animation: wy-bounce 1.15s infinite;
}

.wy-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.wy-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes wy-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Macros dentro de la burbuja del bot */
.wy-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0.45rem 0 0.2rem;
  padding: 0;
  list-style: none;
}

.wy-macros li {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 7px;
  padding: 0.2rem 0.42rem;
  font-size: 0.71rem;
  font-weight: 650;
  color: var(--wy-text-700);
  white-space: nowrap;
}

.wy-macros li b {
  color: var(--wy-brand-700);
}

.wy-progress-mini {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 0.5rem;
}

.wy-progress-mini i {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--wy-brand-500), var(--wy-lime-500));
}

.wy-phone__input {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--wy-cream-50);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.wy-phone__input span {
  flex: 1;
  padding: 0.45rem 0.8rem;
  border-radius: var(--wy-r-full);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 0.8rem;
  color: var(--wy-text-500);
}

.wy-phone__send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wy-brand-500);
  color: #fff;
  flex: none;
}

.wy-phone__send svg {
  width: 18px;
  height: 18px;
}

/* Tarjeta flotante: "esto sí necesita tu voz" */
.wy-alert-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 330px);
  background: #fff;
  border-radius: var(--wy-r-md);
  padding: 0.95rem 1.05rem;
  box-shadow: var(--wy-sh-xl);
  border: 1px solid var(--wy-sand-300);
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  animation: wy-float-alt 7s ease-in-out 0.5s infinite;
}

@keyframes wy-float-alt {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
  }
}

.wy-alert-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(240, 160, 42, 0.14);
  color: var(--wy-amber);
  flex: none;
}

.wy-alert-card__icon svg {
  width: 20px;
  height: 20px;
}

.wy-alert-card__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wy-text-900);
  line-height: 1.3;
}

.wy-alert-card__text {
  font-size: 0.78rem;
  color: var(--wy-text-500);
  line-height: 1.4;
  margin-top: 0.15rem;
}

.wy-alert-card__tag {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wy-brand-600);
  background: var(--wy-brand-100);
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
}

/* --------------------------------------------------------------------------
   9. Tira de logos/prueba
   -------------------------------------------------------------------------- */
.wy-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--wy-ink-900);
  padding-block: 2.25rem;
}

.wy-strip__label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.45 daba 3.67:1 sobre el verde oscuro. A 0.68 da 6.4:1. */
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 1.5rem;
}

.wy-strip__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wy-strip__items li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
}

.wy-strip__items svg {
  width: 20px;
  height: 20px;
  color: var(--wy-brand-300);
  flex: none;
}

/* --------------------------------------------------------------------------
   10. Tarjetas de dolor
   -------------------------------------------------------------------------- */
.wy-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.wy-grid--2 {
  grid-template-columns: 1fr;
}

.wy-grid--3 {
  grid-template-columns: 1fr;
}

.wy-grid--4 {
  grid-template-columns: 1fr;
}

.wy-pain-card {
  background: #fff;
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--wy-sh-sm);
  transition: transform 0.3s var(--wy-ease), box-shadow 0.3s var(--wy-ease),
    border-color 0.3s var(--wy-ease);
  height: 100%;
}

.wy-pain-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wy-sh-lg);
  border-color: var(--wy-sand-400);
}

.wy-pain-card__stat {
  font-size: clamp(2.1rem, 3.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--wy-text-900);
  margin-bottom: 0.65rem;
}

.wy-pain-card__stat em {
  font-style: normal;
  color: var(--wy-danger);
}

.wy-pain-card__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--wy-text-900);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.wy-pain-card__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--wy-text-500);
  margin: 0;
}

/* Bloque de cita / manifiesto */
.wy-manifesto {
  display: grid;
  gap: 1.75rem;
  background: #fff;
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--wy-sh-md);
}

.wy-manifesto__quote {
  font-family: var(--wy-font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--wy-text-900);
  margin: 0;
  letter-spacing: -0.01em;
}

.wy-manifesto__quote span {
  color: var(--wy-brand-500);
}

.wy-manifesto__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.wy-manifesto__list li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--wy-text-600);
}

.wy-manifesto__list svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--wy-brand-500);
}

/* --------------------------------------------------------------------------
   11. Pasos
   -------------------------------------------------------------------------- */
.wy-steps {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  counter-reset: wy-step;
}

.wy-step {
  position: relative;
  padding-top: 2.6rem;
  counter-increment: wy-step;
}

.wy-step::before {
  content: counter(wy-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--wy-brand-500);
  background: var(--wy-brand-100);
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
}

.wy-step__title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}

.wy-step__text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.wy-step__line {
  position: absolute;
  top: 1.05rem;
  left: 3.4rem;
  right: -2rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent);
}

.wy-step:last-child .wy-step__line {
  display: none;
}

/* --------------------------------------------------------------------------
   12. Bento de producto
   -------------------------------------------------------------------------- */
.wy-bento {
  display: grid;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
  grid-template-columns: 1fr;
}

.wy-bento__cell {
  background: #fff;
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-lg);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--wy-sh-sm);
  transition: transform 0.3s var(--wy-ease), box-shadow 0.3s var(--wy-ease);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wy-bento__cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--wy-sh-lg);
}

.wy-bento__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--wy-brand-100);
  color: var(--wy-brand-600);
  margin-bottom: 1rem;
  flex: none;
}

.wy-bento__icon svg {
  width: 22px;
  height: 22px;
}

.wy-bento__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--wy-text-900);
  margin: 0 0 0.45rem;
}

.wy-bento__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--wy-text-500);
  margin: 0;
}

.wy-bento__cell--dark {
  background: var(--wy-ink-800);
  border-color: var(--wy-ink-600);
  color: #fff;
}

.wy-bento__cell--dark .wy-bento__title {
  color: #fff;
}

.wy-bento__cell--dark .wy-bento__text {
  color: rgba(255, 255, 255, 0.66);
}

.wy-bento__cell--dark .wy-bento__icon {
  background: rgba(10, 154, 115, 0.18);
  color: var(--wy-brand-300);
}

/* Mock del panel dentro del bento */
.wy-panel-mock {
  background: var(--wy-cream-100);
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-md);
  padding: 0.85rem;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.5rem;
}

.wy-panel-mock__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  box-shadow: var(--wy-sh-sm);
}

.wy-panel-mock__kpi {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  text-align: center;
  box-shadow: var(--wy-sh-sm);
}

.wy-panel-mock__kpi b {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wy-text-900);
  line-height: 1.1;
}

.wy-panel-mock__kpi span {
  font-size: 0.68rem;
  color: var(--wy-text-500);
  font-weight: 550;
}

/* Como TEXTO sobre blanco los tintes base no llegaban a AA:
   ámbar 2.15:1 y verde 3.57:1. Se usan las variantes `-ink` (5.2 y 5.3:1).
   Los tintes claros se conservan para fondos y bordes. */
.wy-panel-mock__kpi--warn b {
  color: var(--wy-amber-ink);
}

.wy-panel-mock__kpi--ok b {
  color: var(--wy-brand-600);
}

.wy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.wy-dot--warn {
  background: var(--wy-amber);
}

.wy-dot--danger {
  background: var(--wy-danger);
}

.wy-dot--ok {
  background: var(--wy-brand-500);
}

.wy-panel-mock__name {
  font-weight: 650;
  color: var(--wy-text-900);
  line-height: 1.2;
}

.wy-panel-mock__meta {
  font-size: 0.72rem;
  color: var(--wy-text-500);
}

.wy-panel-mock__tag {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.16rem 0.42rem;
  border-radius: 5px;
  white-space: nowrap;
}

.wy-panel-mock__tag--warn {
  background: rgba(240, 160, 42, 0.14);
  color: var(--wy-amber-ink);
}

.wy-panel-mock__tag--danger {
  background: rgba(229, 72, 77, 0.12);
  color: #B3272B;
}

.wy-panel-mock__tag--ok {
  background: var(--wy-brand-100);
  color: var(--wy-brand-700);
}

/* --------------------------------------------------------------------------
   13. Comparativa
   -------------------------------------------------------------------------- */
.wy-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-lg);
  background-color: #fff;
  box-shadow: var(--wy-sh-md);
  /* Sombra de scroll horizontal, solo CSS: las capas `local` se desplazan con
     el contenido y las `scroll` quedan fijas al borde, así el lado derecho se
     oscurece únicamente mientras queda tabla por ver. Sin esta señal, en
     móvil la columna ganadora "WhizYum" quedaba fuera de pantalla sin aviso. */
  background-image:
    linear-gradient(to right, #fff 45%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 45%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(10, 31, 23, 0.15), rgba(10, 31, 23, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(10, 31, 23, 0.15), rgba(10, 31, 23, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Pista de scroll: solo en anchos donde la tabla realmente no cabe. */
.wy-table-hint {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wy-brand-700);
}

.wy-table-hint svg {
  width: 17px;
  height: 17px;
  flex: none;
  animation: wy-nudge 1.9s var(--wy-ease) infinite;
}

@keyframes wy-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* 1023px cubre con holgura el punto en que la tabla de 840px deja de
   desbordar; el JS (initTableHint) lo afina midiendo el desbordamiento real,
   porque en la franja 900–1023px un breakpoint fijo se equivoca por pocos
   píxeles. Sin JS la pista se muestra de más en móvil, que es el caso que
   importa. */
@media (max-width: 1023px) {
  .wy-table-hint {
    display: flex;
  }
}

.wy-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.wy-table th,
.wy-table td {
  padding: 1rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--wy-sand-300);
  vertical-align: middle;
}

.wy-table thead th {
  background: var(--wy-cream-100);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wy-text-500);
  white-space: nowrap;
}

.wy-table thead th.wy-table__win {
  background: var(--wy-ink-800);
  color: #fff;
  position: relative;
}

.wy-table tbody th {
  font-weight: 600;
  color: var(--wy-text-900);
  font-size: 0.9rem;
}

.wy-table td {
  color: var(--wy-text-600);
}

.wy-table__win {
  background: rgba(10, 154, 115, 0.05);
}

.wy-table tbody tr:last-child th,
.wy-table tbody tr:last-child td {
  border-bottom: 0;
}

.wy-table__yes,
.wy-table__no {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.86rem;
}

.wy-table__yes {
  color: var(--wy-brand-600);
}

.wy-table__no {
  /* text-400 daba 2.75:1: los "No" de la comparativa eran casi invisibles,
     y son justo las celdas que sostienen el argumento de diferenciación. */
  color: var(--wy-text-500);
}

.wy-table__yes svg,
.wy-table__no svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.wy-table-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--wy-text-500);
  line-height: 1.6;
}

.wy-table-note a {
  color: var(--wy-brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. Calculadora ROI
   -------------------------------------------------------------------------- */
.wy-roi {
  background: var(--wy-ink-800);
  border-radius: var(--wy-r-xl);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wy-roi::before {
  content: "";
  position: absolute;
  width: 30rem;
  height: 30rem;
  top: -12rem;
  right: -8rem;
  border-radius: 50%;
  filter: blur(80px);
   El halo se pinta ENCIMA de `background` (z-index:-1 + isolation), así que
   aclara el panel de resultados. A 0.45 dejaba las etiquetas al 62 % en
   4.19:1 — por debajo de AA. A 0.26 el texto recupera margen sin perder el
   profundidad decorativa. */
  background: radial-gradient(
    circle,
    rgba(10, 154, 115, 0.26) 0%,
    rgba(10, 154, 115, 0) 70%
  );
  z-index: -1;
}

.wy-roi__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.wy-roi__title {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.wy-roi__text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 2rem;
}

.wy-field {
  margin-bottom: 1.75rem;
}

.wy-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.7rem;
}

.wy-field__value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--wy-lime-400);
  letter-spacing: -0.02em;
  /* Sin esto el valor se encogía como flex item y "8 min" se partía en dos
     líneas cuando la etiqueta larga ocupaba todo el ancho. */
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Range slider */
.wy-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--wy-r-full);
  background: rgba(255, 255, 255, 0.16);
  outline: none;
  cursor: pointer;
}

.wy-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wy-lime-400);
  border: 3px solid var(--wy-ink-800);
  box-shadow: 0 0 0 1px rgba(205, 255, 79, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: grab;
  transition: transform 0.18s var(--wy-ease);
}

.wy-range::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.12);
}

.wy-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wy-lime-400);
  border: 3px solid var(--wy-ink-800);
  box-shadow: 0 0 0 1px rgba(205, 255, 79, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: grab;
}

.wy-range__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  /* 0.42 daba 3.01:1 sobre el verde. A 0.68 da 5.3:1. */
  color: rgba(255, 255, 255, 0.68);
  margin-top: 0.5rem;
}

/* Resultado */
.wy-roi__out {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--wy-r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  backdrop-filter: blur(6px);
}

.wy-roi__big {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.wy-roi__big b {
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--wy-lime-400);
  font-variant-numeric: tabular-nums;
}

.wy-roi__big span {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 550;
}

   /* 0.62 → 0.78: sobre el panel de resultados el halo aclara el fondo y
   bajaba el contraste a 4.19:1 (mínimo AA: 4.5:1). */
.wy-roi__biglabel {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.75rem;
}

.wy-roi__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  /* Sin column-gap las dos celdas de la fila se leían como una sola línea
     continua: la etiqueta de una celda y el valor de la siguiente. */
  column-gap: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wy-roi__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.wy-roi__stat span {
  color: rgba(255, 255, 255, 0.78);
}

.wy-roi__stat b {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wy-roi__disclaimer {
  margin: 1.5rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}

/* --------------------------------------------------------------------------
   15. Confianza / legal
   -------------------------------------------------------------------------- */
.wy-trust-grid {
  display: grid;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
  grid-template-columns: 1fr;
}

.wy-trust-card {
  background: #fff;
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--wy-sh-sm);
  height: 100%;
}

.wy-trust-card__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
}

.wy-trust-card__head svg {
  width: 22px;
  height: 22px;
  color: var(--wy-brand-600);
  flex: none;
}

.wy-trust-card__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--wy-text-900);
  margin: 0;
}

.wy-trust-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--wy-text-500);
  margin: 0;
}

.wy-trust-card__text a {
  color: var(--wy-brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   16. Precios
   -------------------------------------------------------------------------- */
.wy-plans {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.wy-plan {
  background: #fff;
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--wy-sh-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform 0.3s var(--wy-ease), box-shadow 0.3s var(--wy-ease);
}

.wy-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--wy-sh-lg);
}

.wy-plan--featured {
  border-color: var(--wy-ink-800);
  border-width: 2px;
  box-shadow: var(--wy-sh-xl);
}

.wy-plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wy-ink-800);
  color: var(--wy-lime-400);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.34rem 0.85rem;
  border-radius: var(--wy-r-full);
  white-space: nowrap;
}

.wy-plan__name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wy-text-900);
  margin: 0;
}

.wy-plan__tagline {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--wy-text-500);
  margin: 0.4rem 0 1.4rem;
}

.wy-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--wy-sand-300);
  margin-bottom: 1.4rem;
}

.wy-plan__amount {
  font-size: clamp(2.5rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--wy-text-900);
}

.wy-plan__period {
  font-size: 0.95rem;
  color: var(--wy-text-500);
  font-weight: 550;
}

.wy-plan__limit {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--wy-brand-600);
  margin-top: 0.45rem;
}

/* El tope de mensajes es secundario frente al límite de pacientes: es
   información que debe estar ahí (el cliente tiene que saber que existe y que
   hay bolsas), pero no puede competir visualmente con el titular del plan. */
.wy-plan__limit--msgs {
  font-weight: 500;
  color: var(--wy-ink-500, #5b6b66);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.wy-plan__features {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  flex: 1;
}

.wy-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--wy-text-600);
}

.wy-plan__features svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--wy-brand-500);
}

.wy-pricing__note {
  margin: 2rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--wy-text-500);
}

.wy-pricing__note strong {
  color: var(--wy-text-700);
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.wy-faq {
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}

.wy-faq__item {
  background: #fff;
  border: 1px solid var(--wy-sand-300);
  border-radius: var(--wy-r-md);
  overflow: hidden;
  transition: border-color 0.25s var(--wy-ease), box-shadow 0.25s var(--wy-ease);
}

.wy-faq__item[open] {
  border-color: var(--wy-brand-400);
  box-shadow: var(--wy-sh-md);
}

.wy-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--wy-text-900);
  cursor: pointer;
  list-style: none;
  line-height: 1.4;
}

.wy-faq__q::-webkit-details-marker {
  display: none;
}

.wy-faq__q:hover {
  color: var(--wy-brand-600);
}

.wy-faq__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wy-cream-100);
  color: var(--wy-text-600);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.3s var(--wy-ease), background-color 0.25s var(--wy-ease),
    color 0.25s var(--wy-ease);
}

.wy-faq__icon svg {
  width: 14px;
  height: 14px;
}

.wy-faq__item[open] .wy-faq__icon {
  transform: rotate(180deg);
  background: var(--wy-brand-100);
  color: var(--wy-brand-700);
}

.wy-faq__a {
  padding: 0 1.25rem 1.3rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--wy-text-600);
  margin: 0;
}

.wy-faq__a a {
  color: var(--wy-brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wy-faq__a code {
  background: var(--wy-cream-100);
  border: 1px solid var(--wy-sand-300);
  border-radius: 5px;
  padding: 0.1rem 0.35rem;
  font-size: 0.86em;
}

/* --------------------------------------------------------------------------
   18. CTA final
   -------------------------------------------------------------------------- */
.wy-cta {
  background: var(--wy-ink-800);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wy-cta::before {
  content: "";
  position: absolute;
  width: 40rem;
  height: 40rem;
  bottom: -22rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(
    circle,
    rgba(10, 154, 115, 0.35) 0%,
    rgba(10, 154, 115, 0) 70%
  );
  z-index: -1;
}

.wy-cta .wy-cta-note {
  justify-content: center;
}

.wy-cta__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.wy-cta .wy-btn-row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.wy-footer {
  background: var(--wy-ink-900);
  color: rgba(255, 255, 255, 0.55);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  font-size: 0.88rem;
}

.wy-footer__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.wy-footer__brand .wy-logo {
  margin-bottom: 0.75rem;
}

.wy-footer__brand p {
  margin: 0;
  max-width: 24rem;
  line-height: 1.6;
}

.wy-footer h3 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.wy-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.wy-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wy-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

.wy-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   20. Animaciones de entrada
   -------------------------------------------------------------------------- */
/* Solo se oculta si el JS está confirmado activo (`.wy-js`, que inyecta un
   script inline en el <head>). Antes, `opacity: 0` sin condición dejaba la
   página INVISIBLE si el JS no cargaba, estaba bloqueado o fallaba. */
.wy-js .wy-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--wy-ease-out), transform 0.7s var(--wy-ease-out);
}

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

.wy-reveal[data-delay="1"] {
  transition-delay: 0.08s;
}

.wy-reveal[data-delay="2"] {
  transition-delay: 0.16s;
}

.wy-reveal[data-delay="3"] {
  transition-delay: 0.24s;
}

.wy-reveal[data-delay="4"] {
  transition-delay: 0.32s;
}

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

  .wy-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wy-phone,
  .wy-alert-card {
    animation: none;
  }

  .wy-bubble {
    animation: none;
  }

  .wy-typing span {
    animation: none;
    opacity: 0.6;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   21. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .wy-strip__items {
    grid-template-columns: repeat(4, 1fr);
  }

  .wy-grid--2,
  .wy-grid--4,
  .wy-roi__stats,
  .wy-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wy-grid--3,
  .wy-trust-grid,
  .wy-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .wy-nav__links,
  .wy-nav__cta {
    display: flex;
  }

  .wy-nav__toggle {
    display: none;
  }

  .wy-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .wy-trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .wy-manifesto {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .wy-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .wy-roi__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }

  /* Los stats se mantienen apilados: en un panel de ~430px, tres columnas
     partevan las etiquetas ("Consultas extra al mes") en dos renglones y
     descuadraban las líneas base. */

  .wy-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .wy-plans {
    grid-template-columns: repeat(3, 1fr);
  }

  .wy-plan--featured {
    transform: scale(1.03);
    z-index: 2;
  }

  .wy-plan--featured:hover {
    transform: scale(1.03) translateY(-4px);
  }

  .wy-bento {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Retícula explícita: 1 celda a todo lo ancho (el mock del panel se
     beneficia del ancho completo) + 3 iguales + 2 a medias. Con el reparto
     anterior (3 + 2 + 2 + 2 + 2 + 2) sobraba una columna y quedaba un hueco
     enorme al lado de la celda oscura. */
  .wy-bento__cell--full {
    grid-column: span 6;
  }

  .wy-bento__cell--third {
    grid-column: span 2;
  }

  .wy-bento__cell--half {
    grid-column: span 3;
  }
}

@media (max-width: 899px) {
  /* Los pasos se apilan: la línea horizontal que los conectaba en desktop
     no tiene sentido aquí y además empujaba 12px de scroll horizontal. */
  .wy-step__line {
    display: none;
  }

  /* El mock se centra y la tarjeta flotante no se sale del viewport */
  .wy-mock-stage {
    padding-bottom: 5.5rem;
  }

  .wy-alert-card {
    width: min(94%, 330px);
  }
}