@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Dancing Script");
@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900");


/* ========================================= */
/* ESTILOS GENERALES Y FONDO                 */
/* ========================================= */
body {
    font-family: "Merriweather", Georgia, serif;
    font-weight: 600;
    margin: 0;
    padding: 0;
    color: #CC9999;
    line-height: 1.6;
    background-color: #330000;
    /* CAMBIA 'fondo.jpg' POR EL NOMBRE DE TU IMAGEN */
    background-image: url("https://www.elvira-cardenas.com/images/overlay.png"), linear-gradient(0deg, rgba(51, 0, 0, 0.5), rgba(51, 0, 0, 0.5)), url("https://www.elvira-cardenas.com/images/bg.png");
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a { text-decoration: none; color: #CC9999; }

/* ========================================= */
/* TÍTULOS                                   */
/* ========================================= */
h1 { font-size: 26px; color: #CC9999; margin-top: 0; margin-bottom: 20px; }
h2 { font-size: 24px; color: #CC9999; border-bottom: 1px solid #CC9999; padding-bottom: 10px; margin-top: 0; margin-bottom: 20px; font-weight: 600; }
h3 { font-size: 18px; color: #CC9999; font-weight: 600; margin-top: 0; margin-bottom: 10px; }

/* ========================================= */
/* CABECERA (TRANSPARENTE CON SOMBRAS)       */
/* ========================================= */
header { 
    background: transparent; 
    color: #CC9999; 
    padding: 25px 20px; 
    text-align: center; 
}
.logo-area { margin-bottom: 15px; }
.logo { font-family: dancing script, Sans-serif; font-size: 50px; font-weight: 900; margin-bottom: 8px; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
.slogan { font-size: 16px; color: #CC9999; font-style: italic; font-weight: 600; max-width: 600px; margin: 0 auto; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
nav { margin-top: 15px; padding-top: 15px; border-top: 0px solid rgba(255,255,255,0.2); }
nav a { color: #CC9999; margin: 0 15px; font-size: 16px; font-weight: 600; transition: color 0.3s; display: inline-block; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
nav a:hover { color: #f39c12; }

/* ========================================= */
/* CONTENIDO PRINCIPAL (BLANCO SEMI-TRANSP.) */
/* ========================================= */
.container { 
    max-width: 1000px; 
    margin: auto; 
    padding: 20px; 
    background: transparent; 
    border-radius: 8px; 
    box-shadow: 0 0 15px rgba(0,0,0,0.1); 
}

.section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 0px solid #eee; }
.section:last-child { border-bottom: none; }

/* Hero (Inicio) */
.hero { background: transparent; padding: 40px; text-align: center; border-radius: 8px; margin-top: 20px; }

/* ========================================= */
/* BOTONES                                   */
/* ========================================= */
.btn { background: #4A4545; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; display: inline-block; font-size: 16px; transition: background 0.3s; font-family: "Merriweather", Georgia, serif; font-weight: 600; }
.btn:hover { background: #4A1010; }
.btn-success { background: #4A4545; }
.btn-success:hover { background: #173B0C; }
.btn-danger { background: #dc3545; padding: 5px 10px; font-size: 16px; }
.btn-danger:hover { background: #c82333; }

/* ========================================= */
/* TIENDA Y CARRITO                          */
/* ========================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.product { background: transparent; border: 1px solid #CC9999; padding: 15px 15px 15px 15px; text-align: center; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s; }
.product:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* Miniaturas de Partituras/Productos */
.product-img {
    width: 50%; 
    height: auto; 
    object-fit: cover; /* Rellena el espacio sin deformar la foto */
    border-radius: 8px 8px 0 0; 
    margin-bottom: 10px;
}

.cart { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6; }
.cart-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; padding: 10px 0; }

/* ========================================= */
/* FORMULARIOS Y NOTAS                       */
/* ========================================= */
.resumen { background: #f9f9f9; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #eee; }
.note { background: #fff3cd; border: 1px solid #ffeeba; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; }
.form-group textarea { resize: vertical; }

/* Éxito */
.success-page { text-align: center; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.success-icon { color: #28a745; font-size: 80px; }

/* ========================================= */
/* BOTÓN WHATSAPP                            */
/* ========================================= */
.whatsapp-float { 
    position: fixed; width: 50px; height: 50px; bottom: 100px; right: 25px; 
    background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; 
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3); z-index: 100; display: flex; 
    align-items: center; justify-content: center; text-decoration: none; transition: transform 0.3s; 
}
.whatsapp-float:hover { transform: scale(1.1); color: white; }
.whatsapp-float img { width: 35px; height: 35px; }

/* ========================================= */
/* BOTÓN FLECHA ARRIBA                       */
/* ========================================= */
#scrollToTopBtn { 
    display: none; position: fixed; bottom: 100px; left: 25px; width: 50px; height: 50px; 
    z-index: 99; border: none; outline: none; background-color: transparent; color: #CC9999; font-weight: 900;
    cursor: pointer; padding: 0; border-radius: 50%; font-size: 44pt;
}
#scrollToTopBtn:hover { background-color: transparent; transform: scale(1.1); }

/* ========================================= */
/* BANNER DE COOKIES                         */
/* ========================================= */
.cookie-banner { 
    position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(44, 62, 80, 0.95); 
    color: white; padding: 20px; box-sizing: border-box; z-index: 9999; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2); gap: 20px; flex-wrap: wrap; 
    justify-content: center; align-items: center; text-align: center; display: none; 
}
.cookie-banner p { margin: 0; font-size: 14px; line-height: 1.5; flex: 1; min-width: 250px; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
.cookie-accept-btn { background: #f39c12; color: white; border: none; padding: 10px 25px; border-radius: 5px; cursor: pointer; font-size: 14px; white-space: nowrap; transition: background 0.3s; font-weight: bold; }
.cookie-accept-btn:hover { background: #e67e22; }

/* ========================================= */
/* FOOTER (TRANSPARENTE)                     */
/* ========================================= */
footer { font-size: 14px; background: transparent; color: #CC9999; text-align: center; padding: 20px; margin-top: 40px; }
footer p { font-size: 14px; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }

/* ========================================= */
/* COLUMNA FOTO + TEXTO (ÜBER MICH)          */
/* ========================================= */
.fila-otra {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #CC9999;
    align-items: center;
}
.fila-otra .columna-img {
    flex: 0 0 40%; /* Ocupa el 40% en PC */
}
.fila-otra .columna-img img {
    width: 100%;
    height: 350px; /* Altura fija para que todas las fotos midan lo mismo en PC */
    object-fit: cover; /* Rellena el espacio sin deformar la foto */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block;
}
.fila-otra .columna-texto {
    flex: 1; /* Ocupa el resto en PC */
}
/* Clase para poner la foto a la derecha en PC */
.fila-derecha .columna-img {
    order: 2;
}
.fila-derecha .columna-texto {
    order: 1;
}

/* ========================================= */
/* DISEÑO RESPONSIVE (MÓVILES Y TABLETS)     */
/* ========================================= */
@media (max-width: 768px) {
    .fila-otra .columna-img {
        flex: 0 0 100%; /* La foto ocupa el 100% en el móvil */
        order: -1 !important; /* La foto SIEMPRE arriba */
    }
    .fila-otra .columna-texto {
        flex: 0 0 100%; /* El texto ocupa el 100% en el móvil */
        order: 1 !important; /* El texto SIEMPRE abajo */
    }
    /* Ajuste de altura para las fotos en el móvil */
    .fila-otra .columna-img img {
        height: 250px; /* Más baja en el móvil para que no ocupe toda la pantalla */
    }
}
/* ========================================= */
/* MODAL PARA VER IMÁGENES EN GRANDE         */
/* ========================================= */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 10000; /* Por encima de todo (cookies, whatsapp, etc) */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9); /* Fondo negro semi-transparente */
}

/* Imagen dentro del modal */
.modal-contenido {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh; /* Ocupa como máximo el 80% de la altura de la pantalla */
    object-fit: contain;
    animation-name: zoomFoto;
    animation-duration: 0.3s;
}

@keyframes zoomFoto {
    from {transform: scale(0.8)}
    to {transform: scale(1)}
}

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

.modal-cerrar:hover,
.modal-cerrar:focus {
    color: #f39c12; /* Naranja al pasar el ratón */
    text-decoration: none;
}

/* ========================================= */
/* Pastel                                    */
/* ========================================= */
.icono-pastel {
    /* Truco mágico para cambiar un SVG negro a otro color */
    filter: invert(55%) sepia(12%) saturate(1000%) hue-rotate(311deg) brightness(130%) contrast(60%);
    width: 20px; height: 20px; fill: #f39c12; flex-shrink: 0; align-items: center;
}