/*
Theme Name: Breton Child
Theme URI: https://breton.qodeinteractive.com/
Description: A child theme of Breton
Author: Edge Themes
Author URI: http://themeforest.net/user/edge-themes
Version: 1.0.0
Text Domain: breton
Template: breton
*/



/* Machaco variables Elementor */
.elementor-kit-12 {
    /*
    --e-global-color-primary: #6EC1E4;
    --e-global-color-secondary: #54595F;
    --e-global-color-text: #7A7A7A;
    --e-global-color-accent: #61CE70;
    --e-global-typography-primary-font-family: "Roboto";
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-secondary-font-family: "Roboto Slab";
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Roboto";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Roboto";
    --e-global-typography-accent-font-weight: 500;
    --e-global-typography-f7ecb5c-font-family: "Magra";
    */
}


/* Cabecera */
/* Corrección para que la cabecera PC coja el alto que le des al logo PC desde la admin, en vez de tener la altura 96px que tiene por defecto en el CSS - Se completa con función "fixedHeaderAppearance" machacada en JS en funciones.js */
#qodef-page-header {height:auto;}
#qodef-page-header .qodef-header-logo-link {
    -webkit-box-flex:auto !important;
    -ms-flex:auto !important;
    flex:auto !important;
    padding-top:15px;
    padding-bottom:15px;
}

#qodef-page-header {background-color:#fff;}
#qodef-page-mobile-header {background-color:#fff;}


.qodef-header-navigation > ul > li > a {
    font-family: "Roboto", sans-serif !important;
}



/* Añado separación en el contenido de los posts al haber desactivado la opción en Blog / Blog Single / Enable Page Title */
.single-post #qodef-page-inner {margin-top:194px;}



/* Fuentes */
.qodef-page-title .qodef-m-title {font-family: "Playfair Display", serif;}
.qodef-portfolio-list .qodef-e-title {font-family: "Playfair Display", serif;}
.qodef-section-title .qodef-m-title {font-family: "Playfair Display", serif;}
.qodef-portfolio-content .elementor-widget-wp-widget-text h5 {
    font-family: "Playfair Display", serif;
    margin-bottom:0;
}
.widget .qodef-widget-title {font-family:"Playfair Display", serif;}

.qodef-blog .qodef-blog-item .qodef-e-title {font-family:"Playfair Display", serif;}


/* Animaciones */
@keyframes pulsehand {
    0% {
        transform:scale(1.1);
        opacity:.7;
    }
    50% {
        transform:scale(1);
        opacity:.9;
    }
    100% {
        transform:scale(1.1);
        opacity:.7;
    }
}



/*.elementor-widget-text-editor p {font-family:inherit;}*/
.qodef-section-title .qodef-m-text {/*font-family: "Roboto", sans-serif;*/ font-size:18px;}


/* Imágenes ancho 100% en portfolio página "Edición" */
.qodef-portfolio-list.qodef-item-layout--info-below.qodef-hover-animation--zoom article .qodef-e-image .qodef-e-media-image img.size-full {width:100%;}


/* Ocultar enlaces compartir en el pie del single post */
.single-post .qodef-info--bottom .qodef-social-share {display:none;}



/* Color enlaces por defecto en textos */
#qodef-page-content p a, #qodef-page-content li > a, .wpcf7-acceptance a {color:#ff4d2d;}
#qodef-page-content .qodef-social-share li > a, #qodef-page-content .widget_categories li > a {color:inherit;}


/* Home */
.video_button_alto_100, .video_button_alto_100 .elementor-widget-container, .video_button_alto_100 .elementor-widget-container .qodef-video-button, .video_button_alto_100 .elementor-widget-container .qodef-video-button .qodef-m-image {height:100%;}
.video_button_alto_100 .elementor-widget-container .qodef-video-button .qodef-m-image img {min-height:100%;}


@media (max-width:1024px) {
    .col_mailchimp_home > .elementor-element-populated {
        width:768px;
        margin-left:auto;
        margin-right:auto;
        padding:5% 0 5% 0 !important;
    }
}
@media (max-width:800px) {
    .col_mailchimp_home > .elementor-element-populated {width:86%;}
    /* Corección para que esté entrado el roadmap en móvil */
    section.qodef-elementor-content-grid.qodef-extended-grid--right > .elementor-container {
        padding-left:0 !important;
    }
}
@media (max-width:767px) {
    .col_mailchimp_home > .elementor-element-populated {
        /* padding:5% 35px 5% 35px !important; */
    }

    /* Indicar scroll X en widget Roadmap en dispositivos móviles (carrusel con años) */
    /* html.touchevents .qodef-roadmap {cursor: url('../../plugins/breton-core/inc/shortcodes/roadmap/assets/img/cursor.svg'), auto;} */
    html.touchevents .elementor-widget-breton_core_roadmap > .elementor-widget-container {padding-top:45px;}
    html.touchevents .elementor-widget-breton_core_roadmap > .elementor-widget-container .flechas_slide_movil {
        display:block;
        width:135px;
        height:45px;
        background-color:transparent;
        position:absolute;
        z-index:1;
        top:0;
        left:50%;
        transform:translate(-50%, 0);
    }
    html.touchevents .elementor-widget-breton_core_roadmap > .elementor-widget-container .flechas_slide_movil::before {
        display:block;
        content:'';
        width:100%;
        height:100%;
        background-color:transparent;
        background-image:url('../breton-child/img/flechas_slide.svg');
        background-position:center;
        background-repeat:no-repeat;
        background-size:contain;
        position:absolute;
        z-index:1;
        top:0;
        left:0;
        animation: pulsehand 2s infinite;
    }
}
@media (max-width:480px) {
    .col_mailchimp_home > .elementor-element-populated {width:82%;}
}






/* Pie */
#qodef-page-footer {margin-top:60px;}
#qodef-page-footer .widget.widget_media_image img {max-width:150px !important;}
#qodef-page-footer .qodef-widget-title {
    /* font-family:"Playfair Display", serif; */
}
#qodef-page-footer .widget.widget_breton_core_social_icons_group {}
#qodef-page-footer .widget.widget_breton_core_social_icons_group .qodef-social-icons-group .qodef-icon-holder {
    background-color:#000;
    padding:5px;
    border-radius:50%;
    text-align:center;
    height:35px;
    width:35px;
    line-height:25px;
}
#qodef-page-footer .widget.widget_breton_core_social_icons_group .qodef-social-icons-group .qodef-icon-holder a {color:#fff; font-size:22px;}


/* Copyright */
#qodef-page-footer-copyright {
    padding:20px 0;
    background-color:#f8f8f8;
    border-top:0 solid #e1e1e1;
    text-align:center;
}
#qodef-page-footer-copyright .menu {
    list-style-type:none;
    display:inline-block;
}
#qodef-page-footer-copyright .menu li {
    display:inline-block;
    vertical-align:middle;
    margin-bottom:0;
    margin-left:20px;
}
#qodef-page-footer-copyright .menu li:first-of-type {
    margin-left:0;
}

/* ==========================================================================
   Portfolio List personalizado  (clase .portfolio-custom en el widget Elementor)
   Todos los estilos quedan scopeados bajo .portfolio-custom para no afectar
   otras instancias del widget en otras partes del sitio.
   - Layout en grid (filtro a la izquierda / items a la derecha) solo en desktop
   - Filtro de categorías como listado vertical con más espacio entre items
   ========================================================================== */

/* Filtro de categorías: listado vertical, alineado a la izquierda */
.portfolio-custom .qodef-m-filter .qodef-m-filter-items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;        /* listado vertical */
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;       /* alineado a la izquierda */
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.portfolio-custom .qodef-m-filter .qodef-m-filter-item {
    white-space: normal;           /* el texto puede bajar a varias líneas */
    width: 100%;                   /* cada item ocupa todo el ancho */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 4px 0;                 /* separación entre items */
    padding: 8px 12px;             /* espacio interno */
    border: 0;
    border-radius: 0;
    -webkit-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}
