/* ============================================================
   MARVELD PORTFOLIO — Sistema visual compartido
   Usado por: martin-portfolio.html, caso-echeqs.html,
              caso-lab-sintetico.html, caso-modulo-visitas.html
   Contiene: paleta de colores, reset, tipografía base, cursor
   custom, nav, toggle idioma/tema, menú mobile, botones y
   animaciones reveal. El CSS específico de cada página vive en
   el <style> de su propio HTML.
   ============================================================ */

:root {
  --fondo:       #0a0a0a;
  --fondo-suave: #111111;
  --fondo-card:  #1a1a1a;
  --fondo-card2: #2a2a2a;
  --texto:       #f5f5f0;
  --texto-suave: #888888;
  --borde:       rgba(255,255,255,0.06);
  --borde-card:  rgba(255,255,255,0.07);
  --azul:        #1847F0;
  --azul-hover:  #0f35cc;
  --azul-suave:  rgba(24,71,240,0.08);
  --azul-borde:  rgba(24,71,240,0.2);
  --num-color:   rgba(255,255,255,0.06);
  --tag-color:   rgba(255,255,255,0.25);
  --tag-borde:   rgba(255,255,255,0.1);
  --blanco-puro: #ffffff;
}

body.light {
  --fondo:       #f0f0ec;
  --fondo-suave: #e8e8e4;
  --fondo-card:  #e0e0dc;
  --fondo-card2: #d4d4d0;
  --texto:       #111111;
  --texto-suave: #666666;
  --borde:       rgba(0,0,0,0.07);
  --borde-card:  rgba(0,0,0,0.08);
  --azul:        #1847F0;
  --azul-hover:  #0f35cc;
  --azul-suave:  rgba(24,71,240,0.07);
  --azul-borde:  rgba(24,71,240,0.25);
  --num-color:   rgba(0,0,0,0.06);
  --tag-color:   rgba(0,0,0,0.3);
  --tag-borde:   rgba(0,0,0,0.12);
  --blanco-puro: #ffffff;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fondo);color:var(--texto);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.6;overflow-x:hidden;transition:background .35s ease,color .35s ease}

/* CURSOR */
.cursor{width:8px;height:8px;background:var(--azul);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transition:transform .15s ease;transform:translate(-50%,-50%)}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(24,71,240,.4);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transition:transform .35s ease,width .3s,height .3s,border-color .3s;transform:translate(-50%,-50%)}
@media(max-width:768px){.cursor,.cursor-ring{display:none}}

/* ── NAV ─────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:22px 60px;border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
nav.scrolled{border-color:var(--borde);backdrop-filter:blur(12px)}
body:not(.light) nav.scrolled{background:rgba(10,10,10,.92)}
body.light nav.scrolled{background:rgba(240,240,236,.92)}
.nav-logo{font-family:'DM Serif Display',serif;font-size:18px;color:var(--texto);text-decoration:none;letter-spacing:-.02em;z-index:201;transition:color .35s}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{color:var(--texto-suave);text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.nav-links a:hover{color:var(--texto)}
.nav-cta{background:var(--azul)!important;color:var(--blanco-puro)!important;padding:9px 20px!important;border-radius:2px}
.nav-cta:hover{background:var(--azul-hover)!important}

.nav-back{display:flex;align-items:center;gap:8px;color:var(--texto-suave);text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.nav-back:hover{color:var(--azul)}
.nav-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.nav-pdf{
  display:flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);text-decoration:none;
  border:1px solid var(--borde-card);
  padding:7px 14px;border-radius:2px;
  background:none;cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:color .2s,border-color .2s;
}
.nav-pdf:hover{color:var(--azul);border-color:var(--azul)}
.nav-pdf svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.lang-toggle{display:flex;align-items:center;border:1px solid var(--borde-card);border-radius:2px;overflow:hidden;transition:border-color .35s}
.lang-btn{background:none;border:none;color:var(--texto-suave);font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;cursor:pointer;transition:background .2s,color .2s}
.lang-btn.active{background:var(--azul);color:var(--blanco-puro)}
.lang-divider{width:1px;height:28px;background:var(--borde-card);transition:background .35s}

.theme-switch{display:flex;align-items:center;gap:7px;cursor:pointer;border:none;background:none;padding:7px 12px;border:1px solid var(--borde-card);border-radius:2px;transition:border-color .35s}
.theme-switch:hover{border-color:var(--azul)}
.theme-icon{font-size:13px;line-height:1}
.theme-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave);transition:color .35s;font-family:'DM Sans',sans-serif}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;z-index:201;padding:4px}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--texto);transition:transform .3s ease,opacity .3s ease,background .35s;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:190;background:var(--fondo);flex-direction:column;justify-content:center;align-items:center;gap:12px;opacity:0;transition:opacity .3s ease,background .35s;pointer-events:none}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{font-family:'DM Serif Display',serif;font-size:clamp(26px,7vw,40px);color:var(--texto);text-decoration:none;letter-spacing:-.02em;transition:color .2s;padding:6px 0}
.mobile-menu a:hover{color:var(--azul)}
.mobile-menu .menu-lang{margin-top:28px;display:flex;align-items:center;border:1px solid var(--borde-card);border-radius:2px;overflow:hidden}
.mobile-menu .theme-switch{margin-top:12px}
.mobile-menu .nav-pdf{margin-top:12px}

.lang-en [data-es]{display:none!important}
.lang-es [data-en]{display:none!important}

/* ── TÍTULOS DE SECCIÓN (label reutilizable) ─────── */
.section-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--azul);margin-bottom:20px;display:flex;align-items:center;gap:16px}
.section-label::before{content:'';width:32px;height:1px;background:var(--azul)}

/* ── BOTONES COMPARTIDOS ─────────────────────────── */
.btn-primary{background:var(--azul);color:var(--blanco-puro);text-decoration:none;padding:16px 36px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;transition:background .2s,transform .2s}
.btn-primary:hover{background:var(--azul-hover);transform:translateY(-2px)}
.btn-ghost{color:var(--texto-suave);text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;transition:color .2s}
.btn-ghost:hover{color:var(--texto)}
.btn-ghost .arrow{display:inline-block;transition:transform .2s}
.btn-ghost:hover .arrow{transform:translateX(4px)}

/* ── LAYOUT DE SECCIÓN (tag base) ─────────────────── */
section{padding:120px 60px}

/* ── ANIMACIONES ─────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ══ MOBILE ══════════════════════════════════════════ */
@media(max-width:768px){
  nav{padding:20px 24px}
  .nav-right{display:none}
  .hamburger{display:flex}
  .mobile-menu{display:flex}
  section{padding:72px 24px}
}