/*
    Template:       camille
    Theme Name:     Camille Child
    Theme URI:      http://themeforest.net/user/LA-Studio/portfolio?ref=LA-Studio
    Author:         LA Studio
    Author URI:     http://themeforest.net/user/LA-Studio?ref=LA-Studio
    Description:    Camille - Multi-Concept WordPress Theme
    Version:        1.0
    Tags:           one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, translation-ready
    License: 		GNU General Public License
	License URI: 	licence/GPL.txt
    Text Domain:    camille-child
    Domain Path:    /languages/
*/
/*
==========================================================================
// --- INICIO DE PERSONALIZACIÓN MARCA MARIACHI CIELITO LINDO ---
==========================================================================
*/

/* --- MANUAL DE IDENTIDAD DE MARCA --- */
/* --- MANUAL DE IDENTIDAD DE MARCA --- */
:root {
    /* Paleta de Colores */
    --negro-charro: #000000;
    --oro-fiesta: #E1AF27;
    --rojo-pasion: #C51E24;
    --blanco-puro: #FFFFFF;
    --naranja-mariachi: #F37924;
    --vino-serenata: #c51e24; /* <-- ¡CORRIGE ESTA LÍNEA CON EL NUEVO CÓDIGO! */
    --crema-papiro: #F5EACF;
    /* Tipografía */
    --font-titulares: 'Cinzel', serif;
    --font-cuerpo: 'Montserrat', sans-serif;
}

/* --- FIN DEL MANUAL DE IDENTIDAD --- */


/* --- ESTILOS GLOBALES BASE --- */
body {
    background-color: var(--oro-fiesta) !important; /* CAMBIO: ¡Fondo dorado y vibrante! */
    color: var(--negro-charro) !important;            /* CAMBIO: Texto negro para contraste */
    font-family: var(--font-cuerpo) !important;
}

/* Estilos para todos los títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titulares) !important;
    color: var(--negro-charro) !important;            /* CAMBIO: Títulos en negro para leerse sobre el dorado */
}

/* Estilos para los enlaces */
a {
    color: var(--negro-charro) !important;            /* CAMBIO: Enlaces en negro para legibilidad */
    text-decoration: underline;                     /* AÑADIDO: Subrayado para identificar el enlace */
}

a:hover {
    color: var(--rojo-pasion) !important;             /* CAMBIO: Al pasar el ratón, el enlace se vuelve rojo pasión */
}

/* --- FIN DE ESTILOS GLOBALES --- */
/* --- ESTILOS PARA EL FOOTER (DEGRADADO ROJO A NARANJA) - V 2 --- */

/* 1. Aplicamos el degradado RADIAL a las dos secciones internas */
.footer-top,
.footer-bottom {
    /* Fallback por si un navegador muy antiguo no soporta degradados */
    background-color: var(--rojo-pasion) !important;
    
    /* ¡La nueva magia! Un degradado RADIAL */
    /* Empieza en el centro con naranja y se expande a rojo en los bordes */
    background-image: radial-gradient(circle at center, var(--naranja-mariachi), var(--rojo-pasion)) !important;
}

/* 2. Mantenemos el texto en blanco para un contraste perfecto */
#colophon,
#colophon p,
#colophon h3,
#colophon a,
#colophon li {
    color: var(--blanco-puro) !important;
}

/* 3. El efecto hover se mantiene, pero podemos hacerlo más sutil si queremos */
#colophon a:hover {
    color: var(--oro-fiesta) !important;
}

/* 4. Mantenemos el reseteo del borde */
.footer-top {
    border: none !important;
}
/* --- FIN ESTILOS FOOTER --- */

/* --- SOLUCIÓN FINAL HEADER CAMILLE --- */
.header-main {
    background-color: var(--vino-serenata) !important; /* CAMBIADO */
}

/* 1. Atacamos directamente al span '.mm-text' */
.header-main .main-navigation ul > li > a span.mm-text,
.mm-text {
    color: var(--blanco-puro) !important;
}

/* 2. Color cuando pasas el mouse (Hover) sobre ese texto específico */
.header-main .main-navigation ul > li > a:hover span.mm-text,
.header-main .main-navigation ul > li.current-menu-item > a span.mm-text,
.header-main .main-navigation ul > li:hover > a span.mm-text {
    color: var(--oro-fiesta) !important;
}

