/* ============================================================
   CAMPELSOFT — LA GRAN RUTA · Hoja de estilo global
   "Los piratas no piden permiso para navegar mares nuevos."
   ============================================================ */

/* === FUENTES === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --ink: #06090F;
    --navy: #080C18;
    --gold: #EFB020;
    --gold2: #C8900A;
    --crimson: #7A1515;
    --blue: #3AAEDE;
    --white: #EDE9E3;
}

/* === BASE === */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset por el header fijo */
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--ink);
}

/* Cinzel para títulos editoriales — usar la clase utilitaria .font-serif / font-headline */
.font-serif, .serif-title {
    font-family: 'Cinzel', serif;
}

/* === CURSOR PERSONALIZADO (inyectado por components.js) === */
@media (hover: hover) and (pointer: fine) {
    body { cursor: none; }
    body a, body button, body input, body textarea, body select, body label { cursor: none; }
}
.cs-cursor {
    position: fixed; top: 0; left: 0; width: 12px; height: 12px;
    background: var(--gold); border-radius: 50%;
    pointer-events: none; z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width .3s, height .3s, opacity .3s, background .3s;
    mix-blend-mode: difference;
}
.cs-cursor-ring {
    position: fixed; top: 0; left: 0; width: 36px; height: 36px;
    border: 1px solid rgba(239, 176, 32, 0.4); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width .3s, height .3s;
}
.cs-cursor-glow {
    position: fixed; top: 0; left: 0; width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 176, 32, 0.05) 0%, transparent 70%);
    pointer-events: none; z-index: 9998; opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .3s;
}

/* === LIENZO DE PARTÍCULAS GLOBAL (fondo sutil) === */
#cs-particles {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0.4;
}

/* === MATERIAL SYMBOLS === */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* === GLASS === */
.glass-panel, .glass-effect, .glass-nav {
    background: rgba(6, 9, 15, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* === GRADIENTES === */
/* CTA insignia: oro de tesoro */
.gradient-primary, .hero-gradient, .primary-gradient {
    background: linear-gradient(135deg, #EFB020 0%, #C8900A 100%);
}
/* Variante azul de mar para acentos secundarios */
.gradient-sea {
    background: linear-gradient(135deg, #3AAEDE 0%, #2A7FA6 100%);
}

/* === BOTÓN DE ORO (CTA mayor estilo landing) === */
.btn-gold {
    background: var(--gold); color: #000;
    padding: 18px 40px; font-size: 14px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    border: none; font-family: 'Space Grotesk', sans-serif;
    position: relative; overflow: hidden; transition: all .4s; display: inline-block;
}
.btn-gold::before {
    content: ''; position: absolute; inset: 0; background: #fff;
    transform: scaleX(0); transform-origin: right;
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-gold:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-gold:hover { transform: translateY(-2px) scale(1.02); }
.btn-gold span { position: relative; z-index: 1; }

/* === GRIDS / TEXTURAS === */
.technical-grid {
    background-image: radial-gradient(circle at 1px 1px, rgba(239, 176, 32, 0.10) 1px, transparent 0);
    background-size: 40px 40px;
}
.blueprint-grid {
    background-image: radial-gradient(rgba(58, 174, 222, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* === BORDES FANTASMA === */
.ghost-border {
    border: 1px solid rgba(42, 40, 35, 0.6);
}

/* === SELECCIÓN === */
::selection {
    background-color: rgba(239, 176, 32, 0.3);
    color: #06090F;
}

/* === ANIMACIONES DE ENTRADA (scroll reveal compartido) === */
.fade-anim { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-anim.visible { opacity: 1; transform: translateY(0); }