/* ==========================================================================
   MB FITNESS — Landing V2
   Estilos compartidos. Mobile-first: la base es móvil,
   y se amplía con @media (min-width) para tablet y escritorio.
   ========================================================================== */

/* ---------- Variables de marca (ver guía de marca oficial) ---------- */
:root {
  --ink: #0A0A0A;      /* negro puro — texto, logo */
  --paper: #FFFFFF;    /* blanco puro — fondo principal */
  --paper2: #F5F5F5;   /* gris claro — fondo secundario */
  --soft: #EFEFEF;     /* gris suave — separadores */
  --line: #D4D4D4;     /* gris neutro — bordes */
  --mut: #737373;      /* gris medio — texto secundario */
  --mut2: #A3A3A3;     /* gris a3 — texto secundario sobre oscuro */
  --accent: #5271FF;   /* azul de acento — CTAs, enlaces */

  /* ---------- Escala de espaciados ----------
     Referencia para los patrones que se repiten sección tras sección
     (padding de sección, hueco título↔contenido, título↔subtítulo...).
     Esto NO sustituye el criterio visual: un elemento con más peso
     puede seguir necesitando su propio valor puntual — en ese caso,
     se deja fijo y con un comentario explicando el motivo, en vez de
     forzarlo a encajar aquí. */
  --space-2xs: 8px;
  --space-xs: 10px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 72px;

  /* Margen lateral: en móvil lo aporta solo .container (--container-x).
     En tablet+, la propia sección añade --tablet-x, y la suma de los
     dos (16 + 24 = 40px) iguala el padding lateral fijo del Hero, que
     no usa .container. Así toda sección "en columna" mide lo mismo
     que el Hero sin tener que repetir 40px en cada una. */
  --container-x: var(--space-lg);   /* 24px */
  --tablet-x: var(--space-md);      /* 16px */

  /* Padding vertical estándar de una sección completa */
  --section-y-mobile: var(--space-3xl); /* 48px */
  --section-y-tablet: var(--space-5xl); /* 72px */

  /* Hueco estándar entre un bloque de título y el contenido que sigue
     (p.ej. título → grid, título → lista) */
  --block-gap: var(--space-2xl); /* 40px */

  /* Hueco estándar entre un título de sección y su subtítulo */
  --subtitle-gap: var(--space-sm); /* 12px */

  /* Ancho máximo del contenido (igual que .container), para que
     cualquier elemento a sangre que necesite centrarse en pantallas
     muy anchas (p.ej. un carrusel fuera de .container) use el mismo
     límite y quede alineado con el texto en vez de pegado al borde
     real de la ventana. */
  --content-max: 1100px;

  /* Rojo de estatus — el mismo #FF3131 que ya se usó en la landing
     provisional de V1 (septiembre) para los mensajes de urgencia.
     No forma parte de la paleta de marca general (--accent es azul). */
  --status-red: #FF3131;
}

/* ---------- Reset básico ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

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

/* Salto de línea forzado solo en escritorio (≥1024px) */
.break-lg {
  display: none;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--container-x);
}

/* ==========================================================================
   RIBBON — franja superior
   ========================================================================== */
.ribbon {
  width: 100%;
  background: var(--status-red);
  color: var(--paper);
  text-align: center;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  display: flex;
  justify-content: center;
  padding: 28px 24px 0;
}

.site-header .logo {
  width: 150px;
  height: auto;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding: 28px 24px 56px;
  text-align: center;
}


