/* =========================================================
   base.css (GLOBALES Y VARIABLES OPTIMIZADAS)
   ========================================================= */

/* --- RESET & NORMALIZACIÓN --- */
html {
  font-size: 62.5%; /* 1rem = 10px */
  /* Fondo del viewport desde el primer frame: evita el destello blanco
     (sobre el que el velo del hero pintaba un degradado al refrescar). */
  background-color: var(--color-fondo);
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-encabezado); /* Offset para anclas */
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* --- COLORES BASE (Dark Mode Default) --- */
  --color-primario: #3b82f6;       
  --color-primario-oscuro: #2563eb;
  --color-acento: #22b8cf;         
  --color-titulo: #ffffff; 
  
  --gradiente-blob: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(34, 184, 207, 0.5));

  /* Acento Cálido */
  --color-calido: #e8c39e;      /* arena */
  --color-calido-soft: #f5e1ce; /* crema */

  /* Mix azul + cálido para CTA */
  --gradiente-cta: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.72),
    rgba(232, 195, 158, 0.18),
    rgba(15, 23, 42, 0.92)
  );

  /* --- FONDOS DARK (monocromo, casi negro) --- */
  --color-fondo: #08080A;
  --color-superficie: rgba(255, 255, 255, 0.025);
  --borde-glass: rgba(255, 255, 255, 0.1);
  --color-borde: rgba(255, 255, 255, 0.09);

  /* Textos (escala de grises neutra) */
  --color-texto: #a1a1aa;
  --color-texto-muted: #71717a;
  --color-inverso: #ffffff;

  /* Botón Secundario (Dark Mode) */
  --btn-secundario-borde: rgba(255, 255, 255, 0.3);
  --btn-secundario-texto: #ffffff;
  --btn-secundario-hover-bg: rgba(255, 255, 255, 0.1);

  /* Tipografía */
  --fuente: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fuente-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Titulares: grotesca limpia y pesada */
  --fuente-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; /* Labels / código */

  /* Layout */
  --ancho-contenedor: 112rem;
  --padding-contenedor: 2rem;
  --alto-encabezado: 7rem;

  /* UI Tokens */
  --radio: 0; /* esquinas cuadradas (estética minimalista) */
  --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --sombra-tarjeta: 0 10px 30px rgba(0, 0, 0, 0.25); 
  
  --transicion: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Safe Areas (iPhone/Fold) */
  --safe-bottom: env(safe-area-inset-bottom, 2rem);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* =========================================
   PROTECCIÓN DE IMÁGENES (Anti-robo básico)
   ========================================= */

/* 1. Clase de utilidad para no arrastrar ni seleccionar */
.no-drag {
  -webkit-user-drag: none;       /* Chrome, Safari */
  user-drag: none;               /* Estándar futuro */
  -webkit-user-select: none;     /* Safari */
  -moz-user-select: none;        /* Firefox */
  -ms-user-select: none;         /* IE/Edge */
  user-select: none;             /* Estándar */
  -webkit-touch-callout: none;   /* iOS Safari (evita menú al mantener presionado) */
}

/* 2. Aplicar globalmente a todas las imágenes (Opcional, pero recomendado) */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* 3. PROTECCIÓN TOTAL para elementos decorativos (Fondos) */
/* "pointer-events: none" hace que el mouse los ignore por completo.
   El clic "pasa a través" de ellos. */
.bg-fx,
.hero__media::before,
.proyecto-card__bg-blur {
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   FONDO GLOBAL: negro plano (minimalista, sin texturas)
   Sustituye a los antiguos orbes con blur. Estático, sin JS.
   Capa fija detrás de todo el contenido (todas las páginas).
   ========================================================= */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-fondo);
}

/* =========================================================
   MODO CLARO (LIGHT MODE) - PALETA SLATE
   ========================================================= */
:root[data-theme="light"] {
  /* --- Fondos --- */
  --color-fondo: #F8FAFC;       /* Slate 50 */
  --color-superficie: #FFFFFF;  /* Blanco puro */
  --borde-glass: rgba(148, 163, 184, 0.4); /* Gris visible */
  --color-borde: #E2E8F0;                  /* Slate 200 */
  
  /* --- Textos --- */
  --color-titulo: #0F172A;      /* Slate 900 */
  --color-texto: #334155;       /* Slate 700 */
  --color-texto-muted: #64748B; /* Slate 500 */
  
  /* --- Colores Especiales --- */
  --color-inverso: #FFFFFF;     
  
  /* Botón Secundario (Light Mode) - Bordes oscuros */
  --btn-secundario-borde: #334155; 
  --btn-secundario-texto: #334155;
  --btn-secundario-hover-bg: rgba(15, 23, 42, 0.05);

  /* --- Ajustes UI --- */
  --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --sombra-tarjeta: 0 10px 15px -3px rgba(0, 0, 0, 0.08); 
  
  /* Gradiente CTA limpio para fondo blanco */
  --gradiente-cta: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15),
    rgba(255, 255, 255, 1),
    rgba(232, 195, 158, 0.25)
  );
}

