/* --- VARIABLES Y RESET --- */
:root {
    --bg-color: #eceae2;      
    --text-color: #000000;    
       --accent-gray: #b8b5b5;
    /* Fuente para Títulos (Tatuaje/Máquina de escribir) */
    --font-Inter: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;

    /* Fuente para texto (Variable) */
     --font-gridlite: "gridlite-pe-variable", sans-serif;
    font-variation-settings: "ELSH" 3, "RECT" 1, "BACK" 1, "wght" 900;
    --font-scatterplot : "scatterplot-vf", sans-serif;
    /* Configuración inicial de la fuente variable */
font-variation-settings: "RAND" 900, "wght" 300;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-scatterplot );
    line-height: 1.5;
}

/* --- TIPOGRAFÍAS --- */
.tattoo-font {
    font-family: var(--font-gridlite);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scatter-text {
  /* Usamos tu variable de fuente */
  font-family: var(--font-scatterplot), sans-serif;
  
  /* 1. Define el valor inicial del eje "RAND" (ej. 100 o el máximo que tenga tu fuente) */
  font-variation-settings: "RAND" 900; 
  
  /* 2. La Magia: Define qué propiedad se anima y cuánto tarda */
  transition: font-variation-settings 0.8s ease-in-out;
  
  /* Opcional: Cursor para indicar interactividad */
  cursor: help; 
}
.scatter-text:hover {
  /* 3. Valor destino: el texto se ordena */
  font-variation-settings: "RAND" 0;
}

.gridlite-text {
  /* Usamos tu variable de fuente */
  font-family: var(--font-gridlite), sans-serif;
  
  font-variation-settings: 'wght' 900, 'BACK' 900, 'RECT' 900, 'ELSH' 4;

  /* 1. Define el valor inicial del eje "ELSH" (ej. 100 o el máximo que tenga tu fuente) */ 
  
  /* 2. La Magia: Define qué propiedad se anima y cuánto tarda */
  transition: font-variation-settings 0.8s ease-in-out;
  
  /* Opcional: Cursor para indicar interactividad */
  cursor: help; 
}
.gridlite-text:hover {
  /* 3. Valor destino: el texto se ordena */
  font-variation-settings: 'wght' 900, 'BACK' 1, 'RECT' 1, 'ELSH' 4;
}

/* --- NAVEGACIÓN --- */
.main-nav {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    position: fixed;
    width: 100%;
    top: 0;
    background: var(--bg-color);
    backdrop-filter: blur(5px);
    z-index: 1000;
    border-bottom: 1px solid var(--accent-gray);
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--font-gridlite);
    font-size: 0.9rem;
}

.repo-btn {
    border-bottom: 1px solid var(--text-color);
    padding: 5px 15px;
    transition: all 0.3s;
}

.repo-btn:hover {
    background:var(--text-color);
    color:var(--bg-color);
}

/* --- HERO SECTION --- */
.hero {
    height: 100vh; /* Ocupa toda la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem); /* Responsive */
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.subtitle {
    font-size: 1.2rem;
    color: #aaa;
    margin-bottom: 4rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    animation: bounce 2s infinite;
}

/* --- SECCIONES GENERALES --- */
.section-padding {
    padding: 80px 10%; /* Espacio lateral responsive */
    min-height: 80vh;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    border-bottom: 2px solid white;
    display: inline-block;
}

/* --- MANIFIESTO --- */
.manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /*2 columnas */
    gap: 4rem;
    align-items: center;
}

.highlight-quote {
    font-family: var(--font-Inter);
    font-weight: 300;
    font-style: italic;
    font-size: 1.8rem;
    border-left: 4px solid white;
    padding-left: 20px;
    line-height: 1.4;
    color: var(--bg-color);
}

