:root {
    --primary: #f0f0f0;
    --accent: #ff00ff;
    --bg-dark: #121212;
    --bg-light: #1a1a1a;
    --text-muted: #a0a0a0;
    --card-green: #adff2f; /* El verde flúor que elegiste */
}

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

body {
    font-family: 'Nunito', sans-serif;
    color: #ffffff;
    margin: 0;
    line-height: 1.6;
    background-color: #121212; /* Fondo oscuro y plano para toda la web */
}

.container { padding: 80px 10%; }

h2 { 
    font-family: 'Caveat Brush', cursive; 
    font-size: 4.5rem; /* Bien grande para que luzca el trazo */
    letter-spacing: 2px;
    margin-bottom: 30px; 
    color: var(--accent); 
}

header {
    background: rgba(0,0,0,0.9);
    padding: 20px 10%;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 700; font-size: 1.5rem; letter-spacing: 2px; }
nav ul { display: flex; list-style: none; }
nav ul li { margin-left: 30px; }
nav ul li a { text-decoration: none; color: white; font-size: 0.9rem; transition: 0.3s; }
nav ul li a:hover { color: var(--accent); }

/* Nuevos estilos para la firma */
.logo-firma {
    display: flex;
    align-items: center;
}

.logo-firma img {
    height: 80px; /* Ajustá este número para agrandar o achicar la firma */
    width: auto;   /* Esto mantiene la proporción de la imagen */
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* ACÁ APLICAMOS EL NUEVO FONDO imagenbanner.png CON TEXTURA PINTADA Y FILTRO PARA LEER EL TEXTO */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('imagenbanner.png') center/cover no-repeat;
}

.hero h1 { 
    font-size: 6.5rem; /* La agrandamos un poco más para que tenga un impacto tremendo */
    font-family: 'Caveat Brush', cursive; /* Aplicamos el estilo de pincelada */
    line-height: 1.1;
    margin-bottom: 15px; 
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); /* Le da un poquito de sombra negra atrás para que se separe bien del fondo */
}

.hero p { font-size: 1.5rem; max-width: 600px; margin: 0 auto 30px; color: var(--text-muted); }

.btn {
    padding: 15px 40px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
}

.btn:hover { transform: scale(1.05); box-shadow: 0 0 20px var(--accent); }

.bg-dark { background-color: var(--bg-light); }

/* ACÁ ESTÁ LA CORRECCIÓN DE LA GRILLA (USANDO FLEXBOX) */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Esto garantiza que el bloque entero siempre esté centrado */
    gap: 40px; /* Un poco más de aire entre tarjeta y tarjeta */
}

/* Tarjetas de Arte con fondo verde */
.art-card {
    background: var(--card-green);
    padding: 12px; /* Achicamos apenitas el relleno interno */
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    width: 100%;
    max-width: 340px; /* Lo bajamos de 420px a 340px para que la foto no sea tan alta */
}

/* Estilo del título sobre el verde flúor */
.art-card p { 
    margin-top: 10px; /* Le quitamos un poco de margen */
    font-size: 1.1rem; 
    color: #121212; 
    font-weight: 700; 
    letter-spacing: 0.5px;
}

.art-card:hover { transform: translateY(-5px); }

blockquote {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--accent);
    border-left: 4px solid var(--accent);
    padding-left: 20px;
    margin: 20px 0;
}

footer { text-align: center; padding: 60px 10%; background: #000; }
footer a { color: var(--accent); text-decoration: none; }

/* Obliga a la imagen a adaptarse a la tarjeta sin desbordarse */
.art-card img, .art-card video { 
    width: 100%; /* Le dice a la foto que ocupe el 100% del ancho de su tarjeta, ni un píxel más */
    aspect-ratio: 1 / 1; /* La recorta en forma de cuadrado perfecto */
    object-fit: cover; /* Evita que la foto se estire o se deforme al hacerse cuadrada */
    border-radius: 5px; /* Le redondea apenitas las puntas */
    display: block;
}

/* Banner premium con las líneas de Ángel (Mantenemos esta clase por si la usás en otro lado, pero .hero es la principal) */
.banner-dimensiones {
    background-image: url('imagenbanner2.png');
    background-repeat: no-repeat;
    background-size: cover; /* Hace que la imagen cubra todo el cartel */
    background-position: center;
    padding: 60px 40px; /* Le da altura y cuerpo al banner */
    text-align: center;
    border-radius: 12px; /* Bordes redondeados para que haga juego con las tarjetas */
    margin-bottom: 40px; /* Espacio antes de que arranquen las obras */
}
/* =========================================
   EFECTO LIGHTBOX (IMAGEN A PANTALLA COMPLETA)
   ========================================= */

/* Cursor de manito sobre las imágenes para indicar que se pueden tocar */
.art-card img {
    cursor: pointer;
}

/* El fondo negro que cubre toda la pantalla */
.lightbox {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 9999; /* Por encima de todo */
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92); /* Fondo bien oscuro */
}

/* La imagen en grande */
.lightbox-contenido {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 800px; /* Tamaño máximo para que no se deforme */
    max-height: 85vh; /* Se adapta a la altura del monitor/celular */
    object-fit: contain; /* Muestra la imagen completa sin recortar */
    border-radius: 10px;
    box-shadow: 0 0 30px var(--accent); /* Resplandor fucsia alrededor de la obra */
}

/* El botón de cerrar (la X) */
.cerrar {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.cerrar:hover,
.cerrar:focus {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}