/* RESET & SCROLL */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
::-webkit-scrollbar { display: none; }
body { cursor: none; }

/* OPTIMIZACIÓN MÓVIL (Restaurar cursor) */
@media (hover: none) and (pointer: coarse) {
    body { cursor: auto; }
    .custom-cursor { display: none !important; }
}

/* 1. TEXTURA DE RUIDO */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 2. CURSOR PERSONALIZADO (Solo Desktop) */
@media (min-width: 768px) {
    .custom-cursor {
        position: fixed; top: 0; left: 0; width: 12px; height: 12px;
        background: #0A0A0A; border-radius: 50%;
        pointer-events: none; z-index: 10001;
        transform: translate(-50%, -50%);
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 0.3s;
        mix-blend-mode: exclusion;
        background-color: white;
    }
    .custom-cursor.hovered {
        width: 60px; height: 60px;
        opacity: 0.1;
        background-color: white;
    }
}

/* 3. ANIMACIÓN ACORDEÓN */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease;
}
.accordion-content.open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.accordion-inner {
    min-height: 0;
    overflow: hidden;
}
.accordion-content:not(.open) .accordion-inner { visibility: hidden; transition: visibility 0s 0.7s; }
.accordion-content.open .accordion-inner { visibility: visible; }

.accordion-trigger { cursor: none; }
@media (hover: none) and (pointer: coarse) { .accordion-trigger { cursor: pointer; } }

.accordion-trigger .arrow {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-trigger[aria-expanded="true"] .arrow { transform: rotate(180deg); }

/* Títulos de entrada (fluidos, sin desbordar en móvil) */
.entry-title {
    font-size: clamp(1.75rem, 7.2vw, 4rem);
    line-height: 1;
    overflow-wrap: anywhere;
}
.edu-title {
    font-size: clamp(1.5rem, 5.5vw, 3rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

/* HERO: sin min-h-screen, altura contenida */
.hero { min-height: auto; }

/* FOOTER: nombre con contraste alto */
.footer-name {
    font-size: clamp(4.5rem, 18vw, 16rem);
    color: #FAFAFA;
    transition: color 0.4s ease;
}
@media (min-width: 768px) {
    .footer-name { font-size: 14vw; }
}
.footer-name:hover { color: #FF3B30; }

/* 4. NAVBAR SCROLLED STATE */
.nav-scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    mix-blend-mode: normal !important;
    color: #0A0A0A !important;
}

.nav-scrolled a { color: #0A0A0A; }

.nav-scrolled #nav-btn {
    background-color: #0A0A0A;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.nav-scrolled #nav-btn .btn-text { color: white; }
.nav-scrolled #nav-btn-web { border-color: #0A0A0A; }
.nav-scrolled #nav-btn-web .btn-web-text { color: #0A0A0A; }
.nav-scrolled #nav-btn-web div { background-color: #0A0A0A; }
.nav-scrolled #nav-btn-web:hover .btn-web-text { color: white; }
.nav-scrolled #nav-logo { transform: scale(0.9); }

/* 5. PLACEHOLDER DE PROYECTO */
.project-placeholder {
    background:
        repeating-linear-gradient(135deg, rgba(10,10,10,0.025) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, #f1f1f1 0%, #ececec 50%, #f4f4f4 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.project-placeholder span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(10, 10, 10, 0.35);
}

/* Focus visible for accessibility */
.accordion-trigger:focus-visible,
a:focus-visible {
    outline: 2px solid #FF3B30;
    outline-offset: 4px;
}

/* Táctil: sin estados hover "pegados" tras tocar una entrada */
@media (hover: none) {
    .accordion-trigger:hover { opacity: 1 !important; }
    .group:hover .group-hover\:translate-x-2 { transform: none !important; }
}

/* Nombre (H1 + footer): tracking ajustado sin que la "r" toque la "i" de Adrián
   (-0.05em de tracking-tighter fundía r/i; medido: -0.03em deja 3px a 144px y 2px en móvil) */
.hero-name,
.footer-name {
    letter-spacing: -0.03em;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

/* ENTRADAS: texto justificado + composición texto/imagen */
.entry-copy,
.hero-bio {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;   /* solo corta palabras largas: menos guiones y sin "ríos" */
    overflow-wrap: break-word;
}
.entry-copy { max-width: 52ch; }

.entry-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
.entry-text { max-width: 52ch; }
.entry-link { margin-top: 1.75rem; }

.entry-media { width: 100%; }
.entry-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-figure--portrait { aspect-ratio: 4 / 5; }
.project-figure--square   { aspect-ratio: 1 / 1; }

@media (max-width: 767px) {
    .entry-media { max-height: 70vh; }
}
@media (min-width: 768px) {
    /* ch calculado con el cuerpo del párrafo (18px) */
    .entry-grid, .entry-text { font-size: 1.125rem; }
    .entry-media { max-width: 420px; }
}
@media (min-width: 1024px) {
    .entry-grid--media {
        grid-template-columns: minmax(0, 52ch) 420px;
        column-gap: clamp(3rem, 5vw, 4.5rem);
        align-items: center;          /* bloque de texto centrado contra la imagen */
        justify-content: space-between; /* texto en el borde del título, imagen en el borde derecho (columna tag/flecha) */
    }
}


/* FORMACIÓN · lista de cursos (nombre + emisor) */
.course-list {
    max-width: 52ch;
    font-size: 1rem;
    border-top: 1px solid rgba(10, 10, 10, 0.1);
}
@media (min-width: 768px) { .course-list { font-size: 1.125rem; } }
.course-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.course-name {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    color: rgba(10, 10, 10, 0.9);
    min-width: 0;
}
.course-issuer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(10, 10, 10, 0.5);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (min-width: 768px) { .course-issuer { font-size: 11px; } }

/* Footer: negro mate, sin grano (queda por encima de la textura de ruido) */
#site-footer {
    background-color: #0E0E0E;
    z-index: 9999; /* mismo nivel que el ruido, pero después en el DOM: lo tapa */
}
#navbar { z-index: 10000; }