/* =========================================================
   OVERRIDES GLOBALES MODO CLARO
   ========================================================= */

/* 1. Header y Footer Claros */
:root[data-theme="light"] .encabezado {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #E2E8F0;
}

:root[data-theme="light"] .pie {
  background: #F1F5F9; 
  border-top: 1px solid #CBD5E1;
}

:root[data-theme="light"] .pie__copy, 
:root[data-theme="light"] .pie__titulo {
  color: #0F172A;
}

/* 2. Tarjetas en Modo Claro (Blanco + Sombra + Borde sutil) */
:root[data-theme="light"] .tarjeta,
:root[data-theme="light"] .proyecto-card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .valor-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

:root[data-theme="light"] .tarjeta:hover,
:root[data-theme="light"] .proyecto-card:hover {
  background: #FFFFFF;
  border-color: var(--color-primario);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

/* 3. Menú Móvil (Hamburguesa Negra) */
:root[data-theme="light"] .boton-menu__icono,
:root[data-theme="light"] .boton-menu__icono::before,
:root[data-theme="light"] .boton-menu__icono::after {
  background: #0F172A;
}

/* 4. Estilos Generales Body */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;     
  flex-direction: column;
  font-family: var(--fuente);
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.6;
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

main { flex: 1; width: 100%; }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

a { 
  text-decoration: none; 
  color: inherit; 
  transition: var(--transicion); 
}

/* --- TIPOGRAFÍA --- */
h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--color-titulo);
  font-weight: 700;
  line-height: 1.1;
  transition: color 0.3s ease;
}

/* Titulares de impacto: grotesca pesada en mayúsculas (estilo minimalista) */
h1, h2 {
  font-family: var(--fuente-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

/* Subtítulos de tarjeta: Space Grotesk, legibles en mixto */
h3 {
  font-family: var(--fuente);
  font-weight: 700;
}

h1 { font-size: clamp(3.6rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.8rem, 5.5vw, 4rem); }
h3 { font-size: clamp(1.8rem, 4vw, 2.2rem); }

p { margin: 0; color: var(--color-texto-muted); transition: color 0.3s ease; }

/* --- BOTONES (cuadrados, monocromos, mayúsculas) --- */
.boton {
  position: relative;
  isolation: isolate;          /* aísla la onda detrás del texto */
  overflow: hidden;            /* recorta la onda al rectángulo del botón */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.35rem 2.6rem;
  border-radius: 0;
  font-family: var(--fuente);
  font-weight: 600;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* Onda: círculo que se expande desde el centro hacia afuera.
   No altera el tamaño del botón (vive en un ::before recortado). */
.boton::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 175%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1);
  will-change: transform;
}
.boton:hover::before,
.boton:focus-visible::before { transform: translate(-50%, -50%) scale(1); }

.boton:active { transform: translateY(1px); }

.boton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-fondo), 0 0 0 4px var(--color-titulo);
}

/* Primario: sólido. La onda (oscura) lo invade y el texto pasa a claro. */
.boton--primario {
  background: var(--color-titulo);
  color: var(--color-fondo);
  border-color: var(--color-titulo);
}
.boton--primario::before { background: var(--color-fondo); }
.boton--primario:hover,
.boton--primario:focus-visible { color: var(--color-titulo); }

/* Secundario: contorno. La onda (clara) lo rellena y el texto pasa a oscuro. */
.boton--secundario {
  background: transparent;
  color: var(--color-titulo);
  border-color: var(--color-borde-fuerte, rgba(255, 255, 255, 0.28));
}
.boton--secundario::before { background: var(--color-titulo); }
.boton--secundario:hover,
.boton--secundario:focus-visible {
  color: var(--color-fondo);
  border-color: var(--color-titulo);
}
:root[data-theme="light"] .boton--secundario {
  border-color: rgba(15, 23, 42, 0.25);
}

/* Respeta usuarios con movimiento reducido: relleno instantáneo, sin onda */
@media (prefers-reduced-motion: reduce) {
  .boton::before { transition: none; }
}

/* Fix Botón Secundario Light Mode específico */
:root[data-theme="light"] .boton--secundario:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.boton--contacto {
  border-color: rgba(255,255,255,0.35);
}
:root[data-theme="light"] .boton--contacto {
  border-color: #334155;
}

/* Utilidades */
.contenedor {
  width: min(var(--ancho-contenedor), 92%);
  margin-inline: auto;
}

.enlace-saltar {
  position: absolute; left: -99rem; top: 1rem;
  background: var(--color-primario); color: white; padding: 1rem;
  z-index: 9999;
  border-radius: 4px;
}
.enlace-saltar:focus { left: 1rem; outline: 2px solid white; }

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