/* StefaniAds — sistema de diseño (paleta y tipografía del Manual de Marca v1.0) */
:root{
  --brand-primary:#E5426B;   /* Magenta coral — color principal, CTAs, energía */
  --brand-accent:#6C4CF0;    /* Violeta — acento secundario, guiño tecnológico */
  --brand-dark:#211A2B;      /* Tinta ciruela — textos, footer, seriedad */
  --brand-cream:#FBF7F1;     /* Crema — fondo principal, aire */
  --brand-lila:#EFE9FB;      /* Lila — fondos suaves de tarjetas */
  --brand-arena:#ECE3D5;     /* Arena — fondos suaves alternos */
  --brand-gray:#4B5563;      /* texto de párrafo */
  --brand-whatsapp:#25D366;
  --grad:linear-gradient(135deg,#E5426B 0%,#6C4CF0 100%);
}
*{box-sizing:border-box}
/* Texto claro sobre secciones oscuras — definido aquí para garantizar que se
   aplique de forma consistente (evita texto oscuro invisible sobre fondos oscuros). */
.text-white{color:#fff}
.text-white\/90{color:rgba(255,255,255,.90)}
.text-white\/85{color:rgba(255,255,255,.85)}
.text-white\/80{color:rgba(255,255,255,.80)}
.text-white\/70{color:rgba(255,255,255,.70)}
.text-white\/60{color:rgba(255,255,255,.60)}
.text-white\/50{color:rgba(255,255,255,.50)}
html{scroll-behavior:smooth}
body{color:var(--brand-dark);background:var(--brand-cream);font-family:'Poppins',system-ui,sans-serif}
/* Los enlaces heredan el color de su contenedor (oscuro sobre claro, claro sobre oscuro);
   las clases explícitas de color/underline lo sobrescriben cuando hace falta. */
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;letter-spacing:-.01em}
.font-serif-brand{font-family:'Lora',Georgia,serif}

/* Botones */
.btn-primary{background:var(--brand-primary);color:#fff;font-weight:700;border-radius:9999px;
  padding:.9rem 1.8rem;display:inline-flex;align-items:center;gap:.5rem;transition:.15s;text-align:center}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 24px rgba(229,66,107,.28)}
.btn-accent{background:var(--brand-accent);color:#fff;font-weight:700;border-radius:9999px;
  padding:.9rem 1.8rem;display:inline-flex;align-items:center;gap:.5rem;transition:.15s}
.btn-accent:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-outline{border:2px solid currentColor;font-weight:700;border-radius:9999px;
  padding:.85rem 1.7rem;display:inline-flex;align-items:center;gap:.5rem;transition:.15s}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--brand-dark);color:#fff;font-weight:700;border-radius:9999px;
  padding:.9rem 1.8rem;display:inline-flex;align-items:center;gap:.5rem;transition:.15s}
.btn-dark:hover{transform:translateY(-2px)}

.kicker{color:var(--brand-primary);text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.78rem}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-bg{background:var(--grad)}
.blob{position:absolute;border-radius:45% 55% 60% 40%/50% 45% 55% 50%;background:var(--grad);
  filter:blur(6px);opacity:.28;pointer-events:none}
.card{background:#fff;border:1px solid rgba(33,26,43,.06);border-radius:1.25rem;
  box-shadow:0 2px 14px rgba(33,26,43,.05);transition:.18s}
.card:hover{box-shadow:0 12px 30px rgba(33,26,43,.10);transform:translateY(-3px)}
/* Tarjeta con fondo degradado (CTA): el degradado gana al blanco de .card */
.card.grad-bg{background:var(--grad);border-color:transparent}
.pill{display:inline-block;border:1px solid rgba(108,76,240,.25);color:var(--brand-accent);
  border-radius:9999px;padding:.35rem .9rem;font-size:.8rem;font-weight:600}

/* FAQ */
details.faq{border-bottom:1px solid #ece7e0;padding:1.1rem 0}
details.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
details.faq summary::after{content:"+";color:var(--brand-primary);font-size:1.5rem;line-height:1}
details.faq[open] summary::after{content:"–"}

/* Marquee */
.marquee{overflow:hidden}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:scroll 30s linear infinite;align-items:stretch}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* WhatsApp flotante */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:9999px;background:var(--brand-whatsapp);color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .15s}
.wa-float:hover{transform:scale(1.08)}

/* Nav móvil */
.menu-panel{display:none}
.menu-panel.open{display:block}
@media(min-width:768px){.menu-panel{display:flex !important}}

/* Entrada suave al cargar (nunca oculta contenido: la animación es solo estética
   y el contenido queda visible aunque el JS no corra). */
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.js .reveal{animation:fade-up .6s ease both}
html.js .reveal.in{animation:fade-up .6s ease both}
@media(prefers-reduced-motion:reduce){html.js .reveal{animation:none}.marquee-track{animation:none}}