.hero h1 {
  font-size: clamp(25px, 6.2vw, 39px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 720px;
  margin: 0 auto 16px;
}

.hero-subtitle {
  font-size: clamp(16px, 4vw, 19px);
  color: var(--mut);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

.hero-subtitle + .hero-subtitle {
  margin-top: 8px;
}

.hero-subtitle strong {
  color: var(--status-red);
  font-weight: 700;
}

.hero-subtitle--dark {
  color: var(--ink);
}

.hero-mascot {
  max-width: 360px;
  width: 100%;
  margin: 44px auto 0;
}

.hero-price {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.price-old {
  font-size: 18px;
  font-weight: 600;
  color: var(--mut);
  text-decoration: line-through;
}

.price-new {
  font-size: clamp(32px, 8vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.price-note {
  font-size: 14px;
  font-weight: 500;
  color: var(--mut);
}

.price-extra {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
}

/* Utilidad reutilizable para resaltar texto con el azul de acento */
.accent {
  color: var(--accent);
}

.hero-counter {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  background: var(--paper2);
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
}

.hero-counter strong {
  color: var(--accent);
}

.hero-quick-buy {
  display: inline-block;
  margin-top: 14px;
  margin-left: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  animation: quick-buy-wiggle 3s ease-in-out infinite;
}

@keyframes quick-buy-wiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  2% { transform: rotate(-8deg); }
  4% { transform: rotate(8deg); }
  6% { transform: rotate(-6deg); }
  8% { transform: rotate(6deg); }
  10% { transform: rotate(-3deg); }
  12% { transform: rotate(3deg); }
  14% { transform: rotate(0deg); }
}

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

/* ==========================================================================
   PROPUESTA DE VALOR — CONVERSACIONAL
   Sigue el registro directo tipo V1: pregunta + respuesta + puntos
   cortos con la palabra clave en azul, sin tarjetas ni iconos.
   ========================================================================== */
.value-talk {
  background: var(--paper2);
  /* Sin padding lateral aquí: el margen lo aporta .container.
     (ver --tablet-x en :root para el porqué del valor en tablet) */
  padding: var(--section-y-mobile) 0 0;
  text-align: center;
}

.vt-heading {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}

.vt-subtitle {
  font-size: clamp(16px, 4vw, 19px);
  color: var(--mut);
  max-width: 600px;
  margin: var(--subtitle-gap) auto 0;
}

.vt-sub {
  font-size: clamp(16px, 4vw, 19px);
  color: var(--ink);
  line-height: 1.5;
  max-width: 600px;
  margin: 16px auto 0;
}

.vt-sub em {
  font-style: italic;
  color: var(--ink);
  font-size: clamp(12px, 3vw, 16px);
}

.vt-question {
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 600px;
  margin: 40px auto 0;
}

.vt-mantra {
  font-size: clamp(18px, 4.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 600px;
  margin: 24px auto 0;
}

.vt-points {
  margin: 30px auto 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.vt-point-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.vt-point-text {
  font-size: clamp(15px, 4vw, 17px);
  color: var(--ink);
  line-height: 1.5;
}

/* ==========================================================================
   CINTA DE APPS — logo marquee en bucle infinito, movimiento hacia la derecha.
   Las tarjetas "Cliente X" son placeholder (ver comentario en el HTML).
   ========================================================================== */
.logo-marquee {
  background: var(--paper2);
  /* EXCEPCIÓN a la escala estándar — valores medidos a nivel de píxel,
     no de la escala general (ver :root):
     padding-top = 53px: para que el hueco hasta la fila de iconos se
     sienta igual que el resto de espacios de la sección anterior
     (ver .vt-question).
     padding-bottom = 50px: reducido a propósito respecto al valor
     "simétrico" (60px), porque el borde irregular de las etiquetas
     de nombre ya aporta bastante aire visual por sí solo. */
  padding: 53px 0 50px;
  overflow: hidden;
  position: relative;
}

/* Difuminado en los bordes para que las tarjetas no corten en seco */
.logo-marquee::before,
.logo-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}

.logo-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--paper2), transparent);
}

.logo-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--paper2), transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-right 26s linear infinite;
}

.marquee-group {
  display: flex;
  gap: 32px;
  padding-right: 32px;
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}

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

.marquee-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 76px;
}

.marquee-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  object-fit: cover;
}