/* 3. Asegurarnos que el contenedor no fuerce otro color */
.header-main .main-navigation ul > li > a {
    color: var(--blanco-puro) !important;
}

/* 4. Si hay íconos junto al texto (ej. flechita hacia abajo) */
.header-main .main-navigation ul > li > a i, 
.header-main .main-navigation ul > li > a .k-icon {
    color: var(--blanco-puro) !important;
}

/* Hover para los íconos */
.header-main .main-navigation ul > li:hover > a i {
    color: var(--oro-fiesta) !important;
}
/* --- FIN ESTILOS HEADER ESCRITORIO --- */

/* 2. Aplicamos el fondo VINO a la sección del título */
#section_page_header {
    background-color: var(--vino-serenata) !important; /* CAMBIADO */
}

/* El título de la página (ej. "Galería", "Videos") */
#section_page_header h1 {
    color: var(--oro-fiesta) !important;
}

/* El "camino de migas" (Home / Videos) */
#section_page_header .la-breadcrumb-item-link,
#section_page_header .la-breadcrumb-item-sep,
#section_page_header .la-breadcrumb-item-target {
    color: var(--blanco-puro) !important;
}


/* --- AJUSTES DE COLOR PARA ICONOS Y BOTONES --- */

/* Color del icono de hamburguesa */
.header-main .la_com_action--primary-menu .dl-icon-menu1 {
    color: var(--oro-fiesta) !important;
}

/* Color del texto del botón flotante */
#callnowbutton span {
    color: var(--oro-fiesta) !important;
}

/* --- FIN DE AJUSTES --- */
/* --- ESTILOS PARA EL MENÚ MÓVIL DESPLEGABLE (SISTEMA DL-MENU) --- */

/* 1. Cambiamos el color de fondo del contenedor del menú */
/* Apuntamos directamente a la lista UL cuando está abierta */
.dl-menuwrapper ul.dl-menuopen {
    background-color: var(--oro-fiesta) !important;
}

/* 2. Cambiamos el color de los enlaces principales y de los submenús */
.dl-menuwrapper ul li a {
    color: var(--vino-serenata) !important;
    font-family: var(--font-titulares) !important;
    font-size: 1.2rem !important;
}

/* 3. Estilizamos el efecto hover, la página activa y el botón "Volver" */
.dl-menuwrapper ul li a:hover,
.dl-menuwrapper ul li.current-menu-item > a,
.dl-menuwrapper ul.dl-submenu li.dl-back a {
    color: var(--blanco-puro) !important;
}

/* 4. [Opcional pero recomendado] Quitar sombras o bordes que el tema pueda tener */
.dl-menuwrapper ul.dl-menuopen,
.dl-menuwrapper ul li a {
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* --- FIN DE ESTILOS MENÚ MÓVIL --- */



/*
/*
/* ==========================================================================
// --- SECCIÓN HERO ANIMADA DE 2 COLUMNAS (VERSIÓN CORREGIDA) ---
==========================================================================
*/

/* ---- 1. EL CONTENEDOR PRINCIPAL (FLEXBOX) ---- */
.hero-animado-contenedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background-color: var(--oro-fiesta);
    min-height: 80vh;
}

/* ---- 2. ESTILO DE LAS COLUMNAS ---- */
.hero-animado-contenedor .hero-columna {
    flex: 1;
    min-width: 320px;
    padding: 20px;
}

/* ---- 3. ESTILOS PARA LA COLUMNA DEL LOGO ---- */
.hero-animado-contenedor .columna-logo .logo-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.hero-animado-contenedor .columna-logo .logo-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0; /* Todas las imágenes empiezan invisibles. ¡Esto es correcto! */
}

/* ---- 4. LA ANIMACIÓN DEL LOGO (¡CORREGIDO CON MAYOR ESPECIFICIDAD!) ---- */
/* Al añadir .hero-animado-contenedor al principio, nos aseguramos de que estas reglas ganen */

.hero-animado-contenedor .columna-logo #logo-base,
.hero-animado-contenedor .columna-logo #logo-greca { animation: rodarDesdeIzquierda 1.8s cubic-bezier(0.5, 0, 0.1, 1) forwards; }

