/* ═══════════════════════════════════════════════════════════
   TULPA STUDIO — Estilos compartidos de landing page
   Paleta oficial: #E331E9 magenta · #00C4FF cian · #5A3C6A violeta
   Tipografía: Montserrat (títulos) + Poppins (cuerpo)
   Importar en GHL: pegar en Custom CSS o en primer bloque HTML
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800&family=Poppins:wght@300;400;500&display=swap');

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ─── Tokens — Paleta oficial Tulpa Studio ───────────────── */
:root {
  --bg:          #0C0614;
  --bg2:         #100A1C;
  --bg3:         #140D22;
  --violeta:     #5A3C6A;   /* Fondo Violeta Principal */
  --card:        rgba(90,60,106,0.15);
  --card-border: rgba(90,60,106,0.28);
  --magenta:     #E331E9;   /* Magenta Neón — TULPA */
  --magenta2:    #C020CC;
  --cyan:        #00C4FF;   /* Cian Eléctrico — STUDIO */
  --cyan2:       #0099CC;
  --azul:        #003B89;   /* Azul Oscuro Prisma */
  --lavanda:     #D8C7FF;   /* Fondo Claro Alternativo */
  --white:       #FFFFFF;
  --offwhite:    rgba(255,255,255,0.90);
  --muted:       rgba(255,255,255,0.55);
  --muted2:      rgba(255,255,255,0.32);
}

/* ─── Base ───────────────────────────────────────────────── */
body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--offwhite);
  line-height: 1.7;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { font-size: 1rem; color: var(--muted); line-height: 1.75; font-family: 'Poppins', sans-serif; font-weight: 400; }
a  { text-decoration: none; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 1.75rem; }
.section    { padding: 100px 0; }

/* ─── Labels & accents ───────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1.2rem;
}
.accent-line {
  display: block;
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  border-radius: 2px;
  margin: 1rem 0 2rem;
}
.text-magenta { color: var(--magenta) !important; }
.text-cyan    { color: var(--cyan) !important; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em;
  padding: 0.9rem 2rem; border-radius: 6px;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: pointer; border: none;
}
.btn:hover { opacity: 0.9; transform: translateY(-2px); }
.btn-magenta {
  background: linear-gradient(135deg, var(--magenta), var(--magenta2));
  color: #fff;
  box-shadow: 0 4px 24px rgba(227,49,233,0.35);
}
.btn-magenta:hover { box-shadow: 0 8px 32px rgba(227,49,233,0.5); }
.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--white);
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.btn-wa:hover { box-shadow: 0 8px 32px rgba(37,211,102,0.45); }

/* ─── Glow blobs ─────────────────────────────────────────── */
.glow {
  position: absolute; border-radius: 50%;
  filter: blur(120px); pointer-events: none;
}
.glow-m { width: 500px; height: 500px; background: #E331E9; opacity: 0.10; top: -100px; right: -100px; }
.glow-c { width: 400px; height: 400px; background: #00C4FF; opacity: 0.08; bottom: 0; left: 5%; }

/* ─── Animations ─────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ─── Responsive global ──────────────────────────────────── */
@media (max-width: 960px) {
  .section { padding: 72px 0; }
}
@media (max-width: 600px) {
  .section { padding: 56px 0; }
}