﻿@media only screen and (min-width: 768px) and (max-width: 950px) { 

    #block-solucionweb-menuheader{display: none;}
    #block-solucionweb-formulariodebusqueda{text-align: end;}
    #block-solucionweb-formulariodebusqueda form .form-actions input{right: -5px;}
    #block-solucionweb-logobancodeguatemala img{width: 100%; height: auto;}

    #block-solucionweb-horizontalmenu-2.is-open > .menu{
        margin-top: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #block-solucionweb-webform > h2{
        font-size: 2em !important;
    }

    #block-solucionweb-webform{
        margin-top: 0 !important;
    }

    /*
    #block-views-block-herramientas-block-1 img{height: 210px;}
    #block-solucionweb-tiposdecambio{font-size: 11px;}
    #block-solucionweb-tiposdecambio .col-xs-12{padding: 0 5px;}
    #block-solucionweb-tiposdecambio .inflacion p{height: 120px;}
    #block-solucionweb-tiposdecambio{height: 210px;}
    #block-solucionweb-tiposdecambio .ritmo{padding: 0px;}
    #block-solucionweb-tiposdecambio .inflacion p{min-height: 110px;}
    #block-solucionweb-tiposdecambio .intermensual p{min-height: 110px;}
    #block-solucionweb-seccion1home{width: 100%;}
    #block-solucionweb-seccion1home .row{display: flex;}
    #block-solucionweb-horizontalmenu{display: none;}
    */

    #block-solucionweb-redessociales-2, #block-solucionweb-redessociales-2 > div{
    margin-top: 0 !important;
  }

  #block-solucionweb-piedepagina{
    margin-top: 0 !important;
  }


    #block-solucionweb-formulariodebusqueda form .form-item, #block-solucionweb-formulariodebusqueda form .form-item input{
        width: 100%;
    }

#main{
    min-height: 65vh;
}



/* Home */
    #block-views-block-herramientas-block-1 .hero-grid{
        display: grid;
        grid-template-columns: repeat(1, auto);
        column-gap: 1.5em;
        align-items: center;
    }

    #contenthome > div > div.region-contenthome::before{
        width: 33%;
    }

    #block-views-block-herramientas-block-1 .view-herramientas{
        padding: 3% 5%;
    }

    #block-views-block-herramientas-block-1 .hero-left {
        padding-top: 2em;
        padding-bottom: 2em;
        transform: none;
    }

    #slick-slide21 > div > div > div > div.hero-right{
        margin-top: 2em;
    }

    #block-views-block-herramientas-block-1 .hero-right img{
        width: 100%;
        margin: auto;
    }

    .slick-slide{
        margin: 0 10px;
    }

    .slick-slide > div > div > div > div.hero-left > div.views-field.views-field-title,
    .slick-slide > div > div > div > div.hero-left > div.views-field.views-field-title > span, .titulo-slide > span{
        font-size: 1.6em !important;
    }

    #block-views-block-herramientas-block-1 div > div > div.view-content.slick-initialized.slick-slider > div > div > div > div > div > div > div.hero-left > div.views-field.views-field-body > div > p{
        font-size: 1.05em;
        #block-views-block-herramientas-block-1 div > div > div.view-content.slick-initialized.slick-slider > div > div > div > div > div > div > div.hero-left > div.views-field.views-field-body > div > p{
    
}
    }


    /* Tipos de cambio */
    #block-solucionweb-tiposdecambio .stats-grid{
        grid-template-columns: 1fr !important;
        column-gap: 1rem;
        row-gap: 1rem;
        padding: 0 4%;
        grid-auto-flow: row;
    }

    /* Resultados (abajo) */
    #block-solucionweb-resultados .stats-grid{
        grid-template-columns: 1fr !important;
        column-gap: 1rem;
        row-gap: 1rem;
        padding: 1.25rem 4%;
        grid-auto-flow: row;
    }

    #block-solucionweb-tiposdecambio .stats-grid > *,
    #block-solucionweb-resultados   .stats-grid > *{
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
        position: relative;
    }

    #block-solucionweb-tiposdecambio .stats-grid iframe,
    #block-solucionweb-resultados   .stats-grid iframe,
    #block-solucionweb-tiposdecambio .stats-grid img,
    #block-solucionweb-resultados   .stats-grid img,
    #block-solucionweb-tiposdecambio .stats-grid svg,
    #block-solucionweb-resultados   .stats-grid svg,
    #block-solucionweb-tiposdecambio .stats-grid canvas,
    #block-solucionweb-resultados   .stats-grid canvas{
        max-width: 100%;
        width: 100%;
    }

    #block-solucionweb-tiposdecambio .stats-grid iframe{
        aspect-ratio: 4 / 1;
    }

    #block-solucionweb-tiposdecambio > div.clearfix{
        display: flex;
    }

    #block-solucionweb-tiposdecambio .stats-ribbon{
        margin: 0;
    }
    
    #block-solucionweb-tiposdecambio .stats-ribbon .ribbon-grid{
        grid-template-columns: repeat(1, 1fr);
        height: 100%;
    }


    .resultados-dos.stats-grid > div.ritmo-infla iframe, .resultados-dos.stats-grid > div.imae iframe {
        min-height: 500px;
    }

    .ad-right{
        height: auto;
        overflow: hidden !important;
    }

    .ad-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .news-cards{
        grid-template-columns: 1fr;
    }

    #contenthome > div > div > section:nth-child(4) > div > div > div.ad-layout > div.ad-right > div.ad-cards{
        grid-template-columns: 1fr;
    }


    #block-solucionweb-indicadoreshome{
        padding: 1.5m 4%;
        margin-top: 3em !important;
    }

    #block-solucionweb-indicadoreshome > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div{
        flex-direction: column;
    }

    #block-solucionweb-indicadoreshome > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div{
        flex-direction: column-reverse;
        row-gap: 1.5em;
    }

    #block-solucionweb-indicadoreshome > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(2) > p:nth-child(3) > a{
        margin-top: 1.5em;
    }

    #block-solucionweb-indicadoreshome > div > div > div > div:nth-child(2) > p:first-child{
        font-size: 1em;
    }

    #block-solucionweb-indicadoreshome > div > div > div > div:nth-child(2) > p:nth-child(1){
        width: 100% !important;
    }

    #block-solucionweb-indicadoreshome > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(2) > p:nth-child(2){
        width: 85%;
    }

    #block-solucionweb-indicadoreshome > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(1), #block-solucionweb-indicadoreshome > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(2) {
        width: 100%;
    }

    #block-solucionweb-indicadoreshome > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(1) > img{
        width: 100%;
        height: auto;
    }

