/* ================================================
   CarloVillate — Portafolio Artístico
   Estilos personalizados (complementarios a Tailwind CDN)
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Inter:wght@300;400;500&display=swap');


/* ─────────────────────────────────────────
   TIPOGRAFÍAS
───────────────────────────────────────── */
.font-serif-editorial { font-family: 'Cormorant Garamond', serif; }
.font-sans-subtle     { font-family: 'Inter', sans-serif; letter-spacing: 0.06em; }


/* ─────────────────────────────────────────
   COMPONENTES
───────────────────────────────────────── */

/* Velo blanco sobre imágenes */
.velo-blanco {
    background-color: rgba(255, 255, 255, 0.75);
    transition: all 0.5s ease;
}

/* Scrollbar oculta (subnav horizontal) */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Filtro clarito para el mapa */
.mapa-clarito {
    filter: grayscale(1) brightness(1.15) contrast(0.85);
    opacity: 0.25;
    transition: opacity 0.6s ease;
}
.mapa-clarito:hover { opacity: 0.60; }

/* Aislamiento z-index del lightbox */
#lightbox {
    isolation: isolate;
}


/* ─────────────────────────────────────────
   CORRECCIONES MÓVIL — NAVEGACIÓN
───────────────────────────────────────── */

/*
 * Fix: En pantallas < 480px, los 5 botones de la nav principal
 * desbordan la línea. Se usa flex-wrap con gap en lugar de space-x-6.
 * Nota: `space-x-6` se eliminó de la clase HTML para evitar conflicto.
 */
header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.1rem 0.75rem;
}

/*
 * Touch targets mínimos de 44px (WCAG 2.5.8) para accesibilidad táctil.
 * Tailwind no incluye min-height en los estilos de botones por defecto.
 */
header nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

/* Subnav: touch targets táctiles */
#submenus-container .sub-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Layout-selector: targets táctiles */
#layout-selector button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.375rem;
}


/* ─────────────────────────────────────────
   CORRECCIONES MÓVIL — GALERÍA
───────────────────────────────────────── */

@media (max-width: 639px) {

    /* En pantallas muy pequeñas, el subnav puede tener padding lateral mínimo */
    #subnav-bar {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Limitar el texto del título de galería para evitar overflow */
    #portfolio-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    /* Las secciones de pensamientos necesitan menos padding lateral en móvil */
    #section-pensamientos main,
    #section-docencia main,
    #section-trayectoria main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Footer: apilar elementos en columna correctamente */
    footer .max-w-7xl {
        text-align: center;
    }
}


/* ═════════════════════════════════════════════════════════
   VISUAL BLOG — DOS COLUMNAS TIPO CATÁLOGO
   Columna izq (42%): texto scrolleable (categoría / título bold / año / secciones)
   Columna der (58%): imagen sticky + overlay título en blanco
   Inmersivo:          overlay zinc-950, sólo imagen
   ═════════════════════════════════════════════════════════ */

/* Ocultar scrollbar del lightbox */
#lightbox::-webkit-scrollbar { display: none; }
#lightbox { isolation: isolate; will-change: opacity; }

/* ── Topbar sticky ── */
.vb-topbar { backdrop-filter: blur(12px); }

/* ── Layout dos columnas ── */
.vb-cols {
    min-height: calc(100vh - 44px); /* altura mínima para que el sticky funcione */
}

/* ── COLUMNA IZQUIERDA (Categoría y Secciones) ── */
.vb-left {
    width: 35%; /* Ancho de la columna de texto */
    flex-shrink: 0;
    padding: 3rem 2.5rem 4rem 5rem;
}

/* ── TÍTULO SUPERPUESTO (Overlap) ── */
/* Nace en la izquierda pero se estira hacia la derecha mordiendo la imagen */
.vb-title-overlap {
    width: 145%;         /* Ocupa el 100% de la izq y muerde un 45% de la derecha */
    margin-right: -45%;  /* Para no descuadrar el flex-layout */
    padding-right: 3rem; /* Que el texto no llegue hasta el mismo borde del bloque */
    
    /* El texto puede llevar fondo blanco si se quiere el bloque opaco,
       pero en diseño asimétrico contemporáneo el texto limpio superpuesto es ideal */
}

/* ── COLUMNA DERECHA (Imagen + Margen) ── */
.vb-right-area {
    /* Sticky dentro del scroll container del lightbox */
    position: sticky;
    top: 44px;               /* altura del topbar */
    height: calc(100vh - 44px);
    
    /* El flex-1 (establecido en HTML) permite que ocupe el resto del ancho */
}

