/* =========================================================
   VERNE360 - Design tokens + base styles (SHARED)
   Edita aca: cambia para las 4 paginas a la vez.
   ========================================================= */

    /* =========================================================
       VERNE360 — Design Tokens
       Colors · Typography · Spacing · Radius · Shadow · Motion
       ========================================================= */

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

    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-Thin.ttf") format("truetype");
      font-weight: 100; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-ExtraLight.ttf") format("truetype");
      font-weight: 200; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-Light.ttf") format("truetype");
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-Regular.ttf") format("truetype");
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-Medium.ttf") format("truetype");
      font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-SemiBold.ttf") format("truetype");
      font-weight: 600; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-Bold.ttf") format("truetype");
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Sora";
      src: url("../fonts/Sora-ExtraBold.ttf") format("truetype");
      font-weight: 800; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Montserrat";
      src: url("../fonts/Montserrat-Light.ttf") format("truetype");
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Montserrat";
      src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype");
      font-weight: 800; font-style: normal; font-display: swap;
    }

    :root {
      --v-azul-orbital:        #73A6CF;
      --v-blanco-nebulosa:     #F8F8FB;
      --v-gris-lunar:          #D8DCE5;
      --v-azul-profundo:       #426E95;
      --v-celeste-atmosferico: #B8D4EA;
      --v-negro-profundo:      #111827;
      --v-gris-oscuro:         #374151;
      --v-gris-medio:          #6B7280;
      --v-gris-claro:          #E5E7EB;
      --v-blanco-puro:         #FFFFFF;

      --bg-app:        var(--v-blanco-nebulosa);
      --bg-surface:    var(--v-blanco-puro);
      --bg-subtle:     #F1F3F8;
      --bg-muted:      var(--v-gris-claro);
      --bg-inverse:    var(--v-negro-profundo);

      --fg-1:          var(--v-negro-profundo);
      --fg-2:          var(--v-gris-oscuro);
      --fg-3:          var(--v-gris-medio);
      --fg-on-accent:  var(--v-blanco-puro);
      --fg-on-inverse: var(--v-blanco-nebulosa);

      --accent:        var(--v-azul-orbital);
      --accent-strong: var(--v-azul-profundo);
      --accent-soft:   var(--v-celeste-atmosferico);
      --accent-tint:   rgba(115, 166, 207, 0.10);

      --v-coral:            #E07856;
      --v-coral-suave:      #F0A98F;
      --v-coral-fuerte:     #C25A3C;
      --accent-warm:        var(--v-coral);
      --accent-warm-strong: var(--v-coral-fuerte);
      --accent-warm-soft:   var(--v-coral-suave);
      --accent-warm-tint:   rgba(224, 120, 86, 0.12);

      --border-1:      var(--v-gris-lunar);
      --border-2:      var(--v-gris-claro);
      --border-focus:  var(--v-azul-orbital);

      --status-success: #4F9D7A;
      --status-warning: #D49A48;
      --status-danger:  #C46A6A;
      --status-info:    var(--v-azul-orbital);

      --gradient-orbital:  linear-gradient(135deg, #73A6CF 0%, #B8D4EA 100%);
      --gradient-deep:     linear-gradient(135deg, #426E95 0%, #73A6CF 100%);
      --gradient-nebulosa: linear-gradient(180deg, #F8F8FB 0%, #E9EEF6 100%);
      --gradient-glow:     radial-gradient(60% 60% at 30% 20%, rgba(184,212,234,0.55) 0%, rgba(184,212,234,0) 70%);

      --font-display: "Sora", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
      --font-sans:    "Inter", "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
      --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

      --fs-hero-xl: 72px;
      --fs-hero:    56px;
      --fs-h1:      48px;
      --fs-h2:      40px;
      --fs-h3:      32px;
      --fs-h4:      24px;
      --fs-body-lg: 20px;
      --fs-body:    16px;
      --fs-small:   14px;
      --fs-caption: 12px;

      --lh-tight:   1.1;
      --lh-snug:    1.25;
      --lh-normal:  1.5;
      --lh-relaxed: 1.65;

      --tracking-tight:   -0.02em;
      --tracking-normal:  0;
      --tracking-wide:    0.04em;
      --tracking-eyebrow: 0.16em;

      --space-0: 0;
      --space-1: 8px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 32px;
      --space-5: 48px;
      --space-6: 64px;
      --space-7: 96px;
      --space-8: 128px;

      --radius-sm:   8px;
      --radius-md:   14px;
      --radius-lg:   20px;
      --radius-xl:   28px;
      --radius-full: 999px;

      --shadow-soft:   0 4px 20px rgba(17, 24, 39, 0.05);
      --shadow-medium: 0 10px 30px rgba(17, 24, 39, 0.08);
      --shadow-large:  0 24px 60px rgba(17, 24, 39, 0.10);
      --shadow-focus:  0 0 0 4px rgba(115, 166, 207, 0.25);
      --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(17,24,39,0.04);

      --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --ease-orbit:  cubic-bezier(0.34, 1.2, 0.64, 1);

      --dur-hover:   180ms;
      --dur-ui:      250ms;
      --dur-hero:    800ms;
      --dur-orbital: 1200ms;

      --container-narrow: 720px;
      --container-base:   1080px;
      --container-wide:   1280px;
      --container-xl:     1440px;

      --border-thin:   1px;
      --border-base:   1.5px;
      --border-strong: 2px;
    }

    html, body, #root { margin: 0; padding: 0; background: var(--bg-app); }
    body {
      font-family: var(--font-sans);
      color: var(--fg-1);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    *, *::before, *::after { box-sizing: border-box; }
    button { font-family: inherit; }
    ::selection { background: rgba(115,166,207,0.3); }
    html { scroll-behavior: smooth; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-thumb { background: rgba(17,24,39,0.15); border-radius: 999px; }
    ::-webkit-scrollbar-track { background: transparent; }
    :focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 3px; border-radius: 6px; }

    /* Responsive: apila grillas multi-columna y achica gutters en pantallas chicas */
    @media (max-width: 768px) {
      div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      div[style*="grid-template-columns"][style*="gap: 72px"],
      div[style*="grid-template-columns"][style*="gap: 64px"],
      div[style*="grid-template-columns"][style*="gap: 56px"],
      div[style*="grid-template-columns"][style*="gap: 48px"] { gap: 32px !important; }
    }

    @keyframes scrollPulse {
      0%, 100% { transform: scaleX(1); transform-origin: left; opacity: 0.45; }
      50% { transform: scaleX(2); opacity: 1; }
    }