/* --- GALERÍA (POLAROIDS) --- */
.projects-grid {
    display: grid;
    /* Grid automático: crea tantas columnas como quepan */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.polaroid {
    background: #111;
    transition: transform 0.3s ease;
}

.polaroid:hover {
    transform: translateY(-10px); /* Efecto elevación */
    z-index: 10;
}

.polaroid img {
    width: 100%;
    /* EL EFECTO POLAROID DEL PDF */
    border: 15px solid white; 
    border-bottom: 50px solid white; /* Borde inferior más grueso */
    filter: grayscale(100%) contrast(120%); /* Blanco y negro forzado */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.caption {
    margin-top: -40px; /* Sube el texto para que quede sobre el borde blanco de la foto */
    position: relative;
    padding: 10px;
    color: black; /* Texto negro sobre el borde blanco */
    text-align: center;
}

.caption h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.caption p {
    font-size: 0.8rem;
    display: none; /* Oculto inicialmente, podrías mostrarlo en hover */
}

.details-link {
    color: black;
    font-weight: bold;
    font-size: 0.8rem;
}

/* --- IMPACTO (DATOS) --- */
.stats-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Para móviles */
    gap: 2rem;
    margin-top: 3rem;
}

.stat-box {
    flex: 1;
    min-width: 250px;
    border: 1px solid #333;
    padding: 2rem;
    text-align: center;
}

.big-number {
    display: block;
    font-size: 4rem;
    margin: 1rem 0;
}

/* --- FOOTER --- */
footer {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid #333;
    margin-top: 4rem;
    font-size: 0.8rem;
    color: #666;
}

/* --- ANIMACIONES --- */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .manifesto-grid { grid-template-columns: 1fr; } /* Una columna */
    .section-padding { padding: 40px 5%; }
    .nav-links { display: none; } /* Aquí habría que poner un menú hamburguesa */
}
/* --- MOTOR DE CAOS (Hacer que se parezca a Figma) --- */

/* 1. Permitir superposiciones */
.chaos-grid {
    display: flex; /* Usamos flex en lugar de grid para más libertad manual */
    flex-wrap: wrap;
    justify-content: center;
    gap: 0; /* Quitamos el espacio automático para controlarlo nosotros */
    padding: 100px 0;
}

.polaroid {
    /* Hacemos que se comporten como "cartas" sobre una mesa */
    margin: 20px;
    flex-basis: 300px; /* Ancho base */
    position: relative; /* Necesario para el z-index */
}

/* 2. REPLICA TU FIGMA AQUÍ (Valores de ejemplo, ajusta con tus datos de Figma) */

/* Polaroid 1: Inclinada a la izquierda y un poco arriba */
.polaroid.p1 {
    transform: rotate(-6deg) translateY(20px);
    z-index: 1;
}

/* Polaroid 2: Inclinada a la derecha, superpuesta sobre la 1 */
.polaroid.p2 {
    transform: rotate(4deg) translate(-40px, -50px); /* El -40px la mueve a la izquierda para pisar la p1 */
    z-index: 5; /* Z-index más alto = está encima */
    margin-top: 80px; /* La bajamos más */
}

/* Polaroid 3: Casi recta, pero separada */
.polaroid.p3 {
    transform: rotate(-2deg) translate(-20px, 30px);
    z-index: 2;
}

/* 3. Textos Desalineados (Efecto Memento) */
.manifesto-grid {
    position: relative;
    display: block; /* Rompemos el grid estándar */
    height: auto;
    padding: 30px;
}

.manifesto-grid .text-block {
    width: 50%;
    margin-left: 0; /* Pegado a la izquierda */
    transform: rotate(-1deg);
}

.manifesto-grid .highlight-quote {
    width: 50%;
    margin-left: auto; /* Empujado a la derecha */
    margin-top: -40px; /* Sube para pisar el texto anterior si quieres */
    transform: rotate(2deg);
    background: #000; /* Fondo negro para tapar lo de abajo si se cruzan */
    border: 1px solid white; /* Borde para resaltar sobre el caos */
    padding: 15px;
    box-shadow: 10px 10px 0px white; /* Sombra dura estilo brutalista */
}

/* 4. Títulos rotos */
h2 {
    /* Saca los títulos de la alineación perfecta */
    margin-left: -20px; 
    transform: skewX(-10deg); /* Inclina la letra estilo alarma */
    background-color: white;
    color: black;
    padding: 5px 15px;
    display: inline-block;
}

/* 5. Responsive: En móvil volvemos al orden para que sea legible */
@media (max-width: 768px) {
    .polaroid.p1, .polaroid.p2, .polaroid.p3 {
        transform: none;
        margin: 20px auto;
        translate: 0 0;
    }
    
    .manifesto-grid .text-block, 
    .manifesto-grid .highlight-quote {
        width: 100%;
        transform: none;
        margin: 20px 0;
    }
}