/* ==============================================
   BASE — Variables, reset, tipografía, utilidades compartidas
   ============================================== */

:root {
  --pink: #FF2D87;
  --pink-light: #FF6AAE;
  --pink-pale: #FFF0F7;
  --black: #0D0D0D;
  --dark: #1A1A1A;
  --gray: #F4F4F4;
  --mid: #888;
  --white: #FFFFFF;
  --electric: #00E5FF;
  --yellow: #FFE600;
  --border: rgba(0,0,0,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: var(--white); color: var(--black); font-size: 15px; line-height: 1.6; overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 2px; }

/* Secciones compartidas */
.section { padding: 4rem 2rem; }
.section-dark { background: var(--black); }
.section-gray { background: var(--gray); }
.section-pink { background: var(--pink-pale); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; }
.section-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.3rem; }
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; letter-spacing: 0.03em; color: var(--black); line-height: 1; }
.section-title.light { color: white; }
.section-title span { color: var(--pink); }
.see-all { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); text-decoration: none; border-bottom: 2px solid var(--pink); padding-bottom: 2px; white-space: nowrap; transition: opacity 0.2s; }
.see-all:hover { opacity: 0.7; }

/* Botones compartidos */
.btn-primary { background: var(--pink); color: white; padding: 0.85rem 2rem; border: none; border-radius: 0.4rem; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform 0.2s, box-shadow 0.2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,45,135,0.4); }
.btn-outline { background: transparent; color: white; padding: 0.85rem 2rem; border: 2px solid rgba(255,255,255,0.3); border-radius: 0.4rem; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.btn-outline:hover { border-color: var(--pink); color: var(--pink); }

/* Animación de entrada */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }