/*
Theme Name: TheGem Elementor Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Theme URI: http://codex-themes.com/thegem/
Author URI: http://codex-themes.com/thegem/
Template: thegem-elementor
Version: 1.0
Tags: one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, dark, light
License: GNU General Public License
License URI: license.txt
*/

/* CUSTOM 2026: webfont Riforma LL (Lineto, licencia web autohospedada).
   Archivos en css/Fonts/. OJO: la licencia lista www.scimagomedia.com —
   verificar cobertura del dominio final antes de produccion. */
@font-face {
    font-family: 'Riforma LL';
    src: url('css/Fonts/RiformaLLWeb-Regular.woff2') format('woff2'),
         url('css/Fonts/RiformaLLWeb-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Riforma LL';
    src: url('css/Fonts/RiformaLLWeb-Medium.woff2') format('woff2'),
         url('css/Fonts/RiformaLLWeb-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



/* CUSTOM 2026: ocultar carrito WooCommerce del header (el plugin sigue activo
   porque Libros depende de él; solo se oculta el icono en todas las variantes:
   menú escritorio, móvil y hamburguesa) */
#site-header li.menu-item-cart,
#primary-menu li.menu-item-cart,
.mobile-cart,
.mobile-minicart-overlay,
.hamburger-minicart {
    display: none !important;
}

aside.multisitebar .siteslinks a img{
    vertical-align: top;
}
#primary-menu li#menu-item-25080{
    visibility: hidden;
}
#primary-navigation.responsive ul li#menu-item-25080{
    display: none;

}
.header-style-4 #primary-menu.no-responsive>li>a{
    padding: 0 7px;
    text-transform: none;
}
.main-content.page-content1 .block-content{
    width: 1200px;
    max-width: 100%;
    margin: auto;
}
.block-content.content-plus-categories{ 
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}
/*.archive.category .content-plus-categories .panel{
    border: 1px solid aqua;
}*/
.archive.category .content-plus-categories .container,
.single-post .content-plus-categories .container{
    
    margin-right: 0;
    margin-left: 0;
}

.content-plus-categories .content-categories{
    /*border:1px solid blue;*/
    background: #f7f7f7;
    padding: 0 21px;
    
}
.content-plus-categories .content-categories ul{
    list-style: none;
    padding: 0;
    font-size: 18px;
    line-height: 180%;
    word-break: break-word;
    width: 300px;
}

/*FORM*/

.wpcf7 .form-check{
    margin-bottom:0;
    line-height: 36px;
}
.wpcf7 #form-check-autoriza .checkbox-sign{
    width:30px;
    height:30px;
}
.wpcf7 .terms{
    line-height: 46px;    
}


/* loading panel Elementor elements  */
#elementor-panel-state-loading{
  /*display:none!important;*/
}


.search-under-title input#s{
    padding: 0px 16px;
    height: 40px;
    width: 400px;
    max-width: calc(100% - 24px * 2);
}
.search-under-title .gem-button{
    background: #212331;
    margin: 0;
    padding: 0 8px;
    display: inline-flex;
}
.search-under-title span.search-icon:before{
    content: "\e612";   
    font-family: "thegem-icons";
    font-style: normal;
    font-size: 24px;
    font-weight: 400;
    color: inherit;
    text-align: center;
    vertical-align: top;
    width: 100%;
}



@media (max-width: 1492px) {
    .block-content.content-plus-categories{
        display: block;
    }

    .content-plus-categories .content-categories{
        /*border:1px solid green;*/
        padding: 21px;
        /*width: 80%;*/
        /*margin: 0 auto;*/
        
    }
}
.content-plus-categories .content-categories ul li a{
    color: #3c3950;
    font-weight: 600;
}
.content-plus-categories .content-categories ul li a:hover{
    color: #00bcd4;
}

@media (max-width: 1024px) {
    .header-style-4 #primary-menu.no-responsive>li>a{
        padding: 0 4px;
    }
}

@media (max-width: 992px) {

    .block-content.content-plus-categories{
        display: block;
    }
    .content-plus-categories .content-categories{
                
        /*border:1px solid fuchsia;*/
      
    }
}

@media (max-width: 767px) {

}
/* CUSTOM 2026: separación de 8px entre columnas de las filas Elementor
   (pedido: mismo selector que el padre, línea ~6172 de su style.css).
   OJO: afecta a TODO el sitio; si alguna página antigua descuadra,
   sustituir por la variante scoped comentada abajo. */
.elementor-column-gap-thegem > .elementor-row {
    gap: 8px;
}
/* Variante solo diseño nuevo:
:is(.epi-2026-start, #epi-2026-start) .elementor-column-gap-thegem > .elementor-row,
:is(.epi-2026-start ~ .elementor-element, #epi-2026-start ~ .elementor-element) .elementor-column-gap-thegem > .elementor-row {
    gap: 8px;
}
*/

/* CUSTOM 2026: fondo global del sitio (#F8F7F5).
   El body ya lo pinta el plugin, pero TheGem mete un fondo blanco en el
   contenedor #main (Área de contenido principal), que es lo que tapaba
   el color. */
#main.site-main {
    background-color: #F8F7F5 !important;
}

/* CUSTOM 2026: header alineado con el layout (1212px como el contenido),
   en vez de logo y menu pegados a los bordes del viewport */
#site-header .container.container-fullwidth {
    max-width: 1212px;
    margin: 0 auto;
    padding: 0 21px;
}

/* CUSTOM 2026: header claro segun diseno Figma
   - fondo #F8F7F5 (el color oscuro lo pintaba .header-background::before)
   - menu oscuro con hover naranja
   - flecha arrow-down.svg en items con submenu
   - desplegables blancos */
#site-header,
#site-header .header-background,
#site-header .header-main,
#site-header-wrapper {
    background-color: #F8F7F5 !important;
    box-shadow: none !important;
}
#site-header .header-background::before {
    background-color: #F8F7F5 !important;
}
#site-header #primary-menu > li > a {
    color: #080602 !important;
}
/* CUSTOM 2026: hover naranja desactivado temporalmente (pedido)
#site-header #primary-menu > li > a:hover {
    color: #DD9509 !important;
}
*/
#site-header #primary-menu > li.menu-item-active > a {
    color: #DD9509 !important;
}
#site-header #primary-menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: -2px;
    background: url('/wp-content/uploads/2026/07/arrow-down.svg') center / contain no-repeat;
}
#site-header #primary-menu .sub-menu {
    background-color: #F8F7F5 !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(8, 6, 2, 0.08) !important;
    padding: 10px !important;
}
/* CUSTOM 2026: el tema padre pinta una tira de 3px (bottom:-3px) con
   #primary-menu.no-responsive > li:not(.megamenu-template-enable) > ul:before
   que actua de puente para el hover. La dejamos transparente y sin sombra
   para que no se vea la linea al final del submenu. */
#site-header #primary-menu .sub-menu::before,
#site-header #primary-menu .sub-menu::after,
#primary-menu.no-responsive > li:not(.megamenu-template-enable) > ul:before {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* CUSTOM 2026: el borde superior del submenu lo pinta el tema padre / los
   estilos dinamicos sobre el propio UL (ocupa todo el ancho). Lo anulamos
   en todas sus variantes. */
#site-header #primary-menu .sub-menu,
#site-header #primary-menu ul.sub-menu,
#site-header #primary-menu.no-responsive > li > ul,
#site-header #primary-menu.no-responsive > li > ul ul,
#site-header #primary-menu.no-responsive > li:not(.megamenu-template-enable) > ul {
    border: none !important;
    border-top: none !important;
    outline: none !important;
    box-shadow: 0 10px 30px rgba(8, 6, 2, 0.08) !important;
}
/* CUSTOM 2026: separadores solo ENTRE items (sin linea arriba del primero
   ni debajo del ultimo). Anulamos los bordes que pinta el tema padre
   tanto en el li como en el enlace. */
#site-header #primary-menu .sub-menu li,
#site-header #primary-menu .sub-menu li > a,
#site-header #primary-menu.no-responsive > li > ul li,
#site-header #primary-menu.no-responsive > li > ul li > a {
    background-color: transparent !important;
    border: none !important;
}
#site-header #primary-menu .sub-menu > li:not(:last-child),
#site-header #primary-menu.no-responsive > li > ul > li:not(:last-child) {
    border-bottom: 1px solid rgba(127, 125, 118, 1) !important;
}
#site-header #primary-menu .sub-menu li a,
#site-header #primary-menu.no-responsive > li > ul li a {
    background-color: transparent !important;
    color: rgba(8, 6, 2, 1) !important;
    padding: 12px!important;
}
/* CUSTOM 2026: hover naranja desactivado temporalmente (pedido)
#site-header #primary-menu .sub-menu li a:hover {
    background-color: transparent !important;
    color: #DD9509 !important;
}
*/
#site-header .header-main .search-button i,
#site-header .header-main .search-button svg,
#site-header .minisearch-button i {
    color: #080602 !important;
    fill: #080602 !important;
}


/* CUSTOM 2026: header en pantallas reducidas — logo a la izquierda,
   lupa y hamburguesa como circulos blancos alineados a la derecha */
@media (max-width: 1023px) {
    #site-header .header-main {
        display: flex !important;
        align-items: center !important;
    }
    #site-header .site-title {
        text-align: left !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
    }
    #site-header .site-logo {
        margin: 0 !important;
    }
    #site-header nav.primary-navigation {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
    }
    /* Las tres rayas centradas: el theme las posiciona en absoluto para
       un botón de 36x30; con el círculo de 44px se descentraban. Se pasa
       el botón a flex-columna y las rayas a posición estática. */
    #site-header .menu-toggle {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto;
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* OJO: sin gap — el texto "Primary Menu" (oculto) es un item
           flex anónimo y el gap metía un hueco extra por arriba.
           La separación va como margen solo ENTRE rayas. */
        text-indent: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden;
    }
    #site-header .menu-toggle span {
        background-color: #080602 !important;
        position: static !important;
        display: block !important;
        width: 16px !important;
        height: 2px !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
    }
    #site-header .menu-toggle span + span {
        margin-top: 4px !important;
    }
    #site-header .epi-mobile-search {
        display: flex !important;
    }
    /* La lupa del theme (menu-item-search) duplica la lupa propia
       (.epi-mobile-search) en responsive; se oculta la del theme.
       También el cuadro de búsqueda (minisearch) que TheGem pinta
       dentro del menú desplegable responsive (comentado por ahora,
       la búsqueda vive en /?s= — ver search.php del child). */
    #site-header .primary-navigation li.menu-item-search,
    #site-header .primary-navigation .menu-item-fullscreen-search,
    #site-header .dl-menuwrapper li.menu-item-search,
    #site-header #primary-menu li.menu-item-search,
    #site-header .primary-navigation .minisearch {
        display: none !important;
    }
}

/* CUSTOM 2026: boton "volver arriba" (scroll-top) — circulo blanco con
   la flecha arrow-up.svg, en vez del cuadrado gris con icono del theme */
.scroll-top-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff url('/wp-content/uploads/2026/07/arrow-up.svg') center / 20px 20px no-repeat !important;
    box-shadow: 0 4px 16px rgba(8, 6, 2, 0.15) !important;
    transition: background-color .2s ease;
}
.scroll-top-button:before,
.scroll-top-button:after {
    content: none !important;
    display: none !important;
}
.scroll-top-button:hover {
    background-color: rgba(246, 171, 22, 0.4) !important;
}

/* Boton lupa movil (lo inserta epi-2026.js); oculto en escritorio */
#site-header .epi-mobile-search {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080602' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16' y2='16'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    flex: 0 0 auto;
}

/* CUSTOM 2026: submenu del menu movil como acordeon (ver epi-2026.js).
   Se anula el comportamiento dl-menu (vista sustituida + boton atras). */
@media (max-width: 1023px) {

   
    #primary-menu.dl-menu .dl-submenu {
        display: none !important;
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        width: 100% !important;
        box-shadow: none !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    #primary-menu.dl-menu li.epi-sub-open > .dl-submenu {
        display: block !important;
        /* mas sangria para que se vea anidado al padre */
        padding-left: 32px;
    }
    /* Submenu con el mismo fondo del panel (F8F7F5) — el theme pintaba
       los enlaces con #f4f6f7 — y lineas de separacion iguales a las
       del resto del menu (#dfe5e8) */
    #site-header #primary-navigation.responsive #primary-menu .dl-submenu,
    #site-header #primary-navigation.responsive #primary-menu .dl-submenu li,
    #site-header #primary-navigation.responsive #primary-menu .dl-submenu li > a,
    #primary-menu.dl-menu .dl-submenu,
    #primary-menu.dl-menu .dl-submenu li,
    #primary-menu.dl-menu .dl-submenu li > a {
        background-color: #F8F7F5 !important;
    }
    #primary-menu.dl-menu .dl-submenu li {
        border-bottom: 1px solid #dfe5e8 !important;
    }
    #primary-menu.dl-menu .dl-submenu li:last-child {
        border-bottom: none !important;
    }
    #primary-menu.dl-menu .dl-submenu li > a {
        border-bottom: none !important;
    }
    #primary-menu.dl-menu .dl-back {
        display: none !important;
    }
    #site-header #primary-menu li.menu-item-has-children.epi-sub-open > a::after {
        transform: rotate(180deg);
    }
}


/* CUSTOM 2026: menu escritorio se abre con CLICK, no con hover.
   Se anulan las reglas :hover y :focus-within del theme y se abre
   solo con la clase epi-open que pone epi-2026.js. */
@media (min-width: 1024px) {
    .header-main:not(.header-layout-overlay) #primary-menu.no-responsive:hover li:not(.megamenu-template-enable):not(.epi-open):hover > ul,
    .header-main:not(.header-layout-overlay) #primary-menu.no-responsive:focus-within li:not(.megamenu-template-enable):not(.epi-open):focus-within > ul {
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    .header-main:not(.header-layout-overlay) #primary-menu.no-responsive li.menu-item-has-children.epi-open > ul {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: transform .25s linear, opacity .25s linear;
    }
}

/* CUSTOM 2026: panel del menu movil con el mismo fondo que el submenu
   (#F8F7F5) y borde exterior del mismo color */
@media (max-width: 1023px) {
    #primary-menu.dl-menu,
    #site-header nav.primary-navigation .dl-menuwrapper {
        background-color: #F8F7F5 !important;
        border-color: #F8F7F5 !important;
    }
    #primary-menu.dl-menu > li,
    #primary-menu.dl-menu > li > a {
        background-color: transparent !important;
    }
}


/* CUSTOM 2026: footer nuevo (plantilla Elementor) — titulos de columna
   en Riforma medium 16/24 sin mayusculas; enlaces en #F0EFEC.
   Se limita a headings/listas de Elementor para no tocar el footer antiguo. */
footer .elementor-heading-title,
.elementor-location-footer .elementor-heading-title {
    text-transform: none !important;
    font-family: var(--epi-font-2026) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: -0.01em !important;
}
footer .elementor-icon-list-text,
footer .elementor-icon-list-item a,
.elementor-location-footer .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-item a {
    color: rgba(240, 239, 236, 1) !important;
    font-family: var(--epi-font-2026);
}

/* CUSTOM 2026: enlaces del footer nuevo en #F0EFEC (son anclas sueltas
   en widgets de texto, no icon-list) */
footer.custom-footer a:not(.epi-social__link),
footer.custom-footer .elementor-widget-text-editor,
footer.custom-footer .elementor-widget-text-editor p {
    color: rgba(240, 239, 236, 1) !important;
    font-family: var(--epi-font-2026);
}

/* CUSTOM 2026: buscador del blog — fondo blanco y sin borde gris.
   El theme (custom-cp6GOmOF.css, ~L6582/L6646) pinta todos los inputs con
   background #f4f6f7 y border #dfe5e8 desde Theme Options > Form Elements.
   Se restringe a form[role="search"] para NO afectar a los formularios de
   contacto (.wpcf7-form) ni al resto de inputs del sitio. */
form[role="search"] input[type="search"],
form[role="search"] input[type="text"] {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}