/* --- 1. VARIABLES Y BASE --- */
:root {
    --color-fondo: #F5EEE6;
    --color-dorado: #B0926A;
    --color-texto: #4A4A4A;
    --color-blanco: #FFFFFF;
    --fuente-titulos: 'Playfair Display', serif;
    --fuente-cuerpo: 'Montserrat', sans-serif;
}

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

body {
    background-color: var(--color-blanco);
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    overflow-x: hidden;
}

/* --- 2. BANNER (EL MOTOR DEL DISEÑO) --- */
.banner-coleccion {
    height: 100vh;
    /* CORRECCIÓN: Se agregó la coma después del paréntesis del gradient */
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../img/fotodefondo.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-contenido {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
    padding: 80px 0;
    height: 100%;
    width: 100%;
    text-align: center;
    color: white;
}

/* --- 3. MARCA Y TEXTOS --- */
.marca-texto {
    font-family: var(--fuente-titulos);
    font-size: 2.5rem;
    color: var(--color-dorado);
    text-transform: uppercase;
    letter-spacing: 8px;
    font-weight: bold;
}

.info-central {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-central h1 {
    font-family: var(--fuente-titulos);
    font-size: 3.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 5px;
margin-bottom: 10px;
    color: #FFFFFF
}

.info-central p {
   font-family: var(--fuente-cuerpo);
    font-size: 1.2rem;
    letter-spacing: 3px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
}

/* --- 4. BOTÓN ESTILO MONITOR --- */
.btn-explorar {
    margin-top: 35px;
    padding: 15px 40px;
    background: linear-gradient(to right, #B0926A, #8E7356); /* Dorado a Marrón */
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 2px;
    border-radius: 2px; /* Casi cuadrado es más elegante */
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-explorar:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.3);
    filter: brightness(1.1);
}
/* --- GRID DE PRODUCTOS --- */
.contenedor-productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crea columnas automáticas */
    gap: 30px;
    padding: 60px 10%;
    background-color: var(--color-blanco);
}

.producto-card {
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s ease;
}

/* TAMAÑO DE FOTO UNIFICADO */
.producto-imagen {
    width: 100%;
    height: 400px; /* Altura fija para todas las fotos */
    overflow: hidden;
    margin-bottom: 15px;
}

.producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CORTE AUTOMÁTICO: Hace que todas las fotos encajen sin deformarse */
    object-position: center;
}

/* TEXTOS UNIFICADOS */
.producto-info h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    color: var(--color-texto);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.producto-info .descripcion {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 10px;
    height: 40px; /* Alinea las descripciones si una es más larga que otra */
}

.producto-info .precio {
    font-family: var(--fuente-cuerpo);
    font-weight: bold;
    color: var(--color-dorado);
    font-size: 1.2rem;
    margin-bottom: 15px;
}
/* Agrega esto a tu CSS para la etiqueta de largo */
.tag-largo {
    font-size: 0.7rem;
    background: var(--color-dorado);
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 5px;
}

/* BOTÓN DE PRODUCTO */
.btn-comprar {
    width: 100%;
    padding: 10px;
    background-color: var(--color-texto);
    color: white;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s;
}
<a href="https://wa.me/595981760380?text=Hola%20Estilo%20DaDa!%20Me%20interesa%20el%20Vestido%20Danna" 
   target="_blank" 
   class="btn-comprar">
   Consultar por WhatsApp
</a>
}