/* Contenedor de la imagen */
.vb-image-wrap {
    /* flex-1 (HTML) para ocupar todo menos el margen derecho */
}

/* Margen derecho compositivo (espacio blanco delgado: ~1cm / 1.5rem) */
.vb-right-margin {
    width: clamp(0.7rem, 2vw, 1.5rem);
    background-color: white;
    flex-shrink: 0;
}

/* Título: muy grande, bold, serif — es el foco visual principal */
.vb-title-bold {
    font-size:   clamp(2.8rem, 5.5vw, 5.2rem);
    font-weight: 700;
    font-style:  italic;
    line-height: 0.95;
    letter-spacing: -0.01em;
}

/* Cursor de lupa sobre la imagen clickable */
.vb-img-cursor { cursor: zoom-in; transition: opacity 0.4s ease; }

/* ── Animaciones de entrada ── */
#lightbox.opacity-100 .vb-left {
    animation: vbLeftIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes vbLeftIn {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0);      }
}

#lightbox.opacity-100 .vb-right-area {
    animation: vbRightIn 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes vbRightIn {
    from { opacity: 0; transform: scale(1.025); }
    to   { opacity: 1; transform: scale(1);      }
}

/* ═══════════════════════════════════
   SECCIONES — tres niveles tipográficos
   ═══════════════════════════════════ */

/* 1 — Label: bullet • + versalitas  */
.vb-section-label {
    display:         flex;
    align-items:     center;
    gap:             0.45rem;
    font-size:       8.5px;
    letter-spacing:  0.28em;
    text-transform:  uppercase;
    color:           rgb(161 161 170);   /* zinc-400 */
    margin-bottom:   0.6rem;
}
.vb-bullet {
    font-size:  7px;
    line-height: 1;
    opacity:    0.65;
    flex-shrink: 0;
}

/* 2 — Subtitle: serif itálica, jerarquía intermedia */
.vb-section-subtitle {
    font-style:    italic;
    font-size:     0.8125rem;            /* ~13px */
    color:         rgb(113 113 122);     /* zinc-500 */
    margin-bottom: 0.55rem;
    line-height:   1.4;
}

/* 3 — Body: serif regular, texto corrido */
.vb-section-body {
    font-size:   0.8125rem;             /* ~13px */
    font-weight: 300;
    line-height: 1.8;
    color:       rgb(82 82 91);         /* zinc-600 */
}

/* ═══════════════════════════════════
   FOOTER INTERNO (sin mapa)
   ═══════════════════════════════════ */
.vb-inner-footer > div {
    padding: 2rem 5rem 2.5rem;
}

/* ═══════════════════════════════════
   INMERSIVO — overlay zinc-950
   ═══════════════════════════════════ */
#vb-immersive { will-change: opacity; }

/* ═══════════════════════════════════
   MÓVIL (< 768px)
   ═══════════════════════════════════ */
@media (max-width: 767px) {

    .vb-cols { flex-direction: column; min-height: auto; }

    /* En móvil, la columna izquierda (secciones) va debajo de la derecha (imagen + título)
       gracias a flex-direction: column, pero para que la imagen salga primero
       podemos usar order o cambiar la estructura. Como el flex-direction es column,
       .vb-left saldrá arriba. Cambiamos el order para que la foto salga primero: */
    .vb-left {
        width: 100%;
        padding: 2rem 1.5rem 2.5rem;
        order: 2; /* Texto de secciones debajo de la imagen */
    }

    .vb-right-area {
        position: relative;
        top: 0;
        height: auto;
        width: 100%;
        order: 1; /* Imagen y tarjeta de título arriba */
    }

    .vb-image-wrap {
        height: 75vw; /* Imagen grande en móvil */
        min-height: 280px;
    }

    .vb-right-margin {
        display: none; /* Sin margen derecho en móvil para maximizar la imagen */
    }

    .vb-title-overlap {
        width: 100%;
        margin-right: 0;
        padding-right: 0;
        margin-top: -2rem; /* Sube un poco sobre la imagen en móvil si la imagen va primero */
        position: relative;
        z-index: 50;
    }

    .vb-title-bold { font-size: clamp(2.2rem, 9vw, 2.8rem); }

    .vb-inner-footer > div {
        padding: 1.5rem 1.5rem 2rem;
        flex-direction: column;
        gap: 1.5rem;
    }

    #vb-immersive-img { padding: 2rem 1rem !important; }
    #vb-immersive button { top: 0.75rem; left: 1rem; }
}