@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');

:root {
  --c-bg:         #0a0a0a;
  --c-surface:    #111111;
  --c-card:       #161616;
  --c-card-hover: #1c1c1c;
  --c-border:     #242424;
  --c-border-lit: #333333;
  --c-pink:       #FF1493;
  --c-pink-dark:  #C71585;
  --c-pink-dim:   rgba(255,20,147,0.10);
  --c-pink-glow:  rgba(255,20,147,0.22);
  --c-white:      #FFFFFF;
  --c-muted:      #888888;
  --c-faint:      #444444;
  --font:         'Inter', system-ui, sans-serif;
  --r:            12px;
  --r-lg:         18px;
  --r-full:       9999px;
  --t:            all 0.28s cubic-bezier(0.25,1,0.5,1);
  --t-slow:       all 0.5s cubic-bezier(0.25,1,0.5,1);
  --shadow-pink:  0 0 32px rgba(255,20,147,0.28);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.5);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background-color: var(--c-bg);
  color: var(--c-white);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ── Texturas de fondo globales ──────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-3;
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events:none;
}
body::after {
  content:'';
  position:fixed; inset:0; z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 12% 8%,  rgba(255,20,147,.05) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 92% 30%, rgba(255,20,147,.04) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 50% 95%, rgba(255,20,147,.03) 0%, transparent 60%);
}
.bg-grain {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

img, video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:inherit; font-size:inherit; }
h1,h2,h3,h4,h5,h6 { line-height:1.1; font-weight:800; letter-spacing:-0.025em; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:96px 0; }
.section--sm { padding:64px 0; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--c-pink) 0%, #e0107e 100%);
  color:#fff; padding:14px 32px; border-radius:var(--r-full);
  font-weight:700; font-size:15px; border:none; cursor:pointer;
  transition:var(--t); white-space:nowrap; letter-spacing:0.01em;
  box-shadow: 0 4px 20px rgba(255,20,147,0.3);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 32px rgba(255,20,147,0.5); filter:brightness(1.08); }
.btn-primary:active { transform:translateY(0); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--c-white);
  padding:13px 28px; border-radius:var(--r-full);
  font-weight:600; font-size:15px; cursor:pointer;
  border:1.5px solid var(--c-border-lit); transition:var(--t);
  white-space:nowrap;
}
.btn-ghost:hover { border-color:var(--c-pink); color:var(--c-pink); background:var(--c-pink-dim); }

.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--c-pink);
  background:var(--c-pink-dim); padding:5px 14px;
  border-radius:var(--r-full); border:1px solid rgba(255,20,147,0.2);
  margin-bottom:20px;
}

.divider-pink {
  width:40px; height:3px;
  background: linear-gradient(90deg, var(--c-pink), transparent);
  border-radius:var(--r-full); margin:16px 0;
}

@media (max-width:768px) {
  .section { padding:64px 0; }
  .section--sm { padding:48px 0; }
  .container { padding:0 20px; }
}