.marquee-mystery .marquee-icon {
  background: var(--ink);
  font-size: 22px;
  font-weight: 800;
}

.marquee-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--mut);
  text-align: center;
}

.marquee-mystery .marquee-name {
  color: var(--ink);
  font-weight: 700;
}

/* ==========================================================================
   CUALIFICADORES / DESCUALIFICADORES
   Nota: aquí SÍ usamos verde/rojo, fuera de la paleta neutra de la guía
   de marca — la guía rige el producto (la app), no la comunicación.
   ========================================================================== */
.qualifiers {
  --ok: #16A34A;
  --ok-bg: #F0FDF4;
  --no: #E11D48;
  --no-bg: #FEF2F2;

  background: var(--paper);
  /* Sin padding lateral aquí: el margen lo aporta .container. */
  /* padding-bottom EXCEPCIÓN (60px en vez del estándar 48px): esta
     sección termina en blanco justo antes de un fondo gris (sección 4),
     y con el valor estándar el cierre se sentía corto. */
  padding: var(--section-y-mobile) 0 60px;
}

.qual-heading {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.qual-subtitle {
  font-size: clamp(16px, 4vw, 19px);
  color: var(--mut);
  text-align: center;
  margin-top: var(--subtitle-gap);
}

.qual-grid {
  display: grid;
  /* auto-fit + minmax: solo se ponen 2 columnas si hay sitio real
     para que ninguna frase tenga que partirse en 2 líneas. Si no
     cabe, cae solo a 1 columna — sin necesidad de breakpoints fijos. */
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: 20px;
  margin-top: var(--block-gap);
}

.qual-card {
  border-radius: 18px;
  padding: 28px 24px;
  border: 1.5px solid;
}

.qual-yes {
  background: var(--ok-bg);
  border-color: var(--ok);
}

.qual-no {
  background: var(--no-bg);
  border-color: var(--no);
}

.qual-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.qual-yes .qual-card-title {
  color: var(--ok);
}

.qual-no .qual-card-title {
  color: var(--no);
}

.qual-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qual-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

/* Puntos interactivos: el usuario marca los que le aplican */
.qual-item {
  cursor: pointer;
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: 10px;
  opacity: 0.6;
  transition: opacity 0.15s, background-color 0.15s;
}

.qual-item:not(.is-checked):hover {
  background: rgba(0, 0, 0, 0.04);
}

.qual-item.is-checked {
  opacity: 1;
  font-weight: 700;
}

.qual-yes .qual-item.is-checked {
  background: rgba(22, 163, 74, 0.12);
}

.qual-no .qual-item.is-checked {
  background: rgba(225, 29, 72, 0.12);
}

.qual-result {
  margin-top: 16px;
  min-height: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mut);
  text-align: center;
}

.qual-result.is-positive {
  font-weight: 700;
  color: var(--ok);
}

.qual-result.is-negative {
  font-weight: 700;
  color: var(--no);
}