.hero-animado-contenedor .columna-logo #logo-sombrero { animation: formarDeParticulas 1.5s ease-out 1.8s forwards; }
.hero-animado-contenedor .columna-logo #logo-mariachi { animation: entradaReboteZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1) 3.0s forwards; }
.hero-animado-contenedor .columna-logo #logo-cielito { animation: entradaReboteZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1) 3.4s forwards; }
.hero-animado-contenedor .columna-logo #logo-coronas { animation: entradaDerechaRebote 1.1s cubic-bezier(0.25, 1, 0.5, 1) 4.3s forwards; }
.hero-animado-contenedor .columna-logo #logo-chi { animation: penduloElegante 2s ease-in-out 4.5s forwards; }
.hero-animado-contenedor .columna-logo #logo-completo { animation: entradaReboteZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1) 6.6s forwards; }


/*
/*
==========================================================================
// --- ANIMACIÓN "BANDERA DESPLEGABLE" (VERSIÓN FINAL BALANCEADA) ---
==========================================================================
*/

.bandera-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    background-color: var(--oro-fiesta);
    max-width: 900px;
    margin: 0 auto;
}

/* ---- 1. ANIMACIÓN DEL LOGO ---- */
.logo-container-bandera {
    position: relative;
    width: 80vw;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}