/*Bloque PIB Regional*/

    #block-solucionweb-pibregional{
        padding: 1.5m 4%;
        margin-top: 3em !important;
    }

    #block-solucionweb-pibregional > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div{
        flex-direction: column;
    }

    #block-solucionweb-pibregional > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div{
        flex-direction: column;
        row-gap: 1.5em;
    }

    #block-solucionweb-pibregional > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(2) > p:nth-child(3) > a{
        margin-top: 1.5em;
    }

    #block-solucionweb-pibregional > div > div > div > div:nth-child(2) > p:first-child{
        font-size: 1em;
    }

    #block-solucionweb-pibregional > div > div > div > div:nth-child(2) > p:nth-child(1){
        width: 100% !important;
    }

    #block-solucionweb-pibregional > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(2) > p:nth-child(2){
        width: 85%;
    }

    #block-solucionweb-pibregional > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(1), #block-solucionweb-pibregional > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(2) {
        width: 100%;
    }

    #block-solucionweb-pibregional > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(1) > img{
        width: 100%;
        height: auto;
    }
/**/
    .hs{
        padding: 0;
    }

    .hs__sticky{
        margin-top: 0;
    }

    .news-layout{
        position: relative;
        display: grid;
        grid-template-columns: repeat(1, auto);
        gap: 28px;
        align-items: center;
        padding: 24px;
        box-sizing: border-box;
        font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
    }

    .news-right{
        height: auto;
        overflow: hidden;
    }


    .hs--news .news-right{
        padding-bottom: 50px;
    }

    .hs__sticky .news-layout {
        grid-template-columns: 1fr;
    }

    .hs__sticky .news-cards{
        grid-template-columns: 1fr;
    }

    .hs__sticky .news-scene {
        width: 95%;
    }

    .hs__sticky .news-footer {
        position: relative;
        right: 0;
        bottom: -15px;
        justify-content: center;
    }

    .hs--news .news-right{
        padding-bottom: 50px;
    }

    #contenthome > div > div > section.hs.hs--news.fx.inview > div > div > div > div.news-left > div > div{
        width: 100%;
    }

    .hs--pubs .news-layout{
        display: flex;
        flex-direction: column-reverse;
        gap: 20px !important;
    }

    .hs--pubs .news-footer{
        position: relative;
    }

    #block-solucionweb-transmisiones{
        margin-top: 2em;
    }
    
    #block-solucionweb-transmisiones > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > p:nth-child(2){
        width: 100%;
    }
    
    #block-solucionweb-indicadoreshome > div > div > div > div:nth-child(2) > p:nth-child(1){
        width: 100%;
    }

    #block-solucionweb-enif{
        margin-bottom: 4em;
        padding: 2em 4%;
        margin-top: 3em !important;
    }

     #block-solucionweb-enif > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div{
        flex-direction: column;
    }

    #block-solucionweb-enif > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div{
        flex-direction: column-reverse;
        row-gap: 1.5em;
    }

    #block-solucionweb-enif > div > div > div div{
        width: 100% !important;
    }

    #block-solucionweb-enif > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div > div:nth-child(2) > p:first-child{
        width: 100%;
    }

    /*Títulos*/
    #contenthome > div > div > section:nth-child(4) > div > div > div.ad-layout > div.ad-left > div > h2,
    #contenthome > div > div > section:nth-child(7) > div > div > div > div.news-left > div > h2,
    #block-solucionweb-transmisiones > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > p:nth-child(1),
    #block-solucionweb-accesosdirectos h2, #contenthome > div > div > section > div > div > div > div.news-left > div > h2,
    .hs--pubs .news-right h2
    {
        font-size: 3em;
    }

    html{
        font-family: "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    }

#block-solucionweb-accesosdirectos {
    width: 92% !important;
    max-width: 92% !important;
  }

  #block-solucionweb-accesosdirectos h2 {
    font-size: 30px !important;
    margin: 0 0 22px 0 !important;
  }

  #block-solucionweb-accesosdirectos .field--name-field-enlaces-directos.field__items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #block-solucionweb-accesosdirectos .paragraph--type--enlace {
    height: 200px !important;
    min-height: 200px !important;
    padding: 22px !important;
    border-radius: 22px !important;
  }

  #block-solucionweb-accesosdirectos .field--name-field-icono-enlace,
  #block-solucionweb-accesosdirectos .field--name-field-icono-enlace img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
  }

  #block-solucionweb-accesosdirectos .field--name-field-enlace {
    right: 22px !important;
    bottom: 22px !important;
    left: 62px !important;
  }

  #block-solucionweb-accesosdirectos .field--name-field-enlace a {
    font-size: 19px !important;
  }

  /* dots horizontales */
  #block-views-block-herramientas-block-1 .slick-dots {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    list-style: none !important;
    margin: 18px 0 18px 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  #block-views-block-herramientas-block-1 .slick-dots li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #block-views-block-herramientas-block-1 .slick-dots button {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 6px !important;
    min-height: 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    padding: 0 !important;
  }

  #block-views-block-herramientas-block-1 .slick-dots .slick-active button {
    background: #9ca3af !important;
  }

  /*CAROUSEL HOME*/
  
 /* Contenedor izquierdo con altura estable */
  #block-views-block-herramientas-block-1 .hero-left {
    display: flex !important;
    flex-direction: column !important;
    min-height: 425px !important;
  }

  /* TÍTULO: máximo 2 líneas */
  #block-views-block-herramientas-block-1 .titulo-slide {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
  }

  #block-views-block-herramientas-block-1 .titulo-slide .sl-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;

    line-height: 38px !important;
    height: 76px !important;
    max-height: 76px !important;
  }

  /* DESCRIPCIÓN: máximo 10 líneas */
  #block-views-block-herramientas-block-1 .views-field-body.texto {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
  }

  #block-views-block-herramientas-block-1 .views-field-body.texto .sl-desc {
    height: 220px !important;
    max-height: 225px !important;
    overflow: hidden !important;
  }

  #block-views-block-herramientas-block-1 .views-field-body.texto .sl-desc p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 10 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;

    line-height: 22px !important;
    height: 220px !important;
    max-height: 220px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Botón fijo abajo */
  #block-views-block-herramientas-block-1 .views-field-field-link {
    margin-top: auto !important;
  }
  
}
