/* =====================================================================
   PROPUESTA 2 — paginalista.mx
   Estilos propios: sistema de motion, componentes y mockups en CSS puro.
   Complementa a Tailwind (no lo reemplaza).

   Índice
   1.  Base y utilidades
   2.  Componentes (botones, tarjetas, chips, eyebrow)
   3.  Header sticky + menú móvil
   4.  Hero (cascada de entrada, fondos)
   5.  Sistema de reveal al scroll
   6.  FAQ (acordeón)
   7.  Botón flotante de WhatsApp
   8.  Mockups Botaniko (laptop + celular, sin imágenes)
   9.  prefers-reduced-motion
   ===================================================================== */

:root {
  --brand: #12355B;
  --brand-600: #17416E;
  --brand-900: #0A1F36;
  --whatsapp: #25D366;
  --cream: #FAFAF7;
  --ink: #1F2933;
  --ink-muted: #5A6673;
  --mist: #EEF2F5;
  --gold: #C9A227;

  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 520ms;
}

/* =====================================================================
   1. BASE Y UTILIDADES
   ===================================================================== */

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

body {
  overflow-x: hidden;
}

/* Enlace para saltar al contenido (accesibilidad por teclado) */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 0.75rem 1.15rem;
  border-radius: 0.75rem;
  transition: transform 180ms var(--ease-out-soft);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Foco visible y consistente en todo lo interactivo */
.focus-ring:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 0.6rem;
}
/* Sobre fondos azules el foco necesita contrastar en claro */
.bg-brand a:focus-visible,
.bg-brand button:focus-visible,
.bg-brand-900 a:focus-visible,
#empezar a:focus-visible {
  outline-color: #F5D77A;
}

.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;
}

/* Etiqueta pequeña sobre los títulos de sección */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  position: relative;
  padding-left: 1.85rem;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.35rem;
  height: 1px;
  background: var(--gold);
}
.text-center .eyebrow {
  padding-left: 0;
}
.text-center .eyebrow::before {
  display: none;
}

/* Estilos requeridos por Lenis (evitamos cargar su CSS desde otro CDN) */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* =====================================================================
   2. COMPONENTES
   ===================================================================== */

.btn {
  position: relative;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  min-height: 44px;
  transition:
    transform 150ms var(--ease-out-soft),
    box-shadow 200ms var(--ease-out-soft),
    background-color 180ms ease,
    color 180ms ease;
}
.btn:hover {
  transform: translateY(-1px) scale(1.02);
}
.btn:active {
  transform: translateY(0) scale(0.99);
}

/* Verde: solo acción / WhatsApp */
.btn-wa {
  background: var(--whatsapp);
  color: #06331A;
  box-shadow: 0 1px 2px rgba(11, 92, 45, 0.16), 0 10px 24px -12px rgba(37, 211, 102, 0.65);
}
.btn-wa:hover {
  background: #1FB855;
  box-shadow: 0 2px 6px rgba(11, 92, 45, 0.2), 0 18px 34px -14px rgba(37, 211, 102, 0.7);
}

/* Secundario sobre fondo claro */
.btn-ghost {
  background: #fff;
  color: var(--brand);
  border: 1px solid rgba(18, 53, 91, 0.14);
  box-shadow: 0 1px 2px rgba(18, 53, 91, 0.04);
}
.btn-ghost:hover {
  border-color: rgba(18, 53, 91, 0.28);
  box-shadow: 0 2px 6px rgba(18, 53, 91, 0.07), 0 16px 30px -18px rgba(18, 53, 91, 0.3);
}

/* Secundario sobre fondo azul */
.btn-light {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-light:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 18px 34px -16px rgba(0, 0, 0, 0.45);
}