.logo-container-bandera img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: auto;
    opacity: 0;
}
.bandera-hero-container #logo-base, .bandera-hero-container #logo-greca { animation: rodarDesdeIzquierda 1.8s cubic-bezier(0.5, 0, 0.1, 1) forwards; }
.bandera-hero-container #logo-sombrero { animation: formarDeParticulas 1.5s ease-out 1.8s forwards; }
.bandera-hero-container #logo-mariachi { animation: entradaReboteZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1) 3.0s forwards; }
.bandera-hero-container #logo-cielito { animation: entradaReboteZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1) 3.4s forwards; }
.bandera-hero-container #logo-coronas { animation: entradaDerechaRebote 1.1s cubic-bezier(0.25, 1, 0.5, 1) 4.3s forwards; }
.bandera-hero-container #logo-chi { animation: penduloElegante 2s ease-in-out 4.5s forwards; }
.bandera-hero-container #logo-completo { animation: entradaReboteZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1) 6.6s forwards; }
@keyframes rodarDesdeIzquierda { from { opacity: 0; transform: translateX(-100%) rotate(-360deg); } 70% { transform: translateX(0) rotate(15deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } }
@keyframes formarDeParticulas { from { opacity: 0; filter: blur(25px); transform: scale(1.2); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes entradaReboteZoom { 0% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes entradaDerechaRebote { 0% { opacity: 0; transform: translateX(100px); } 80% { transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes penduloElegante { 0% { opacity: 0; transform: translateY(-50px); } 30% { opacity: 1; transform: translateY(0) rotate(15deg); } 50% { transform: translateY(0) rotate(-10deg); } 70% { transform: translateY(0) rotate(5deg); } 90% { transform: translateY(0) rotate(-2deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }

/* ---- 2. ANIMACIÓN DE LA BANDERA ---- */
.bandera-wrapper {
    width: 100%;
    margin-top: -6.5rem;
}
.bandera-desplegable {
    width: 0%;
    max-height: 0px;
    margin: 0 auto;
    background-color: var(--rojo-pasion);
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.5s ease;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 
        crecerLineaCorregido 1s cubic-bezier(0.8, 0, 0.2, 1) 3s forwards,
        desplegarBanderaCorregido 1s cubic-bezier(0.8, 0, 0.2, 1) 4s forwards;
}
@keyframes crecerLineaCorregido {
    from { width: 0%; max-height: 6px; }
    to { width: 90%; max-height: 6px; }
}
@keyframes desplegarBanderaCorregido {
    from { max-height: 6px; }
    to { max-height: 300px; }
}

/* ---- 3. CONTENIDO DENTRO DE LA BANDERA ---- */
.bandera-contenido {
    width: 100%;
    padding: 1rem 2rem;
    text-align: center;
    opacity: 0;
    animation: aparecerTextoBandera 0.8s ease-in 4.5s forwards;

    /* CAMBIO 1: Convertimos en Flexbox para centrar todo el texto */
    display: flex;
    flex-direction: column;
    align-items: center;
}
@keyframes aparecerTextoBandera {
    to { opacity: 1; }
}
.bandera-contenido h3 {
    color: var(--crema-papiro) !important;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin: 0;
}
.bandera-contenido h1 {
    color: var(--blanco-puro) !important;
    font-size: clamp(2.5rem, 6vw, 4rem);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    line-height: 1.1;
    margin: 0.2em 0 0 0;
}

/* ---- AJUSTES PARA VISTA MÓVIL ---- */
@media (max-width: 767px) {
    @keyframes crecerLineaCorregido {
        from { width: 0%; max-height: 6px; }
        to { width: 95%; max-height: 6px; }
    }
    .bandera-contenido {
        padding: 1rem;
    }
    .bandera-contenido h1 {
        font-size: 2.2rem !important;
    }
}

/* CAMBIO 2: Aumentamos el padding vertical SOLO en vista de PC */
@media (min-width: 768px) {
    .bandera-contenido {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}
/*
/*
==========================================================================
// --- 6. EFECTO KARAOKE PARA EL ESLOGAN (VERSIÓN CORREGIDA) ---
==========================================================================
*/

.eslogan-karaoke {
    font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
    color: var(--crema-papiro) !important;
    min-height: 1.5em;
    /* CAMBIO: Reducimos el margen superior para juntar las líneas */
    margin-top: 0.5em !important; 
    
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* El JS añadirá esta clase para hacerlo visible */
.eslogan-karaoke.visible {
    opacity: 1;
}

/* El resto del código para la animación palabra por palabra es igual */
.palabra-karaoke {
    position: relative;
    display: inline-block;
    white-space: pre;
}

.palabra-karaoke::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    color: var(--oro-fiesta);
    overflow: hidden;
    transition: width 0.3s ease-out;
}

.palabra-karaoke.resaltada::after {
    width: 100%;
}

/* ---- 6. ANIMACIÓN PARA EL TEXTO CAMBIANTE (Y LOS KEYFRAMES DEL LOGO) ---- */
/* Los keyframes no se han modificado, siguen siendo correctos */
@keyframes rodarDesdeIzquierda { from { opacity: 0; transform: translateX(-100%) rotate(-360deg); } 70% { transform: translateX(0) rotate(15deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } }
@keyframes formarDeParticulas { from { opacity: 0; filter: blur(25px); transform: scale(1.2); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes entradaReboteZoom { 0% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes entradaDerechaRebote { 0% { opacity: 0; transform: translateX(100px); } 80% { transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes penduloElegante { 0% { opacity: 0; transform: translateY(-50px); } 30% { opacity: 1; transform: translateY(0) rotate(15deg); } 50% { transform: translateY(0) rotate(-10deg); } 70% { transform: translateY(0) rotate(5deg); } 90% { transform: translateY(0) rotate(-2deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(20px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}
 
/*
==========================================================================
// --- OCULTAR MENSAJE DE ERROR DEL PLUGIN 'MEMBERS' ---
==========================================================================
*/

/* Apuntamos al contenedor del mensaje de error que muestra el plugin
   y le decimos que no ocupe espacio y sea completamente invisible. */

.members-access-error {
    display: none !important;
}

/*
============================================================
// --- SOLUCIÓN FINALÍSIMA (TU MÉTODO, EN EL LUGAR CORRECTO) ---
============================================================
*/

/*
 * Esta es la regla GENERAL que tú descubriste que funciona,
 * con los !important que tú añadiste.
 * La única diferencia es que la estamos 'encerrando' en una
 * regla de @media para que SOLO se active en móviles.
*/
@media (max-width: 1023px) {

    .container {
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

}

/* --- SOLUCIÓN FINAL ESCRITORIO (Full Width + Logo Despegado) --- */

@media (min-width: 1200px) {

    /* 1. MANTENER: Esto asegura que el fondo Vino ocupe toda la pantalla (Sin bordes blancos) */
    #masthead .container,
    .header-main .container {
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        
        /* Cero padding aquí para que el COLOR llegue al borde */
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* 2. NUEVO: Atacamos directamente al div del logo que me enviaste */
    /* Lo empujamos 40px desde la izquierda */
    .header-main .site-branding {
        padding-left: 40px !important; 
        
        /* Aseguramos que la caja tenga el tamaño correcto para aceptar el padding */
        box-sizing: content-box !important; 
    }

    /* 3. NUEVO: Empujamos el MENÚ o CONTENIDO DERECHO hacia adentro */
    /* Apuntamos a la navegación principal y al contenedor de iconos/carrito */
    .header-main .main-navigation,
    .header-main .la_com_action--primary-menu, 
    .header-main .wc-cart-count,
    .header-main div[class*="right"] { /* Intenta atrapar cualquier caja derecha */
        padding-right: 40px !important;
    }
}