/* ==========================================
   Font Import
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* ==============================
   Variables
============================== */
:root {

    /* Texto */
  --txt-font-family: "Roboto", sans-serif;
  --txt-white-color: #ffffff;
  --txt-interactive: #C96223;


    /* Border */
  --border-interactive: #ED752A;
  --border-focus: #A4501B;
  --border-dark:#101216;
  --border-light:#ffffff;
  --border-grey-hard:#A1ACBB;
  --border-grey-soft:#D2D7DE;



  /* Bg */
  --bg-interactive-xsoft:#F9D1B7; 
  --bg-interactive-soft:#F4A97B; 
  --bg-brand-primary:#C96223;
  --bg-brand-secondary: #5B2B0C;
  --bg-secondary:#F0F2F5;
}

html,
a,
p,
span,
ul,
ol,
li,
div {
  font-family: var(--txt-font-family)!important;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--txt-font-family)!important;
}

b, strong {
    font-weight: 600!important;
}


/* ==============================
  Botones
============================== */


.button-primary {
    background-color: var(--bb-button_secondary-color) !important;
    color: var(--bb-p_text-color)!important;
    border: 2px solid var(--border-interactive)!important;
    &:hover {
        background-color: var(--bg-interactive-soft)!important;
        color: var(--bb-p_text-color)!important;
        border: 2px solid var(--border-interactive)!important;
    }
}

.btn-outline-primary {
    background-color: var(--bb-body-bg-color)!important;
    color: var(--bb-p_text-color)!important;
    border: 2px solid var(--border-interactive)!important;
    &:hover {
        color: var(--txt-white-color);
    }
}


.button-tertiary{
    background-color: var(--bb-button_primary-color);
    color: var(--bs---txt-white-color);
    &:hover{
        background-color: var(--bb-button_primary-hover-color);
        color: var(--bb-p_text-color);
        border: 2px solid var(--border-dark);
    }
}

/* ==============================
  Custom styles
============================== */
.bg-section-secondary {
    background-color: var(--bg-secondary);
}

.bg-section-primary-xsoft {
    background-color: var(--bg-interactive-xsoft);
}

.bg-section-primary-soft {
    background-color: var(--bg-interactive-soft);
}

.column-box {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    height: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: 8px solid var(--border-light);
    outline-offset: -3px; 
    h3,h2,h1 {
        margin-bottom:1rem!important;
    } 
}


/* ==============================
  Arreglos estilos Drupal
============================== */

/* Contenedor */
@media (min-width: 87.5rem) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px!important;
    }
}

/* Listas */
.block-segittur-static-text ol, 
.block-segittur-static-text ul, 
.ck-content ol, 
.ck-content ul {
    padding-left: 1.5rem;
    font-size: var(--bb-p_text-size);
}

/* CK Editor Height */

.ck-editor__main > :is(.ck-editor__editable, .ck-source-editing-area),
.ck-editor__main > :is(.ck-editor__editable, .ck-source-editing-area) textarea {
    height: 600px !important;
}

/* Border radius */

.rounded-2xl {
    border-radius: .5rem;
}

/* Configuración de sección */

.ui-dialog-off-canvas{
    .option {
        color: var(--txt-white-color);
    }
}


/* Back to top */

#backtotop {
    bottom: 24px!important;
}


/* Menu Cabecera */

.menu--main li a {
    color: var(--bb-body-color);
}


/* Tabs */

.complementary-tabs {
    padding-left: 0px!important;
    padding-right: 0px!important;
    .border-light_brand {
        border-color: var(--border-grey-soft);
    }
    .hover\:text-blue_brand:hover {
        color: var(--txt-interactive);
      }
    .after\:bg-blue_brand:after{
        background-color: var(--border-interactive);
    }
    .\[\&\.active\]\:text-blue_brand.active {
        color:var(--txt-interactive);
        &:after {
            background-color: var(--border-interactive);
        }
    }
    .overflow-x-auto {
        overflow-y: hidden; 
    }
}

/* Estilo para que las miniaturas del carrousel de imagenes se alineen a la izquierda */
#images-thumbnails {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

/* Estilo para quitar background al contenedor de filtros y dar estilo a los input y select */

.filter-order {
    background: var(--bb-body-bg-color)!important;
    padding: 0px!important;
    margin-bottom: 3rem !important;

    .complementary-first-filter,
    .order-select {
        border-color: var(--border-dark) !important;
        border-radius: 0.25rem;
        padding: 0.6rem !important;
        color: var(--bb-body-color)!important;  
    }
    input {
        border-color: var(--border-dark) !important;
        border-radius: 0.25rem;
        padding: 0.6rem !important;
       
    }
}

/* Arreglos acordeón block-segittur-static-links-interest */

.block-segittur-static-links-interest {
  h2.svg-color {
        color: var(--bb-p_text-color)!important;
        margin-bottom: 3rem;
  }
  aside {
    details {
        border-color: var(--border-grey-soft);
      summary {
        span.font-semibold.leading-140{
          font-size: var(--bb-h5_text-size) !important;
          font-family: var(--txt-title-font-family);
        }
        span.transition-transform.duration-300.group-open\:rotate-90 {
            font-size: 1.5rem;
        }
        & + div.font-normal.leading-140 {
          padding-bottom: 1.5rem;
        }
      }
    }
  }
}

/* Boton contenido dinámico */

a.\!border {
    border-width: 2px !important;
}

/* ==============================
   Menu
============================== */
.menu.absolute,
ul.menu.menu-level--1.absolute.left-0.pt-1.z-50.min-w-max.bg-white.pl-0.m-0.flex.flex-col.gap-4.transition-all {
    border: 1px solid var(--border-grey-soft);
    box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.07),
                0 0 46.852px 0 rgba(0, 0, 0, 0.05),
                0 0 25.481px 0 rgba(0, 0, 0, 0.04),
                0 0 13px 0 rgba(0, 0, 0, 0.04),
                0 0 6.519px 0 rgba(0, 0, 0, 0.03),
                0 0 3.148px 0 rgba(0, 0, 0, 0.02);
    border-radius: .5rem;
}


/* ==============================
        Block Segittur Static Category Card
============================== */



/* Category card - Estilos para que el botón sea transparente */

.block-segittur-static-category-card {
    & > .content {
        & > section {
            & > div{
                & > div { 
                    &.group{
                        /* Estilo crear un overlay oscuro con degradado */
                       position: relative;
                       &::after { 
                           content: "";
                           position: absolute;
                           inset: 0;
                           pointer-events: none;
                           z-index: 1;
                           background: linear-gradient(
                             to top,
                             rgba(0, 0, 0, 0.7) 0%,
                             rgba(0, 0, 0, 0.1) 60%,
                             rgba(0, 0, 0, 0) 100%
                           );
                           background-size: 100% 60%;
                           background-repeat: no-repeat;
                           background-position: bottom;
                         } 
                         & > a > .flex.items-center.place-content-between.absolute.bottom-2.w-100.px-4 {
                           z-index: 2;
                         }
                   }
                    & > a {
                        height:100%;
                        & > img {
                            & + div {
                                padding-bottom: 1rem;
                                
                                & > div {
                                    padding: .7rem .9rem!important;
                                    border-radius: .5rem;
                                    width: auto;
                                    background-color: transparent!important;
                                    color: var(--txt-white-color)!important;
                                    border: 2px solid var(--border-light)!important;
                                    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
                                    height: auto;
                                    &:hover {
                                        background-color: var(--bb-body-bg-color)!important;
                                        color: var(--bb-span_text-color)!important; 
                                        border: 2px solid var(--border-light)!important;
                                    }
                                }
                            }
                        }
                    }
                    & > img {
                        & + div {
                            padding-bottom: 1rem;
                            z-index: 2;
                            & > div {
                                padding: .7rem .9rem!important;
                                border-radius: .5rem;
                                width: auto;
                                background-color: transparent!important;
                                color: var(--txt-white-color)!important;
                                border: 2px solid var(--border-light)!important;
                                transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
                                height: auto;
                                &:hover {
                                    background-color: var(--bb-body-bg-color)!important;
                                    color: var(--bb-span_text-color)!important; 
                                    border: 2px solid var(--border-light)!important;
                                }
                            }
                        }
                    }
                }
            }

        }
    } 
} 