/* Pulso muy sutil para el CTA final (solo transform + opacity) */
.btn-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--whatsapp);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-pulse::after {
    animation: pl-pulse 3.4s var(--ease-out-soft) infinite;
  }
}
@keyframes pl-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  55%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* Tarjetas */
.card {
  background: #fff;
  border: 1px solid rgba(18, 53, 91, 0.07);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(18, 53, 91, 0.03), 0 8px 24px -16px rgba(18, 53, 91, 0.18);
  transition:
    transform 220ms var(--ease-out-soft),
    box-shadow 220ms var(--ease-out-soft),
    border-color 220ms ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(18, 53, 91, 0.14);
    box-shadow: 0 2px 6px rgba(18, 53, 91, 0.05), 0 22px 44px -22px rgba(18, 53, 91, 0.3);
  }
}

/* Conector entre los 4 pasos de "experiencia" (solo desktop) */
.card--flow::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  right: -1.15rem;
  width: 0.7rem;
  height: 1px;
  background: rgba(18, 53, 91, 0.2);
  display: none;
}
@media (min-width: 1024px) {
  .card--flow::after { display: block; }
  .card--flow:last-child::after { display: none; }
}

/* Chips de nichos */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(18, 53, 91, 0.1);
  background: var(--cream);
  padding: 0.6rem 1.05rem;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition:
    transform 180ms var(--ease-out-soft),
    border-color 180ms ease,
    background-color 180ms ease;
}
@media (hover: hover) {
  .chip:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 162, 39, 0.5);
    background: #fff;
  }
}

/* ---------------------------------------------------------------------
   Tarjetas de paquete (sección "Elige la opción que necesita tu negocio")
   Reutilizan .card: mismo borde, mismo radio, misma sombra que el resto.
   El paquete recomendado destaca sólo con badge, filete dorado y un borde
   un poco más marcado — nunca empujando de más ni apagando a los otros.
   --------------------------------------------------------------------- */

.paquete--destacado {
  border-color: rgba(18, 53, 91, 0.22);
  box-shadow:
    0 2px 6px rgba(18, 53, 91, 0.06),
    0 26px 50px -24px rgba(18, 53, 91, 0.32);
}

.paquete-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.4rem 0.9rem;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Sin nowrap: en pantallas de 320px "Para proyectos más grandes" debe
     poder romper en dos líneas antes que salirse de la tarjeta. */
}
/* Neutro: el paquete de entrada no se ve débil, se ve sobrio */
.paquete-badge--neutro {
  background: var(--mist);
  color: var(--ink-muted);
}
/* Recomendado */
.paquete-badge--destacado {
  background: var(--brand);
  color: #fff;
}
/* Premium: el proyecto a la medida se siente serio, no "no sabemos cuánto" */
.paquete-badge--premium {
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: #7A600F;
}

.paquete-precio {
  font-size: 1.95rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand);
}
/* "Cotización personalizada" es texto, no cifra: baja de tamaño para que
   las tres tarjetas sigan leyéndose como comparables. */
.paquete-precio--texto {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.paquete-nota {
  border-radius: 0.85rem;
  background: var(--mist);
  padding: 0.95rem 1.05rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* En celular "$16,990 MXN + IVA" tiene que caber en una línea dentro de
   la tarjeta (≈264px útiles a 360px de viewport) sin dejar de ser lo más
   visible del bloque. */
@media (max-width: 480px) {
  .paquete-precio { font-size: 1.65rem; }
  .paquete-precio--texto { font-size: 1.2rem; }
}

/* =====================================================================
   3. HEADER STICKY + MENÚ MÓVIL
   ===================================================================== */

.site-header {
  transition:
    background-color 300ms ease,
    box-shadow 300ms ease,
    border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background-color: rgba(250, 250, 247, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(18, 53, 91, 0.08);
  box-shadow: 0 8px 28px -22px rgba(18, 53, 91, 0.55);
}
/* Sin JS el header también debe leerse bien */
html:not(.js) .site-header {
  background-color: rgba(250, 250, 247, 0.94);
  border-bottom-color: rgba(18, 53, 91, 0.08);
}

/* Subrayado animado de los links del nav */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out-soft);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Menú móvil: cerrado por defecto cuando hay JS */
.menu-movil {
  display: none;
}
.js .menu-movil.is-open {
  display: block;
}
/* Sin JS el menú queda siempre desplegado (nada queda inaccesible) */
html:not(.js) .menu-movil {
  display: block;
}
html:not(.js) #menu-btn {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .menu-movil.is-open > div {
    animation: pl-menu-in 260ms var(--ease-out-soft) both;
  }
}
@keyframes pl-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/*
  Blindaje de orden de cascada: el Play CDN inyecta su <style> en tiempo de
  ejecución, así que no damos por hecho quién gana entre `lg:hidden` y estas
  reglas. En desktop el menú móvil nunca debe verse.
*/
@media (min-width: 1024px) {
  .menu-movil,
  .js .menu-movil.is-open,
  html:not(.js) .menu-movil {
    display: none !important;
  }
}

