/* css/marketing.css — sitio de ventas de Aluna (home.html + carpeta marketing/).
   Tokens de marca DUPLICADOS A PROPÓSITO de css/app.css (nunca se importa app.css completo aquí —
   son >5000 líneas pensadas para la app autenticada, cargarlas en una página pública de marketing
   sería un lastre de performance real). Si cambia la paleta/tipografía de marca en css/app.css,
   actualizar también aquí — mismos valores exactos, documentado para que no se desincronicen.
   Oscuro SIEMPRE (Chromatic Density) — igual que home.html hoy, nunca hay toggle de tema aquí. */
:root{
  --bg:#09090B; --bg-surface:#121212; --bg-raised:#1a1a1c; --bg-border:#2a2a2e;
  --text:#E0E0E0; --text-2:#c4c4c4; --text-muted:#b0b0b0;
  --brand-primary:#C7F000; --brand-secondary:#FF8A5B;
  --brand-extra1:#A78BFA; --brand-extra2:#5EEAD4;
  --brand-gradient:linear-gradient(90deg,#C7F000,#FF8A5B);
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --container:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-weight:800; line-height:1.15; text-wrap:balance; margin:0 0 .5em; }
h1{ font-size:clamp(30px,5.5vw,52px); }
h2{ font-size:clamp(24px,4vw,36px); }
h3{ font-size:clamp(18px,2.6vw,22px); }
p{ margin:0 0 1em; color:var(--text-2); }
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--brand-primary); margin-bottom:10px;
}

/* ── Layout ── */
.mkt-container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
.mkt-section{ padding:56px 0; }
@media(min-width:880px){ .mkt-section{ padding:88px 0; } }
.mkt-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media(min-width:720px){ .mkt-grid.cols-2{ grid-template-columns:1fr 1fr; } }
@media(min-width:880px){ .mkt-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .mkt-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }

/* ── Botones / CTA ── */
.mkt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:700; font-size:15px; text-decoration:none;
  border-radius:var(--radius-sm); padding:14px 22px; min-height:48px; cursor:pointer;
  border:1.5px solid transparent; transition:transform .12s ease, opacity .12s ease;
}
.mkt-btn:active{ transform:scale(.97); }
.mkt-btn.primary{ background:var(--brand-gradient); color:#09090B; }
.mkt-btn.secondary{ background:transparent; border-color:var(--bg-border); color:var(--text); }
.mkt-btn.block{ width:100%; }

/* Barra de CTA sticky en móvil (decisión confirmada) — oculta ≥880px, el header ya tiene su CTA. */
.mkt-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--bg-border);
}
@media(min-width:880px){ .mkt-sticky-cta{ display:none; } }

/* ── Tarjetas ── */
.mkt-card{
  background:var(--bg-surface); border:1px solid var(--bg-border); border-radius:var(--radius-md);
  padding:24px;
}

/* ── Marcos de dispositivo (capturas reales, CSS puro, sin PNG de bisel) ── */
.device-frame{ position:relative; margin:0 auto; }
.device-frame.phone{
  max-width:300px; border:10px solid #1a1a1c; border-radius:40px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px var(--bg-border);
  overflow:hidden; background:#000;
}
.device-frame.phone::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:38%; height:22px; background:#1a1a1c; border-radius:0 0 14px 14px; z-index:2;
}
.device-frame.browser{
  border-radius:var(--radius-md); overflow:hidden; background:var(--bg-raised);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.6), 0 0 0 1px var(--bg-border);
}
.device-frame.browser::before{
  content:''; display:block; height:34px; background:var(--bg-raised);
  border-bottom:1px solid var(--bg-border);
  background-image:radial-gradient(circle,#ff5f56 5px,transparent 5.5px),
                    radial-gradient(circle,#ffbd2e 5px,transparent 5.5px),
                    radial-gradient(circle,#27c93f 5px,transparent 5.5px);
  background-repeat:no-repeat;
  background-position:14px center,32px center,50px center;
}
.device-frame img,.device-frame video{ display:block; width:100%; }

/* ── Carrusel de galería — scroll nativo con snap, sin JS/librería (mismo patrón de gesto que
   ya aprobó el producto para Correo, docs/referencia/STYLEGUIDE.md §10) ── */
.mkt-gallery{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:4px 20px 16px; margin:0 -20px;
  scrollbar-width:none;
}
.mkt-gallery::-webkit-scrollbar{ display:none; }
.mkt-gallery > *{ flex:0 0 82%; scroll-snap-align:center; }
@media(min-width:720px){ .mkt-gallery > *{ flex-basis:44%; } }
@media(min-width:1100px){ .mkt-gallery{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; padding:0; margin:0; } }

/* ── FAQ / acordeón (usa <details> nativo, cero JS) ── */
.mkt-faq details{ border-bottom:1px solid var(--bg-border); padding:16px 0; }
.mkt-faq summary{ cursor:pointer; font-weight:700; font-size:15px; list-style:none; }
.mkt-faq summary::-webkit-details-marker{ display:none; }
.mkt-faq summary::after{ content:'+'; float:right; color:var(--brand-primary); }
.mkt-faq details[open] summary::after{ content:'−'; }
.mkt-faq p{ margin-top:10px; }

/* ── Caso ilustrativo (nunca "testimonio real" sin etiquetar, ver decisión de la sesión) ── */
.mkt-illustrative{ position:relative; }
.mkt-illustrative .tag{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); border:1px solid var(--bg-border);
  border-radius:999px; padding:3px 10px; margin-bottom:10px;
}

/* ── Touch targets ── */
button,a.mkt-btn{ touch-action:manipulation; }
*{ -webkit-tap-highlight-color:transparent; }
@media(prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }