@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

@layer base {
  :root {
    --void:              #06080C;
    --carbon:            #0C1014;
    --graphite:          #14191F;
    --slate:             #1E252E;
    --steel:             #2A333E;
    --fog:               #4A5560;
    --mist:              #8A95A2;
    --bone:              #C8CFD6;
    --paper:             #E8ECEF;
    --chalk:             #F4F6F8;

    --plasma:            #5FE3D6;
    --plasma-deep:       #1FB5A6;
    --plasma-soft:       rgba(95, 227, 214, 0.14);
    --amber:             #F6B647;
    --crimson:           #E5484D;

    --hairline:          rgba(255, 255, 255, 0.08);
    --hairline-strong:   rgba(255, 255, 255, 0.14);

    --font-sans:         'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-serif:        'Playfair Display', Georgia, serif;
    --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

    --text-display:      5.5rem;
    --text-h1:           3.5rem;
    --text-h2:           2.5rem;
    --text-h3:           1.75rem;
    --text-editorial:    2rem;
    --text-lead:         1.25rem;
    --text-body:         1rem;
    --text-body-s:       0.875rem;
    --text-caption:      0.75rem;
    --text-eyebrow:      0.6875rem;

    --radius-sm:         4px;
    --radius-md:         6px;
    --radius-lg:         8px;
    --radius-xl:         12px;

    --glow-plasma:       0 0 12px rgba(95, 227, 214, 0.4);
    --glow-plasma-sm:    0 0 6px rgba(95, 227, 214, 0.3);

    --color-bg: var(--void);
    --color-text: var(--bone);
  }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: auto;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--void);
    color: var(--bone);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 300;
  }

  h1, h2, h3, h4, h5, h6 { 
    font-weight: 400; 
  }

  p, li, span.text-zinc-400 { font-weight: 300 !important; }
  .font-bold, .font-extrabold, .font-black { font-weight: 500 !important; }

  .text-4xl, .text-\\[34px\\], .lg\\:text-\\[64px\\] { font-size: 64px !important; font-weight: 500 !important; line-height: 1.05 !important; margin-bottom: 20px !important; }
  .text-3xl, .text-\\[28px\\] { font-size: 40px !important; font-weight: 400 !important; line-height: 1.1 !important; margin-bottom: 20px !important; }
  .text-xl, .text-\\[19px\\] { font-size: 24px !important; font-weight: 300 !important; line-height: 1.3 !important; }

  @media (min-width: 768px) { 
    .md\\:text-5xl, .md\\:text-7xl, .md\\:text-6xl { font-size: 80px !important; font-weight: 500 !important; line-height: 1.05 !important; } 
    .md\\:text-5xl.font-bold { font-size: 48px !important; font-weight: 400 !important; } 
  }

  .tiempos-accent { font-family: var(--font-serif) !important; font-style: italic !important; font-weight: 300 !important; letter-spacing: normal !important; text-transform: none !important; margin-bottom: 20px !important; }

  .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; }
  
  .rounded-2xl, .rounded-3xl, .rounded-xl { border-radius: var(--radius-xl) !important; }

  a.rounded-full.bg-plasma, a.rounded-full.bg-white\\/5 {
    border-radius: var(--radius-lg) !important;
  }
  
  a.bg-plasma:hover, button.bg-plasma:hover {
     box-shadow: var(--glow-plasma);
  }
  
  button.rounded-full { border-radius: 9999px !important; }
  nav.rounded-full { border-radius: 9999px !important; }
  nav a.rounded-full { border-radius: 9999px !important; }
  
  .w-1\\.5.h-1\\.5.rounded-full, 
  .w-2.h-2.rounded-full, 
  .w-4.h-4.rounded-full, 
  .w-12.h-12.rounded-full,
  .w-14.h-14.rounded-full,
  .w-16.h-16.rounded-full,
  .absolute.rounded-full { border-radius: 9999px !important; }

  .py-20, .pt-24, .pb-20, .pt-40, .pb-32, .pt-32, .pb-24, .py-16 { padding-top: 120px !important; padding-bottom: 120px !important; }
  @media (min-width: 768px) { 
    .md\\:py-28, .md\\:pt-32, .md\\:pt-48, .md\\:pb-32 { padding-top: 160px !important; padding-bottom: 160px !important; } 
    .md\\:gap-8, .md\\:gap-6 { gap: 48px !important; }
    .md\\:p-8, .md\\:p-6 { padding: 40px !important; }
  }
  .gap-6, .gap-4, .gap-16 { gap: 40px !important; }
  .p-6, .p-5, .p-8 { padding: 32px !important; }
  .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 24px !important; }

  input, textarea, select {
    width: 100%;
    padding: 12px 16px;
    font-size: 17px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background-color: rgba(255,255,255,0.02);
    color: var(--bone);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--plasma);
  }

  a { text-decoration: none !important; }
  a:hover { text-decoration: none !important; }
  .border-white\\/5, .border-white\\/10 { border-color: var(--hairline) !important; }
  svg.w-5, svg.w-6, svg.h-5, svg.h-6 { max-width: 24px !important; max-height: 24px !important; }

  .hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  @keyframes float-particle {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-120px) translateX(20px); opacity: 0; }
  }
  @keyframes pulse-right {
    0% { transform: translateX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(40px); opacity: 0; }
  }
  .pulse-right { animation: pulse-right 2s infinite; }
}