/* PINTA — base.css
   Variables, reset, cursores, tipografia base, botones, header/nav, hero (compartido),
   footer y animaciones reveal. Compartido por las 4 paginas, extraido 1:1 del HTML aprobado. */

  :root{
    --bg-light:#FAF9F6;
    --bg-dark:#1E120B;
    --ink:#1E120B;
    --paper:#FAF9F6;
    --ink-65:rgba(30,18,11,.65);
    --ink-45:rgba(30,18,11,.45);
    --ink-12:rgba(30,18,11,.12);
    --paper-65:rgba(250,249,246,.65);
    --paper-30:rgba(250,249,246,.3);
    --paper-14:rgba(250,249,246,.14);
    --yellow:#F1E801;
    --yellow-hover:#DACE00;
    --display: 'Big Shoulders Display', sans-serif;
    --body: 'Chivo', sans-serif;
    --mono: 'Chivo Mono', monospace;
    --maxw:1220px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}

  html, body {
    cursor: url('/assets/images/cursor-default.png') 4 4, auto;
  }

  html{scroll-behavior:smooth;}
  html{ overflow-x:hidden; }
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--bg-light);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
  .eyebrow{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-65);
  }
  h1,h2,h3{font-family:var(--display); font-weight:900; line-height:.94; letter-spacing:-.01em;}
  h2{font-family:var(--body); font-weight:900; letter-spacing:-.01em;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--body); font-weight:700; font-size:16px;
    padding:16px 28px; border-radius:8px;
    cursor:pointer; border:none; transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .btn-primary{ background:var(--yellow); color:var(--ink); }
  .btn-primary:hover{ background:var(--yellow-hover); transform:translateY(-1px); }
  .btn-ghost{
    background:transparent; color:var(--ink); font-weight:500;
    padding:16px 4px; border-bottom:1px solid var(--ink-12);
    border-radius:0;
  }
  .btn-ghost:hover{ border-color:var(--ink); }
  .btn-ghost.on-dark{ color:var(--paper); border-bottom:1px solid var(--paper-30); }
  .btn-ghost.on-dark:hover{ border-color:var(--paper); }
  .btn-ghost svg{ transition:transform .15s ease; }
  .btn-ghost:hover svg{ transform:translateX(3px); }

  section{ position:relative; }
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} .reveal.d5{transition-delay:.4s;} .reveal.d6{transition-delay:.48s;}

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ===== HEADER ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 40px;
    display:flex; align-items:center; justify-content:space-between;
    transition:padding .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
    background:var(--ink);
    border-bottom:1px solid var(--paper-14);
  }
  header.scrolled{
    padding:14px 40px;
    background:rgba(30,18,11,.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--paper-14);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
  }
  .logo{ font-family:var(--display); font-weight:900; font-size:26px; letter-spacing:-.01em; }
  .logo-mark{ display:flex; align-items:center; }
  .logo-img{ height:30px; width:auto; display:block; }
  .logo-iso{ height:36px; }
  .footer-logo-img{ height:26px; width:auto; display:block; }
  nav{ display:flex; gap:34px; align-items:center; }
  nav a{ font-family:var(--body); font-size:14.5px; font-weight:500; color:var(--paper-65); transition:color .15s ease; }
  nav a:hover{ color:var(--paper); }
  .nav-cta{
    font-family:var(--body); font-weight:700; font-size:14px;
    background:var(--yellow); color:var(--ink);
    padding:11px 20px; border-radius:8px;
    transition:background .15s ease;
  }
  .nav-cta:hover{ background:var(--yellow-hover); }
  .hamburger{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0;
  }
  .hamburger span{ display:block; width:22px; height:2px; background:var(--paper); transition:transform .2s ease, opacity .2s ease; }
  .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-nav{
    display:none; position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px;
    background:var(--ink); z-index:200; flex-direction:column; padding:100px 32px 40px;
    transform:translateX(100%); transition:transform .3s ease; gap:6px;
  }
  .mobile-nav.open{ display:flex; transform:translateX(0); }
  .mobile-nav a{
    font-family:var(--body); font-weight:500; font-size:17px; color:var(--paper);
    padding:14px 0; border-bottom:1px solid var(--paper-14);
  }
  .mobile-nav-cta{
    margin-top:24px; text-align:center; background:var(--yellow); color:var(--ink) !important;
    border-radius:8px; border-bottom:none !important; font-weight:700 !important;
  }
  .nav-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150; }
  .nav-scrim.open{ display:block; }

  /* ===== HERO ===== */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:150px 0 80px;
    position:relative;
  }
  .hero .wrap{ position:relative; z-index:2; }
  .hero-brandline{
    font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-45); margin:0 0 18px; padding:0; text-align:left; text-indent:0;
  }
  .hero-eyebrow{ margin-bottom:26px; max-width:520px; font-size:14px; line-height:1.5; }
  .eyebrow{ max-width:600px; white-space:normal; }
  .hero h1{
    font-size:104px;
    max-width:1000px;
    white-space:nowrap;
    margin-bottom:6px;
    margin-left:-0.06em;
  }
  .hero-sub{
    font-family:var(--body); font-weight:400; font-size:22px; color:var(--ink-65);
    max-width:640px; margin-top:28px; line-height:1.45;
  }
  .hero-ctas{ display:flex; align-items:center; gap:32px; margin-top:48px; }
  .hero-nodes-static{
    position:relative; width:230px; aspect-ratio:290/248; display:block; margin-bottom:18px; margin-left:auto;
  }
  .hero-bee{
    position:absolute; height:auto; opacity:.95;
    transition:filter .35s ease;
  }
  .hero-nodes-static:hover .bee-1{ filter:saturate(1.4) brightness(.85); }
  .hero-nodes-static:hover .bee-2{ filter:grayscale(1) brightness(1.05); }
  .hero-nodes-static:hover .bee-3{ filter:grayscale(.6) saturate(1.1) brightness(.7); }
  .scroll-cue{
    position:absolute; bottom:36px; left:40px;
    display:flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:12px; color:var(--ink-45); letter-spacing:.05em;
  }
  .scroll-cue .line{ width:1px; height:32px; background:var(--ink-12); position:relative; overflow:hidden; }
  .scroll-cue .line::after{
    content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--ink);
    animation:scrolldrip 1.8s ease-in-out infinite;
  }
  @keyframes scrolldrip{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
  .close h2{ font-size:64px; margin-bottom:44px; }
  .footer-col h5{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--paper-45,rgba(250,249,246,.45)); margin-bottom:18px; }
  .footer-col a{ display:block; font-size:14.5px; color:var(--paper-65); padding:6px 0; transition:color .15s ease; }
  .footer-col a:hover{ color:var(--paper); }
  .contact-link{ display:flex !important; align-items:center; gap:10px; }
  .contact-link svg{ color:var(--paper-45,rgba(250,249,246,.45)); flex:0 0 auto; transition:color .15s ease; }
  .contact-link:hover svg{ color:var(--yellow); }
  .social-row{ display:flex; gap:12px; }
  .social-row a{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--paper-14);
    display:flex; align-items:center; justify-content:center; color:var(--paper-65);
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .social-row a:hover{ color:var(--ink); background:var(--yellow); border-color:var(--yellow); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:30px; padding-top:30px; font-family:var(--mono); font-size:12px; color:var(--paper-45,rgba(250,249,246,.45)); }
  .footer-bottom a{ color:var(--paper-45,rgba(250,249,246,.45)); transition:color .15s ease;}
  .footer-bottom a:hover{ color:var(--paper);}