/* Quitar la línea (subrayado) del tema en activo / hover */
.portfolio-custom .qodef-m-filter .qodef-m-filter-item.qodef--active:after,
.portfolio-custom .qodef-m-filter .qodef-m-filter-item:hover:after {
    opacity: 0;
}
/* Fondo en el item activo / hover */
.portfolio-custom .qodef-m-filter .qodef-m-filter-item.qodef--active,
.portfolio-custom .qodef-m-filter .qodef-m-filter-item:hover {
    background-color: #d6ecf7;
}

/* Layout en dos columnas (filtro | items) solo en desktop */
@media (min-width: 1025px) {
    .portfolio-custom .qodef-shortcode {
        display: grid;
        grid-template-columns: 0.5fr 1.5fr;
        gap: 40px;
    }
}

/* ==========================================================================
   Categorías de portfolio con URL propia (taxonomy-portfolio-category.php)
   Reutiliza el mismo look del filtro JS de arriba (lista vertical + resaltado
   activo) pero con su propio selector: NO usa la clase .portfolio-custom
   porque esa clase también fija "display:grid" en cualquier .qodef-shortcode
   descendiente (pensado para el filtro+grid de la página Elementor), y acá
   .qodef-shortcode es el propio grid de items de 3 columnas del shortcode -
   reutilizar esa clase lo comprimía a una fracción del ancho disponible.
   ========================================================================== */
@media (min-width: 1025px) {
    .ge-portfolio-taxonomy-grid {
        display: grid;
        grid-template-columns: 0.5fr 1.5fr;
        gap: 40px;
        align-items: start;
    }
}
.ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-items {
    flex-direction: column;
    align-items: flex-start;
}
.ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-item {
    white-space: normal;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
    padding: 8px 12px;
    transition: background-color .2s ease-out;
}
.ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-item.qodef--active:after,
.ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-item:hover:after {
    opacity: 0;
}
.ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-item.qodef--active,
.ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-item:hover {
    background-color: #d6ecf7;
}
@media (max-width: 1024px) {
    .ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-items {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ge-portfolio-taxonomy-grid .qodef-m-filter .qodef-m-filter-item {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0 6px;
    }
}

/* En móvil/tablet: filtro horizontal con scroll lateral */
@media (max-width: 1024px) {
    .portfolio-custom .qodef-m-filter .qodef-m-filter-items {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;           /* horizontal */
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;             /* todo en una fila */
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow-x: auto;             /* scroll horizontal */
        -webkit-overflow-scrolling: touch;
    }
    .portfolio-custom .qodef-m-filter .qodef-m-filter-item {
        width: auto;                  /* solo el ancho de su contenido */
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;               /* que no se comprima */
        white-space: nowrap;          /* cada categoría en una línea */
        margin: 0 6px;
    }
}

/* ==========================================================================
   Tarjetas de subcategoría (ge_portfolio_render_subcategory_cards)
   Franja rosa con el nombre generada automáticamente por código + la imagen
   propia de la categoría (campo "Portfolio Category Image") debajo si existe.
   ========================================================================== */
.ge-portfolio-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
@media (max-width: 1024px) {
    .ge-portfolio-subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 680px) {
    .ge-portfolio-subcategory-grid {
        grid-template-columns: 1fr;
    }
}
.ge-portfolio-subcategory-card {
    display: block;
    text-decoration: none;
    overflow: hidden;
}
.ge-portfolio-subcategory-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    background-color: #f9dde2;
    color: #222;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    line-height: 1.3;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.ge-portfolio-subcategory-card--no-image .ge-portfolio-subcategory-card-title {
    aspect-ratio: 1 / 1;
    min-height: 0;
}
.ge-portfolio-subcategory-card-image {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.ge-portfolio-subcategory-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}