/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Description: Child theme para sitio político
*/

/* Tus estilos personalizados aquí */

.site-header .custom-logo {
    max-width: 180px;
    height: auto;
}

/* ── Raleway @font-face ── */
@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Header fondo morado ── */
.site-header {
    background-color: #5C3592 !important;
}

/* ── Logo: forzar versión cian/blanco ── */
.site-header .custom-logo {
    max-width: 180px;
    height: auto;
}

/* ── Menú: links en blanco con Raleway ── */
.site-header .main-navigation a,
.site-header nav a {
    color: #ffffff !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    letter-spacing: 0.5px;
}

/* ── Hover: cian ── */
.site-header .main-navigation a:hover,
.site-header nav a:hover {
    color: #4DC3E8 !important;
}

/* ── Link activo (página actual) ── */
.site-header .main-navigation .current-menu-item > a,
.site-header nav .current-menu-item > a {
    color: #4DC3E8 !important;
    font-weight: 700 !important;
}

/* ── Transición suave en hover ── */
.site-header .main-navigation a,
.site-header nav a {
    transition: color 0.3s ease !important;
}

/* ── Hamburguesa: ícono en blanco ── */
.site-navigation-toggle-holder .site-navigation-toggle {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.4) !important;
    background: transparent !important;
}

.site-navigation-toggle-icon {
    color: #ffffff !important;
}

/* Líneas SVG del ícono */
.site-navigation-toggle-icon svg,
.site-navigation-toggle-icon svg path,
.site-navigation-toggle-icon svg rect,
.site-navigation-toggle-icon svg line {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ── Menú móvil desplegado ── */
.site-navigation-dropdown {
    background-color: #5C3592 !important;
}

.site-navigation-dropdown a {
    color: #ffffff !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.site-navigation-dropdown a:hover {
    color: #4DC3E8 !important;
}

/* ── Logo más grande en móvil ── */
@media (max-width: 768px) {
    .site-header .custom-logo-link img,
    .site-header .custom-logo-link .custom-logo,
    .site-header a.custom-logo-link img {
        max-width: 160px !important;
        width: 160px !important;
        height: auto !important;
    }
}

/* ── Menú móvil: fondo morado cuando está abierto ── */
.site-navigation-dropdown[aria-hidden="false"],
.site-navigation-dropdown.show {
    background-color: #5C3592 !important;
}

.site-navigation-dropdown[aria-hidden="false"] ul,
.site-navigation-dropdown[aria-hidden="false"] li,
.site-navigation-dropdown.show ul,
.site-navigation-dropdown.show li {
    background-color: #5C3592 !important;
}

.site-navigation-dropdown[aria-hidden="false"] a,
.site-navigation-dropdown.show a {
    color: #ffffff !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.site-navigation-dropdown[aria-hidden="false"] a:hover,
.site-navigation-dropdown.show a:hover {
    color: #4DC3E8 !important;
}

/* ── Fondo morado en menú móvil — sobreescribe tema ── */
.site-navigation-dropdown ul.menu,
.site-navigation-dropdown ul.menu li {
    background-color: #5C3592 !important;
    background: #5C3592 !important;
}

.site-navigation-dropdown ul.menu a {
    color: #ffffff !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.site-navigation-dropdown ul.menu a:hover {
    color: #4DC3E8 !important;
}

/* ── Separadores entre items ── */
.site-navigation-dropdown ul.menu li {
    border-color: rgba(255,255,255,0.15) !important;
}

/* ── Sobreescribe background en el <a> del menú móvil ── */
.site-navigation-dropdown ul.menu li a {
    background: #5C3592 !important;
    background-color: #5C3592 !important;
    color: #ffffff !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.site-navigation-dropdown ul.menu li a:hover {
    background: #4a2d82 !important;
    color: #4DC3E8 !important;
}

/* Grid de Boletines */
.grid-boletines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.tarjeta-boletin {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tarjeta-imagen img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.tarjeta-contenido {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tarjeta-contenido h3 {
    font-size: 1.1rem;
    color: #5C3592;
    margin-bottom: 10px;
}

.tarjeta-resumen {
    font-size: 0.9rem;
    color: #555;
    flex: 1;
    margin-bottom: 16px;
}

.tarjeta-botones {
    display: flex;
    gap: 10px;
}

.btn-ver-mas, .btn-pdf {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.btn-ver-mas {
    background: #5C3592;
    color: #fff;
}

.btn-pdf {
    background: #4DC3E8;
    color: #fff;
}

.btn-ver-mas:hover {
    background: #4a2a7a;
    color: #fff;
}

.btn-pdf:hover {
    background: #35a8d0;
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .grid-boletines {
        grid-template-columns: 1fr;
    }
}