/* Horizontal Card - Estilos para que ocupe el 100% de su columna */

.horizontal-card-100 {
    & > .container {
        & > .layout {
            margin: 0px !important;
        }
    }
    .block-segittur-static-category-card {
        & > .content {
            & > section {
                padding-top:0px;

                & > div{
                    grid-template-columns: repeat(1, minmax(0, 1fr));
                    height: 400px;
                    & > div { 
                        & > a {
                            height:100%;
                            & > img {
                                & + div {
                                    flex-direction: column;
                                    align-items: start;
                                    display: flex;
                                    margin-bottom: 1rem;
    
                                    & > div {
                                        padding: .8rem 1rem !important;
                                        border-radius: .5rem;
                                        margin-top: 1rem;
                                        width: auto;
                                        background-color: transparent!important;
                                        color: var(--txt-white-color)!important;
                                        border: 2px solid var(--border-light)!important;
                                        transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
                                        height: auto;
                                        &:hover {
                                            background-color: var(--bb-body-bg-color)!important;
                                            color: var(--bb-span_text-color)!important; 
                                            border: 2px solid var(--border-light)!important;
                                        }
                                    }
                                }
                            }
    
                        }
                    }
                }

            }
        } 
    } 
} 


/* ==============================
        Block segittur static portrait ai
============================== */

.hero-absolute-white {
    .block-segittur-static-portrait-ai {
        .absolute {
            max-width: 600px;
            padding: 2rem 2rem 0rem 2rem!important;
            bottom: 0rem;
            border-radius: 1rem 1rem 0rem 0rem;  

            .breadcrumb {
                display: none;
            }
            h1 {
                font-size: 2rem !important;
            }
            .font-normal {
                font-family: var(--bs-body-font-family)!important;
                font-size: 1rem;
                line-height: 140%;
            }
            .bg-blue_brand {
                background-color: var(--bb-body-bg-color)!important;
                color: var(--bb-p_text-color)!important;
                border: 2px solid var(--border-interactive)!important;  
                &:hover {
                    background-color: var(--bg-interactive-soft)!important;
                    color:var(--bb-p_text-color);
                }
            }
        }
        .div-dark-color.absolute {
            padding: 3rem 2rem 2rem 2rem!important;
        }
    }
}


.hero-absolute-dark {
    .block-segittur-static-portrait-ai {
        section {
            .container {
                .absolute {
                    padding: 2rem 2rem 0rem 2rem!important;
                    bottom: 0rem;
                    border-radius: 1rem 1rem 0rem 0rem;  
                    .font-normal {
                        font-family: var(--bs-body-font-family)!important;
                        font-size: 1rem;
                        line-height: 140%;
                        margin-top: 1rem;
                        & + div.m-auto {
                            margin-left: 0px !important;
                            margin-right: 0px !important;
                        }
                    }
                }
                .div-dark-color.absolute {
                    padding: 2rem 2rem 2rem 2rem!important;
                }
            }
        }
    }
}


.hero-portada {
    .block-segittur-static-portrait-ai {
        h2 {
            font-size: var(--bb-h1_text-size)!important;
            font-weight: 500 !important;
        }
    }
}


.block-segittur-static-portrait-ai {
    section.mb-32{
        margin-bottom: 2rem !important;
    }
    section.full-width-section.portrait {
        .div-dark-color {
            h2{
                &.text-white {
                    text-shadow: none;
                    font-weight: 500 !important;
                }
            }
        }
        h2,h1 {
            line-height: 1.25!important;
            
            &.text-white {
                text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
                font-weight: 500 !important;
            }
        }
    }
}