.mk {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk svg {
  width: 13px;
  height: 13px;
}

.mk-ok {
  background: var(--ok);
}

.mk-no {
  background: var(--no);
}

/* ---------- Sección 4: Lista de funcionalidades (índice de módulos) ---------- */
.features-index {
  background: var(--paper2);
  /* padding-bottom EXCEPCIÓN (60px en vez del estándar 48px): mismo
     caso que Cualificadores — la línea divisoria del último item es
     muy fina y no "ancla" la vista tanto como el título en negrita
     que abre la siguiente sección, así que a igual valor en píxeles
     el hueco de abajo se siente más corto que el de arriba. */
  padding: var(--section-y-mobile) 0 60px;
}

.feat-heading {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.feat-subtitle {
  font-size: clamp(16px, 4vw, 19px);
  color: var(--mut);
  text-align: center;
  margin-top: var(--subtitle-gap);
}

.feat-group {
  max-width: 560px;
  margin: var(--block-gap) auto 0;
  text-align: left;
}

.feat-group + .feat-group {
  margin-top: var(--block-gap);
}

.feat-group-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.feat-list {
  list-style: none;
}

.feat-list--num {
  counter-reset: feat-counter;
}

.feat-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  font-size: 15px;
  color: var(--mut);
  line-height: 1.4;
  border-bottom: 0.5px solid var(--line);
}

.feat-list li:first-child {
  border-top: 0.5px solid var(--line);
}

.feat-body {
  display: flex;
  flex-direction: column;
}

.feat-title {
  font-weight: 700;
  color: var(--ink);
}

/* El marcador (número o viñeta) es otro item flex del <li>, así que
   align-items: baseline lo alinea automáticamente con la línea base
   del título (primera línea de .feat-body), sin ajustes manuales.
   Ambos comparten el mismo ancho fijo y van alineados a la derecha
   (pegados al gap) para que los títulos de "Básicos" y "Extras
   incluidos" arranquen exactamente en la misma posición. */
.feat-list--num li::before,
.feat-list--bullet li::before {
  flex: 0 0 auto;
  width: 18px;
  text-align: right;
  font-weight: 700;
}

.feat-list--num li::before {
  counter-increment: feat-counter;
  content: counter(feat-counter, decimal-leading-zero);
  color: var(--mut2);
  font-size: 13px;
}

.feat-list--bullet li::before {
  content: "•";
  color: var(--ink);
  /* Centrada respecto al ancho de "01, 02..." en vez de pegada a la
     derecha — el punto es mucho más estrecho que dos dígitos, así que
     al alinearlo a la derecha quedaba más a la derecha que el centro
     visual de los números. El ancho (18px) se mantiene igual para no
     mover los títulos. */
  text-align: center;
}

/* ==========================================================================
   FUNCIONALIDADES POR DENTRO — etiqueta "MÓDULO 01" + título FUERA de
   la imagen, y debajo un mini-carrusel de varias capturas 1:1 de ese
   módulo, cada una con su propio título dentro (ver .fd-shot).
   ========================================================================== */
.feature-detail {
  background: var(--paper);
  padding: var(--section-y-mobile) 0;
  /* Numeración automática de los módulos, para conectar visualmente
     con el 01, 02, 03... de la sección 4 (mismo módulo, mismo número).
     fd-extra-counter es independiente, para "Extra 01, 02..." */
  counter-reset: fd-counter fd-extra-counter;
}

.fd-heading {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.fd-subtitle {
  font-size: clamp(16px, 4vw, 19px);
  color: var(--mut);
  text-align: center;
  margin-top: var(--subtitle-gap);
}

/* Etiqueta "MÓDULO 01" encima del título, mismo patrón que
   .vt-point-title en Propuesta de Valor — el número queda como
   metadato discreto en vez de competir en tamaño con el título. */
.fd-eyebrow::before {
  content: "Módulo " counter(fd-counter, decimal-leading-zero);
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.fd-block:not(.fd-block--extra) .fd-eyebrow::before {
  counter-increment: fd-counter;
}

/* Extras: numeración propia ("Extra 01, 02...") independiente de la de
   los módulos. En verde porque son de las funcionalidades más
   relevantes (Enlaces/Página web), no algo secundario. */
.fd-eyebrow--extra::before {
  content: "Extra " counter(fd-extra-counter, decimal-leading-zero);
  color: #16A34A;
  counter-increment: fd-extra-counter;
}

.fd-block {
  margin-top: var(--space-4xl);
}

.fd-modules > .fd-block:first-child {
  margin-top: var(--block-gap);
}

.fd-title {
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Carrusel: fuera de .container para que pueda ir a sangre y se vea
   el borde de la siguiente captura (indica que hay más al deslizar). */
.fd-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 4px;
  margin-top: 16px;
  scrollbar-width: none;
  /* El carrusel vive fuera de .container (para poder ir a sangre e
     insinuar el scroll en móvil), así que no hereda su max-width ni
     su centrado. Sin esto, en pantallas muy anchas el título (dentro
     de .container, centrado a 1100px) queda mucho más metido hacia
     dentro que las imágenes, que se quedarían pegadas al borde real
     de la ventana. En móvil/tablet no cambia nada: nunca se llega a
     los 1100px, así que jamás se activa el límite ni el centrado. */
  max-width: var(--content-max);
  margin-inline: auto;
}

.fd-carousel::-webkit-scrollbar {
  display: none;
}

.fd-spacer {
  flex: 0 0 auto;
  /* Ancho = --container-x menos el gap del carrusel (14px), que ya
     aporta esa separación con la primera captura. No depende del
     padding de la sección (--tablet-x en tablet+): ese padding
     desplaza por igual al carrusel y al texto de arriba, así que solo
     hay que compensar el padding propio de .container (--container-x),
     que es fijo en todos los tamaños. */
  width: calc(var(--container-x) - 14px);
  /* Sin esto, scroll-snap-type "mandatory" salta directamente a la
     primera captura al cargar (es el primer punto de snap real),
     saltándose el espaciador por completo. */
  scroll-snap-align: start;
}

.fd-shot {
  position: relative;
  flex: 0 0 auto;
  width: 82vw;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--soft);
  /* "center" en vez de "start": así, al encajar en cualquier imagen
     (incluida la primera), queda un margen a los dos lados con un
     trozo de la imagen anterior y otra de la siguiente asomando —
     "start" la pegaba siempre al borde izquierdo, sin insinuar que
     se puede seguir deslizando hacia atrás. */
  scroll-snap-align: center;
}

.fd-shot-media {
  position: absolute;
  inset: 0;
  /* Placeholder — se sustituye por la captura real. */
  background: var(--soft);
}

.fd-shot-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 42%, rgba(0, 0, 0, 0) 70%);
}