#menu-btn .menu-icon-close { display: none; }
#menu-btn[aria-expanded="true"] .menu-icon-open { display: none; }
#menu-btn[aria-expanded="true"] .menu-icon-close { display: block; }

/* =====================================================================
   4. HERO
   ===================================================================== */

.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(52% 60% at 22% 30%, rgba(18, 53, 91, 0.09), transparent 68%),
    radial-gradient(40% 48% at 88% 12%, rgba(201, 162, 39, 0.09), transparent 70%);
}

.cta-glow {
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 90%;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255, 255, 255, 0.1), transparent 70%);
}

/*
  Cascada del hero: se resuelve con CSS (no con JS) para que el contenido
  no dependa del JavaScript y no se retrase el LCP.
  El H1 solo se desplaza — nunca se oculta con opacity — para que pinte de inmediato.
*/
@media (prefers-reduced-motion: no-preference) {
  .hero-title {
    animation: pl-rise-only 620ms var(--ease-out-soft) both;
  }
  .hero-item {
    animation: pl-rise 560ms var(--ease-out-soft) both;
  }
  .hero-item--1 { animation-delay: 0ms; }
  .hero-item--2 { animation-delay: 120ms; }
  .hero-item--3 { animation-delay: 180ms; }
  .hero-item--4 { animation-delay: 240ms; }
  .hero-item--5 { animation-delay: 300ms; }
  .hero-item--6 { animation-delay: 360ms; }
  .hero-item--7 { animation-delay: 180ms; }

  .hero-mockup {
    animation: pl-float 7s ease-in-out 1.2s infinite;
  }
}

@keyframes pl-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pl-rise-only {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
@keyframes pl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* El parallax escribe en --pl-parallax; se combina con el float del contenedor */
.hero-mockup > .mk,
.mk-stage > .mk {
  transform: translate3d(0, var(--pl-parallax, 0px), 0);
}

/* =====================================================================
   5. SISTEMA DE REVEAL AL SCROLL
   Regla clave: los estados ocultos SOLO existen si hay JS (clase .js).
   Sin JS, o si el init falla, todo se ve.
   ===================================================================== */

.js .reveal,
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
}
.js .reveal--left  { transform: translate3d(-14px, 16px, 0); }
.js .reveal--right { transform: translate3d(14px, 16px, 0); }