/* ==============================
        Block Segittur Static Horizontal Card
============================== */

/* Estilos para quitar padding a la caja de texto - Útil cuando va sobre fondo blanco para corregir la desalineación con el resto de la página */
.padding-0 .block-segittur-static-horizontal-card {
    section {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
       div + div {
                padding-right: 0rem;
        }
    }
}

.padding-0 .block-segittur-static-horizontal-card {
    section.flex-row-reverse {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        div + div {
                padding-left: 0px;
                padding-right: 3rem;
        }
    }
}


/* ==============================
    Block Segittur Dynamic List
============================== */

/* Grid Listado dinámico */

.block-segittur-dynamic-list {
    .block-title {
        line-height: 130%;
      }
    article {
        h3 {
            margin-top: 1.5rem;

        }
        figure {
            border: 1px solid var(--border-grey-soft);
        }
    }
   
}

/* Estilo para modificar el color de las tags en las cards dinámicas */
mark.bg-secondary_light {
    background-color: var(--bb-body-bg-color) !important;
    font-family: var(-txt-font-family);
    font-weight: 600 !important;
    color: var(--bb-body-color);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
mark.bg-grey_light {
    background-color: var(--bg-interactive-xsoft)!important;
    font-family: var(--txt-font-family);
    font-weight: 600 !important;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

/* ==============================
    Detalle recurso
============================== */
.resource-container {
    .resource-content {
        .main-section{
            padding: 2rem !important;
            header {
               /* Estilo para alinear las acciones de compartir con el tag */
                & > nav {
                    margin-top: -3.5rem;
                    .badge {
                        background-color: var(--bg-interactive-xsoft)!important;
                        font-family: var(--txt-font-family)!important;
                        font-weight: 600 !important;
                        border:none!important;

                    }
                }
                .segittur-title {
                margin-top:2rem;

                }
                .ratings__stars {
                    i {
                        font-size: 1.7rem;
                        color: var(--bb-a_text-color)!important;
                    }
                }
            }
        }
        .card-body {
            padding: 2rem !important;
           .sidebar-title {
               .icon-background {
                   background-color: var(--bg-secondary)!important;
                   .icon {
                       color: var(--bg-brand-primary)!important; 
                   }
               }
           }
           .information-icon {
               color: var(--bg-brand-primary); 
               margin-right: 1rem !important;
           }   
       }
        #carouselImages {
            .chevron-button {
                border: none;
                padding: .4rem .7rem;
                background-color: var(--bb-color_div_dark-color);
                i{
                    color:var(--txt-white-color);
                    font-size: 1rem;
                }
            }
            section.d-flex.justify-content-end.my-2{
                justify-content: flex-start !important;
                -webkit-box-pack: start !important;
                -webkit-justify-content: flex-start !important;
                -ms-flex-pack: start !important;
                margin: 2rem 0rem !important;
            }
        }
    }
    /* Comentarios */

    #comments {
        padding: 2rem;
        border-top: 1px solid var(--border-grey-hard);
        .ratings__container.d-flex.flex-wrap.justify-content-center.w-100 {
            justify-content: left !important;
        }
    
        .ratings__stars {
            .bi-star,
            .bi-star-fill{
                color: var(--bg-brand-primary); 
            }
        }
    }
    
}



/* ==============================
   Footer
============================== */


.block-segittur-static-footer-logos {
    .content {
        section {
            .container.justify-start {
                justify-content: center;
                img {
                    mix-blend-mode: initial;
                    max-height: 64px;
                } 
            }

        }
    }
}

.block-segittur-static-footer * {
    color: var(--color-white);
}
.footer {
    div {
        font-size: 1rem!important;
    }
    a {
        font-size: 1rem!important;
    }
    li {
        a {
            color: var(--txt-white-color)!important;
            padding-top: .45rem;
            padding-bottom: .45rem;
            display: block;
        }
        &.content-center {
            color: transparent!important;
            border-radius: 1rem;
            padding: 0px !important;
        }
    }
}


.site-footer {
    padding: 0 !important;
}