.fd-shot-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
}

.fd-shot-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.fd-shot-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  margin-top: 2px;
}

/* ==========================================================================
   TABLET (≥ 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .site-header {
    justify-content: flex-start;
    padding: 40px 40px 0;
  }

  .hero {
    /* padding lateral = 40px: es la referencia que las secciones con
       .container igualan combinando --tablet-x (16px) + --container-x
       (24px), ya que el Hero no usa .container. */
    padding: 28px 40px 80px;
  }

  .value-talk {
    padding: var(--section-y-tablet) var(--tablet-x) 0;
  }

  .logo-marquee {
    padding: 53px 0 60px;
  }

  .qualifiers {
    padding: var(--section-y-tablet) var(--tablet-x);
  }

  .qual-grid {
    gap: 40px;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  .features-index {
    padding: var(--section-y-tablet) var(--tablet-x);
  }

  .feature-detail {
    padding: var(--section-y-tablet) var(--tablet-x);
  }

  .fd-shot {
    width: 320px;
  }
}

/* ==========================================================================
   ESCRITORIO (≥ 1200px) — el Hero pasa a dos columnas, como en la V1.
   Por debajo de este ancho (aunque sea tablet grande), se mantiene
   el layout centrado tipo móvil: no hay sitio de sobra para dos columnas
   sin apretujar el texto.
   ========================================================================== */
@media (min-width: 1200px) {
  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 48px;
    text-align: left;
    padding: 28px 40px 100px;
    max-width: 1250px;
    margin: 0 auto;
  }

  .hero-content {
    flex: 1;
    min-width: 600px;
    max-width: 620px;
  }

  .hero-badge {
    margin-bottom: 24px;
  }

  .hero h1 {
    margin: 0 0 16px;
  }

  .break-lg {
    display: block;
  }

  .hero-subtitle {
    margin: 0;
  }

  .hero-price {
    align-items: flex-start;
  }

  .hero-counter {
    align-self: flex-start;
  }

  .hero-mascot {
    flex: 0 0 auto;
    width: 460px;
    max-width: 460px;
    margin: 0;
  }
}