/* Fallback sin la librería Motion: transición por clase + retardos escalonados */
.js .reveal.is-in,
.js [data-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur) var(--ease-out-soft),
    transform var(--dur) var(--ease-out-soft);
}
.js [data-stagger].is-in > *:nth-child(1)  { transition-delay: 0ms; }
.js [data-stagger].is-in > *:nth-child(2)  { transition-delay: 60ms; }
.js [data-stagger].is-in > *:nth-child(3)  { transition-delay: 120ms; }
.js [data-stagger].is-in > *:nth-child(4)  { transition-delay: 180ms; }
.js [data-stagger].is-in > *:nth-child(5)  { transition-delay: 240ms; }
.js [data-stagger].is-in > *:nth-child(6)  { transition-delay: 300ms; }
.js [data-stagger].is-in > *:nth-child(7)  { transition-delay: 340ms; }
.js [data-stagger].is-in > *:nth-child(8)  { transition-delay: 380ms; }
.js [data-stagger].is-in > *:nth-child(9)  { transition-delay: 420ms; }
.js [data-stagger].is-in > *:nth-child(10) { transition-delay: 450ms; }
.js [data-stagger].is-in > *:nth-child(11) { transition-delay: 480ms; }
.js [data-stagger].is-in > *:nth-child(n + 12) { transition-delay: 510ms; }

/* =====================================================================
   6. FAQ (acordeón con altura animada 0fr → 1fr)
   ===================================================================== */

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ease-out-soft);
}
.faq-panel-inner {
  overflow: hidden;
  min-height: 0;
}
/* El botón va dentro de un <h3>, así que el panel no es su hermano
   inmediato: el estado abierto se marca con una clase en .faq-item. */
.faq-item.is-open > .faq-panel {
  grid-template-rows: 1fr;
}
/* Sin JS las respuestas quedan abiertas: el contenido nunca se pierde */
html:not(.js) .faq-panel {
  grid-template-rows: 1fr;
}

