/* ============================================================
   BASE — fuentes, tokens, reset
   ============================================================ */

  @font-face{font-family:'Sora';font-weight:500;font-display:swap;src:url('../../02_Tipografia/woff2/Sora-500.woff2') format('woff2');}
  @font-face{font-family:'Sora';font-weight:700;font-display:swap;src:url('../../02_Tipografia/woff2/Sora-700.woff2') format('woff2');}
  @font-face{font-family:'Sora';font-weight:800;font-display:swap;src:url('../../02_Tipografia/woff2/Sora-800.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../../02_Tipografia/woff2/Inter-400.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../../02_Tipografia/woff2/Inter-500.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../../02_Tipografia/woff2/Inter-600.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../../02_Tipografia/woff2/Inter-700.woff2') format('woff2');}

  /* ---------- Sistema de color oficial GO — 85% crema / 10% negro / 5% naranja.
     Fondo claro por defecto siempre (regla de marca); el toggle solo ofrece un
     modo oscuro opcional, nunca es el estado inicial. ---------- */
  :root{
    --go-bg:#F7F5F0;
    --go-surface:#FFFFFF;
    --go-black:#141311;
    --go-body:#2C2A26;
    --go-muted:#8A867D;
    --go-line:#DAD7CE;
    --go-orange:#EA5B0C;
    --go-orange-hover:#C94A08;

    /* Tokens de diseño añadidos en el refactor — cada uno reemplaza un valor
       que se repetía literal en varias secciones (ver css/*.css). Ningún valor
       renderizado cambia: los var() resuelven exactamente al mismo literal. */
    --ease-premium: cubic-bezier(.16,1,.3,1);
    --radius-sm: 7px;
    --radius-md: 20px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-full: 999px;
    --go-orange-rgb: 234,91,12;
    --go-black-rgb: 20,19,17;
    --space-card-y: 44px;
    --space-card-x: 36px;
  }
  html[data-theme="dark"]{
    --go-bg:#141311;
    --go-surface:#1D1B18;
    --go-black:#FFFFFF;
    --go-body:#D7D3CB;
    --go-muted:#9C978C;
    --go-line:#33302B;
    --go-orange:#EA5B0C;
    --go-orange-hover:#FF7A33;
  }

  *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
  html,body{background:var(--go-bg);}
  body{font-family:'Inter',sans-serif;color:var(--go-body);transition:background-color .5s ease;overflow-x:hidden;}
  ::selection{background:#EA5B0C;color:#FFFFFF;}

  .go-black{color:var(--go-black);}
  .go-body{color:var(--go-body);}
  .go-muted{color:var(--go-muted);}
  .go-orange{color:var(--go-orange);}
  .go-border{border-color:var(--go-line);}
  .go-surface{background:var(--go-surface);border-color:var(--go-line);}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  }


/* ============================================================
   Botones (usados en nav, hero, precios, contacto)
   ============================================================ */

  /* ---------- Botones ---------- */
  .btn-lift{transition:transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium), background-color .3s ease, border-color .3s ease;}
  .btn-lift:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(var(--go-orange-rgb), .22), 0 8px 20px rgba(0,0,0,.12);}
  .btn-lift:active{transform:translateY(-1px);transition-duration:.12s;}
  .btn-primary{position:relative;color:#fff;background:var(--go-orange);}
  .btn-primary:hover{background:var(--go-orange-hover);}
  .btn-secondary{background:color-mix(in srgb, var(--go-black) 4%, transparent);border:1px solid var(--go-line);}
  .btn-secondary:hover{background:color-mix(in srgb, var(--go-black) 8%, transparent);border-color:color-mix(in srgb, var(--go-black) 30%, transparent);}
  :focus-visible{outline:2px solid #EA5B0C;outline-offset:3px;border-radius:6px;}


/* ============================================================
   Reveal-on-scroll (usado en todas las secciones)
   ============================================================ */

  /* ---------- Reveal on scroll ---------- */
  [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium);}
  [data-reveal].is-revealed{opacity:1;transform:none;}


/* ============================================================
   Tilt 3D wrapper (usado en nosotros y precios)
   ============================================================ */

  /* ---------- Tarjetas con tilt 3D (JS aplica el transform en vivo) ---------- */
  .tilt-wrap{perspective:1000px;}
  .tilt{will-change:transform;}


/* ============================================================
   Precios: contador al tocar (usado en servicios y precios)
   ============================================================ */

  /* ---------- Precios: siempre visibles, tocarlos los hace contar desde 0 ---------- */
  .price-count{cursor:pointer;display:inline-block;padding:6px 4px;margin:-6px -4px;-webkit-tap-highlight-color:transparent;transition:transform .15s ease;}
  .price-count:hover{transform:scale(1.05);}
  .price-count:active{transform:scale(.97);}

/* ============================================================
   Delay utilities — reemplazan los antiguos style="transition-delay:.XXs"
   inline en los elementos [data-reveal] (stagger de entrada por scroll).
   ============================================================ */

  .delay-03s{transition-delay:.03s;}
  .delay-05s{transition-delay:.05s;}
  .delay-07s{transition-delay:.07s;}
  .delay-1s{transition-delay:.1s;}
  .delay-12s{transition-delay:.12s;}
  .delay-15s{transition-delay:.15s;}
  .delay-25s{transition-delay:.25s;}
  .delay-35s{transition-delay:.35s;}

  .section-bg{background:var(--go-bg);}