/* Estrategia de color
   - Grafito (--bg): fondo neutro que deja brillar el rojo del logo y el rosa de los afiches.
   - Rojo marca (--primary): el de la X del logo. Solo para acción y urgencia (CTA, promo).
   - Coral (--primary-2): energía; acompaña al rojo en los degradados de los botones.
   - Rosa producto (--secondary): el de los afiches. Precios, etiquetas y progreso.
   - Blanco y gris cálido: lectura. */
:root {
  --bg: #0a0a0d;
  --text: #f7f7fa;
  --muted: #bdbcc8;
  --primary: #ff2d46;
  --primary-2: #ff6b3d;
  --secondary: #ff6fa8;
  --line: rgba(255, 255, 255, 0.09);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 45, 70, 0.24), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(255, 111, 168, 0.14), transparent 20%),
    linear-gradient(180deg, #0a0a0d 0%, #111116 28%, #131318 100%);
  color: var(--text);
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: auto auto 8% -6%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 111, 168, 0.1);
  filter: blur(80px);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

section[id] {
  scroll-margin-top: 120px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

button,
input {
  font: inherit;
}

.container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.section {
  padding: 110px 0;
}

.alt {
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- Encabezado ----------
   Una sola barra fija: marca, navegación y la pieza "Cotiza ahora" + logo.
   Secuencia: la marquilla entra de izquierda a derecha; al detenerse, el corredor
   sale de la última "S", recorre el borde inferior dejando a su paso las palabras
   del menú y encaja en su silueta dentro del logo, que se enciende.
   La coreografía del corredor la calcula script.js con las posiciones reales. */

.site-header {
  --nav-h: 84px;
  --dock-w: 70px;
  --logo-grow: 1.3;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  background: rgba(10, 10, 13, 0.84);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.site-header.is-scrolled {
  --nav-h: 66px;
}

.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--nav-h);
  transition: min-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Marca: entra de izquierda a derecha y queda en su sitio.
   Va por encima del corredor para que este salga "de detrás" de la S. */
.brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;
}

.brand-logo,
.brand-sheen {
  width: 190px;
  height: auto;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-logo {
  filter: drop-shadow(0 10px 18px rgba(255, 45, 70, 0.18));
  animation: brandEnter 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-header.is-scrolled .brand-logo,
.site-header.is-scrolled .brand-sheen {
  width: 150px;
}

/* Destello que recorre la marquilla: una copia iluminada de la misma imagen
   (conserva la forma exacta de las letras), visible solo dentro de una franja
   diagonal de bordes suaves que avanza. La máscara es un degradado CSS, no una
   imagen, así funciona también al abrir el archivo localmente. */
.brand-sheen {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(3.4) saturate(0.15) drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  -webkit-mask-image: linear-gradient(105deg, transparent 42%, #000 49%, #000 51%, transparent 58%);
  mask-image: linear-gradient(105deg, transparent 42%, #000 49%, #000 51%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: brandSheen 5s cubic-bezier(0.45, 0, 0.25, 1) 1.1s infinite;
}

.brand-tagline {
  padding-left: 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  animation: taglineIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.footer-logo {
  width: 180px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: 0.93rem;
  color: var(--muted);
}

.main-nav > a {
  position: relative;
  z-index: 2;
  padding: 6px 0;
  transition: color 0.4s ease, text-shadow 0.6s ease;
}

/* Subrayado con el mismo degradado de la pista */
.main-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-nav > a:hover {
  color: var(--text);
}

.main-nav > a:hover::after {
  transform: scaleX(1);
}

/* Primera carrera: las palabras aparecen a medida que pasa el corredor.
   Si el script no corre, aparecen solas a los 6.5 s. */
@media (prefers-reduced-motion: no-preference) {
  .js-intro .main-nav > a {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(4px);
    animation: wordDrop 0.4s ease 6.5s forwards;
  }

  .js-intro .main-nav > a.is-revealed {
    animation: wordDrop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

/* "Cotiza ahora" + logo: el botón se desvanece hacia el logo */
.nav-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 60px 0 22px;
  border-radius: 999px 0 0 999px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary));
  background-size: 200% 100%;
  animation: ctaFlow 6s ease-in-out infinite alternate;
  /* El extremo derecho se desvanece hacia el logo */
  -webkit-mask: linear-gradient(90deg, #000 58%, transparent 100%);
  mask: linear-gradient(90deg, #000 58%, transparent 100%);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Logo animado: la X espera con el hueco del corredor. Al encajar, destello,
   fundido con desenfoque hacia logo.png y crecimiento a su tamaño final.
   Posiciones medidas sobre logo.png: la X ocupa 13.41 % → 97.24 % del ancho;
   el hueco del corredor, 33.98 % izq. / 17.74 % sup. / 53.93 % de ancho. */
.run-dock {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: var(--dock-w);
  aspect-ratio: 671 / 372;
  margin-left: -46px;
  transform-origin: 45% 55%;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.run-dock.is-logo {
  transform: scale(var(--logo-grow));
}

.dock-x {
  position: absolute;
  left: 13.41%;
  top: 0;
  width: 83.83%;
  filter: saturate(0.9) drop-shadow(0 0 6px rgba(255, 45, 70, 0.35));
  transition: opacity 0.45s ease, filter 0.45s ease;
  animation: xWait 1.8s ease-in-out infinite alternate;
}

.dock-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  filter: blur(4px) brightness(1.7) drop-shadow(0 0 0 rgba(255, 45, 70, 0));
  transition: opacity 0.5s ease, filter 0.7s ease;
}

.run-dock.is-logo .dock-x {
  opacity: 0;
  filter: saturate(1.2) blur(2px) drop-shadow(0 0 10px rgba(255, 45, 70, 0.8));
  animation: none;
}

.run-dock.is-logo .dock-logo {
  opacity: 1;
  filter: blur(0) brightness(1) drop-shadow(0 0 8px rgba(255, 45, 70, 0.45));
}

/* Destello de fusión: luz que se abre desde el punto de encaje */
.run-dock::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 45, 70, 0.55) 42%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
}

.run-dock.is-flash::after {
  animation: mergeFlash 0.75s ease-out;
}

/* Capa del corredor (posiciones y tiempos los define script.js) */
.header-run {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.run-track {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.run-track-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--primary) 60%, var(--secondary));
  transform: scaleX(0);
  transform-origin: left center;
}

/* Corredor: mismo tamaño que el hueco de la X (y que la "S" de la marquilla) */
.run-runner {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--dock-w) * 0.5393);
  aspect-ratio: 557 / 448;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.run-runner img {
  position: absolute;
  inset: 0;
  width: 100%;
}

/* Zancada: rebote corto que da naturalidad a la carrera */
.run-body {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
  animation: stride 0.3s ease-in-out infinite alternate;
}

/* Ecos de movimiento: el cuerpo deja su rastro con la luz de la marca */
.run-ghost {
  mix-blend-mode: screen;
  filter: blur(1.5px) sepia(1) saturate(6) hue-rotate(-30deg);
  animation: stride 0.3s ease-in-out infinite alternate-reverse;
}

/* `translate` se suma a la zancada animada (que usa `transform`) */
.run-ghost-1 {
  translate: -16% 0;
  opacity: 0.32;
}

.run-ghost-2 {
  translate: -32% 0;
  opacity: 0.14;
}

/* Estela de velocidad */
.run-runner::before {
  content: "";
  position: absolute;
  right: 78%;
  top: 36%;
  width: 70px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 45, 70, 0.9));
  box-shadow: -12px 10px 0 -0.5px rgba(255, 111, 168, 0.5), 6px -9px 0 -1px rgba(255, 255, 255, 0.25);
}

/* Sombra en el piso: lo asienta sobre la pista */
.run-runner::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 22%;
  bottom: -3px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  animation: shadowStride 0.3s ease-in-out infinite alternate;
}

/* Riel lateral de redes sociales */
.social-rail {
  position: fixed;
  left: 20px;
  top: 50%;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);
  animation: railIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

.social-rail-label {
  margin-bottom: 6px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.social-rail::after {
  content: "";
  width: 1px;
  height: 56px;
  margin-top: 4px;
  background: linear-gradient(var(--primary), transparent);
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(18, 18, 24, 0.7);
  backdrop-filter: blur(8px);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

.social-icon:hover {
  transform: translateX(3px);
  border-color: currentColor;
}

.is-whatsapp:hover {
  color: #25d366;
}

.is-instagram:hover {
  color: #f77737;
}

.is-facebook:hover {
  color: #4f8ef7;
}

@keyframes brandEnter {
  from {
    opacity: 0;
    transform: translateX(-56px);
    filter: blur(6px) drop-shadow(0 10px 18px rgba(255, 45, 70, 0));
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0) drop-shadow(0 10px 18px rgba(255, 45, 70, 0.18));
  }
}

@keyframes brandSheen {
  0% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  24%, 100% {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

@keyframes taglineIn {
  from {
    opacity: 0;
    letter-spacing: 0.5em;
  }
}

@keyframes wordDrop {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes ctaFlow {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 60% 0;
  }
}

/* La X "respira" mientras espera al corredor */
@keyframes xWait {
  from {
    filter: saturate(0.9) drop-shadow(0 0 4px rgba(255, 45, 70, 0.25));
  }
  to {
    filter: saturate(1.1) drop-shadow(0 0 11px rgba(255, 45, 70, 0.6));
  }
}

@keyframes mergeFlash {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes shadowStride {
  from {
    transform: scaleX(1);
    opacity: 0.9;
  }
  to {
    transform: scaleX(0.8);
    opacity: 0.6;
  }
}

@keyframes stride {
  from {
    transform: translateY(0) rotate(-1deg);
  }
  to {
    transform: translateY(-2.5px) rotate(1.5deg);
  }
}

@keyframes railIn {
  from {
    opacity: 0;
    transform: translate(-24px, -50%);
  }
}

@media (max-width: 1279px) {
  .social-rail {
    display: none;
  }
}

/* Tablet y celular: el menú siempre visible, en una segunda fila bajo la marca.
   El corredor recorre el borde inferior de esa fila y va revelando las palabras. */
@media (max-width: 1140px) {
  .nav-wrap {
    flex-wrap: wrap;
    row-gap: 2px;
    min-height: 0;
    padding-top: 8px;
  }

  .nav-action {
    margin-left: auto;
  }

  .main-nav {
    order: 3;
    width: 100%;
    margin: 0;
    padding: 4px 0 10px;
    justify-content: space-between;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 0.86rem;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav > a {
    flex: 0 0 auto;
    padding: 6px 0;
    color: var(--text);
  }
}

@media (max-width: 720px) {
  .site-header {
    --dock-w: 56px;
  }

  .nav-wrap {
    column-gap: 12px;
  }

  .main-nav {
    gap: 10px;
    font-size: 0.8rem;
  }

  .brand-logo,
  .brand-sheen {
    width: 150px;
  }

  .site-header.is-scrolled .brand-logo,
  .site-header.is-scrolled .brand-sheen {
    width: 128px;
  }

  .brand-tagline {
    font-size: 0.44rem;
    letter-spacing: 0.2em;
  }

  .nav-cta {
    height: 40px;
    padding: 0 48px 0 16px;
    font-size: 0.82rem;
  }

  .run-dock {
    margin-left: -40px;
  }
}

@media (max-width: 560px) {
  /* En pantallas chicas el botón flotante de WhatsApp ya cumple la función */
  .nav-cta {
    display: none;
  }

  .run-dock {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .run-runner,
  .run-track,
  .brand-sheen,
  .dock-x {
    display: none;
  }

  .dock-logo {
    opacity: 1;
    filter: none;
  }
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2), var(--primary));
  background-size: 200% 100%;
  animation: ctaFlow 6s ease-in-out infinite alternate;
  color: white;
  box-shadow: 0 18px 28px rgba(255, 43, 43, 0.32);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.5s ease;
}

.btn-primary:hover::after {
  transform: translateX(120%);
}

.btn-primary:hover {
  box-shadow: 0 22px 32px rgba(255, 43, 43, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
}

.hero {
  padding: 100px 0 70px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 54px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.hero-copy h1 {
  margin: 18px 0 18px;
  font-size: clamp(2.7rem, 5vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
  text-shadow: 0 10px 24px rgba(255, 43, 43, 0.15);
}

.hero-copy p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.08rem;
  text-shadow: 0 4px 14px rgba(255, 43, 43, 0.08);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.hero-stats {
  list-style: none;
  padding: 0;
  margin: 42px 0 0;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.hero-stats li {
  min-width: 120px;
}

.hero-stats strong {
  display: block;
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.hero-stats span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Hero: carrusel inclinado ---------- */

.hero-visual {
  --slide-duration: 2s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 34px 0 0;
}

.carousel-stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 440px);
}

/* Placa inclinada al revés, detrás de la tarjeta */
.carousel-stage::before {
  content: "";
  position: absolute;
  inset: -16px -24px;
  z-index: -1;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255, 43, 43, 0.18), rgba(255, 111, 168, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: rotate(-5deg);
}

/* Resplandor que respira detrás de la tarjeta */
.carousel-stage::after {
  content: "";
  position: absolute;
  inset: 14% 6% -8%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 45, 70, 0.55), rgba(255, 111, 168, 0.12) 70%, transparent);
  filter: blur(42px);
  animation: stageGlow 6s ease-in-out infinite;
}

.machine-card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: var(--shadow), 0 40px 90px -40px rgba(255, 45, 70, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0a0a;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotate(3deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  aspect-ratio: 3 / 4;
}

.hero-carousel {
  touch-action: pan-y;
  cursor: grab;
}

.carousel-track {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* Relleno desenfocado con la misma imagen: el afiche se ve completo, sin franjas vacías */
.slide::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--img) center / cover no-repeat;
  filter: blur(26px) brightness(0.42) saturate(1.3);
}

.slide img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  user-select: none;
  -webkit-user-drag: none;
}

.carousel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.carousel-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.carousel-progress span.is-running {
  animation: carouselProgress var(--slide-duration) linear forwards;
}

.hero-visual.is-paused .carousel-progress span {
  animation-play-state: paused;
}

.carousel-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 16px;
  width: min(100%, 440px);
}

.carousel-caption {
  margin: 0;
  min-width: 0;
}

.carousel-caption span {
  display: block;
  color: var(--secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.carousel-caption strong {
  display: block;
  font-size: 1.12rem;
  line-height: 1.25;
}

.carousel-caption.is-changing {
  animation: captionIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-cta {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 111, 168, 0.35);
  background: rgba(255, 111, 168, 0.08);
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-cta:hover {
  background: rgba(255, 111, 168, 0.16);
  transform: translateY(-2px);
}

.carousel-dots {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}

.carousel-dot[aria-current="true"] {
  width: 28px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

@keyframes carouselProgress {
  to {
    transform: scaleX(1);
  }
}

@keyframes captionIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes stageGlow {
  0%, 100% {
    opacity: 0.75;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.badge {
  position: absolute;
  top: 6px;
  right: 18px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text);
  backdrop-filter: blur(12px);
}

.floating-box {
  position: absolute;
  z-index: 4;
  background: rgba(18, 18, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px);
  color: var(--text);
}

.floating-box span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.floating-box strong {
  font-size: 1.3rem;
}

/* Cajas en las esquinas inferiores: los títulos de los afiches quedan libres */
.box-one {
  left: 0;
  bottom: 200px;
}

.box-two {
  right: 0;
  bottom: 124px;
}

/* ---------- Secciones de contenido ----------
   Venta: catálogo y precios de temporada (tarjetas).
   Publicidad indirecta: objetivos, espacio y rutinas (formato editorial,
   sin rojo de venta; el rosa hace de hilo conductor). */

.section-lead {
  margin: 12px 0 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 1.02rem;
}

.section-heading.center .section-lead {
  margin-inline: auto;
}

/* Categorías */
.categories-section {
  padding-top: 28px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 45, 70, 0.4);
}

.category-card.is-linea-rosa:hover {
  border-color: rgba(255, 111, 168, 0.5);
}

.category-cover {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 10px;
  overflow: hidden;
  background: #151519;
}

.category-cover img {
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-card:hover .category-cover img {
  transform: scale(1.06);
}

.category-count {
  padding: 0 20px;
  color: var(--secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.category-card h3 {
  margin: 0;
  padding: 0 20px;
  font-size: 1.3rem;
}

.category-card p {
  margin: 0;
  padding: 0 20px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Catálogo */
.catalog-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

.sort-control select {
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #15151b;
  color: var(--text);
  font: inherit;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.filter-chip {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.filter-chip:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.filter-chip.is-linea-rosa {
  border-color: rgba(255, 111, 168, 0.4);
  color: var(--secondary);
}

.filter-chip[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color: #fff;
}

.filter-chip.is-linea-rosa[aria-selected="true"] {
  background: linear-gradient(90deg, #ff4f93, var(--secondary));
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #121217;
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.product-card.is-linea-rosa {
  border-color: rgba(255, 111, 168, 0.3);
}

.product-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* Afiche completo (contain) sobre su propia versión desenfocada */
.product-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #151519;
}

.product-media::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--img) center / cover no-repeat;
  filter: blur(22px) brightness(0.4);
}

.product-media img {
  position: relative;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-media img {
  transform: scale(1.03);
}

.product-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 10, 13, 0.75);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card:hover .product-zoom,
.product-open:focus-visible .product-zoom {
  opacity: 1;
  transform: translateY(0);
}

.product-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
}

.product-content h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.product-hook {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.product-price {
  margin: 6px 0 0;
  font-size: 0.92rem;
}

.product-price s,
.viewer-price s,
.deal-prices s {
  color: var(--muted);
  font-size: 0.85em;
  opacity: 0.75;
}

.cat-tag {
  align-self: flex-start;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.is-linea-rosa .cat-tag,
.is-rosa .cat-tag {
  color: var(--secondary);
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

/* Visor de producto */
.product-viewer {
  width: min(1040px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #111116;
  color: var(--text);
}

.product-viewer::backdrop {
  background: rgba(5, 5, 8, 0.88);
  backdrop-filter: blur(4px);
}

.product-viewer[open] {
  animation: viewerIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.viewer-body {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.viewer-media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: #0b0b0e;
}

.viewer-media > img {
  max-height: 72vh;
  object-fit: contain;
  border-radius: 14px;
}

.viewer-nav,
.viewer-close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(10, 10, 13, 0.72);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

.viewer-nav[hidden] {
  display: none;
}

.viewer-prev {
  left: 24px;
  top: 45%;
}

.viewer-next {
  right: 24px;
  top: 45%;
}

.viewer-close {
  top: 12px;
  right: 12px;
  font-size: 1rem;
}

.viewer-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.viewer-thumbs button {
  flex: 0 0 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  opacity: 0.6;
}

.viewer-thumbs button[aria-current="true"] {
  border-color: var(--secondary);
  opacity: 1;
}

.viewer-thumbs img {
  height: 100%;
  object-fit: cover;
}

.viewer-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 30px;
}

.viewer-info h3 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.viewer-hook {
  margin: 0;
  color: var(--secondary);
  font-weight: 700;
}

.viewer-use {
  margin: 0;
  color: var(--muted);
}

.viewer-data {
  margin: 4px 0;
  padding-left: 18px;
  line-height: 1.8;
}

.viewer-data li::marker {
  color: var(--primary);
}

.viewer-price {
  margin: 4px 0 6px;
  font-size: 1.25rem;
}

.viewer-cta {
  align-self: flex-start;
}

.viewer-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

@keyframes viewerIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

/* Enlaces a productos dentro del contenido editorial */
.inline-product {
  margin: 0 6px 6px 0;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255, 111, 168, 0.35);
  border-radius: 999px;
  background: rgba(255, 111, 168, 0.06);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.inline-product:hover {
  border-color: var(--secondary);
  background: rgba(255, 111, 168, 0.14);
}

/* Formato editorial (publicidad indirecta) */
.editorial {
  padding: 90px 0;
  border-top: 1px solid var(--line);
}

.editorial-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.editorial-copy h2 {
  margin: 14px 0 16px;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.editorial-copy p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.soft-contact a,
.space-tip a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.goal-list {
  display: grid;
}

.goal-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.goal-row:first-child {
  padding-top: 0;
}

.goal-num {
  color: var(--secondary);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.goal-row h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.goal-row p {
  margin: 0 0 10px;
  color: var(--muted);
}

.goal-products {
  margin: 0;
}

/* Kits */
.kit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.kit-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
}

.kit-thumbs {
  display: flex;
  margin-bottom: 16px;
}

.kit-thumbs img {
  width: 70px;
  height: 70px;
  margin-right: -14px;
  object-fit: cover;
  border: 3px solid #0f0f13;
  border-radius: 50%;
}

.kit-card h3 {
  margin: 0;
  font-size: 1.2rem;
}

.kit-space {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

.kit-items {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.kit-total {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.kit-total strong {
  color: var(--text);
  font-size: 1.1rem;
}

.space-tip {
  max-width: 760px;
  margin: 28px auto 0;
  color: var(--muted);
  text-align: center;
}

.space-tip strong {
  color: var(--text);
}

/* Rutinas */
.routine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.routine-card {
  position: relative;
  padding: 24px 22px;
  border-top: 2px solid var(--secondary);
  border-radius: 4px 4px 20px 20px;
  background: rgba(255, 255, 255, 0.025);
}

.routine-time {
  color: var(--secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.routine-card h3 {
  margin: 6px 0 12px;
  font-size: 1.2rem;
}

.routine-card ol {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.75;
}

.routine-gear {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.disclaimer {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Precios de temporada */
.promo-cta {
  background: linear-gradient(135deg, rgba(255, 107, 61, 0.1), rgba(255, 111, 168, 0.05));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.deal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.deal-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(10, 10, 13, 0.5);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.deal-row:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 45, 70, 0.4);
}

.deal-row img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
}

.deal-name {
  font-weight: 700;
}

.deal-prices strong {
  color: var(--text);
}

/* Preguntas frecuentes */
.faq-wrap {
  max-width: 820px;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 20px 40px 20px 0;
  font-size: 1.05rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  color: var(--secondary);
  font-size: 1.5rem;
  font-weight: 400;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}

.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-list details p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.7;
}

.faq-list a {
  color: var(--secondary);
}

.trust-band {
  padding-top: 24px;
  padding-bottom: 20px;
}

.sales-strip {
  background: linear-gradient(135deg, rgba(255, 43, 43, 0.08), rgba(255, 255, 255, 0.02));
}

.trust-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px 28px;
  box-shadow: 0 18px 34px rgba(255, 43, 43, 0.08);
}

.trust-copy h2 {
  margin: 10px 0 0;
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  letter-spacing: -0.05em;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.trust-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
}

.section-heading {
  margin-bottom: 38px;
}

.section-heading.center {
  text-align: center;
}

.section-heading h2 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.cta-box {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 26px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 107, 61, 0.16), rgba(24, 20, 28, 0.96));
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 40px 36px;
  box-shadow: var(--shadow);
}

.cta-box h2 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -0.05em;
}

.cta-box p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.8);
  max-width: 440px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
}

.contact-form input,
.contact-form select {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 14, 0.4);
  color: var(--text);
  padding: 1rem 1rem;
  outline: none;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.contact-form input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.32);
  animation: pulseFloat 2.4s ease-in-out infinite;
}

@keyframes pulseFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 20px 40px rgba(37, 211, 102, 0.32);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 24px 46px rgba(37, 211, 102, 0.4);
  }
}

.site-footer {
  padding: 24px 0 34px;
  border-top: 1px solid var(--line);
  background: rgba(16, 16, 22, 0.8);
}

.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-brand {
  margin-right: 26px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  flex-wrap: wrap;
}

.social-section {
  padding-top: 18px;
}

.social-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px 30px;
}

.social-copy h2 {
  margin: 10px 0 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.05em;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.social-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 43, 43, 0.18), rgba(255, 107, 61, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.social-badge.is-share {
  border-color: rgba(255, 111, 168, 0.45);
  background: rgba(255, 111, 168, 0.1);
  color: var(--secondary);
}

.social-badge svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.social-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 107, 61, 0.3);
}

@media (max-width: 980px) {
  .category-grid,
  .kit-grid,
  .routine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-grid,
  .cta-box,
  .editorial-grid,
  .social-wrap {
    grid-template-columns: 1fr;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .viewer-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 76px 0;
  }

  .btn {
    width: 100%;
    min-height: 52px;
    font-size: 0.98rem;
  }

  .hero {
    padding-top: 62px;
    padding-bottom: 52px;
  }

  .hero-copy h1 {
    font-size: clamp(2.3rem, 10vw, 3.2rem);
    line-height: 0.96;
  }

  .hero-copy p {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .hero-stats li {
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 10px;
  }

  .hero-stats strong {
    font-size: 1.2rem;
  }

  .hero-visual {
    gap: 28px;
    padding-top: 22px;
  }

  .carousel-stage,
  .carousel-meta {
    width: min(86%, 360px);
  }

  .carousel-stage::before {
    inset: -10px -14px;
    transform: rotate(-3deg);
  }

  .badge {
    top: -14px;
    right: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
  }

  .floating-box {
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
  }

  .floating-box strong {
    font-size: 1rem;
  }

  .box-one {
    left: 0;
    bottom: 170px;
  }

  .box-two {
    right: 0;
    bottom: 110px;
  }

  .kit-grid,
  .routine-grid,
  .cta-box {
    grid-template-columns: 1fr;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product-content {
    padding: 12px 12px 14px;
  }

  .product-content h3 {
    font-size: 0.95rem;
  }

  .product-hook {
    display: none;
  }

  .catalog-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .trust-grid,
  .social-wrap,
  .cta-box {
    padding: 22px 18px;
  }

  .trust-badges {
    justify-content: flex-start;
  }

  .deal-row {
    grid-template-columns: 56px 1fr;
  }

  .deal-prices {
    grid-column: 2;
  }

  .viewer-info {
    padding: 20px 18px 24px;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .social-links {
    justify-content: center;
    width: 100%;
  }

  .social-badge {
    min-height: 44px;
    padding: 0 1rem;
    font-size: 0.8rem;
  }

  .site-footer {
    text-align: center;
  }

  .footer-wrap,
  .social-wrap {
    justify-content: center;
    flex-direction: column;
  }

  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    padding: 0.8rem 1rem;
    font-size: 0.72rem;
  }
}

/* ---------- Celular: la mayoría de clientes compra desde aquí ---------- */
@media (max-width: 720px) {
  .section,
  .editorial {
    padding: 56px 0;
  }

  .section-heading {
    margin-bottom: 24px;
  }

  .section-heading h2,
  .editorial-copy h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
  }

  .section-lead,
  .editorial-copy p {
    font-size: 0.96rem;
  }

  /* Portada compacta: el carrusel entra en la primera pantalla */
  .hero {
    padding: 24px 0 36px;
  }

  .hero-grid {
    gap: 22px;
  }

  .hero-copy h1 {
    margin: 10px 0 12px;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .hero-copy p {
    font-size: 0.96rem;
  }

  .hero-actions {
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
  }

  .hero-actions .btn {
    flex: 1;
    min-height: 46px;
    padding: 0.7rem 0.8rem;
    font-size: 0.86rem;
  }

  .hero-stats {
    margin-top: 22px;
    gap: 8px;
  }

  .hero-stats li {
    padding: 10px 8px;
    text-align: center;
  }

  .hero-stats strong {
    font-size: 1.05rem;
  }

  .hero-stats span {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .hero-visual {
    gap: 22px;
    padding-top: 8px;
  }

  .floating-box {
    display: none;
  }

  /* Cómo trabajamos: una columna */
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .trust-copy h2 {
    font-size: 1.3rem;
  }

  .trust-badges span {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Categorías: tarjetas bajas, solo portada, conteo y nombre */
  .category-grid {
    gap: 10px;
  }

  .category-card {
    padding-bottom: 14px;
  }

  .category-card p {
    display: none;
  }

  .category-count {
    padding: 0 12px;
    font-size: 0.64rem;
  }

  .category-card h3 {
    padding: 0 12px;
    font-size: 1.05rem;
  }

  /* Filtros: una sola fila deslizable */
  .filter-chips {
    flex-wrap: nowrap;
    margin: 0 -16px 20px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex: 0 0 auto;
    padding: 0.5rem 0.95rem;
    font-size: 0.85rem;
  }

  .sort-control {
    width: 100%;
    justify-content: space-between;
  }

  .editorial-grid {
    gap: 24px;
  }

  .goal-row {
    grid-template-columns: 38px 1fr;
    gap: 10px;
  }

  .goal-num {
    font-size: 1.2rem;
  }

  .kit-thumbs img {
    width: 56px;
    height: 56px;
  }

  .faq-list summary {
    font-size: 0.98rem;
  }
}

/* Celulares angostos (≤ 380 px): el menú entra completo en una línea */
@media (max-width: 380px) {
  .main-nav {
    gap: 6px;
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}