/* 
SISTEMA DE SPACING ESTRATÉGICO
===============================
Filosofía: Romper reglas para crear tensión visual, jerarquía emocional y recordación.
No todo debe seguir un grid perfecto - la maestría está en saber cuándo crear contraste.
*/

:root {
  /* Base spacing scale - Fibonacci-inspired pero con rupturas intencionales */
  --space-xs: 4px;    /* Micro detalles */
  --space-sm: 8px;    /* Elementos relacionados */
  --space-md: 16px;   /* Separación estándar */
  --space-lg: 24px;   /* Grupos de contenido */
  --space-xl: 40px;   /* Secciones menores */
  --space-2xl: 64px;  /* Secciones principales */
  --space-3xl: 96px;  /* Separación dramática */
  --space-4xl: 128px; /* Ruptura visual intencional */
  --space-hero: 160px; /* Espacio heroico para impacto */
  
  /* Espacios asimétricos para crear tensión visual */
  --space-tension-sm: 12px;  /* Rompe el patrón de 8px/16px */
  --space-tension-md: 28px;  /* Crea incomodidad visual intencional */
  --space-tension-lg: 72px;  /* Pausa dramática */
  
  /* Espacios contextuales */
  --space-breath: 20px;      /* Para dar respiro sin seguir el grid */
  --space-whisper: 6px;      /* Susurro visual */
  --space-shout: 112px;      /* Grito visual */
}

/* 
JERARQUÍA EMOCIONAL DE SECCIONES
================================
Cada sección tiene un propósito emocional y su spacing refleja esa intención
*/

/* HERO: Impacto inmediato - spacing generoso pero asimétrico */
.hero {
  padding-top: var(--space-hero);
  padding-bottom: var(--space-3xl);
  /* Asimetría intencional: más espacio arriba para crear anticipación */
}

.hero-content > * + * {
  margin-top: var(--space-lg);
}

.hero-title {
  margin-bottom: var(--space-whisper); /* Casi pegado al subtítulo para crear unidad */
}

.hero-subtitle {
  margin-bottom: var(--space-tension-md); /* Ruptura del patrón para crear pausa */
}

.hero-description {
  margin-bottom: var(--space-xl);
}

.hero-buttons {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-shout); /* Grito visual antes de las features */
}

/* ABOUT: Intimidad y cercanía - spacing más compacto */
.about {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

.about-content {
  gap: var(--space-2xl);
}

.about-text p + p {
  margin-top: var(--space-breath); /* Respiro natural entre párrafos */
}

/* SKILLS: Organización y claridad - grid estricto con rupturas estratégicas */
.skills {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.skills-grid {
  gap: var(--space-tension-md); /* Rompe el patrón esperado de 24px o 32px */
  margin-top: var(--space-xl);
}

.skill-category {
  padding: var(--space-lg);
}

.skill-category h3 {
  margin-bottom: var(--space-md);
}

.skill-category ul {
  margin-top: var(--space-sm);
}

.skill-category li + li {
  margin-top: var(--space-whisper); /* Compacto para crear densidad informativa */
}

/* WORK: Showcase dramático - spacing amplio con contrastes */
.work {
  padding-top: var(--space-shout); /* Grito visual para anunciar el trabajo */
  padding-bottom: var(--space-3xl);
}

.work-intro {
  margin-bottom: var(--space-tension-lg); /* Pausa dramática antes de los proyectos */
}

.projects-grid {
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.project-card {
  padding: var(--space-lg);
}

.project-card h3 {
  margin-bottom: var(--space-xs); /* Casi pegado al subtítulo */
}

.project-card .subtitle {
  margin-bottom: var(--space-md);
}

.project-card .description {
  margin-top: var(--space-breath);
}

/* JOURNEY: Narrativa temporal - spacing que cuenta una historia */
.journey {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

.timeline {
  margin-top: var(--space-xl);
}

.timeline-item + .timeline-item {
  margin-top: var(--space-tension-md); /* Ruptura para crear ritmo narrativo */
}

.timeline-content h3 {
  margin-bottom: var(--space-xs);
}

.timeline-content h4 {
  margin-bottom: var(--space-sm);
}

.timeline-content p {
  margin-bottom: var(--space-md);
}

.timeline-content ul {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* 
MICROINTERACCIONES DE SPACING
=============================
Spacing que responde a la interacción del usuario
*/

/* Hover states que alteran el spacing */
.project-card:hover {
  transform: translateY(-4px);
  /* El spacing visual cambia con la elevación */
}

.btn:hover {
  transform: translateY(-2px);
  /* Reduce el spacing visual con el fondo */
}

/* Focus states con spacing aumentado */
*:focus {
  outline-offset: var(--space-xs); /* Spacing consistente para accesibilidad */
}

/* 
RESPONSIVE SPACING CON RUPTURAS ESTRATÉGICAS
===========================================
No todo debe escalar linealmente - algunas rupturas crean mejor UX
*/

@media (max-width: 768px) {
  :root {
    /* En móvil, algunos espacios se mantienen grandes para crear impacto */
    --space-hero: 120px; /* Menos que desktop pero aún heroico */
    --space-shout: 80px;  /* Mantiene el grito visual */
    --space-tension-lg: 48px; /* Reduce pero mantiene la tensión */
  }
  
  /* Algunas secciones rompen la regla de "menos espacio en móvil" */
  .hero-buttons {
    margin-top: var(--space-xl); /* Mantiene generosidad */
    margin-bottom: var(--space-2xl); /* Menos grito pero aún presente */
  }
  
  /* Otras se vuelven más íntimas */
  .about-text p + p {
    margin-top: var(--space-sm); /* Más íntimo en móvil */
  }
}

@media (max-width: 480px) {
  /* En pantallas muy pequeñas, priorizamos la legibilidad */
  .hero {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
  }
  
  /* Pero mantenemos algunas rupturas para personalidad */
  .work {
    padding-top: var(--space-2xl); /* Menos grito pero aún anuncio */
  }
}

/* 
SPACING SEMÁNTICO
=================
Diferentes tipos de contenido tienen diferentes necesidades de spacing
*/

/* Contenido técnico - más compacto */
.technical-content p + p {
  margin-top: var(--space-sm);
}

.technical-content ul {
  margin-top: var(--space-xs);
}

/* Contenido emocional - más generoso */
.emotional-content p + p {
  margin-top: var(--space-breath);
}

/* Contenido de showcase - dramático */
.showcase-content {
  margin-top: var(--space-tension-lg);
  margin-bottom: var(--space-shout);
}

/* 
UTILIDADES DE SPACING
=====================
Para casos específicos donde necesitamos romper el sistema
*/

.space-reset { margin: 0 !important; }
.space-whisper-top { margin-top: var(--space-whisper) !important; }
.space-shout-bottom { margin-bottom: var(--space-shout) !important; }
.space-tension { margin: var(--space-tension-md) 0 !important; }
.space-breath { margin: var(--space-breath) 0 !important; }

/* Para crear rupturas visuales intencionales */
.visual-break {
  margin-top: var(--space-shout);
  margin-bottom: var(--space-tension-lg);
}

.visual-pause {
  margin-top: var(--space-tension-md);
  margin-bottom: var(--space-breath);
}