.faq-icon {
  transition:
    transform 300ms var(--ease-out-soft),
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}
.faq-trigger:hover .faq-icon {
  border-color: rgba(18, 53, 91, 0.35);
}
.faq-trigger[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* =====================================================================
   7. BOTÓN FLOTANTE DE WHATSAPP (móvil)
   ===================================================================== */

.fab-wa {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  color: #06331A;
  box-shadow: 0 6px 16px rgba(11, 92, 45, 0.28), 0 18px 36px -14px rgba(37, 211, 102, 0.7);
  transition:
    opacity 320ms var(--ease-out-soft),
    transform 320ms var(--ease-out-soft);
}
/* Con JS aparece con entrada suave tras el primer scroll */
.js .fab-wa {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
}
.js .fab-wa.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.fab-wa:active {
  transform: scale(0.94);
}
/* El botón flotante es exclusivo de móvil/tablet (mismo blindaje de cascada) */
@media (min-width: 1024px) {
  .fab-wa,
  .js .fab-wa.is-in {
    display: none !important;
  }
}
@supports (padding: max(0px)) {
  .fab-wa {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* =====================================================================
   8. MOCKUPS BOTANIKO — laptop + celular, 100% HTML/CSS
   Proporciones fijas con aspect-ratio para dejar el CLS en ~0.
   ===================================================================== */

.mk {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 560 / 400;
}

/* --- Laptop --- */
.mk-laptop {
  position: absolute;
  left: 0;
  top: 0;
  width: 88%;
}
.mk-lid {
  border-radius: 14px;
  padding: 9px 9px 11px;
  background: linear-gradient(160deg, #223B57 0%, #16283C 100%);
  box-shadow:
    0 2px 4px rgba(10, 31, 54, 0.16),
    0 26px 50px -26px rgba(10, 31, 54, 0.55);
}
.mk-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.mk-foot {
  width: 116%;
  margin-left: -8%;
  height: 10px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #D8DEE6 0%, #AFBAC6 100%);
  box-shadow: 0 10px 18px -12px rgba(10, 31, 54, 0.5);
}
.mk-foot::after {
  content: "";
  display: block;
  width: 16%;
  height: 3px;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
  background: rgba(10, 31, 54, 0.18);
}

/* --- Contenido del "sitio" --- */
.mk-site {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FCFDFB;
  font-size: 0;
}

.mk-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 9.5%;
  background: #EDF1EC;
  border-bottom: 1px solid rgba(20, 60, 40, 0.07);
}
.mk-dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #C6CFC7;
  flex: none;
}
.mk-url {
  margin-left: 6px;
  flex: 1;
  height: 58%;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(20, 60, 40, 0.08);
  font-size: 5px;
  line-height: 2;
  color: #7C8B7F;
  padding-left: 6px;
  letter-spacing: 0.02em;
}

.mk-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 10%;
  flex: none;
  border-bottom: 1px solid rgba(20, 60, 40, 0.06);
}
.mk-logo {
  width: 26px;
  height: 5px;
  border-radius: 9999px;
  background: #2E6B4F;
  flex: none;
}
.mk-link {
  width: 14px;
  height: 3px;
  border-radius: 9999px;
  background: #CBD6CD;
  flex: none;
}
.mk-link:nth-of-type(3) { width: 11px; }
.mk-cta {
  margin-left: auto;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: #25D366;
  flex: none;
}

.mk-hero {
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: none;
  background:
    radial-gradient(80% 120% at 90% 0%, rgba(46, 107, 79, 0.13), transparent 65%),
    linear-gradient(180deg, #F3F7F2 0%, #FCFDFB 100%);
  border-bottom: 1px solid rgba(20, 60, 40, 0.06);
}
.mk-h1 {
  display: block;
  width: 62%;
  height: 7px;
  border-radius: 3px;
  background: #24513C;
}
.mk-h1--short { width: 40%; }
.mk-p {
  display: block;
  width: 72%;
  height: 3.5px;
  border-radius: 3px;
  background: #CBD6CD;
  margin-top: 2px;
}
.mk-p--short { width: 54%; }
.mk-btn {
  display: block;
  width: 46px;
  height: 11px;
  border-radius: 5px;
  background: #25D366;
  margin-top: 5px;
  box-shadow: 0 3px 8px -3px rgba(37, 211, 102, 0.8);
}

.mk-cards {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  flex: none;
}
.mk-card {
  flex: 1;
  height: 22px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid rgba(20, 60, 40, 0.09);
  box-shadow: 0 4px 10px -8px rgba(20, 60, 40, 0.5);
}

.mk-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 0 10px 10px;
  flex: 1;
}
.mk-tile {
  border-radius: 5px;
  min-height: 16px;
}
.mk-tile--a { background: linear-gradient(150deg, #3F8A63, #2A5F45); }
.mk-tile--b { background: linear-gradient(150deg, #8FBF7E, #4E8B5C); }
.mk-tile--c { background: linear-gradient(150deg, #D9E4CF, #A9C4A2); }
.mk-tile--d { background: linear-gradient(150deg, #2E6B4F, #17402E); }

/* --- Celular --- */
.mk-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 21%;
  aspect-ratio: 9 / 19;
  border-radius: 14px;
  padding: 4px;
  background: linear-gradient(160deg, #26405C 0%, #12283D 100%);
  box-shadow:
    0 2px 4px rgba(10, 31, 54, 0.2),
    0 22px 40px -18px rgba(10, 31, 54, 0.6);
}
.mk-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 2;
}
.mk-phone-screen {
  height: 100%;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}
.mk-nav--mobile {
  height: 8%;
  padding: 0 6px;
  gap: 4px;
}
.mk-nav--mobile .mk-logo { width: 20px; height: 4px; }
.mk-burger {
  margin-left: auto;
  width: 9px;
  height: 6px;
  border-top: 1.5px solid #B9C6BB;
  border-bottom: 1.5px solid #B9C6BB;
  flex: none;
}
.mk-hero--mobile {
  padding: 8px 6px;
  gap: 2px;
}
.mk-hero--mobile .mk-h1 { width: 78%; height: 5px; }
.mk-hero--mobile .mk-h1--short { width: 52%; }
.mk-hero--mobile .mk-p { width: 88%; height: 3px; }
.mk-btn--wa {
  width: 100%;
  height: 9px;
  margin-top: 4px;
}
.mk-gallery--mobile {
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 6px;
  flex: none;
}
.mk-gallery--mobile .mk-tile { min-height: 20px; }
.mk-cards--mobile {
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 6px;
  flex: 1;
}
.mk-cards--mobile .mk-card { height: 14px; }

/* Botón de WhatsApp flotante dentro del celular */
.mk-wa {
  position: absolute;
  right: 8%;
  bottom: 6%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: #25D366;
  box-shadow: 0 3px 8px -2px rgba(11, 92, 45, 0.6);
  z-index: 3;
}

/* Variante sobre el card azul oscuro (sección "Ejemplo real") */
.mk-stage {
  position: relative;
}
.mk--dark .mk-lid {
  background: linear-gradient(160deg, #34506E 0%, #1B3149 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 30px 60px -28px rgba(0, 0, 0, 0.85);
}
.mk--dark .mk-foot {
  background: linear-gradient(180deg, #C9D3DE 0%, #93A2B3 100%);
}
.mk--dark .mk-phone {
  background: linear-gradient(160deg, #3A5878 0%, #1B3149 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 26px 46px -20px rgba(0, 0, 0, 0.8);
}

/* En pantallas chicas el mockup se ajusta sin romper proporciones */
@media (max-width: 480px) {
  .mk { max-width: 420px; }
  .mk-url { font-size: 4px; }
  .mk-h1 { height: 6px; }
}

/* =====================================================================
   9. PREFERS-REDUCED-MOTION
   Si el usuario pide menos movimiento: todo estático de inmediato.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js [data-stagger] > *,
  .js .reveal--left,
  .js .reveal--right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .fab-wa {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .hero-mockup,
  .hero-item,
  .hero-title {
    animation: none !important;
  }
  .hero-mockup > .mk,
  .mk-stage > .mk {
    transform: none !important;
  }
  .btn:hover,
  .card:hover,
  .chip:hover {
    transform: none;
  }
  .faq-panel {
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   13. COMPACTACIÓN MÓVIL  (< 768px, breakpoint md de Tailwind)
   Carruseles con scroll-snap nativo, colapsables y ocultamientos.
   Nada de esto aplica en md+: el escritorio queda idéntico.

   Todos los ocultamientos están condicionados a html.js. Si main.js no
   corre, el failsafe del <head> quita la clase .js a los 2.5s y todo el
   contenido vuelve a mostrarse: nunca queda nada inaccesible.
   ===================================================================== */

/* Barra de scroll oculta (el carrusel se opera con swipe o con los dots) */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Un poco de aire lateral para que la tarjeta activa quede centrada
   y se asome la siguiente ("peek") sin pegarse al borde. */
@media (max-width: 767.98px) {
  .carrusel {
    scroll-padding-inline: 1.25rem;
    padding-inline: 1.25rem;
    margin-inline: -1.25rem;
  }
  /* En carrusel las tarjetas se estiran a la misma altura */
  .carrusel > * {
    height: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Indicadores (dots)                                                   */
/* ------------------------------------------------------------------ */
.carrusel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
/* Sin JS no se sincronizan: mejor no mostrarlos (el swipe sigue vivo) */
html:not(.js) .carrusel-dots {
  display: none;
}

.carrusel-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(18, 53, 91, 0.22);
  transition: width 220ms var(--ease-out-soft), background-color 220ms ease;
}
/* Área táctil de 44px sin agrandar el punto visible */
.carrusel-dot::before {
  content: "";
  position: absolute;
  inset: -1.125rem -0.5rem;
}
.carrusel-dot.is-activo {
  width: 1.5rem;
  background: var(--brand);
}

/* ------------------------------------------------------------------ */
/* FAQ: en móvil sólo las primeras 6 hasta pulsar "Ver todas"           */
/* ------------------------------------------------------------------ */
/* El corte de la FAQ aplica en todos los anchos: 14 preguntas abiertas
   alargaban la página también en escritorio. */
html.js .faq-extra {
  display: none;
}
html.js #faq-lista.mostrar-todo .faq-extra {
  display: block;
}

/* ------------------------------------------------------------------ */
/* "Se cotiza aparte": colapsado en móvil                               */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  html.js .no-incluye-lista {
    display: none;
  }
  html.js .no-incluye-lista.is-open {
    display: grid;
  }
}
.no-incluye-chevron {
  display: inline-flex;
  transition: transform 260ms var(--ease-out-soft);
}
[aria-expanded="true"] .no-incluye-chevron {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------ */
/* Menos movimiento                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .carrusel {
    scroll-behavior: auto;
  }
  .carrusel-dot,
  .no-incluye-chevron {
    transition: none;
  }
}

/* =====================================================================
   14. ORDEN DE SECCIONES  (mobile-first, sin mover nada del DOM)
   La prueba visual y el precio suben inmediatamente después del hero.
   El DOM mantiene un orden lógico para lectores de pantalla sin JS;
   el orden visual se resuelve con flex-order.

   Móvil:     hero → Botaniko → paquetes → CTA → incluye → proceso →
              antes/después → no incluye → FAQ → CTA final
   Escritorio: igual, pero antes/después va antes del proceso y se
              muestran además las secciones de apoyo.
   ===================================================================== */
main#contenido {
  display: flex;
  flex-direction: column;
}

#inicio      { order: 1; }
#ejemplo     { order: 2; }
#precio      { order: 3; }
#cta-medio   { order: 4; }
#incluye     { order: 5; }
#proceso     { order: 6; }
#comparacion { order: 7; }
#para-quien  { order: 8; }
#problema    { order: 9; }
#solucion    { order: 10; }
#experiencia { order: 11; }
#confianza   { order: 12; }
#no-incluye  { order: 13; }
#preguntas   { order: 14; }
#empezar     { order: 15; }

/* En escritorio, antes/después precede al proceso (así lo pidió el brief) */
@media (min-width: 768px) {
  #comparacion { order: 6; }
  #proceso     { order: 7; }
}

/* ------------------------------------------------------------------ */
/* Barra fija de WhatsApp en móvil                                      */
/* Sustituye al botón flotante: mismo destino, más visible y con        */
/* espacio reservado al final del body para no tapar el pie.            */
/* ------------------------------------------------------------------ */
.barra-wa {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.6875rem 1rem calc(0.6875rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(18, 53, 91, 0.1);
  box-shadow: 0 -8px 28px -18px rgba(18, 53, 91, 0.5);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-out-soft);
}
.js .barra-wa.is-in,
html:not(.js) .barra-wa {
  transform: translateY(0);
}
.barra-wa-texto {
  min-width: 0;
  line-height: 1.25;
}
.barra-wa-titulo {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
}
.barra-wa-sub {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.barra-wa .btn {
  flex: none;
  height: 44px;
  padding-inline: 1.15rem;
}
@media (min-width: 1024px) {
  .barra-wa { display: none !important; }
}
/* El contenido no debe quedar debajo de la barra */
@media (max-width: 1023.98px) {
  body { padding-bottom: 4.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-wa { transition: none; }
}

/* =====================================================================
   15. "VER DETALLES" EN LAS TARJETAS DE PAQUETE
   Misma técnica que el acordeón del FAQ: grid-template-rows 0fr → 1fr,
   animable y sin alturas fijas. El estado vive en el .paquete.
   ===================================================================== */
.detalle-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out-soft);
}
.detalle-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.paquete.detalle-abierto .detalle-panel {
  grid-template-rows: 1fr;
}
/* Sin JS el detalle queda desplegado: la información nunca se pierde */
html:not(.js) .detalle-panel {
  grid-template-rows: 1fr;
}
html:not(.js) .detalle-toggle {
  display: none;
}
.detalle-toggle {
  border: 1px solid rgba(18, 53, 91, 0.12);
  background: var(--cream);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.detalle-toggle:hover {
  background: #fff;
  border-color: rgba(18, 53, 91, 0.24);
}
.detalle-chevron {
  display: inline-flex;
  transition: transform 260ms var(--ease-out-soft);
}
[aria-expanded="true"] .detalle-chevron {
  transform: rotate(180deg);
}

/* =====================================================================
   16. PROCESO EN CUATRO PASOS
   Móvil: filas compactas con línea de tiempo. md+: tarjetas en grid.
   ===================================================================== */
@media (max-width: 767.98px) {
  .paso-lista {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .paso-fila {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.875rem;
    padding-bottom: 1.375rem;
  }
  .paso-fila:last-child {
    padding-bottom: 0;
  }
  /* Línea que conecta los pasos */
  .paso-fila:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 2.25rem;
    bottom: 0.375rem;
    width: 1px;
    background: rgba(18, 53, 91, 0.14);
  }
  .paso-num {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
  }
  .paso-cuerpo {
    padding-top: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detalle-panel,
  .detalle-chevron {
    transition: none;
  }
}

/* =====================================================================
   17. ALINEACIÓN DE LAS TARJETAS DE PAQUETE EN ESCRITORIO
   El precio "$16,990 MXN + IVA" se partía en dos líneas y empujaba su
   CTA hacia abajo: las tres tarjetas quedaban desalineadas y el bloque
   se leía descuidado. Se reserva alto para badge, título, precio y
   descripción para que los tres botones queden a la misma altura.
   ===================================================================== */
@media (min-width: 1024px) {
  .paquete-precio {
    font-size: 1.72rem;
    min-height: 2.05rem;      /* una sola línea en las tres tarjetas */
    white-space: nowrap;
  }
  .paquete-precio--texto {
    font-size: 1.3rem;
    white-space: normal;
  }
  /* Badge, título y descripción con alto reservado: el CTA cae siempre
     en la misma coordenada, que es lo que hace que se comparen bien.
     Nada de margin-top:auto aquí: hay contenido despues del CTA y el
     reparto de espacio libre lo desalineaba. */
  .paquete-badge { min-height: 1.75rem; }
  .paquete-desc  { min-height: 4.5rem; }
}

/* Antes / Después más compacto en móvil */
@media (max-width: 767.98px) {
  .comparativa-col { padding: 1.25rem 1.125rem; }
  .comparativa-col li { font-size: 14.5px; }
}

/* =====================================================================
   18. ALINEACIÓN DE LAS TARJETAS EN EL CARRUSEL MÓVIL
   Al deslizar entre tarjetas, el CTA saltaba hasta 80px de una a otra
   (título de "Tienda en Línea" en 2 líneas, su precio en 2, y el badge
   de "Proyecto Personalizado" en 2). Se fuerza una línea en badge y
   precio, y se reserva el alto de título y descripción, para que el
   botón caiga siempre en la misma coordenada y el deslizamiento se
   sienta continuo.
   ===================================================================== */
@media (max-width: 767.98px) {
  .paquete-badge {
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    /* Alto fijo: la variante "premium" lleva borde y medía 2px más,
       lo justo para descuadrar el botón de la tercera tarjeta. */
    min-height: 1.875rem;
    align-items: center;
  }

  #precio .paquete h3 {
    min-height: 3.25rem;          /* 2 líneas: el título más largo */
  }

  .paquete-precio {
    font-size: 1.6rem;
    white-space: nowrap;          /* "$16,990 MXN + IVA" en una línea */
    min-height: 2rem;
  }
  .paquete-precio--texto {
    font-size: 1.2rem;
    white-space: nowrap;
  }

  .paquete-desc {
    min-height: 4.6rem;           /* 3 líneas: la descripción más larga */
  }
}