/* ================= CONFIGURACIÓN GENERAL ================= */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Biome Pro', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Tema 1: Página Principal (Obsidiana) */
body.tema-oscuro {
    background-color: #0B1215;
    color: #F5F5F7;
}

/* Tema 2: Página de Obras (Blanco Titanio) */
body.tema-claro {
    background-color: #F5F5F7;
    color: #0B1215;
}

/* ================= FONDOS ANIMADOS AL 9% (60 FPS) ================= */
.bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.09; /* 9% de opacidad estricta */
    z-index: 1;
    pointer-events: none;
}

.bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: opacity;
    transform: translateZ(0);
}

.pattern-blanco {
    background-image: url('PATRON-BLANCO.png');
    opacity: 1;
}

.pattern-negro {
    background-image: url('PATRON-NEG.png');
    opacity: 1;
}

.pattern-magenta {
    background-image: url('PATRON-MAGENTA.png');
    animation: transicionFluida 8s ease-in-out infinite alternate;
}

@keyframes transicionFluida {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ================= PÁGINA 1: LOBBY & ARTISTA ================= */
.contenedor-principal {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
}

.bloque-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
}

.logo-img {
    width: 190px;
    max-width: 50vw;
    height: auto;
    margin-bottom: 20px;
}

.bloque-hero h1 {
    font-size: 2.4rem;
    letter-spacing: 5px;
    margin: 0 0 10px 0;
}

.tagline {
    color: #E2007A;
    font-size: 1.05rem;
    letter-spacing: 1.5px;
    margin: 0 0 35px 0;
}

/* Renglones cortos para lectura cómoda en móvil */
.bio-artista {
    max-width: 380px; /* Limita el ancho para crear renglones cortos */
    line-height: 1.6;
    font-size: 0.95rem;
    color: #D0D0D5;
    margin-bottom: 35px;
    padding: 0 10px;
}

/* Marco blanco rectangular vertical para tu foto */
.marco-foto-artista {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 4 / 5;
    border: 2px solid #F5F5F7;
    background-color: rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-bottom: 70px;
    overflow: hidden;
}

.marco-foto-artista img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marco-foto-artista span {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: #888;
    line-height: 1.5;
}

/* ================= SECCIÓN DESCUBRIR MÁS ================= */
.bloque-descubrir {
    margin-bottom: 100px;
    width: 100%;
}

.titulo-seccion {
    font-size: 1.6rem;
    letter-spacing: 4px;
    margin-bottom: 30px;
}

.contenedor-botones {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.btn-vanya {
    color: #F5F5F7;
    background-color: transparent;
    border: 2px solid #E2007A;
    padding: 14px 42px;
    font-size: 1rem;
    letter-spacing: 3px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 180px;
}

.btn-vanya:hover {
    background-color: #E2007A;
    color: #0B1215;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(226, 0, 122, 0.3);
}

/* ================= SECCIÓN CONTACTO (ESTILO ALEX CREATOR) ================= */
.bloque-contacto {
    max-width: 550px;
    width: 100%;
    border-top: 1px solid rgba(245, 245, 247, 0.15);
    padding-top: 60px;
    padding-bottom: 40px;
}

.manifiesto-unico h3 {
    font-size: 1.2rem;
    letter-spacing: 3px;
    color: #E2007A;
    margin-bottom: 15px;
}

.manifiesto-unico p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #CCCCCC;
    margin-bottom: 40px;
}

.item-correo {
    margin-bottom: 35px;
}

.item-correo h4 {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    margin: 0 0 8px 0;
    color: #F5F5F7;
}

.item-correo a {
    color: #A0A0A8;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}

.item-correo a:hover {
    color: #E2007A;
}

.redes-sociales {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 40px;
}

.icono-red {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #F5F5F7;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.icono-red svg {
    width: 20px;
    height: 20px;
    fill: #0B1215;
}

.icono-red:hover {
    background-color: #E2007A;
    transform: scale(1.1);
}

.icono-red:hover svg {
    fill: #F5F5F7;
}

.copyright {
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 1px;
}

/* ================= PÁGINA 2: GALERÍA DE OBRAS (BLANCO TITANIO) ================= */
.nav-galeria {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.btn-volver {
    color: #0B1215;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: bold;
    border-bottom: 2px solid #E2007A;
    padding-bottom: 4px;
}

.logo-mini {
    width: 50px;
    height: auto;
}

.contenedor-galeria {
    position: relative;
    z-index: 2;
    max-width: 1150px;
    margin: 0 auto;
    padding: 20px 25px 100px 25px;
}

/* Cabecera estilo Alex Creator */
.cabecera-coleccion {
    margin-bottom: 50px;
}

.caja-titulo-coleccion {
    display: inline-block;
    border: 2px solid #0B1215;
    padding: 10px 28px;
    margin-bottom: 20px;
    background-color: #F5F5F7;
}

.caja-titulo-coleccion h1 {
    font-size: 1.3rem;
    letter-spacing: 3px;
    margin: 0;
}

.descripcion-coleccion {
    max-width: 550px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Cuadrícula de Tarjetas */
.grid-obras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 35px;
}

.tarjeta-obra {
    background-color: #FFFFFF;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(11, 18, 21, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.cabecera-tarjeta {
    padding: 20px 22px 14px 22px;
}

.subtitulo-tarjeta {
    font-size: 0.72rem;
    color: #888;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.nombre-obra {
    font-size: 1.25rem;
    letter-spacing: 2px;
    margin: 0;
    color: #0B1215;
}

/* Contenedor Interactivo: Zoom + Desplazamiento de Ficha Técnica */
.contenedor-imagen-obra {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #161F24;
}

.foto-obra, .placeholder-obra {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.placeholder-obra {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

/* Panel oculto que sube al acercar el cursor */
.info-deslizable {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(11, 18, 21, 0.96) 0%, rgba(11, 18, 21, 0.82) 75%, transparent 100%);
    color: #F5F5F7;
    padding: 40px 22px 22px 22px;
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.5;
}

.info-deslizable p {
    margin: 0 0 8px 0;
}

.info-deslizable strong {
    color: #E2007A;
}

.edicion-unica {
    display: block;
    margin-top: 10px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #AAA;
}

/* ACTIVACIÓN DEL HOVER (Zoom en la imagen + Subida del texto) */
.contenedor-imagen-obra:hover .foto-obra,
.contenedor-imagen-obra:hover .placeholder-obra {
    transform: scale(1.08);
}

.contenedor-imagen-obra:hover .info-deslizable {
    transform: translateY(0);
}

/* Cinta roja diagonal para obras vendidas */
.cinta-vendido {
    position: absolute;
    top: 22px;
    left: -35px;
    background-color: #FF2A3B;
    color: #FFF;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 6px 40px;
    transform: rotate(-12deg);
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Pie de tarjeta con botones DISPONIBLE / VENDIDO */
.pie-tarjeta {
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
}

.badge-estado {
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: #FFFFFF;
}

.badge-estado.disponible {
    background: linear-gradient(90deg, #62D900, #88F000);
    color: #0B1215;
}

.badge-estado.vendido {
    background: linear-gradient(90deg, #FF3B30, #FF6259);
}

.link-cotizar {
    color: #0B1215;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.link-cotizar:hover {
    color: #E2007A;
}

.texto-coleccion {
    font-size: 0.8rem;
    color: #999;
}