@font-face {
    font-family: 'Libre Franklin';
    src: url('../fonts/LibreFranklin-Regular.eot');
    src: url('../fonts/LibreFranklin-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LibreFranklin-Regular.woff2') format('woff2'),
        url('../fonts/LibreFranklin-Regular.woff') format('woff'),
        url('../fonts/LibreFranklin-Regular.ttf') format('truetype'),
        url('../fonts/LibreFranklin-Regular.svg#LibreFranklin-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('../fonts/LibreFranklin-Light.eot');
    src: url('../fonts/LibreFranklin-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LibreFranklin-Light.woff2') format('woff2'),
        url('../fonts/LibreFranklin-Light.woff') format('woff'),
        url('../fonts/LibreFranklin-Light.ttf') format('truetype'),
        url('../fonts/LibreFranklin-Light.svg#LibreFranklin-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('../fonts/LibreFranklin-Medium.eot');
    src: url('../fonts/LibreFranklin-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LibreFranklin-Medium.woff2') format('woff2'),
        url('../fonts/LibreFranklin-Medium.woff') format('woff'),
        url('../fonts/LibreFranklin-Medium.ttf') format('truetype'),
        url('../fonts/LibreFranklin-Medium.svg#LibreFranklin-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('../fonts/LibreFranklin-SemiBold.eot');
    src: url('../fonts/LibreFranklin-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LibreFranklin-SemiBold.woff2') format('woff2'),
        url('../fonts/LibreFranklin-SemiBold.woff') format('woff'),
        url('../fonts/LibreFranklin-SemiBold.ttf') format('truetype'),
        url('../fonts/LibreFranklin-SemiBold.svg#LibreFranklin-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('../fonts/LibreFranklin-Bold.eot');
    src: url('../fonts/LibreFranklin-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LibreFranklin-Bold.woff2') format('woff2'),
        url('../fonts/LibreFranklin-Bold.woff') format('woff'),
        url('../fonts/LibreFranklin-Bold.ttf') format('truetype'),
        url('../fonts/LibreFranklin-Bold.svg#LibreFranklin-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('../fonts/LibreFranklin-ExtraBold.eot');
    src: url('../fonts/LibreFranklin-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LibreFranklin-ExtraBold.woff2') format('woff2'),
        url('../fonts/LibreFranklin-ExtraBold.woff') format('woff'),
        url('../fonts/LibreFranklin-ExtraBold.ttf') format('truetype'),
        url('../fonts/LibreFranklin-ExtraBold.svg#LibreFranklin-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'latoblack';
    src: url('../fonts/lato-black-webfont.woff2') format('woff2'),
         url('../fonts/lato-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
}
@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato-bold-webfont.woff2') format('woff2'),
         url('../fonts/lato-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-light-webfont.woff2') format('woff2'),
         url('../fonts/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBoldCondensed.eot');
    src: local('../fonts/Helvetica Neue Condensed Bold'), local('HelveticaNeueBoldCondensed'),
        url('../fonts/HelveticaNeueBoldCondensed.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueBoldCondensed.woff2') format('woff2'),
        url('../fonts/HelveticaNeueBoldCondensed.woff') format('woff'),
        url('../fonts/HelveticaNeueBoldCondensed.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBlackCondensed.eot');
    src: local('../fonts/Helvetica Neue Condensed Black'), local('HelveticaNeueBlackCondensed'),
        url('../fonts/HelveticaNeueBlackCondensed.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueBlackCondensed.woff2') format('woff2'),
        url('../fonts/HelveticaNeueBlackCondensed.woff') format('woff'),
        url('../fonts/HelveticaNeueBlackCondensed.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Bold.eot');
    src: local('../fonts/HelveticaNeueCyr-Bold'),
        url('../fonts/HelveticaNeueCyr-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-Bold.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-Bold.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Light.eot');
    src: local('../fonts/HelveticaNeueCyr-Light'),
        url('../fonts/HelveticaNeueCyr-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-Light.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-Light.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Medium.eot');
    src: local('../fonts/HelveticaNeueCyr-Medium'),
        url('../fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-Medium.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-Medium.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Black.eot');
    src: local('../fonts/HelveticaNeueCyr-Black'),
        url('../fonts/HelveticaNeueCyr-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-Black.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-Black.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Heavy.eot');
    src: local('../fonts/HelveticaNeueCyr-Heavy'),
        url('../fonts/HelveticaNeueCyr-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-Heavy.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-Heavy.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Roman.eot');
    src: local('../fonts/HelveticaNeueCyr-Roman'),
        url('../fonts/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-Roman.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-Roman.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-UltraLight.eot');
    src: local('../fonts/HelveticaNeueCyr-UltraLight'),
        url('../fonts/HelveticaNeueCyr-UltraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-UltraLight.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-UltraLight.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-UltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('../fonts/HelveticaNeueCyr-Thin.eot');
    src: local('../fonts/HelveticaNeueCyr-Thin'),
        url('../fonts/HelveticaNeueCyr-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueCyr-Thin.woff2') format('woff2'),
        url('../fonts/HelveticaNeueCyr-Thin.woff') format('woff'),
        url('../fonts/HelveticaNeueCyr-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'HelveticaNeueW01-66MediumIt';
    src: url('../fonts/HelveticaNeueW01-66MediumIt.eot');
    src: url('../fonts/HelveticaNeueW01-66MediumIt.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueW01-66MediumIt.woff2') format('woff2'),
        url('../fonts/HelveticaNeueW01-66MediumIt.woff') format('woff'),
        url('../fonts/HelveticaNeueW01-66MediumIt.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue-UltraLight.eot');
    src: url('../fonts/HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-UltraLight.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-UltraLight.woff') format('woff'),
        url('../fonts/HelveticaNeue-UltraLight.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

body{
    padding: 0 !important; 
    margin: 0 !important;
    font-family: "Libre Franklin",Helvetica,Arial,sans-serif !important;
    overflow-x: hidden !important;
    overflow-y: hidden;
}
body.gin--vertical-toolbar{padding-left: 0 !important; display: block;}
.toolbar-menu__title h2{font-size: 30px !important;}

#page {
    /*background-image: url(../images/fondo_pagina_web.png);*/
    padding: 0;
    background-repeat: no-repeat;
    background-size: 100% auto !important;
    background-attachment: fixed;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;  
    -webkit-background-attachment: fixed;  
    -moz-background-attachment: fixed; 
}


/********************* HEADER *********************/
/* Contenedor del header al 90% */
#header{
    padding-top: 0em;
}

#header .container-fluid{
  width:100%;
  padding: 0;
  margin:0;
  box-sizing:border-box;
}

#header .region-header{
  display:grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "logo search type live"
    "menu menu   menu menu";
  align-items:center;
  column-gap:24px;
  row-gap:14px;
}

/* Asignación de áreas */
#block-solucionweb-logobancodeguatemala{ grid-area:logo; }
#block-solucionweb-formulariodebusqueda{ grid-area:search; }
#block-solucionweb-tipografia{          grid-area:type; }
#block-solucionweb-redessociales{       grid-area:live; }
#block-solucionweb-horizontalmenu-2, .mega-host{    grid-area:menu; align-self: stretch; justify-self: stretch;}

#block-solucionweb-logobancodeguatemala > div > a:nth-child(1) {
  display: block;
}

#block-solucionweb-logobancodeguatemala > div > a:nth-child(2) {
  display: none;
}

#block-solucionweb-logobancodeguatemala > div a img{
  width: 100%;  
  max-width: 400px;
    height: auto;
}

#block-solucionweb-logobancodeguatemala{
    margin-left: 5vw;
    padding: 0;;
}
#block-solucionweb-redessociales{
    padding-right: 0 !important;
}

#block-solucionweb-formulariodebusqueda{
  justify-self: end;
  width: max-content;
}

#block-solucionweb-formulariodebusqueda form#search-block-form{
  margin-left: auto;
}



/* Menú principal */
.mega-host{
  width: 100%;
  background: #00457f;
  position: relative;
  z-index: 30;
}

/* UL tope: 90% de ancho, centrado, una sola fila */
.mega-host > ul.menu.menu-level-0{
  width: 90%;
  margin: 0 auto !important;
  padding: 14px 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: center;
}

/* Reset de li del nivel 0 y posicionamiento para el separador */
.mega-host > ul.menu.menu-level-0 > li{
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  min-width: 0;
}

/* Separador */
.mega-host > ul.menu.menu-level-0 > li.sep{
  flex:0 0 0;
  width:0;
  pointer-events:none;
  position:relative;
}

.mega-host > ul.menu.menu-level-0 > li.sep::before{
  content:"|";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.65);
  line-height:1;
}


/* Enlaces: blancos, con wrap y negrita al hover/focus */
.mega-host > ul.menu.menu-level-0 > li > a{
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  line-height: 1.25;
  display: inline-block;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 15px;;
}

.mega-host > ul.menu.menu-level-0 > li > a:first-child{
  padding-right: 5px;
}

.mega-host > ul.menu.menu-level-0 > li > a:last-child{
  padding-left: 5px;
}

.mega-host > ul.menu.menu-level-0 > li > a:not(:first-child),
.mega-host > ul.menu.menu-level-0 > li > a:not(:last-child)
{
  padding: 0 2.5px;
}

.mega-host > ul.menu.menu-level-0 > li > a:hover,
.mega-host > ul.menu.menu-level-0 > li > a:focus,
.mega-host > ul.menu.menu-level-0 > li > a:is(.is-hover)
{
  font-weight: 700 !important;
}

.menu-item.menu-item--expanded::marker{
  content: none;
}



/* Links */
#block-solucionweb-formulariodebusqueda{ 
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#block-solucionweb-formulariodebusqueda form#search-block-form{
  display: flex;
  align-items: center;
  gap: 0;
}

/* Campo de texto */
#block-solucionweb-formulariodebusqueda input.form-search{
  height: 36px;
  padding: 0 12px;
  border: 1px solid #cfd6de;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  min-width: 260px;
}

/* Contenedor del submit debe quedar pegado a la derecha del input */
#block-solucionweb-formulariodebusqueda [data-drupal-selector="edit-actions"]{
  margin: 0 !important;
}

#block-solucionweb-formulariodebusqueda [data-drupal-selector="edit-submit"]{
  display: inline-block;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background-color: #00a3cf;
  background-image: url("../images/lupa.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  min-width: 36px;
  text-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transition: background-color .2s ease;
}

#block-solucionweb-formulariodebusqueda [data-drupal-selector="edit-submit"]:hover{
  background-color:#108CB0 !important;
}


/* ====== CONTROLES TIPOGRAFÍA (A - +) ====== */
.type-controls{ display:flex; align-items:center; gap:8px; }
.type-controls .type-A{ color:#00467f; font-weight:600; }
.type-controls .btn-type{
  width:28px; height:28px; border:0; border-radius:6px;
  background:#00a3cf; color:#fff; line-height:28px; text-align:center; font-weight:700; cursor:pointer;
}
.type-controls .btn-type:hover{ background:#108CB0; }



/* Submenús */
#block-solucionweb-horizontalmenu .menu_link_content,
#block-solucionweb-horizontalmenu-2 .menu_link_content,
.navigation .block-menu .menu_link_content {
  display: none !important;
}

/* Portal sobre todo */
#mega-portal { position: relative; z-index: 2000; }

/* Panel */
.mega__panel{
  display:none;
  position: fixed;
  left: 0;
  top: var(--mega-top, 0px);
  width: 100vw;
  min-height: 50vh;
  z-index: 3000;
  background: url("/themes/custom/solucionweb/images/fondo_menu.png") center top/cover no-repeat;
  box-sizing: border-box;
  color: #fff;
  font-family: "Libre Franklin", Helvetica, Arial, Sans-serif;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.mega__panel.is-open{
  opacity: 1;
  transform: translateY(0);
}

/* Contenido interior */
.mega__wrap{
  width: min(1200px, 82%);
  min-height: 50vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 50%) 1fr;
  gap: 40px;
  align-items: center;
  padding: 28px 0 36px;
}

.mega__sub,
.mega__detail{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

/* Lista izquierda */
.mega__sub{
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.mega__sub-link{
  color:#dbe7ff;
  text-decoration: none;
  padding: 6px 0;
  display: inline-block;
  line-height: 1.25;
  outline: none;
  transition: color .15s ease, transform .15s ease;
  font-size: 1.2em;
}
.mega__sub-item.is-active .mega__sub-link,
.mega__sub-link:hover,
.mega__sub-link:focus{
  color:#fff;
  font-weight:600;
  text-decoration: none;
}


/* Detalle derecha */
.mega__detail-title{
  margin:0 0 10px;
  font-weight:700;
  font-size:1.8rem;
  margin-left: 10px;
}
.mega__detail-media{
  max-height: 50vh;
  border-radius: 20px;
  overflow: hidden;
}
.mega__detail-img{
  display:block;
  width: 80%;
  max-height: 350px;
  object-fit: cover;
  border-radius: 20px;
}

.mega__detail-desc{
  margin: 12px 0 0;
  color:#e6eefc;
  line-height: 1.55;
  width: 80%;
  font-size: 1em;
}

.mega__panel.no-media .mega__detail-media{ display:none; }
.mega__panel.no-media .mega__wrap{
  grid-template-columns: minmax(420px, 52%) 1fr;
}

.mega-host .menu_link_content{ display: none !important; }
.mega-host ul{ list-style: none !important; }
.mega-host > ul.menu.menu-level-0 > li{ display: list-item; }

.mega__sub-link:focus-visible{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega__close{
  position: absolute;
  right: 15%;
  top: 5%;
  background-color: transparent;
  border: none;
  width: 37px;
  height: 37px;
}

.mega__close > svg{
  width: 25px !important;
  height: auto !important;
}

.mega__close:hover > svg > g:nth-child(2) > rect{
  fill: #00a3cf;
}


/********************* FOOTER *********************/
#footer {
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
    color:#fff !important;
    background: url(../images/fondo-f-actualizado.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#footer .container-fluid{
  width:90%;
  margin-inline:auto;
  padding: 2em 0;
}

#footer .region-footer{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:start;
  column-gap:clamp(24px,3vw,56px);
  row-gap:24px;
}

/* Colocación de bloques existentes */
#block-solucionweb-descripcionfooter{ grid-column: 1; grid-row: 1; }
#block-solucionweb-piedepagina{       grid-column: 2; grid-row: 1; }
#block-solucionweb-redessociales-2{   grid-column: 3; grid-row: 1; }


/****
#footer .region-footer > [id*="webform"],
#footer .region-footer > .block-webform{
  grid-column:3;
  grid-row:1 / span 2;
  align-self: center;
  margin-top: 1.25rem;
}

#webform-submission-suscribete-add-form > div.js-form-item.form-item.js-form-type-textfield.form-type-textfield.js-form-item-nombre.form-item-nombre > i,
#webform-submission-suscribete-add-form > div.js-form-item.form-item.js-form-type-tel.form-type-tel.js-form-item-telefono.form-item-telefono > i,
#webform-submission-suscribete-node-611-add-form > div.js-form-item.form-item.js-form-type-textfield.form-type-textfield.js-form-item-nombre.form-item-nombre > i,
#webform-submission-suscribete-node-611-add-form > div.js-form-item.form-item.js-form-type-tel.form-type-tel.js-form-item-telefono.form-item-telefono > i,
#webform-submission-suscribete-node-22-add-form > div.js-form-item.form-item.js-form-type-textfield.form-type-textfield.js-form-item-nombre.form-item-nombre > i,
#webform-submission-suscribete-node-22-add-form > div.js-form-item.form-item.js-form-type-tel.form-type-tel.js-form-item-telefono.form-item-telefono > i,
#webform-submission-suscribete-node-145-add-form > div.js-form-item.form-item.js-form-type-textfield.form-type-textfield.js-form-item-nombre.form-item-nombre > i,
#webform-submission-suscribete-node-145-add-form > div.js-form-item.form-item.js-form-type-tel.form-type-tel.js-form-item-telefono.form-item-telefono > i,
#webform-submission-suscribete-node-175-add-form > div.js-form-item.form-item.js-form-type-textfield.form-type-textfield.js-form-item-nombre.form-item-nombre > i,
#webform-submission-suscribete-node-175-add-form > div.js-form-item.form-item.js-form-type-tel.form-type-tel.js-form-item-telefono.form-item-telefono > i{
    display: none;
}

.form-required:after{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(326deg) brightness(94%) contrast(107%);
}
***/


/* Estilos rápidos para el menú del footer */
#block-solucionweb-piedepagina ul.menu{
  list-style:none; margin:0; padding:0;
}
#block-solucionweb-piedepagina ul.menu > li{ margin:0 0 5px; }

#block-solucionweb-piedepagina > ul > li > a{
  display:block; text-decoration:none; color:#fff;
  font-size: 1em;
  border: none;
}
#block-solucionweb-piedepagina > ul > li > a:hover{
    color: #f2be1f;
}

/* Iconos sociales en línea */
#block-solucionweb-redessociales-2 > div{
  display: flex;
  flex-direction: column;
  margin-top: 5rem;
}

#block-solucionweb-redessociales-2 > div a svg{
  width: 28px !important;
  height: auto;
}

#block-solucionweb-redessociales-2 > div a:hover svg g:nth-child(2) > rect,
#block-solucionweb-redessociales-2 > div > div > a:nth-child(1):hover > svg > g:nth-child(2) > g > g > g > g > rect,
#block-solucionweb-redessociales-2 > div > div > a:nth-child(3):hover > svg > g:nth-child(2) > g > g > g > g > rect,
#block-solucionweb-redessociales-2 > div > div > a:nth-child(4):hover > svg > g:nth-child(2) > g > g > g > g > rect{
  fill: #f2be1f;
}

#block-solucionweb-redessociales-2 div.block-redes{
  display: inline-flex;
  gap: 5px;
}


#footer .footer-legal{
  width:90%; margin:24px auto 0; padding:16px 0 28px;
  border-top:1px solid rgba(255,255,255,.15);
}

#block-solucionweb-descripcionfooter > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > p{
    font-size: 1em;
    font-weight: 400;
    margin: 14px 0 0 0;
}

#block-solucionweb-descripcionfooter > div > p img.icono-info{
  height: 1em;
  width: auto;
  margin: 0 5px 3px 0;
}


#block-solucionweb-piedepagina {
    margin-top: 5rem;
}

@media (min-width:1024px) and (max-width:1240px){
  #block-solucionweb-piedepagina {
    margin-top: 5rem;
  }
}

/* Formulario del footer */
#footer .webform-submission-form{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(10px, 20px, 30px);
  row-gap: 0;
}

/* Botón en la segunda fila alineado a la derecha */
#footer .webform-submission-form .form-actions{
  grid-column: 1 / -1;
  display:flex;
  justify-content:flex-end;
  margin-top: 6px;
  width: 100%;
}

/* ===== Estilos de labels ===== */
#footer .webform-submission-form .form-item > label{
  display:block;
  font-size: .9em;
  font-weight: 400;
  color: #fff;
  margin: 0 0 3px;
}

/* ===== Inputs con solo subrayado ===== */
#footer .webform-submission-form input[type="text"],
#footer .webform-submission-form input[type="email"],
#footer .webform-submission-form input[type="tel"],
#footer .webform-submission-form input[type="search"],
#footer .webform-submission-form input[type="url"]{
  width:100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(255,255,255,.8);
  border-radius: 0;
  padding: .5rem 0 .6rem;
  color: #fff;
  box-shadow: none;
  outline: none;
}

/* Placeholder/Focus/Hover */
#footer .webform-submission-form input::placeholder{ color: rgba(255,255,255,.6); }

/* ===== Botón COMPARTIR ===== */
#footer .webform-submission-form .form-actions input[type="submit"],
#footer .webform-submission-form .form-actions button[type="submit"]{
  background: none;
  border: 0;
  font-size: 1em !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #03c5fa;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: all .2s ease;
}

#footer .webform-submission-form .form-actions input[type="submit"]:hover,
#footer .webform-submission-form .form-actions button[type="submit"]:hover{
  color: #fdbe12;
}

/* Footer – botón con icono */
#footer .webform-submission-form .form-actions .has-icon{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
}

#footer .webform-submission-form .form-actions .has-icon .icon-arrow{
	flex:0 0 20px;
	width:20px; height:20px;
	background:url("../images/flecha-derecha-circulo.png") no-repeat center / contain;
	filter: brightness(0) saturate(100%) invert(51%) sepia(80%) saturate(1057%) hue-rotate(155deg) brightness(104%) contrast(98%);
	transition: filter .2s ease;
}

#footer .webform-submission-form .form-actions .has-icon:hover .icon-arrow,
#footer .webform-submission-form .form-actions .has-icon:focus-visible .icon-arrow{
	filter: brightness(0) saturate(100%) invert(76%) sepia(55%) saturate(1562%) hue-rotate(349deg) brightness(104%) contrast(98%);
}

#block-solucionweb-webform > h2{
  font-size: 2em !important;
  font-weight: 600;
  margin-top: 35px;
}

/* Enlace "Aplicaciones Móviles" + iconos */
#footer a.app-moviles{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
}

#footer .app-moviles-icons{
  gap:.5rem;
  margin-left:.5rem;
}

#footer .app-moviles-icons .store-icon{
  display:inline-block;
  width:15px; height:15px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transition: filter .2s ease;
}

#footer .app-moviles-icons .store-icon:hover,
#footer .app-moviles-icons .store-icon:focus-visible{
  filter: brightness(0) saturate(100%) invert(76%) sepia(55%) saturate(1562%) hue-rotate(349deg) brightness(104%) contrast(98%);
}

#footer a.app-moviles,
#footer .app-moviles-icons{
  display:inline-flex;
  align-items:center;
  vertical-align: middle;
}

/* fondos */
#footer .store-icon.play{  background-image:url("../images/google-play.svg"); }
#footer .store-icon.apple{ background-image:url("../images/logotipo-de-apple.svg"); }




/*HOME*/
#contenthome{
    display: block;
    unicode-bidi: isolate;
}

#block-views-block-herramientas-block-1{width: 100%}

#contenthome .container-fluid {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Slides */
#block-views-block-herramientas-block-1 .view-herramientas{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: "Libre Franklin",Helvetica,Arial,sans-serif;
  z-index: 1;
  padding: 3% 5%;
  padding-bottom: 3%;
}

#contenthome > div > div.region-contenthome::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background-image: url(../images/adorno_fondo_slides.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  top: 8em;
}

/*
#block-views-block-herramientas-block-1::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background-image: url(../images/adorno_fondo_slides.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
}
  */

#block-views-block-herramientas-block-1 .hero-grid{
  display: grid;
  grid-template-columns: 44% 50%;
  column-gap: 4%;
  align-items: center;
  padding: 0 2px;
}
#block-views-block-herramientas-block-1 .hero-left{
  display: grid;
  gap: .9rem;
}
#block-views-block-herramientas-block-1 .hero-right a{
    border-radius: 32px;
  overflow: hidden;
}
#block-views-block-herramientas-block-1 .hero-right img{
  width: 100%;
  height: 480px;
  object-fit: contain !important;
  display: block;
  border-radius: 32px;
}

/* dots verticales */
#block-views-block-herramientas-block-1 .slick-dots{
    position: absolute;
    right: 5%;
    bottom: 60px;
    transform: none;
    display: grid !important; gap: 0;
    list-style: none; margin: 0; padding: 0; z-index: 5;
}

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

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


/* Estilos del contenido */
.slick-slide > div > div > div > div.hero-left > div.views-field.views-field-title > span,
.titulo-slide > span{
    font-size: 3.5em;
    font-weight: 700;
    line-height: 1em;
    color: #00467f;
}

#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.25em;
    font-weight: 400;
    text-align: justify;
    color: #909090;
    width: 85%;
}

div.views-field.views-field-field-link a{
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: 1px;
    color: #00a3cf;
    text-transform: uppercase;
}

div.views-field.views-field-field-link a:hover{
    color: #fdbe12;
}

div.views-field.views-field-field-link a{
	display:inline-flex;
	align-items:center;
	gap:.6rem;
	position:relative;
	text-decoration:none;
  transition: all 0.2s ease;
}

div.views-field.views-field-field-link a::after{
	content:"";
	flex:0 0 auto;
	width:20px;
	height:20px;
	background:url("../images/flecha-derecha-circulo.png") no-repeat center / contain;
	filter: brightness(0) saturate(100%) invert(48%) sepia(50%) saturate(1038%) hue-rotate(150deg) brightness(94%) contrast(103%);
	transition: filter .2s ease;
}

div.views-field.views-field-field-link a:hover::after{
  filter: brightness(0) saturate(100%) invert(79%) sepia(11%) saturate(4077%) hue-rotate(349deg) brightness(104%) contrast(98%);
}


/* Sección de tipos de cambio y resultados */
#block-solucionweb-tiposdecambio, #block-solucionweb-resultados{
    display: block;
    width: 90%;
    max-width: 90%;
    margin-inline: auto !important;
    overflow: hidden;
    padding:0;
    margin: 0;
}

#block-solucionweb-tiposdecambio{
    background: #fbfafa;
    border-radius: 25px;
}


/* Franja de arriba*/
.stats-ribbon{
  background: #00467f;
  border-radius: 25px;
  padding: 1.25rem 4%;
  margin: 0 0 1.5rem 0;
}

.ribbon-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 0;
}

@media (min-width:1024px){
  #block-solucionweb-tiposdecambio > div > div.stats-grid.stats-top3.hidden-print > div:nth-child(3) > h4 > iframe{
    padding: 0 2.5em;
  }
}

.ribbon-item > img{ display:none; }

.ribbon-item{
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ribbon-item:nth-child(1){
  background-image: url("../images/banca-movil.png");
}
.ribbon-item:nth-child(2){
  background-image: url("../images/grafico.png");
}
.ribbon-item:nth-child(3){
  background-image: url("../images/circulo-q.png");
}

/* Grid tipos de cambio */
.stats-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3rem;
  row-gap: 3rem;
  margin: 0;
  padding: 2em 4% 1em 4%;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.stats-grid > .item{
  box-sizing: border-box;
  padding: 0;
}

/* Iframes fluidos */
.stats-grid iframe{
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border: 0;
}

.resultados-dos .ingreso-divisas iframe{
  aspect-ratio: 16 / 11;
}

.resultados-dos .nota{
  display: block;
  width: 100%;
  height: auto;
  margin-top: .5rem;
}

.stats-top3 .link-azul{
  color: #002859;
  text-decoration: none;
}

#block-solucionweb-tiposdecambio > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div.stats-grid.stats-top3.hidden-print > div.item.ritmo > iframe{
    max-height: 100px;
}



/* Sección de accesos directos */
/* Contenedor principal */
#block-solucionweb-accesosdirectos{
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
  overflow: visible;
}

/* Columna izquierda (wrapper con JS) */
#block-solucionweb-accesosdirectos .ad-text-wrapper{
  display: grid;
  align-content: center;
  gap: 18px;
  max-width: 640px;
}

#block-solucionweb-accesosdirectos h2{
  margin: 0 0 4px 0;
  line-height: 1.05;
}

#block-solucionweb-accesosdirectos .field--name-body.field__item p{
  margin: 0;
}

/* Columna derecha: grid de tarjetas */
#block-solucionweb-accesosdirectos .ad-links-wrapper{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px 28px;
  align-content: center;
}

/* Tarjeta (paragraph enlace) */
#block-solucionweb-accesosdirectos .paragraph--type--enlace{
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 300px;
  padding: 28px;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  outline: 1px solid rgba(255,255,255,0.12);
  transition: transform .25s ease, outline-color .25s ease, background .25s ease;
}

#block-solucionweb-accesosdirectos .paragraph--type--enlace:hover{
  transform: translateY(-2px);
  outline-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.09);
}

/* Icono grande, centrado */
#block-solucionweb-accesosdirectos .field--name-field-icono-enlace{
  display: grid;
  place-items: center;
}

#block-solucionweb-accesosdirectos .field--name-field-icono-enlace img{
  display: block;
  max-width: 120px;
  width: 100%;
  height: auto;
}

/* Título del enlace */
#block-solucionweb-accesosdirectos .field--name-field-enlace{
  display: grid;
  place-items: center start;
}

#block-solucionweb-accesosdirectos .field--name-field-enlace a{
  font-weight: 600;
  font-size: 1.6em;
  text-decoration: none;
  line-height: 1.2;
  color: #fff;
  word-break: break-word;
  overflow-wrap: anywhere;
}


#block-solucionweb-accesosdirectos{
  position: relative;
  width: 90%;
  max-width: 90%;
  margin: 0 auto;
  padding: 40px 50px;
  padding-bottom: 65px;
  box-sizing: border-box;
  font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
  border-radius: 32px;
  overflow: hidden;
  margin-top: 3em;
}

#block-solucionweb-accesosdirectos::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: url("../images/fondo_accesos_directos.png") center/cover no-repeat;
  z-index: 0;
}

#block-solucionweb-accesosdirectos > *{
  position: relative;
  z-index: 1;
}

#block-solucionweb-accesosdirectos h2{
  font-size: 5em;
  font-weight: 700;
  color: #fff;
}
#block-solucionweb-accesosdirectos .field--name-body.field__item p{
  font-size: 1em;
  color: #fff;
}

#block-solucionweb-accesosdirectos .field--name-field-enlaces-directos.field__items{
  display:flex;
  gap:28px;
  will-change:transform;
  transition:transform .08s linear;
  padding: 0;
  padding-top:2px;
  margin-bottom:56px;
}

#block-solucionweb-accesosdirectos > div.field.field--name-field-enlaces-directos.field--type-entity-reference-revisions.field--label-hidden.field__items > div{
  padding: 4px 2px;
}

#block-solucionweb-accesosdirectos .field--name-field-enlaces-directos.field__items > .field__item{
  display: block;
}

/* Estilo de la tarjeta (equivalente a .ad-cards .paragraph--type--enlace) */
/* #block-solucionweb-accesosdirectos .field--name-field-enlaces-directos .paragraph--type--enlace{
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 300px;
  padding: 28px;
  border-radius: 22px;
  background: #023463;
  outline: 1px solid #01c1eb;
  outline-offset: 1px;
  transition: transform .25s ease, outline-color .25s ease, background .25s ease;
} */


#block-solucionweb-accesosdirectos .field--name-field-enlaces-directos .paragraph--type--enlace:hover{
  transform: translateY(-2px);
  outline-color: #01c1eb;
  background: #04539ccc;
}

/* Icono dentro de la card */
#block-solucionweb-accesosdirectos .field--name-field-icono-enlace{
  display: grid;
  place-items: start;
}
#block-solucionweb-accesosdirectos .field--name-field-icono-enlace img{
  display: block;
  max-width: 120px;
  width: 100%;
  height: auto;
}

/* Texto/enlace de la card */
#block-solucionweb-accesosdirectos .field--name-field-enlace{
  display: grid;
  place-items: center start;
}


#block-solucionweb-accesosdirectos .ad-progress{
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 25px;
  height: 2px;
  pointer-events: none;
  z-index: 6;
  display: none;
}

#block-solucionweb-accesosdirectos .ad-progress__rail{
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
  overflow: hidden;
}

#block-solucionweb-accesosdirectos .ad-progress__bar{
  width: 0%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: width .16s linear;
}


@keyframes adHintShake{
  0%{transform:translateY(0) rotate(0)}
  8%{transform:translateY(-3px) rotate(-2deg)}
  16%{transform:translateY(1px) rotate(2deg)}
  25%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(0) rotate(0)}
}

#block-solucionweb-accesosdirectos .ad-hint{
  position:absolute;
  right:5%;
  bottom:35px;
  width:80px;
  height:auto;
  pointer-events:none;
  opacity:.95;
  z-index:7;
  filter:brightness(0) saturate(100%) invert(99%) sepia(6%) saturate(334%) hue-rotate(155deg) brightness(117%) contrast(100%);
  animation:adHintShake 4s ease-in-out infinite;
  display:none;
}

/* Mobile */
@media (max-width:1024px){
  #block-solucionweb-accesosdirectos{
    padding: 0 24px;
    padding-top: 1.5em;
    overflow: visible;
  }
  #block-solucionweb-accesosdirectos .field--name-field-enlaces-directos.field__items{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row;
    gap: 28px !important;
    padding: 0 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    transform: none !important;
    overflow: hidden;
  }
  #block-solucionweb-accesosdirectos .field--name-field-enlaces-directos.field__items > .field__item{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
}



/* Sección de noticias */
.hs__sticky .news-scene{
  width: 90%;
  margin: 0 auto;
  position: relative;
}

/* layout de 2 columnas, sin fondo */
.hs__sticky .news-layout{
  position: relative;
  display: grid;
  grid-template-columns: .8fr 1.7fr;
  gap: 28px;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
}

/* izquierda fija: h2 + header de la vista */
.hs__sticky .news-left{
  display: grid;
  align-content: center;
  gap: 18px;
}

/* derecha: ventana del carrusel */
.hs__sticky .news-right{
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* pista y slides */
.hs__sticky .news-track{
  display: flex;
  height: 100%;
  will-change: transform;
}

 .hs__sticky .news-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
}

.hs__sticky .news-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 28px;
  align-content: center;
  align-items: center;
}

/* tarjeta = la imagen de la noticia */
.hs__sticky .news-cards .views-row a{
  display: block;
  border-radius: 22px;
  overflow: hidden;
  outline: 1px solid rgba(0,0,0,.12);
  transition: transform .25s ease, outline-color .25s ease, box-shadow .25s ease;
}
.hs__sticky .news-cards .views-row a:hover{
  transform: translateY(-2px);
  outline-color: rgba(0,0,0,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.hs__sticky .news-cards img{
  display: block;
  width: 100%;
  height: auto;
}

/* footer (botón +) de la vista: abajo-izquierda de la derecha */
.hs__sticky .news-footer{
  position: absolute;
  right: 0;
  bottom: 4px;
  display: flex;
}

.hs__sticky .news-footer a{
  display: inline-flex;
  font-size: 1.2em;
  font-weight: 400;
  color: #004383;
  text-transform: uppercase;
  letter-spacing: 1px;
  gap: .6rem;
}

.hs__sticky .news-footer a::after{
	content:"";
	flex:0 0 auto;
	width:20px;
	height:20px;
	background:url("../images/flecha-derecha-circulo.png") no-repeat center / contain;
	filter: brightness(0) saturate(100%) invert(9%) sepia(85%) saturate(6245%) hue-rotate(196deg) brightness(94%) contrast(111%);
	transition: filter .2s ease, transform .2s ease;
	pointer-events:none;
}

.hs__sticky .news-footer a:hover::after{
	filter: brightness(0) saturate(100%) invert(48%) sepia(50%) saturate(1038%) hue-rotate(150deg) brightness(94%) contrast(103%);
}

.hs__sticky .news-footer a:hover{
  text-decoration: none;
  color: #00a3cf;
}

#contenthome > div > div > section:nth-child(7) > div > div > div > div.news-left > div > h2,
div.news-left > div > h2{
    font-size: 5em;
    font-weight: 700;
    color: #02386c;
}

#contenthome > div > div > section:nth-child(7) > div > div > div > div.news-left > div > div.view-header,
div.news-left > div > div.view-header{
    font-size: 1.2em;
    font-weight: 400;
    color: #a9aaaa;
    width: 90%;
    text-align: justify;
}



/* Sección de publicaciones recientes */
.hs--pubs{
  padding: 2em 0;
}

.hs--pubs .news-scene{
  width: 90%;
  margin: 0 auto;
  position: relative;
}

.hs--pubs .news-layout{
  position: relative;
  display: grid;
  grid-template-columns: 1.7fr .8fr;
  gap: 28px;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: "Libre Franklin", Helvetica, Arial, sans-serif;
}

/* Izquierda (carrusel) */
.hs--pubs .news-left{
  position: relative;
  height: 100%;
  overflow: hidden;
}
.hs--pubs .news-track{
  display: flex;
  height: 100%;
  will-change: transform;
}
.hs--pubs .news-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
}
.hs--pubs .news-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 28px;
  align-content: center;
  align-items: center;
}
.hs--pubs .news-cards .views-row a{
  display: block;
  border-radius: 22px;
  overflow: hidden;
  outline: 1px solid rgba(0,0,0,.12);
  transition: transform .25s ease, outline-color .25s ease, box-shadow .25s ease;
}
.hs--pubs .news-cards .views-row a:hover{
  transform: translateY(-2px);
  outline-color: rgba(0,0,0,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.hs--pubs .news-cards img{
  display: block;
  width: 100%;
  height: auto;
}

/* Derecha (titular + descripción) */
.hs--pubs .news-right{
  display: grid;
  align-content: center;
  gap: 18px;
  max-width: 640px;
}

.hs--pubs .news-right .news-text{
  display: grid;
  gap: 18px;
}

.hs--pubs .news-right h2{
  font-size: 4em;
  line-height: 1.05;
  font-weight: 700;
  color: #02386c;
  margin: 0;
}

.hs--pubs .news-right .view-header{
  font-size: 1.2em;
  font-weight: 400;
  color: #a9aaaa;
  width: 90%;
  text-align: justify;
}

/* Footer (+) opcional en el carrusel */
.hs--pubs .news-footer{
  position: absolute;
  left: 0;
  bottom: 0;
}
.hs--pubs .news-footer a{
  display: inline-flex;
  font-size: 1.2em;
  font-weight: 400;
  color: #004383;
  text-transform: uppercase;
  letter-spacing: 1px;
  gap: .6rem;
}

.hs--pubs .news-footer a::after{
	content:"";
	flex:0 0 auto;
	width:20px;
	height:20px;
	background:url("../images/flecha-derecha-circulo.png") no-repeat center / contain;
	filter: brightness(0) saturate(100%) invert(9%) sepia(85%) saturate(6245%) hue-rotate(196deg) brightness(94%) contrast(111%);
	transition: filter .2s ease, transform .2s ease;
	pointer-events:none;
}

.hs--pubs .news-footer a:hover::after{
	filter: brightness(0) saturate(100%) invert(48%) sepia(50%) saturate(1038%) hue-rotate(150deg) brightness(94%) contrast(103%);
}

.hs--pubs .news-footer a:hover{
  text-decoration: none;
  color: #00a3cf;
}


/* Responsive */
@media (max-width: 1024px){
  .hs--pubs .news-layout{
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 18px;
  }
  .hs--pubs .news-right{ order: 2; max-width: none; width: 100%;}
  .hs--pubs .news-left{ order: 1; overflow: visible; }
  .hs--pubs .news-cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}




/* Sección de transmisiones */
#block-solucionweb-transmisiones{
    display: block;
    width: 90%;
    max-width: 90%;
    padding: 0;
    margin-inline: auto !important;
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 2em;
    float: none;
    flex: 0 0 auto;
    margin-top: 2em;
}

#block-solucionweb-transmisiones > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 55vh;
    row-gap: 1.5em;
    align-items: center;
    font-family: "Libre Franklin", Helvetica, Arial, sans-serif;
    background: url(../images/transmisiones.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: #fff;
}

#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){
    font-weight: 800;
    font-size: 4em;
}

#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){
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  white-space:nowrap;
}

/* Icono LIVE */
#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)::after{
  content:"";
  width:50px;
  height:50px;
  background:url(../images/transmision-en-vivo.png) no-repeat center / contain;  
  pointer-events:none;
  flex:0 0 50px;
}

/* Enlace "Ver transmisión" + icono */
#block-solucionweb-transmisiones > div > p:nth-child(2) > a{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  transition: all .2s ease;
  color: #fff;
  font-weight: 400;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#block-solucionweb-transmisiones > div > p:nth-child(2) > a:hover{
	color: #00a3cf;
}

/* Icono circular a la derecha */
#block-solucionweb-transmisiones > div > p:nth-child(2) > a::after{
	content:"";
	flex:0 0 auto;
	width:20px;
	height:20px;
	background:url("../images/flecha-derecha-circulo.png") no-repeat center / contain;
	filter: brightness(0) saturate(100%) invert(97%) sepia(3%) saturate(654%) hue-rotate(294deg) brightness(121%) contrast(100%);
	transition: filter .2s ease, transform .2s ease;
	pointer-events:none;
}

#block-solucionweb-transmisiones > div > p:nth-child(2) > a:hover::after{
	filter: brightness(0) saturate(100%) invert(48%) sepia(50%) saturate(1038%) hue-rotate(150deg) brightness(94%) contrast(103%);
}


#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){
    font-weight: 400;
    font-size: 1.2em;
    width: 40%;
}




/* Banner estrategias nacionales home */
#block-solucionweb-enif{
    display: block;
    width: 90%;
    max-width: 90%;
    margin-inline: auto !important;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 25px;
    margin: 6em 0;
    padding: 4em 4%;
}

#block-solucionweb-enif > div.clearfix.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > div > div{
    display: flex !important;
    flex-direction: row;
    width: 100%;
    column-gap: 3em;
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
    margin: 0 !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(1),
#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){
    width: calc((100% - 3em)/2);
}

#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(1){
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !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){
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
}


#block-solucionweb-enif > div > div > div > div:nth-child(1) > a > img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 25px;
}

#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{
    font-size: 1.2em;
    font-weight: 400;
    color: #8b8888;
    /*width: 75%;*/
    text-align: justify;
}

#block-solucionweb-enif > div > div > div > div:nth-child(2) > p:nth-child(2) > a{
    font-size: 1.2em;
    font-weight: 400;
    color: #004383;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    gap: .6rem;
}

/* Icono circular a la derecha */
#block-solucionweb-enif > div > div > div > div:nth-child(2) > p:nth-child(2) > a::after{
	content:"";
	flex:0 0 auto;
	width:20px;
	height:20px;
	background:url("../images/flecha-derecha-circulo.png") no-repeat center / contain;
	filter: brightness(0) saturate(100%) invert(9%) sepia(85%) saturate(6245%) hue-rotate(196deg) brightness(94%) contrast(111%);
	transition: filter .2s ease, transform .2s ease;
	pointer-events:none;
}

#block-solucionweb-enif > div > div > div > div:nth-child(2) > p:nth-child(2) > a:hover::after{
	filter: brightness(0) saturate(100%) invert(48%) sepia(50%) saturate(1038%) hue-rotate(150deg) brightness(94%) contrast(103%);
}

#block-solucionweb-enif > div > div > div > div:nth-child(2) > p:nth-child(2) > a:hover{
  text-decoration: none;
  color: #00a3cf;
}


/* Textos */
div.texto > div > p{
  font-size: 1.2em !important;
}

div.texto{
  font-size: 1.25em !important;
}

p.texto{
  font-size: 1.4em !important;
}




/*INTERNAS*/

#content .mega-host{
  display: none !important;
}

.regresar{display: none;}
.field--name-field-banner-desktop img{width: 100% !important; height: auto !important;}
#content {
    padding: 15px 15px 55px 15px;
    width: 90%;
    margin: 0 auto;
    max-width: 1215px;
    background: #fff;
    -webkit-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}
#leftbar{position: relative; padding: 0 0 0 15px;}

#contentInterno{
  padding: 0;
  width: 100%;
}

h1.page-title {
    font: 30px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    font-weight: 700 !important;
    color: #002857;
    margin: 0 0 20px 10px;
    padding-bottom: 9px;
}
.path-page .field--name-field-efecto-pantalla-completa{display: none;}
.node--type-obras-banner-internas, .node--type-page{padding: 0 10px;}
.node--type-page .field--name-body iframe{
    width: 100%;
    min-height: 75vh;
}
.node--type-obras-banner-internas .field--name-body, .node--type-page .field--name-body{
    font: 16px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
}
.node--type-obras-banner-internas .field--name-body img{width: 100%; height: auto;}
.node--type-obras-banner-internas .field--name-body .goback, .node--type-page .field--name-body .goback{
    border: 1px solid #c3c3c3;
    width: auto;
    float: left;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
.node--type-obras-banner-internas .field--name-body .goback:hover, .node--type-page .field--name-body .goback:hover{
    border: 1px solid #000;
}
table.tabla-banco{width: 100% !important; border: transparent;}
table.tabla-banco tr {
    color: #fff;
    margin: 0 0 10px 0;
    display: block;
    -webkit-border-radius: 10px 0 10px 0;
    border-radius: 10px 0 10px 0;
    padding: 5px 0;
}
.node--type-page .field--name-body table.tabla-banco td {
    font-size: 13px;
}
table.tabla-banco tr td {
    border-top: none;
    width: 100%;
    background-color: #004585 !important;
    padding: 10px !important;
    display: block;
    line-height: 27px;
    background-size: 100%;
}
table.tabla-banco tr a {
    color: #fff;
    text-decoration: none;
    width: 100%;
    padding: 0;
    font-size: 13px;
}

table.tabla-banco tr td span {
    line-height: 0;
    display: block;
    float: left;
}
table.tabla-banco tr td .glyphicon {
    color: #fff !important;
    margin-top: 6px;
    margin-right: 7px;
    display: block;
}

table.tabla-banco tr td .glyphicon::before{
  font-size: 17px;
  margin-top: auto;
}

table.tabla-banco tr a:hover{
    font-weight: 600;
}

/*
table.tabla-banco tr td .glyphicon:hover {
    color: #092854 !important;
    cursor: pointer;
}
*/

.node--type-galerias .field--name-field-subtitulo-galerias {
    width: 100%;
    text-align: center;
    padding: 0 0 10px 0;
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
.node--type-galerias .field--name-field-imagen-galeria img{
    width: 100%;
    margin: 0 auto;
    
    display: block;
}
.node--type-galerias .field--name-body table td p{margin: 0;}

body.path-galerias-pinoteca #leftbar {
    display: none;
}
body.path-galerias-pinoteca #contentInterno {
    width: 100% !important;
}
.view-galerias .views-row {
    width: auto;
    float: left;
    margin: 0 8px 10px 8px;
    padding: 5px;
    height: 220px;
    border: 1px solid #d8d5d5;
}
.view-galerias .views-row .views-field-field-imagen-galeria {
    width: 177px;
    height: 133px;
}
.view-galerias .views-row .views-field-field-imagen-galeria img{
    width: 100%;
    height: 133px;
}
.view-galerias .views-row .views-field-title {
    width: 177px;
    text-align: center;
    display: block;
}
.view-galerias .views-row .views-field-title a {
    color: #838383;
    text-decoration: none;
    font-size: 12px;
}
.view-galerias .views-row .views-field-field-subtitulo-galerias {
    width: 177px;
    text-align: center;
}
.view-galerias .views-row .views-field-field-subtitulo-galerias a {
    text-decoration: none;
    color: #113257;
    font-size: 11px;
    font-weight: 700;
}
.view-galerias {
    width: 90%;
    margin: 0 auto;
}
body.path-galerias-pinoteca #contentInterno h1.page-title {
    background: #6398B6 url(../images/noticias-recientes.png) no-repeat right center;
    background-size: auto;
    background-size: auto 100%;
    font: 25px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    font-weight: 700 !important;
    color: #fff;
    padding: 10px 5%;
    width: 100%;
    margin: 0 0 20px 0px;
}

#full{
    margin: -7px 0 0 0;
    padding: 0 10px;
}

.view-herramientas-banner .views-row{
    padding: 0 0 15px 0;
    border-bottom: 1px solid #2991EA;
    margin: 0 0 10px 0;
}
.view-herramientas-banner .views-row img{
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.view-herramientas-banner .views-field-field-titulo{
    position: absolute;
    bottom: 70px;
    font: 18px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    font-weight: normal;
    font-weight: bold;
    right: 15px;
    color: #fff;
}
.view-herramientas-banner .views-field-field-link-detalle-de-la-obra{
    color: #022f66;
    font: 15px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    position: absolute;
    bottom: 40px;
    right: 15px;
    font-weight: bold !important;
}
.view-herramientas-banner .views-field-field-link-detalle-de-la-obra a{
    text-decoration: none;
    color: #022f66;
}

.path-pagina-noticias .view-filters{display: none;}
.path-pagina-noticias .view-destacados .views-row {
    border-bottom: 1px solid #ccc;
    padding: 25px 0 0 15px;
}
.path-pagina-noticias .view-destacados .views-row .views-field-field-categoria-destacado {
    margin: 10px 0;
}
.view-destacados .views-field-field-subtitulo-destacado{
    color: #28508e;
    font-weight: 900;
    font-size: 16px;
}
.pager__items{display: flex; justify-content: center;}
.pager__item{padding: 0;}
.pager__item a{
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0px !important;
}
.pager__item:first-child a{border-radius: 5px 0 0 5px !important;}
.pager__item:last-child a{border-radius: 0 5px 5px 0 !important;}
.pager__items .is-active a, .pager__items .is-active a:hover{
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}
.node__content .field--name-field-fecha-destacado {
    color: #5399b9;
    padding: 0 0 10px 10px;
    font-size: 18px;
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
}
.node__content .field--name-field-subtitulo-destacado {
    color: #315793;
    padding: 0 0 10px 10px;
    font-size: 18px;
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
}

/*WEBFORMS*/
.path-webform h1 {display: none;}
.webform-submission-form {
    width: 100%;
    margin: 0 auto;
}
.webform-submission-add-form .form-item {
    position: relative;
}
.path-webform #edit-instrucciones, .webform-submission-form #edit-instrucciones{
    width: 75%;
    margin: 0 auto;
    display: table;
    color: #002857;
    font-size: 15px;
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
}
.path-webform #edit-titulo , .webform-submission-form #edit-titulo {
    background: url(../images/back-azul-banco.png) no-repeat;
      background-size: auto;
    background-size: 100% 100%;
    color: #fff;
    height: 53px;
}
.path-webform #edit-titulo h2, .webform-submission-form h2 {
    font: 35px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    padding: 4px 0;
}
.path-webform #edit-titulo .glyphicon, .webform-submission-form  .glyphicon{
    color: #fff !important;
}
.path-webform #edit-titulo .glyphicon::before, .webform-submission-form .glyphicon::before {
    padding: 0 0 0 15px;
}
#edit-direccion .col-xs-12 {
    width: 65%;
    margin: 0 auto;
    display: table;
    padding: 15px 0 0 0;
    font: 16px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    float: initial;
}
#edit-direccion .col-xs-12 p {
    color: #002857;
}
#edit-direccion .row:nth-child(2) .col-xs-12 {
    width: 80%;
    padding: 30px 0 5px 0;
}
#edit-direccion .row:nth-child(2) h4, #edit-direccion .row:nth-child(2) p {
    color: #5399b9;
}

.fa-user::before, .fa-envelope::before, .fa-commenting::before, .fa-phone::before, 
.fa-fax::before, .fa-map-marker::before, .fa-address-card::before {
    position: absolute;
    top: 8px;
    left: 22%;
    font-size: 17px;
    color: #00467f !important;;
}
.webform-submission-add-form .form-item input, 
.webform-submission-add-form .form-item textarea, 
.webform-submission-add-form .form-item select {
    width: 60%;
    margin: 0 auto;
    display: table;
    padding: 2px 0 0 40px;
    height: 34px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.webform-submission-add-form .form-item input::placeholder, 
.webform-submission-add-form .form-item textarea::placeholder, 
.webform-submission-add-form .form-item select {
    color: #00467f;
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
    opacity: 1;
}
.webform-submission-add-form .form-item select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-progress-appearance: none;
}
.webform-submission-add-form .form-item select::after{
    content: 'hola';
}
.webform-submission-add-form .form-item textarea {
    resize: none;
    height: auto;
    padding: 6px 0 0 40px;
}
.webform-submission-add-form #edit-actions {
    width: 60%;
    margin: 0 auto;
    display: table;
}
.webform-submission-add-form #edit-actions input {
    background: #00467f !important;
    border: none;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    padding: 8px 50px;
    font: 22px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    letter-spacing: 1px;
    color:#fff;
    border:2px solid #00467f !important;
}
.webform-submission-add-form #edit-actions input:hover {
    border:2px solid #00467f !important;
    color:#00467f !important;
    background: #fff !important;
}
/*PANTALLA COMPLETA*/
.fullwidth{ border: 1px solid #000;
    padding: 5px 10px;
    width: auto;
    float: right;
    cursor: pointer;
}
.fullwithcontent{ width: 100%;
    position: fixed;
    z-index: 999;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.95);
    padding: 5%;
}
.fullwithcontent .cerrarwidth{ background: #00508f;
    color: #fff;
    padding: 15px;
    float: right;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
}
.fullwithcontent #carga-htm{ height: 75vh !important; }
.fullwithcontent #goback{ display: none; }
.path-page .field--name-field-efecto-pantalla-completa{ display: none; }
.cerrarwidth{ display: none; }

/*BUSCADOR*/
.path-search #contentInterno #search-form, .path-search #contentInterno h2{display: none;}
.search-results{padding: 0;}
.search-results li{
    margin: 0;
    padding: 12px 15px;
    border-bottom: 1px solid #ccc;
}
.search-results li a{
    font-size: 15px;
    font-family: "Libre Franklin",Helvetica,Arial,Sans-serif;
}

.sitemap .sitemap-plugin--menu {
    margin-bottom: 1em;
}
.sitemap .sitemap-plugin--menu ul {
    padding-left: 1.5em;
}
.sitemap .sitemap-plugin--menu ul {
    list-style: none;
}
.sitemap-plugin--menu li a {
    font-size: 16px;
}
.sitemap-plugin--menu li a::before{
    content: "\f04b";
    font-family: "Font Awesome 5 Free";
    font-size: 13px;
    margin-right: 8px;
}
.multiple-link a{
    font: 11px "Libre Franklin",Helvetica,Arial,Sans-serif !important;
    font-size: 11px !important;
    padding: 0 20px !important;
}


.toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu .menu-item .toolbar-icon{font-size: 16px !important;}
.toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu a, .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu span{font-size: 25px !important;}
.region-breadcrumb .gin-breadcrumb{padding-right: 50px !important;}
.gin-secondary-toolbar--frontend .gin-secondary-toolbar__layout-container{width: 90% !important; margin: auto !important;}
.toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu, [dir] .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu{width: 500px !important;}

.page-node-type-herramientas-slide #contentInterno .field--name-field-imagen-slide img{height: auto; max-width: 100%;}


#off-canvas{ display:none !important; }
#off-canvas.mm-menu--opened{ display: block; }
.page-node-type-page iframe{max-width: 100% !important;}






#block-solucionweb-resultados .row{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 20px;
  align-items: start;
  float: left;
}

#block-solucionweb-resultados .row > div{ min-width: 0; }

#block-solucionweb-resultados iframe{
  width: 100% !important;
  display: block;
  border: 0;
}

.resultados-dos.stats-grid > div.ritmo-infla iframe,
.resultados-dos.stats-grid > div.imae iframe{
  height: 100%;
}

#block-solucionweb-resultados img{max-width:100%; height:auto; display:block;}
#block-solucionweb-resultados p{ line-height: 1.4; }

#block-views-block-herramientas-block-1,
#block-solucionweb-tiposdecambio,
#block-solucionweb-resultados { display: flow-root; }

/* Grid robusto */
#block-solucionweb-resultados .resultados-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  align-items: start;
}
#block-solucionweb-resultados .resultados-grid > div{ min-width: 0; }

#block-solucionweb-resultados img{ max-width:100%; height:auto; display:block; }

#block-solucionweb-resultados .row{
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;
}
#block-solucionweb-resultados .row > div{
  float: none;
  flex: 1 1 calc(33.333% - 24px);
  min-width: 0;
}

/* Contenedor */
.bgt-kpis{ width:min(1200px, 90%); margin: 0 auto; }
.bgt-kpis .grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap: 16px;
}
.bgt-kpis .card{
  background:#fff; border-radius:14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 18px 20px;
  display:flex; gap:12px; align-items:flex-start;
}
.bgt-kpis .icon{ flex:0 0 40px; height:40px; border-radius:10px; display:grid; place-items:center; }
@media (max-width: 992px){ .bgt-kpis .grid{ grid-template-columns:1fr; } }

.bgt-access{ width:min(1200px,90%); margin:24px auto; background:#0c3d69; color:#fff; border-radius:20px; padding:24px; }
.bgt-access .grid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:20px; align-items:stretch; }
.bgt-access .pill{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:center; text-align:center; }
@media (max-width: 992px){ .bgt-access .grid{ grid-template-columns:1fr; } }


.bgt-split{ width:min(1200px,90%); margin:24px auto; display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.bgt-split .media{ border-radius:20px; overflow:hidden; }
.bgt-split .media img{ width:100%; height:auto; display:block; }
@media (max-width: 992px){ .bgt-split{ grid-template-columns:1fr; } }


.bgt-news{ width:min(1200px,90%); margin:24px auto; }
.bgt-news .grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.bgt-news .card{ background:#0e1a1a; color:#cbd5e1; border-radius:16px; min-height:220px; padding:18px; }
@media (max-width: 992px){ .bgt-news .grid{ grid-template-columns:1fr; } }


.bgt-live{ width:min(1200px,90%); margin:24px auto; position:relative; }
.bgt-live .frame{ border-radius:20px; overflow:hidden; }
.bgt-live .frame iframe, .bgt-live .frame img{ width:100%; display:block; }





/* ====== tablet/móvil ====== */
@media (max-width:1024px){
  #block-solucionweb-horizontalmenu-2{
    position: relative;
    display: block;
    min-height: 64px;
  }

  /* centrar el botón en la barra (cerrado) */
  #block-solucionweb-horizontalmenu-2 .menu-toggle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);   /* centrado perfecto */
    width: 44px; height: 36px;
    background: transparent !important;
    border: 0 !important;
    padding: 0;
    cursor: pointer;
    z-index: 5;
  }

  /* 3 barritas blancas (estado cerrado) */
  #block-solucionweb-horizontalmenu-2 .menu-toggle .bar{
    display: block;
    width: 26px; height: 2px;
    background: #fff;
    margin: 5px auto;
    border-radius: 2px;
  }

  /* menú (UL) ocupa todo el ancho, alineado a la izquierda */
  #block-solucionweb-horizontalmenu-2 > .menu{
    display: none !important;          /* oculto por defecto */
    padding: 16px 24px;
    margin: 0;
    list-style: none;
    position: relative;
    z-index: 1;
  }
  #block-solucionweb-horizontalmenu-2.is-open > .menu{
    display: block !important;
    margin-top: 30px;
  }
  #block-solucionweb-horizontalmenu-2 .menu > li{ margin: 10px 0; }
  #block-solucionweb-horizontalmenu-2 .menu a::after,
  #block-solucionweb-horizontalmenu-2 .menu li::after{ content: none !important; }

  /* ESTADO ABIERTO */
  #block-solucionweb-horizontalmenu-2.is-open .menu-toggle{
    top: 12px;
    transform: translateX(-50%);
  }

  #block-solucionweb-horizontalmenu-2.is-open .menu-toggle .bar{
    opacity: 0;
  }
  #block-solucionweb-horizontalmenu-2 .menu-toggle::before,
  #block-solucionweb-horizontalmenu-2 .menu-toggle::after{
    content: "";
    position: absolute;
    left: 30%; top: 50%;
    width: 26px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%,-50%);
    opacity: 0;                            /* por defecto, ocultas */
    transition: transform .18s ease, opacity .18s ease;
  }
  #block-solucionweb-horizontalmenu-2.is-open .menu-toggle::before{
    opacity: 1;
    transform: translate(-50%,-50%) rotate(45deg);
  }
  #block-solucionweb-horizontalmenu-2.is-open .menu-toggle::after{
    opacity: 1;
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}

/* ====== desktop: menú normal, sin toggle ====== */
@media (min-width:1025px){
  #block-solucionweb-horizontalmenu-2 .menu-toggle{ display: none !important; }
  #block-solucionweb-horizontalmenu-2 > .menu{
    display: flex !important;
    gap: 28px; align-items: center;
    padding: 0; margin: 0; list-style: none;
  }
}

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



@media (max-width:1024px){
  /* oculto por defecto en móvil (evita FOUC) */
  #block-solucionweb-horizontalmenu-2 > .menu{
    display:none !important;
  }
  /* al abrir: izquierda y en columnas */
  #block-solucionweb-horizontalmenu-2.is-open-mobile > .menu{
    display:block !important;
    text-align:left !important;
    margin-top:56px;                 /* espacio para el botón/X arriba */
    padding:0 15px 18px !important;
  }
  #block-solucionweb-horizontalmenu-2.is-open-mobile > .menu > li{
    display:block !important;
    padding-right:0 !important;
  }
  #block-solucionweb-horizontalmenu-2.is-open-mobile > .menu > li::after{
    display:none !important;
  }
}


.mega-host .menu_link_content{
  display: none !important;
}


/* Tablet y móvil toggle  */
@media (max-width:1024px){
  #mega-portal, #mega-portal .mega__panel{ display:none !important; }

  .mega-host,
  #block-solucionweb-horizontalmenu-2,
  nav.menu--horizontal-menu,
  .region-primary-menu,
  .block-menu,
  .menu--horizontal-menu {
    position: relative;
    min-height: 56px;
    z-index: 30;
  }

  .sw-touch-toggle{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:40px; height:40px;
    z-index:2000;
    display:inline-flex !important;
    align-items:center; justify-content:center;
    pointer-events:auto;
  }

  .mega-host ul.menu.menu-level-0,
  #block-solucionweb-horizontalmenu-2 ul.menu.menu-level-0,
  nav.menu--horizontal-menu ul.menu.menu-level-0 {
    display: none !important;
  }

  .swm--lock, .swm--lock body{ overflow:hidden; }

  #sw-mobile-menu{
    position:fixed; left:0; top:0; width:100vw; height:100vh;
    display:none; z-index:5000;
    background: rgba(6,34,76,0.96);
    color:#fff;
  }
  
  #sw-mobile-menu.is-open{ display:block; }

  .swm__wrap{ position:absolute; inset:0; display:flex; flex-direction:column; }

  .swm__head{
    position:relative; display:flex; align-items:center; justify-content:center;
    padding:12px 48px 12px 16px; min-height:56px;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .swm__title{ font-weight:700; font-size:1.05rem; }
  .swm__close{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border:0; background:transparent; cursor:pointer;
  }
  .swm__close::before, .swm__close::after{
    content:""; position:absolute; left:50%; top:50%;
    width:22px; height:2px; background:#fff; transform-origin:center;
  }
  .swm__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .swm__close::after{  transform: translate(-50%,-50%) rotate(-45deg); }

  .swm__nav{ overflow:auto; -webkit-overflow-scrolling:touch; padding:4px 16px 28px; }
  .swm__list{ list-style:none; margin:0; padding:0; }
  .swm__item{ border-bottom:1px solid rgba(255,255,255,.22); }
  .swm__item:last-child{ border-bottom:0; }

  .swm__label{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 2px;
    color:#fff; text-decoration:none;
  }
  .swm__label:hover, .swm__label:focus{ color:#fff; font-weight:700; text-decoration:none; }

  .swm__ind{ font-weight:700; font-size:18px; line-height:1; user-select:none; }

  .swm__sub{ display:none; list-style:none; margin:0 0 10px; padding:0 0 0 14px; }
  .swm__item.is-open > .swm__sub{ display:block; }
  .swm__sub-item{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.15); }
  .swm__sub-item:last-child{ border-bottom:0; }
  .swm__sub-link{ display:block; width:100%; color:#fff; text-decoration:none; }
  .swm__sub-link:hover, .swm__sub-link:focus{ color:#fff; font-weight:700; text-decoration:none; }
}


    /*Títulos responsive */
    @media (min-width:1025px) and (max-width:1400px){
      #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: 2.5em;
      }

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

    .slick-slide{
        margin: 0 25px !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.15em;
    }
    }

    /* 404 */
    #edit-direccion > div div p,
    #edit-direccion > div:nth-child(2) > div h4{
      color: #00467f !important;
    }


/*CINTILLO HEADER */
/* ================================
   HEADER GENERAL
   ================================ */
/* ================================
   CINTILLO HEADER - DESKTOP
   ================================ */

#header .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#header .region-header {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto auto auto auto !important;
    grid-template-areas:
        "cortos cortos cortos cortos cortos"
        "banner search type social translate"
        "mega mega mega mega mega";
    align-items: center !important;
    column-gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
}

#header #block-solucionweb-translate {
    grid-area: translate !important;
    justify-self: start !important;
    position: static !important;
    right: auto !important;
    order: initial !important;
    margin-left: -5px;
    margin-right: 20px !important;

}

#header .region-header > .banner,
#header .region-header > #block-solucionweb-formulariodebusqueda,
#header .region-header > #block-solucionweb-controlesdetamanodefuente,
#header .region-header > #block-solucionweb-redessociales,
#header .region-header > .mega-host {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#block-solucionweb-cortosinformativos {
    grid-area: cortos !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #5ba2cc !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#block-solucionweb-cortosinformativos.col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#block-solucionweb-cortosinformativos .field--name-field-corto {
    position: relative !important;
    width: 100% !important;
    max-width: 950px !important;
    min-height: 31px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 10px 90px !important;
    box-sizing: border-box !important;
}

#block-solucionweb-cortosinformativos .field__item {
    display: none !important;
    width: 100% !important;
    text-align: center !important;
}

#block-solucionweb-cortosinformativos .field__item.is-active {
    display: block !important;
}

#block-solucionweb-cortosinformativos .field__item a {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    pointer-events: none;
}

#block-solucionweb-cortosinformativos .sw-cortos-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #5ba2cc !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#block-solucionweb-cortosinformativos .sw-cortos-prev {
    left: 18px !important;
}

#block-solucionweb-cortosinformativos .sw-cortos-next {
    right: 18px !important;
}

#header .banner {
    grid-area: banner !important;
    justify-self: start !important;
    padding-left: 70px !important;
}

#block-solucionweb-formulariodebusqueda {
    grid-area: search !important;
    justify-self: end !important;
}

#block-solucionweb-controlesdetamanodefuente {
    grid-area: type !important;
    justify-self: center !important;
}

#block-solucionweb-redessociales {
    grid-area: social !important;
    justify-self: end !important;
    padding-right: 70px !important;
}

#header .mega-host {
    grid-area: mega !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hover iconos carrusel cortos informativos */
#block-solucionweb-cortosinformativos .sw-cortos-btn {
  cursor: pointer !important;
}

/* Transición suave */
#block-solucionweb-cortosinformativos .sw-cortos-btn svg circle,
#block-solucionweb-cortosinformativos .sw-cortos-btn svg path {
  transition: fill 0.25s ease, stroke 0.25s ease, opacity 0.25s ease !important;
}

/* Hover: fondo celeste y flecha blanca */
#block-solucionweb-cortosinformativos .sw-cortos-btn:hover svg circle {
  fill: #5ba2cc !important;
}

#block-solucionweb-cortosinformativos .sw-cortos-btn:hover svg path {
  stroke: #ffffff !important;
}

/* Accesibilidad con teclado */
#block-solucionweb-cortosinformativos .sw-cortos-btn:focus-visible svg circle {
  fill: #5ba2cc !important;
}

#block-solucionweb-cortosinformativos .sw-cortos-btn:focus-visible svg path {
  stroke: #ffffff !important;
}
/* ================================
   CINTILLO HEADER - MÓVIL
   Este bloque debe quedar al final
   ================================ */

@media (max-width: 767px) {

    #header .region-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "cortos"
            "banner"
            "search"
            "type"
            "social"
            "translate"
            "mega" !important;
        row-gap: 8px !important;
        align-items: center !important;
    }

    #header #block-solucionweb-translate {
        grid-area: translate !important;
        justify-self: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 15px 8px !important;
    }

    #block-solucionweb-cortosinformativos {
        grid-area: cortos !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #block-solucionweb-cortosinformativos .field--name-field-corto {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 38px !important;
        padding: 8px 42px !important;
    }

    #block-solucionweb-cortosinformativos .field__item a {
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    #block-solucionweb-cortosinformativos .sw-cortos-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 16px !important;
    }

    #block-solucionweb-cortosinformativos .sw-cortos-prev {
        left: 10px !important;
    }

    #block-solucionweb-cortosinformativos .sw-cortos-next {
        right: 10px !important;
    }

    #header .banner {
        grid-area: banner !important;
        justify-self: center !important;
        width: 100% !important;
        padding: 10px 15px 0 !important;
        text-align: center !important;
    }

    #header .banner img {
        max-width: 260px !important;
        width: 100% !important;
        height: auto !important;
    }

    #block-solucionweb-formulariodebusqueda {
        grid-area: search !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 340px !important;
        padding: 0 15px !important;
    }

    #block-solucionweb-formulariodebusqueda form {
        display: flex !important;
        width: 100% !important;
    }

    #block-solucionweb-formulariodebusqueda .form-type-search {
        flex: 1 !important;
        margin: 0 !important;
    }

    #block-solucionweb-formulariodebusqueda input[type="search"] {
        width: 100% !important;
    }

    #block-solucionweb-controlesdetamanodefuente {
        grid-area: type !important;
        justify-self: center !important;
    }

    #block-solucionweb-redessociales {
        grid-area: social !important;
        justify-self: center !important;
        padding: 0 15px 8px !important;
    }

    #header .mega-host {
        grid-area: mega !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   OTROS ACCESOS - DISEÑO FINAL
   ========================================================= */

#block-solucionweb-accesosdirectos {
  position: relative !important;
  width: 90% !important;
  max-width: 90% !important;
  margin: 3em auto 0 auto !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: block !important;
  font-family: "Libre Franklin", Helvetica, Arial, sans-serif !important;
}

/* Quitar fondo anterior del bloque */
#block-solucionweb-accesosdirectos::before {
  content: none !important;
  display: none !important;
}

/* Título principal */
#block-solucionweb-accesosdirectos h2 {
  color: #28487c !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 0 24px 24px !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* Contenedor de cards */
#block-solucionweb-accesosdirectos .field--name-field-enlaces-directos.field__items {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

/* Item de Drupal */
#block-solucionweb-accesosdirectos .field--name-field-enlaces-directos.field__items > .field__item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Card */
#block-solucionweb-accesosdirectos .paragraph--type--enlace {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 250px !important;
  min-height: 144px !important;
  padding: 50px !important;
  box-sizing: border-box !important;
  border-radius: 25px !important;
  background: #f7f7f7 !important;
  outline: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Imagen de fondo del hover */
#block-solucionweb-accesosdirectos .paragraph--type--enlace::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background-image: url("../images/fondo-card-accesos-directos.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0 !important;
  z-index: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

#block-solucionweb-accesosdirectos .paragraph--type--enlace:hover::before {
  opacity: 1 !important;
}


/* Hover card */
#block-solucionweb-accesosdirectos .paragraph--type--enlace:hover {
  background: #004986 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 73, 134, 0.16) !important;
}

#block-solucionweb-accesosdirectos .paragraph--type--enlace:hover::before,
#block-solucionweb-accesosdirectos .paragraph--type--enlace:hover::after {
  opacity: 1 !important;
}

/* Icono */
#block-solucionweb-accesosdirectos .field--name-field-icono-enlace {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Imagen del icono */
#block-solucionweb-accesosdirectos .field--name-field-icono-enlace img {
  display: block !important;
  width: 45px !important;
  height: 45px !important;
  max-width: 45px !important;
  object-fit: contain !important;
  transition: filter 0.3s ease !important;
}

/* Icono blanco en hover */
#block-solucionweb-accesosdirectos .paragraph--type--enlace:hover .field--name-field-icono-enlace img {
  filter: brightness(0) invert(1) !important;
}

/* Contenedor del texto */
#block-solucionweb-accesosdirectos .field--name-field-enlace {
   position: absolute !important;
   width: 65%;
   left: 20%;
   right: 0;
   bottom: 30px;

  z-index: 3 !important;
  display: block !important;

  text-align: right !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Link / título */
#block-solucionweb-accesosdirectos .field--name-field-enlace a {
   position: static !important;
  display: block !important;
  width: 100% !important;

  color: #28487c !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;

  word-break: normal !important;
  overflow-wrap: normal !important;

  transition: color 0.3s ease !important;
}

/* Hace que toda la card sea clickeable */
#block-solucionweb-accesosdirectos .field--name-field-enlace a::after {
  content: "" !important;
  position: absolute !important;
  inset: -120px -24px -24px -170px !important;
  z-index: 4 !important;
}

/* Texto blanco en hover */
#block-solucionweb-accesosdirectos .paragraph--type--enlace:hover .field--name-field-enlace a {
  color: #ffffff !important;
}


/*UTLIMAS NOTICIAS Y PUBLICACIONES RECIENTES TIPO CARDS*/
/* =========================================
   DESTACADOS - GRID GENERAL
========================================= */

.sw-destacados-grid {
  margin-top: 65px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0 5% !important;
  box-sizing: border-box !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* =========================================
   TÍTULOS SUPERIORES
========================================= */

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) > h2 {
  margin: 0 0 10px 0 !important;
  padding: 12px 22px !important;
  color: #ffffff !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  background-color: #00508f !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#block-solucionweb-views-block-destacados-block-1 > h2 {
  background-image: url("../images/fondo-ingt.png") !important;
}

@media (min-width: 1025px) and (max-width: 1156px){
  #block-solucionweb-views-block-destacados-block-1 > h2 {
    padding-right: 40% !important;
  }
}

#block-solucionweb-views-block-destacados-block-2 > h2 {
  background-image: url("../images/fondo-eve.png") !important;
}


/* =========================================
   CARD GRIS DEL BLOQUE
========================================= */

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .destacados {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 350px !important;
  overflow: hidden !important;
  background: #f8f8f8 !important;
  border-radius: 32px !important;
  padding: 58px 27px 24px !important;
  box-sizing: border-box !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .view-footer {
    width: auto;
    position: absolute !important;
    left: 25px !important;
    bottom: 35px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 4px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}


/* =========================================
   CARRUSEL LOOP POR ELEMENTOS
========================================= */

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .view-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;

  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;

  transform: translate3d(0, 0, 0);
  will-change: transform;

  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: pan-y !important;

  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .view-content::-webkit-scrollbar {
  display: none !important;
}


/* Cards */
:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-row {
  flex: 0 0 86% !important;
  min-width: 86% !important;
  max-width: 86% !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}


/* Elemento anterior / laterales */
:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-row:not(.is-active) {
  transform: scale(0.985) !important;
  transform-origin: right center !important;
  opacity: 0.82 !important;
}


/* Elemento activo */
:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-row.is-active {
  transform: scale(1) !important;
  opacity: 1 !important;
}


/* Evita pulsación en salto invisible del loop */
:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .view-content.is-loop-jumping .views-row {
  transition: none !important;
}


/* Drag */
:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .view-content.is-dragging {
  cursor: grabbing !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .view-content.is-dragging a {
  pointer-events: none !important;
}


/* =========================================
   IMAGEN
========================================= */

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-field-field-imagen-destacado {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-field-field-imagen-destacado img {
  width: 100% !important;
  max-width: 98% !important;
  height: 227px !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 12px !important;

  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}


/* =========================================
   TÍTULO DEBAJO DE LA IMAGEN
========================================= */

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-field-field-subtitulo-destacado {
  margin-top: 12px !important;
  width: 85% !important;
  min-height: 2.7em !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-field-field-subtitulo-destacado .field-content {
  color: #003f77 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;

  min-height: 2.7em !important;
  max-height: 2.7em !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .views-field-field-subtitulo-destacado .field-content:empty {
  display: block !important;
  min-height: 2.7em !important;
}


/* =========================================
   BOTÓN SIGUIENTE
========================================= */

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .sw-destacados-next {
  margin: 18px 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #003f77 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .sw-destacados-next svg {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

:is(
  #block-solucionweb-views-block-destacados-block-1,
  #block-solucionweb-views-block-destacados-block-2
) .sw-destacados-next:hover svg {
  transform: scale(1.12) !important;
}


/* =========================================
   RESPONSIVE TABLET
========================================= */

@media (max-width: 1024px) {
  .sw-destacados-grid {
    margin-top: 52px !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) > h2 {
    font-size: 32px !important;
    padding: 11px 20px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .destacados {
    min-height: auto !important;
    padding: 42px 18px 24px !important;
    border-radius: 28px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .view-content {
    gap: 16px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-row {
    flex: 0 0 88% !important;
    min-width: 88% !important;
    max-width: 88% !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-field-field-imagen-destacado img {
    height: 240px !important;
  }
}


/* =========================================
   RESPONSIVE MOBILE
========================================= */

@media (max-width: 767px) {
  .sw-destacados-grid {
    margin-top: 42px !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: hidden !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) > h2 {
    font-size: 21px !important;
    padding: 11px 16px !important;
    margin: 0 0 8px 0 !important;
    border-radius: 14px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .destacados {
    padding: 24px 14px 18px !important;
    border-radius: 24px !important;
    min-height: auto !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .view-content {
    gap: 10px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-row {
    flex: 0 0 92% !important;
    min-width: 92% !important;
    max-width: 92% !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-row:not(.is-active) {
    transform: scale(0.99) !important;
    opacity: 0.82 !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-field-field-imagen-destacado img {
    height: 210px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-field-field-subtitulo-destacado {
    width: 92% !important;
    margin-top: 10px !important;
    min-height: 2.8em !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-field-field-subtitulo-destacado .field-content {
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: 2.8em !important;
    max-height: 2.8em !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .sw-destacados-next {
    margin-top: 16px !important;
    font-size: 13px !important;
    gap: 7px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .sw-destacados-next svg {
    width: 28px !important;
    height: 28px !important;
  }
}


/* =========================================
   MOBILE PEQUEÑO
========================================= */

@media (max-width: 480px) {
  .sw-destacados-grid {
    margin-top: 36px !important;
    gap: 24px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .destacados {
    padding: 22px 12px 18px !important;
    border-radius: 22px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .view-content {
    gap: 8px !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-row {
    flex: 0 0 94% !important;
    min-width: 94% !important;
    max-width: 94% !important;
  }

  :is(
    #block-solucionweb-views-block-destacados-block-1,
    #block-solucionweb-views-block-destacados-block-2
  ) .views-field-field-imagen-destacado img {
    height: 190px !important;
  }
}

/* =========================================================
   INDICADORES GT + EVENTO ESPECIAL
   ESTRUCTURA FINAL:
   TITULO ARRIBA
   CONTENIDO ABAJO
========================================================= */

.sw-home-cards-grid {
  margin-top: 20px !important;
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-between;
  justify-content: space-between;
  gap: 14px !important;
  width: 100% !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  box-sizing: border-box !important;
}

/* Cada bloque */
.sw-home-cards-grid #block-solucionweb-indicadoreshome,
.sw-home-cards-grid #block-solucionweb-pibregional {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* TITULO AZUL ARRIBA */
.sw-home-cards-grid #block-solucionweb-indicadoreshome > h2,
.sw-home-cards-grid #block-solucionweb-pibregional > h2 {
  margin: 0 0 10px 0 !important;
  padding: 12px 22px !important;
  color: #ffffff !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  border-radius: 15px !important;
}
/* FONDO INDICADORES HOME */
.sw-home-cards-grid #block-solucionweb-indicadoreshome > h2 {
  background-image: url("../images/fondo-ingt.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* FONDO NOCHE CULTURAL PIB REGIONAL HOME */
.sw-home-cards-grid #block-solucionweb-pibregional > h2 {
  background-image: url("../images/fondo-eve.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* El contenido va separado debajo del título */
.sw-home-cards-grid #block-solucionweb-indicadoreshome > .field--name-body,
.sw-home-cards-grid #block-solucionweb-pibregional > .field--name-body {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Reset estructura CKEditor / Bootstrap */
.sw-home-cards-grid #block-solucionweb-indicadoreshome .bs_grid,
.sw-home-cards-grid #block-solucionweb-indicadoreshome .row,
.sw-home-cards-grid #block-solucionweb-pibregional .row,
.sw-home-cards-grid #block-solucionweb-indicadoreshome .col-xxl,
.sw-home-cards-grid #block-solucionweb-pibregional .col-xxl {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sw-home-cards-grid #block-solucionweb-pibregional .bs_grid{
  height: 100%;
}

/* =========================================================
   INDICADORES GT
   SOLO IMAGEN OCUPANDO TODO EL CONTENEDOR
========================================================= */

.sw-home-cards-grid #block-solucionweb-indicadoreshome > .field--name-body {
  background: #f8f8f8 !important;
  border-radius: 32px !important;
  overflow: hidden !important;
}

.sw-home-cards-grid #block-solucionweb-indicadoreshome .row {
  display: block !important;
}

.sw-home-cards-grid #block-solucionweb-indicadoreshome .row > .col-xxl {
  width: 100% !important;
}

.sw-home-cards-grid #block-solucionweb-indicadoreshome a {
  display: block !important;
  width: 100% !important;
}

.sw-home-cards-grid #block-solucionweb-indicadoreshome{ border-radius: 32px !important; }
.sw-home-cards-grid #block-solucionweb-indicadoreshome img {
  display: block !important;
  width: 100% !important;
  height: 530px !important;
  object-fit: contain; !important;
  border-radius: 32px !important;
}

/* =========================================================
   EVENTO ESPECIAL
   2 FILAS:
   1) IMAGEN
   2) BLOQUE AZUL CON TEXTO
========================================================= */

.sw-home-cards-grid #block-solucionweb-pibregional > .field--name-body {
  border-radius: 32px !important;
  overflow: hidden !important;
}

.sw-home-cards-grid #block-solucionweb-pibregional .row {
  display: flex !important;
  gap: 0px !important;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Fila 1: imagen */
.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child {
  overflow: hidden !important;
  border-radius: 32px 32px 8px 8px !important;
}

.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child img {
  display: block !important;
  width: 100% !important;
  height: 328px !important;
  object-fit: contain; !important;
  border-radius: 32px 32px 8px 8px !important;
}

/* Fila 2: bloque azul */
.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child {
  position: relative !important;
  min-height: 187px !important;
  padding: 20px 22px 48px !important;
  background: #00508f url("../images/fondo-nc.png") center center / cover no-repeat !important;
  border-radius: 8px 8px 32px 32px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin-top: 10px !important;
  flex-grow: 1;
}
/* Título interno */
.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child h2 {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  border-radius: 0 !important;
}

/* Descripción */
.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child .texto {
 margin: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    max-width: 80% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Párrafo del botón */
.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child p:last-child {
  margin: 0 !important;
}

/* Botón Ver más */
.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child p:last-child a {
      position: absolute !important;
    right: 22px !important;
    bottom: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 4px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child p:last-child a::after {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 0 !important;

  display: inline-block !important;

  background-image: url("../images/arrow-wh-s.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {
  .sw-home-cards-grid {
    flex-direction: column;
    gap: 24px !important;
  }

  .sw-home-cards-grid #block-solucionweb-indicadoreshome img {
    height: 300px !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child img {
    height: 220px !important;
  }
}

@media (max-width: 767px) {
  .sw-home-cards-grid {
    flex-direction: column;
    gap: 24px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .sw-home-cards-grid #block-solucionweb-indicadoreshome > h2,
  .sw-home-cards-grid #block-solucionweb-pibregional > h2 {
    font-size: 21px !important;
    padding: 11px 16px !important;
    border-radius: 14px !important;
  }

  .sw-home-cards-grid #block-solucionweb-indicadoreshome > .field--name-body,
  .sw-home-cards-grid #block-solucionweb-indicadoreshome img {
    border-radius: 24px !important;
  }

  .sw-home-cards-grid #block-solucionweb-indicadoreshome img {
    height: 220px !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional > .field--name-body {
    border-radius: 24px !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child,
  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child img {
    border-radius: 24px 24px 8px 8px !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child img {
    height: 180px !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child {
    min-height: auto !important;
    padding: 18px 16px 54px !important;
    border-radius: 8px 8px 24px 24px !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child h2 {
    font-size: 22px !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child .texto {
    max-width: 100% !important;
    -webkit-line-clamp: 5 !important;
  }

  .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:last-child p:last-child a {
    right: 16px !important;
    bottom: 16px !important;
    font-size: 10px !important;
    letter-spacing: 3px !important;
  }
}


.block-redes {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.block-redes a {
  width: 34px !important;
  height: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border-radius: 50% !important;
  text-decoration: none !important;

  font-size: 0 !important;
  line-height: 0 !important;

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

  transition: background 0.25s ease, transform 0.25s ease !important;
}

.block-redes a svg {
  height: 20px !important;
  width: auto !important;
  display: block !important;

  margin: auto !important;
  flex: 0 0 auto !important;

  transition: opacity 0.25s ease, fill 0.25s ease !important;
}

.block-redes a:hover {
  background: #ffffff !important;
  transform: scale(1.08) !important;
}

.block-redes a:hover svg {
  opacity: 1 !important;
}

.block-redes a:hover svg path,
.block-redes a:hover svg g {
  fill: #0078AE !important;
}


/* =========================================================
   INTERNAS DRUPAL - OPTIMIZADO
   Diferencia real:
   - article.sw-page-text     = páginas con contenido normal
   - article.sw-page-options  = páginas tipo menú/opciones
========================================================= */

/* ================================
   VARIABLES GENERALES
================================ */
#content {
  --sw-font: "Libre Franklin", Helvetica, Arial, sans-serif;
  --sw-blue: #00508f;
  --sw-blue-dark: #00508f;
  --sw-title-blue: #00508f;
  --sw-text: #222222;
  --sw-accent: #5ba2cc;
  --sw-line: rgba(0, 196, 235, 0.85);
  --sw-card-text: #fcfafa;
  --sw-options-card: rgba(0, 76, 145, 0.58);
  --sw-back-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 15H12.414l4.122-4.12c.39-.39.39-1.02 0-1.42a1.004 1.004 0 0 0-1.415 0l-5.657 5.66c-.239.24-.314.57-.259.88-.055.31.02.64.259.88l5.657 5.66c.391.39 1.024.39 1.415 0 .39-.39.39-1.03 0-1.42L12.414 17H23c.552 0 1-.45 1-1s-.448-1-1-1zM16 30C8.268 30 2 23.73 2 16S8.268 2 16 2s14 6.27 14 14-6.268 14-14 14zM16 0C7.164 0 0 7.16 0 16s7.164 16 16 16 16-7.16 16-16S24.836 0 16 0z'/%3E%3C/svg%3E");
}

/* ================================
   BASE INTERNA
================================ */
#contentInterno {
  width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#content:has(article.sw-page-text),
#content:has(article.sw-page-options) {
  background: transparent !important;
  padding: 0 15px 55px 15px !important;
  border-radius: 0 !important;
}

#block-solucionweb-content article.node--type-page {
  padding: 0 !important;
}

#contentInterno #block-solucionweb-titulodelapagina {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

#contentInterno #block-solucionweb-titulodelapagina > h1.page-title,
#contentInterno #block-solucionweb-titulodelapagina > h1.page-title span {
  font-family: var(--sw-font) !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   BOTÓN REGRESAR - COMÚN PARA TEXTO Y OPCIONES
========================================================= */
#block-solucionweb-content article.sw-page-text #goback,
#block-solucionweb-content article.sw-page-options #goback {
  margin-top: 32px !important;
  display: flex !important;
  /*justify-content: flex-start !important;*/
}

#block-solucionweb-content article.sw-page-text .field--name-body .goback,
#block-solucionweb-content article.sw-page-options .field--name-body .goback {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;

  color: var(--sw-accent) !important;
  font-family: var(--sw-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  cursor: pointer !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body .goback *,
#block-solucionweb-content article.sw-page-options .field--name-body .goback * {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body .goback::before,
#block-solucionweb-content article.sw-page-options .field--name-body .goback::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;

  background-color: var(--sw-accent) !important;

  -webkit-mask-image: var(--sw-back-icon) !important;
  mask-image: var(--sw-back-icon) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body .goback:hover,
#block-solucionweb-content article.sw-page-options .field--name-body .goback:hover {
  color: var(--sw-blue-dark) !important;
  border: 0 !important;
  background: transparent !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body .goback:hover::before,
#block-solucionweb-content article.sw-page-options .field--name-body .goback:hover::before {
  background-color: var(--sw-blue-dark) !important;
}

/* Si NO quieres mostrar regresar dentro de opciones, descomenta esto:
#block-solucionweb-content article.sw-page-options #goback {
  display: none !important;
}
*/

/* =========================================================
   1) PÁGINA NORMAL: TÍTULO + TEXTO
========================================================= */
#contentInterno:has(article.sw-page-text) #block-solucionweb-titulodelapagina > h1.page-title,
body.path-preguntas-frecuentes #block-solucionweb-titulodelapagina > h1.page-title{
  margin: 20px 0 10px 0 !important;
  padding: 35px 22px !important;

  color: #ffffff !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  text-align: left !important;

  background-color: var(--sw-title-blue) !important;
  background-image: url("../images/fondo-titulo-monolito.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  border-radius: 15px !important;
  overflow: hidden !important;
}

#contentInterno:has(article.sw-page-text) #block-solucionweb-titulodelapagina > h1.page-title span {
  color: #ffffff !important;
  font: inherit !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body {
  background: var(--sw-card-text) !important;
  border-radius: 24px !important;
  padding: 50px 65px !important;
  box-sizing: border-box !important;

  color: var(--sw-text) !important;
  font-family: var(--sw-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* Normaliza texto antiguo con font/span inline */
#block-solucionweb-content article.sw-page-text .field--name-body :where(p, span, div, li, td) {
  color: var(--sw-text) !important;
  font-family: var(--sw-font) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body p {
  margin: 0 0 18px 0 !important;
  color: #000;
  /*text-align: justify !important;*/
}

#block-solucionweb-content article.sw-page-text .field--name-body :where(strong, b) {
  color: #315f9b !important;
  font-family: var(--sw-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body blockquote {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body :where(ul, ol) {
  margin: 0 0 18px 22px !important;
  padding: 0 !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body li {
  margin-bottom: 8px !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body img {
  max-width: 100% !important;
  height: auto !important;
}

/* Importante: las tablas .tabla-banco dentro de páginas de texto son tablas de contenido,
   NO menús. Se resetean para que no tomen el estilo azul de opciones. */
#block-solucionweb-content article.sw-page-text .field--name-body table.tabla-banco {
  display: table !important;
  width: 100% !important;
  margin-bottom: 18px !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border: 0 !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body table.tabla-banco tbody {
  display: table-row-group !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body table.tabla-banco tr {
  display: table-row !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sw-text) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body table.tabla-banco td {
  display: table-cell !important;
  width: auto !important;
  padding: 10px !important;
  vertical-align: top !important;

  color: var(--sw-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  line-height: 1.45 !important;
}

#block-solucionweb-content article.sw-page-text .field--name-body table.tabla-banco a {
  color: #00508f !important;
  text-decoration: none !important;
}

/* =========================================================
   2) PÁGINA MENÚ / OPCIONES
========================================================= */
#contentInterno:has(article.sw-page-options) {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  padding: 24px 32px 38px !important;
  box-sizing: border-box !important;
}

#contentInterno:has(article.sw-page-options) > * {
  position: relative !important;
  z-index: 1 !important;
}

#contentInterno:has(article.sw-page-options) #block-solucionweb-titulodelapagina > h1.page-title {
    margin: 0 0 10px 0 !important;
    padding: 35px 22px !important;
    color: #ffffff !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    text-align: left !important;
    background-color: var(--sw-title-blue) !important;
    background-image: url(../images/fondo-titulo-monolito.png) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

#contentInterno:has(article.sw-page-options) #block-solucionweb-titulodelapagina > h1.page-title span {
  color: #ffffff !important;
  font: inherit !important;
}

#contentInterno:has(article.sw-page-options) article.sw-page-options {
  padding: 0 !important;
}

#contentInterno:has(article.sw-page-options) article.sw-page-options .field--name-body {
  background: var(--sw-card-text) !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
  box-sizing: border-box !important;
}

/* Tabla del menú convertida en listado */
#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tbody,
#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sw-title-blue) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr td {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;

  color: var(--sw-title-blue) !important;
  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
  line-height: normal !important;

  transition: background 0.25s ease !important;
}

#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:last-child td {
  border-bottom: 0 !important;
}

/* Corrige el HTML generado: a vacío + span.glyphicon + a texto */
#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td:has(> a:first-child + span.glyphicon) > a:first-child {
  display: none !important;
}

/* Link de texto */
#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--sw-title-blue) !important;
  font-family: var(--sw-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  background: transparent !important;
  transform: none !important;
}

/* Icono cuando está fuera o dentro del enlace */
#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco .glyphicon {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;

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

  color: var(--sw-title-blue) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco .glyphicon::before {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Hover por fila completa */
#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td {
  background: var(--sw-title-blue) !important;
}

#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td > a,
#contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover .glyphicon{
  color: #fff !important;
}

/* Quita zebra de Bootstrap */
#contentInterno:has(article.sw-page-options) article.sw-page-options .table-striped > tbody > tr:nth-of-type(odd),
#contentInterno:has(article.sw-page-options) article.sw-page-options .table-striped > tbody > tr:nth-of-type(even) {
  background-color: transparent !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 767px) {
  #content:has(article.sw-page-text),
  #content:has(article.sw-page-options) {
    padding: 0 14px 40px 14px !important;
  }

  #contentInterno:has(article.sw-page-text) #block-solucionweb-titulodelapagina > h1.page-title {
    padding: 24px 18px !important;
    font-size: 26px !important;
    border-radius: 14px !important;
  }

  #block-solucionweb-content article.sw-page-text .field--name-body {
    padding: 28px 22px !important;
    border-radius: 20px !important;
  }

  #contentInterno:has(article.sw-page-options) {
    padding: 22px 16px 28px !important;
    border-radius: 16px !important;
  }

  #contentInterno:has(article.sw-page-options) #block-solucionweb-titulodelapagina > h1.page-title {
    font-size: 26px !important;
  }

  #contentInterno:has(article.sw-page-options) article.sw-page-options .field--name-body {
    padding: 14px 16px !important;
  }

  #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr td {
    padding: 12px 6px !important;
  }

  
.container-fluid {
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 10px;
}
  
}
/* Hover del botón regresar en páginas de opciones: solo cambio de color */
#block-solucionweb-content article.node--type-page.sw-page-options .field--name-body .goback:hover,
#block-solucionweb-content article.node--type-page.sw-page-options .field--name-body .goback:hover * {
  color: #f2be1f !important;
  background: transparent !important;
  border: 0 !important;
}

/* Hover del icono */
#block-solucionweb-content article.node--type-page.sw-page-options .field--name-body .goback:hover::before {
  background-color: #f2be1f !important;
}

/* =========================================================
   INTERNAS - MENÚ OPCIONES CON HIJOS
   Ejemplo: Libros, Videos, Exposiciones
========================================================= */

/* El td con hijos ya no debe comportarse como fila flex */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link {
  display: block !important;
  align-items: initial !important;
  gap: 0 !important;

  width: 100% !important;
  padding: 12px 10px 14px 10px !important;
  box-sizing: border-box !important;

  color: #ffffff !important;
}

/* Reset de párrafos dentro del grupo */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link p {
  display: block !important;
  width: 100% !important;

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

  color: #ffffff !important;
  font-family: var(--sw-font) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Primer párrafo: título del grupo, ejemplo "Libros:" */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link p:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin-bottom: 8px !important;

  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Icono del título */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link p:first-child .glyphicon {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;

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

  color: #ffffff !important;
}

/* Párrafos hijos debajo del título */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link p:not(:first-child) {
  padding-left: 28px !important;
  margin-top: 6px !important;
}

/* Links hijos */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link p:not(:first-child) a {
  display: block !important;

  width: auto !important;
  max-width: 100% !important;

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

  color: #ffffff !important;
  font-family: var(--sw-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

/* Hover solo en links hijos */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link p:not(:first-child) a:hover {
  color: #82b8d8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Evita que la regla global .multiple-link a reduzca demasiado estos links */
#contentInterno:has(article.sw-page-options) 
article.sw-page-options table.tabla-banco td.multiple-link a {
  font-size: 13px !important;
  padding: 0 !important;
}


.webform-submission-consulta-nuestra-informacion-form{ width: 80%; }
.webform-submission-consulta-nuestra-informacion-form .captcha .captcha__element{
    width: auto;
    margin: 0 auto 20px;
    display: table;
}


/* ===========================================================================
   Layout con el control de tamano de letra activo
   ---------------------------------------------------------------------------
   slick fija alturas en px al inicializar (.slick-slide 521px, .slick-list).
   Si la tipografia se amplia despues, el contenido crece pero esas alturas no
   se recalculan: .slick-list { overflow:hidden } recorta lo que sobra, la
   imagen se corta en los extremos y los titulos quedan bajo la imagen.
   Las columnas del hero tambien estan en px fijos (483px 549px).

   La clase .ui-font-scaled la pone js/dark-iframes.js solo cuando la escala
   es distinta de 1, para no alterar el layout en tamano normal.
   =========================================================================== */
/* Solo se relajan las alturas de los CONTENEDORES de texto. La imagen
   conserva su alto y su object-fit: cover, porque no depende del tamano de
   letra y al ponerla en auto colapsaba a 0. Tampoco se toca .slick-track:
   con display:flex todos los slides se igualaban al mas alto y el hero
   crecia desproporcionadamente. */
html.ui-font-scaled .slick-list,
html.ui-font-scaled .slick-slide,
html.ui-font-scaled .hero-grid,
html.ui-font-scaled .hero-left{
    height: auto !important;
}
html.ui-font-scaled .hero-grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 549px);
    align-items: center;
}
html.ui-font-scaled .hero-left{ min-width: 0; }

/* Bloque de transmisiones: tiene overflow:hidden y el titulo es muy grande;
   al ampliar la tipografia el texto excedia el ancho y se recortaba. */
html.ui-font-scaled #block-solucionweb-transmisiones{
    overflow: visible !important;
    height: auto !important;
}
html.ui-font-scaled #block-solucionweb-transmisiones :is(h1, h2, h3, p, span, .field__item, a){
    white-space: normal !important;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* Imagen del slider: con object-fit:cover se recorta para llenar la caja.
   Al ampliar la fuente la columna cambia de ancho y el recorte se nota mas.
   Con contain la imagen encaja completa (deja aire, no corta). Se conserva
   la altura: ponerla en auto la colapsaba a 0. */
html.ui-font-scaled .sl-media-img{
    object-fit: contain !important;
    width: 100%;
    max-width: 100%;
}

/* ===========================================================================
   Tablas del contenido en pantallas pequenas
   ---------------------------------------------------------------------------
   Las tablas heredadas traen anchos fijos y en movil desbordan: el texto se
   corta y se sale del contenedor. Se les da desplazamiento horizontal propio
   para que la pagina no rompa su ancho.
   =========================================================================== */
@media (max-width: 767px){
    article .field--name-body table{
        width: 100%;
        max-width: 100%;
    }
    /* Lo que realmente resuelve el desborde: las cadenas largas sin espacios
       (correos como analisis.estabilidad.financiera@banguat.gob.gt) no caben
       en la celda y se salian. Con overflow-wrap rompen dentro de su celda.
       NO se usa display:block en la tabla: convertirla en bloque permitiria
       scroll horizontal pero desalinea las columnas, y aqui no hace falta. */
    article .field--name-body table :is(td, th){
        word-break: normal;
        overflow-wrap: anywhere;
    }
}

/* ===========================================================================
   Quiebre de palabras en el contenido
   ---------------------------------------------------------------------------
   Con la tipografia ampliada o en pantallas angostas, las palabras largas y
   sobre todo las cadenas sin espacios (correos, URLs) no caben en la linea y
   se salian de la caja. Con hyphens:auto el navegador parte con guion usando
   el diccionario del idioma (<html lang="es">), y overflow-wrap evita el
   desborde en lo que no se puede silabear.
   =========================================================================== */
article .field--name-body,
#block-solucionweb-content .field--name-body{
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
article .field--name-body :is(a, span, code, strong, em),
#block-solucionweb-content .field--name-body :is(a, span, code, strong, em){
    overflow-wrap: anywhere;
}

/* ===========================================================================
   Filtro de listados (.listado-filtro) y boton REGRESAR
   ---------------------------------------------------------------------------
   .listado-filtro es float:left y ocupa el ancho completo del panel, asi que
   #goback quedaba con width:0 y "REGRESAR" se apilaba letra por letra. Se
   limpia el float. Ademas se le da forma al <select>, que venia con la
   apariencia por defecto del navegador (28px de alto, sin padding ni bordes).
   =========================================================================== */
#goback, .goback{
    clear: both;
}
/* los rotulos de interfaz no se silabean: son palabras sueltas y cortas */
#goback, .goback, .btn, button, .fullwidth, .cerrarwidth,
.slick-slider .sl-cta, .menu--horizontal-menu a{
    hyphens: manual;
    -webkit-hyphens: manual;
}

.listado-filtro select{
    width: 100%;
    max-width: 520px;
    height: auto;
    padding: 11px 42px 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .25);
    background-color: #fff;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1.3;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.listado-filtro select:focus{
    outline: 2px solid var(--sw-accent, #5ba2cc);
    outline-offset: 2px;
}

/* ===========================================================================
   Proteccion contra el parpadeo de maquetacion (FOUC)
   ---------------------------------------------------------------------------
   html.html.twig ya ponia la clase "loading" en el <body>, pero no habia CSS
   que la usara ni JS que la quitara: el mecanismo estaba a medias. El HTML se
   pintaba con la maquetacion cruda y despues el JS del tema reubicaba bloques
   (logo, menu mega, rejilla de destacados), produciendo el salto visible.

   Se oculta con OPACITY y no con display/visibility a proposito: el elemento
   sigue ocupando su lugar y con dimensiones reales, que es lo que necesita el
   propio JS para calcular posiciones. Con display:none esos calculos darian
   cero, que es justo el problema que arrastramos con el carrusel.

   La animacion de respaldo revela la pagina a los 2.5s pase lo que pase: si
   el JS fallara, el sitio NUNCA puede quedarse en blanco.
   =========================================================================== */
/* SIN transicion, a proposito. Con un fundido, el navegador puede dejar la
   transicion congelada en su fotograma inicial (opacity 0) si la pestana esta
   en segundo plano: las transiciones se pausan ahi. Eso deja la pagina en
   blanco hasta que el usuario vuelve a la pestana. El revelado tiene que ser
   instantaneo e incondicional.
   El !important cubre el caso de que alguna otra hoja imponga opacity. */
body:not(.loading){
    opacity: 1 !important;
}
body.loading{
    opacity: 0;
    animation: banguat-revelar-respaldo 0s linear 2.5s forwards;
}
@keyframes banguat-revelar-respaldo{
    to { opacity: 1; }
}


/* Botones de "Regresar" duplicados: los marca js/goback-unico.js cuando una
   pagina trae uno escrito en el contenido y ademas el que inyecta el tema.
   Se conserva el ultimo. */
.sw-goback-duplicado{
    display: none !important;
}

/* ===========================================================================
   Pagina de error (404): titulo y contenedor
   ---------------------------------------------------------------------------
   El banner azul del titulo lo aplican reglas que exigen
   :has(article.sw-page-text) o :has(article.sw-page-options). La pagina de
   error no tiene <article>, asi que su titulo quedaba como texto plano,
   distinto al del resto del sitio.

   Se replica el mismo banner (mismos 15px de radio, misma imagen de monolito
   y misma variable de color) y se separa del contenido, que pasa a ser una
   tarjeta con las 4 esquinas redondeadas igual que la barra azul del
   formulario.

   Identificacion de la pagina: bloque de contenido con el webform Y sin
   article, el mismo criterio que usa dark.css.
   =========================================================================== */
#contentInterno:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) #block-solucionweb-titulodelapagina > h1.page-title{
    margin: 0 0 25px !important;
    padding: 35px 22px !important;
    color: #fff !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    text-align: left !important;
    background-color: var(--sw-title-blue) !important;
    background-image: url("../images/fondo-titulo-monolito.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}
#contentInterno:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) #block-solucionweb-titulodelapagina > h1.page-title span{
    color: #fff !important;
    font: inherit !important;
}

/* El contenido deja de estar pegado al titulo y se cierra en si mismo. */
#contentInterno:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) #block-solucionweb-content{
    background-color: #f7f7f7;
    border-radius: 15px;
    padding: 30px;
    overflow: hidden;
}

/* ===========================================================================
   Accesos directos: alinear icono y titulo en el mismo borde
   ---------------------------------------------------------------------------
   La imagen del icono llevaba width:100%, asi que su caja ocupaba los 120px
   completos y el dibujo quedaba centrado dentro de ella, mientras el titulo
   arrancaba exactamente en el borde del padding. Los dos "empezaban" en
   sitios distintos.

   Con width:auto la imagen mide lo que mide su contenido y su borde izquierdo
   coincide con el del texto. Se alinean por construccion, sin desplazamientos
   calculados a ojo que se romperian al cambiar el tamano del icono.
   =========================================================================== */
#block-solucionweb-accesosdirectos .field--name-field-icono-enlace img{
    width: auto;
    max-width: 120px;
    margin-left: 0;
}
/* El contenedor del titulo hereda text-align:right, asi que el enlace se
   pegaba al borde DERECHO de su caja de ~132px mientras el icono arrancaba en
   el izquierdo. Esa era la causa real del desajuste.

   Nota: el CSS del tema intenta alinearlos con place-items, pero ambos
   contenedores computan display:block, y justify-items solo surte efecto en
   grid o flex. Por eso aquellas reglas no hacian nada y hay que resolverlo
   con text-align. */
#block-solucionweb-accesosdirectos .field--name-field-enlace{
    text-align: left !important;
}
#block-solucionweb-accesosdirectos .field--name-field-enlace a{
    display: inline-block;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
}

/* ===========================================================================
   Boton de cerrar del mega menu
   ---------------------------------------------------------------------------
   script.js inyecta el boton como TEXTO:
       <button class="mega__close" ...>&times;</button>
   pero el CSS existente lo estiliza como si fuera un icono SVG
       .mega__close > svg { ... }
       .mega__close:hover > svg > g:nth-child(2) > rect { ... }
   y esas reglas no aplican a nada porque no hay ningun <svg>. El resultado
   era una "x" de 16px, sin fondo ni borde, sobre una imagen con textura:
   practicamente invisible.

   Aqui se le da tamano, forma circular para que se lea como boton, y estados
   de hover y foco. El area de 44x44 es el tamano de destino tactil comodo.
   =========================================================================== */
.mega__close{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.mega__close:hover{
    background-color: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .7);
    transform: scale(1.06);
}
/* El foco visible es imprescindible: sin apariencia nativa, quien navega con
   teclado no tendria forma de saber donde esta. */
.mega__close:focus-visible{
    outline: 3px solid #00a3cf;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
    .mega__close{ transition: none; }
    .mega__close:hover{ transform: none; }
}

/* La X del mega menu quedaba por detras de la imagen del panel en algunas
   resoluciones: ambas son hermanas posicionadas y sin z-index gana la ultima
   del DOM, que es la imagen. Se eleva el boton dentro del panel. */
.mega__close{
    z-index: 20;
}

/* ===========================================================================
   Franja de indicadores separada de su contenido
   ---------------------------------------------------------------------------
   El bloque #block-solucionweb-tiposdecambio pintaba la tarjeta (fondo claro
   + radio 25px) y la franja azul .stats-ribbon vive DENTRO de ella. Aunque la
   franja ya tenia su propio radio y 15px de margen inferior, el fondo del
   bloque se extendia por detras y alrededor, asi que las dos se leian como
   una sola pieza pegada.

   La solucion es mover la tarjeta del bloque al contenido: el bloque queda
   transparente y .stats-grid pasa a ser la tarjeta, con sus 4 esquinas
   redondeadas. La franja queda flotando encima, separada.
   =========================================================================== */
#block-solucionweb-tiposdecambio{
    background: transparent;
    border-radius: 0;
}
#block-solucionweb-tiposdecambio .stats-ribbon{
    margin: 0 0 20px 0;
}
#block-solucionweb-tiposdecambio .stats-grid{
    background: #fbfafa;
    border-radius: 25px;
}

/* ===========================================================================
   Banner del titulo en nodos de "preguntas frecuentes"
   ---------------------------------------------------------------------------
   La regla original del banner se apoya en body.path-preguntas-frecuentes,
   una clase de RUTA. Los nodos de este tipo sin alias (p. ej. /node/5840)
   reciben path-node y quedaban con el titulo como texto plano.
   Aqui se ancla al TIPO DE CONTENIDO, que no depende de la URL.
   =========================================================================== */
body.page-node-type-preguntas-frecuentes #block-solucionweb-titulodelapagina > h1.page-title{
    margin: 0 0 10px !important;
    padding: 35px 22px !important;
    color: #fff !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    text-align: left !important;
    background-color: var(--sw-title-blue) !important;
    background-image: url("../images/fondo-titulo-monolito.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}
body.page-node-type-preguntas-frecuentes #block-solucionweb-titulodelapagina > h1.page-title span{
    color: #fff !important;
    font: inherit !important;
}

/* ===========================================================================
   Boton .btn-success con la paleta institucional
   ---------------------------------------------------------------------------
   Bootstrap lo pinta con su verde por defecto (#5cb85c), ajeno a la identidad
   del sitio. Se alinea con --sw-blue, que es el mismo azul del banner de los
   titulos, y se le da un estado de foco visible.
   Aplica en claro y en oscuro: el azul contrasta con texto blanco en ambos.
   =========================================================================== */
.btn-success,
a.btn-success,
.button--success{
    background-color: var(--sw-blue, #00508f) !important;
    border-color: var(--sw-blue, #00508f) !important;
    color: #ffffff !important;
}
.btn-success:hover,
a.btn-success:hover,
.button--success:hover{
    background-color: #00406f !important;
    border-color: #00406f !important;
    color: #ffffff !important;
}
.btn-success:focus-visible,
a.btn-success:focus-visible,
.button--success:focus-visible{
    outline: 3px solid var(--sw-accent, #5ba2cc);
    outline-offset: 2px;
}

/* ===========================================================================
   Banner del titulo en la pagina de resultados de busqueda
   ---------------------------------------------------------------------------
   /search/node no tiene <article> ni alias de contenido, asi que ninguna de
   las reglas del banner la alcanzaba y el titulo quedaba como texto plano.
   Se ancla a body.path-search, que Drupal pone en todas las rutas de busqueda.
   =========================================================================== */
body.path-search #block-solucionweb-titulodelapagina > h1.page-title{
    margin: 0 0 20px !important;
    padding: 35px 22px !important;
    color: #fff !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    text-align: left !important;
    background-color: var(--sw-title-blue, #00508f) !important;
    background-image: url("../images/fondo-titulo-monolito.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}
body.path-search #block-solucionweb-titulodelapagina > h1.page-title span{
    color: #fff !important;
    font: inherit !important;
}

/* ===========================================================================
   Celdas .multiple-link legibles en modo claro
   ---------------------------------------------------------------------------
   El tema fija color:#ffffff !important en cuatro reglas para
   td.multiple-link, sus <p> y sus <a>. Ese blanco asume que la fila tiene
   fondo azul, pero en paginas como
   /page/comercio-exterior-...-sistema-arancelario las filas son transparentes
   sobre la tarjeta clara (#fcfafa): el texto queda invisible.

   Se corrige SOLO en claro (body:not(.darkmode--activated)), donde el azul
   institucional es lo legible. En oscuro el blanco original sigue siendo
   correcto, asi que no se toca.
   El body:not(...) antepuesto es lo que da la especificidad necesaria para
   ganarle a los !important del tema.
   =========================================================================== */
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link p,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link p a,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco td.multiple-link{
    color: var(--sw-title-blue, #00508f) !important;
}
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link p:not(:first-child) a:hover{
    color: #00406f !important;
}

/* En :hover la fila toma fondo azul (--sw-title-blue) por una regla del tema.
   Mi correccion de modo claro ponia el texto en azul oscuro, y sobre ese fondo
   azul quedaba ilegible: el remedio de un estado rompia el otro.
   Aqui se restituye el blanco durante el hover, que es lo que el tema
   pretendia, y el subrayado se conserva como senal adicional para no depender
   solo del color. */
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td.multiple-link,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td.multiple-link p,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td.multiple-link p a,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco tr:hover td.multiple-link,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco tr:hover td.multiple-link a{
    color: #ffffff !important;
}
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco td.multiple-link a:hover{
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ===========================================================================
   Campos de webform en formularios con etiquetas
   ---------------------------------------------------------------------------
   La regla del tema apunta a .webform-submission-add-form, que alcanza a TODOS
   los formularios, y les impone:
       width:60%; margin:0 auto; display:table; padding:2px 0 0 40px; height:34px
   Ese padding-left de 40px reserva sitio para el icono del formulario de
   consulta ("Nombre", "Email"...). En formularios con etiquetas, como la
   solicitud a la Unidad de Informacion Publica, no hay icono: el hueco queda
   vacio, el campo se ve descuadrado y el 60% desperdicia ancho.

   Se excluye por id al formulario de consulta, que si necesita ese espacio.
   El ancho al 100% resuelve ademas el responsive: no hay medida fija que
   corregir por breakpoint.
   =========================================================================== */
form.webform-submission-form:not([id*="consulta-nuestra-informacion"]) .form-item :is(input, textarea, select){
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    padding: 10px 14px !important;
    height: auto !important;
    min-height: 42px;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}
form.webform-submission-form:not([id*="consulta-nuestra-informacion"]) .form-item textarea{
    min-height: 120px;
}
form.webform-submission-form:not([id*="consulta-nuestra-informacion"]) .form-item{
    margin-bottom: 18px;
}
form.webform-submission-form:not([id*="consulta-nuestra-informacion"]) .form-item > label{
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
/* el foco tiene que verse: sin esto solo queda el contorno nativo, que se
   pierde al cambiar el borde del campo */
form.webform-submission-form .form-item :is(input, textarea, select):focus-visible{
    outline: 3px solid var(--sw-accent, #5ba2cc);
    outline-offset: 2px;
}

/* ===========================================================================
   Pagina de webform: titulo visible e iconos sueltos
   ---------------------------------------------------------------------------
   1) h1.page-title llega con display:none en las rutas de webform, asi que el
      banner azul se aplicaba pero no se veia: la pagina arrancaba directo con
      el formulario, sin titulo.

   2) El tema posiciona los iconos .fa-* en absolute con left:22%, pensados
      para el formulario de consulta, donde el campo lleva el icono dentro y
      no hay etiqueta. En formularios con etiquetas quedan 20 iconos flotando
      al lado del texto, sin relacion con ningun campo. Son decorativos, asi
      que se ocultan ahi: un icono suelto tambien confunde a un lector de
      pantalla.
   =========================================================================== */
body.path-webform #block-solucionweb-titulodelapagina > h1.page-title{
    display: block !important;
}

form.webform-submission-form:not([id*="consulta-nuestra-informacion"]) .form-item :is(.fa, [class*="fa-"]){
    display: none !important;
}

/* El tema pone color:#82b8d8 !important en a:hover dentro de .multiple-link.
   Sobre el fondo azul de la fila ese tono queda apagado y el enlace parece
   oscurecerse justo al apuntarlo, al reves de lo esperado. Se mantiene blanco
   y el subrayado hace de senal de hover. */
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link p:not(:first-child) a:hover,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco td.multiple-link a:hover{
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ===========================================================================
   Boton de envio de los webform con etiquetas
   ---------------------------------------------------------------------------
   .form-actions traia display:table y margin:0 213px, un desplazamiento fijo
   calculado para el ancho del 60% del formulario de consulta. Con los campos
   al 100% ese margen descuadra el boton: quedaba en x=321 mientras los campos
   arrancan en x=108.
   Se centra por contenedor en vez de por margen fijo, asi no depende del ancho.
   No se toca el tamano de fuente: el control de tipografia del sitio lo ajusta
   en tiempo real y una medida fija aqui pelearia con el.
   =========================================================================== */
form.webform-submission-form:not([id*="consulta-nuestra-informacion"]) :is(.form-actions, .webform-actions){
    display: block !important;
    width: 100% !important;
    margin: 26px 0 0 0 !important;
    text-align: center;
}
form.webform-submission-form:not([id*="consulta-nuestra-informacion"]) :is(.form-actions, .webform-actions) :is(input[type="submit"], button, .webform-button--submit){
    display: inline-block !important;
    width: auto !important;
    min-width: 190px;
    min-height: 48px;
    margin: 0 !important;
    padding: 12px 46px !important;
    border: none !important;
    border-radius: 30px !important;
    background-color: var(--sw-blue, #00508f) !important;
    color: #ffffff !important;
    cursor: pointer;
}
form.webform-submission-form :is(.form-actions, .webform-actions) :is(input[type="submit"], button):hover{
    background-color: #00406f !important;
}
form.webform-submission-form :is(.form-actions, .webform-actions) :is(input[type="submit"], button):focus-visible{
    outline: 3px solid var(--sw-accent, #5ba2cc);
    outline-offset: 3px;
}

/* ===========================================================================
   .multiple-link en modo claro: consolidacion
   ---------------------------------------------------------------------------
   Las reglas anteriores enumeraban td / p / a, pero dejaban fuera el
   <span class="glyphicon"> del icono, que seguia en blanco sobre la tarjeta
   clara. En vez de seguir agregando etiquetas una por una, se cubre TODO el
   contenido de la celda con un descendiente universal: cualquier elemento
   nuevo que agregue el editor queda cubierto sin volver a tocar esto.

   Dos estados, un mismo supuesto:
     - fila en reposo -> fondo claro  -> texto e iconos en azul institucional
     - fila en :hover -> fondo azul   -> texto e iconos en blanco
   =========================================================================== */
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link *,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco td.multiple-link,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco td.multiple-link *{
    color: var(--sw-title-blue, #00508f) !important;
}

body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td.multiple-link,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td.multiple-link *,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco tr:hover td.multiple-link,
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco tr:hover td.multiple-link *{
    color: #ffffff !important;
}
body:not(.darkmode--activated) article.sw-page-options table.tabla-banco td.multiple-link a:hover{
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* El icono resistia al selector universal por especificidad: la regla del
   tema es
     #contentInterno:has(...) article.sw-page-options table.tabla-banco
     td.multiple-link p:first-child .glyphicon
   con 6 clases, frente a las 5 de "td.multiple-link *". Las clases se comparan
   antes que los elementos, asi que ganaba la del tema.
   Se replica su misma ruta y se le antepone body:not(...), que aporta la clase
   extra necesaria. */
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link p:first-child .glyphicon,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco td.multiple-link p .glyphicon{
    color: var(--sw-title-blue, #00508f) !important;
}
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td.multiple-link p:first-child .glyphicon,
body:not(.darkmode--activated) #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover td.multiple-link p .glyphicon{
    color: #ffffff !important;
}

/* ===========================================================================
   border-radius visible en las imagenes: la caja sigue la proporcion
   ---------------------------------------------------------------------------
   border-radius recorta la CAJA del elemento, no el contenido dibujado. Con
   object-fit: contain y una caja de alto fijo, si la proporcion de la caja no
   coincide con la de la imagen queda espacio transparente a los lados: las
   esquinas redondeadas recortan ese vacio (invisible) y los bordes reales de
   la foto se ven rectos. Al cambiar el ancho de pantalla cambia la proporcion
   de la caja, de ahi que el radio apareciera y desapareciera.

   Con height:auto la caja adopta la proporcion intrinseca de la imagen: no
   hay franja vacia, y el radio recorta siempre pixeles reales. El costo
   aceptado es que la altura del bloque varia segun la imagen.
   =========================================================================== */
#block-solucionweb-indicadoreshome img,
.sl-media-img{
    width: 100%;
    max-width: 100%;
    height: auto !important;
    display: block;
    /* object-fit queda inocuo: sin franja vacia no hay nada que encajar */
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Mismo criterio, pero con la ruta EXACTA del tema.
   El bloque anterior (#block-... img) perdia por especificidad: el tema usa
   ".sw-home-cards-grid #block-... img" (una clase mas) con !important, y fija
   la altura por breakpoint mientras el ancho es fluido al 100%:
       Indicadores GT : 530px -> 300px (<=1024) -> 220px (<=767)
       PIB regional   : 328px -> 220px (<=1024) -> 180px (<=767)
   Altura fija + ancho fluido = la proporcion de la caja cambia con cada pixel
   de ancho, y con object-fit: contain eso es justo lo que hacia aparecer y
   desaparecer el border-radius. Con height:auto la caja adopta la proporcion
   de la imagen y el radio recorta siempre pixeles reales.
   --------------------------------------------------------------------------- */
.sw-home-cards-grid #block-solucionweb-indicadoreshome img,
.sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
@media (max-width: 1024px){
    .sw-home-cards-grid #block-solucionweb-indicadoreshome img,
    .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child img{
        height: auto !important;
    }
}
@media (max-width: 767px){
    .sw-home-cards-grid #block-solucionweb-indicadoreshome img,
    .sw-home-cards-grid #block-solucionweb-pibregional .row > .col-xxl:first-child img{
        height: auto !important;
    }
}

/* ===========================================================================
   Indicadores GT / PIB regional: misma altura de titular y de cuerpo
   ---------------------------------------------------------------------------
   Los dos bloques divergian al usar el control Aa +/- porque su contenido
   reacciona distinto a la escala:
     - indicadoreshome: el cuerpo es SOLO la imagen, cuya altura depende del
       ancho, no del tamaño de letra -> insensible a la escala.
     - pibregional: el cuerpo lleva imagen MAS una columna de texto -> crece.
   Y los dos h2 envuelven a distinto ritmo ("Consulta Interactiva de Tableros"
   pasa a 3 lineas antes que "Lanzamiento Cuentas Verdes").

   Con subgrid los dos h2 caen en la MISMA fila de la retícula y los dos
   cuerpos en la misma fila siguiente: cada fila la dimensiona el mas alto de
   los dos, asi que quedan alineados en cualquier escala de fuente. Cada
   bloque tiene exactamente 2 hijos (h2 + .field--name-body), de ahi el span 2.

   Solo a partir de 1025px: por debajo el tema pasa la retícula a una sola
   columna y los bloques se apilan, donde igualar alturas no aplica.
   =========================================================================== */
@media (min-width: 1025px){
    .sw-home-cards-grid{
        grid-template-rows: auto 1fr !important;
        align-items: stretch !important;
    }
    .sw-home-cards-grid > #block-solucionweb-indicadoreshome,
    .sw-home-cards-grid > #block-solucionweb-pibregional{
        display: flex !important;
        flex-direction: column;
    }
    /* El cuerpo ocupa toda su fila; sin esto el mas corto no se estiraria y
       volveriamos a ver los bloques terminando a distinta altura. */
    .sw-home-cards-grid > #block-solucionweb-indicadoreshome > .field--name-body,
    .sw-home-cards-grid > #block-solucionweb-pibregional > .field--name-body{
        height: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ===========================================================================
   Indicadores GT: fondo del color de la foto + foto centrada
   ---------------------------------------------------------------------------
   El cuerpo tenia #f8f8f8 (gris claro). Al igualar alturas con el bloque
   vecino, la foto ya no llena su caja y ese gris asomaba alrededor.

   El color se tomo muestreando los bordes del propio archivo
   sites/default/files/indecadores_web.webp (1535x1024, ratio 1.499):
       esquinas   #002985  #012c83  #00267e  #002982
       centros    #01318e  #01308e  #012c87  #002981
   Es azul marino uniforme, asi que #002a84 empalma sin costura visible en
   cualquier borde. La inversion de darkmode-js esta desactivada en la portada
   (dark.css, seccion 1), asi que este color se aplica literal en ambos modos.

   Efecto secundario util: la esquina redondeada visible pasa a ser la del
   cuerpo, que siempre esta llena de color. Ya no depende de que la foto
   alcance el borde, que era el origen del border-radius intermitente.
   =========================================================================== */
.sw-home-cards-grid > #block-solucionweb-indicadoreshome > .field--name-body{
    background: #002a84 !important;
    /* grid con place-content centra el contenido en los dos ejes cuando la
       fila es mas alta que la foto (que es lo que pasa al igualar alturas) */
    display: grid !important;
    place-content: center !important;
    place-items: center !important;
}
.sw-home-cards-grid > #block-solucionweb-indicadoreshome > .field--name-body > .row{
    width: 100% !important;
    height: auto !important;
    align-self: center !important;
}
.sw-home-cards-grid > #block-solucionweb-indicadoreshome > .field--name-body .col-xxl{
    height: auto !important;
}

/* NOTA: el elemento 'font' se retiro deliberadamente de las listas de
   selectores de este archivo. Google Translate envuelve cada nodo de texto
   en <font dir="auto" style="vertical-align: inherit;">, y esos wrappers
   pasan a ser los que dibujan el texto. Al incluir 'font' en la lista, las
   declaraciones con !important los aplastaban: el h2 conservaba sus 27px
   pero su <font> computaba 15px, y el <a> seguia azul mientras su <font>
   computaba rgb(34,34,34). De ahi los titulos chicos y los enlaces negros
   al cambiar a ingles. En espanol no hay ni un <font> en el contenido, asi
   que incluirlo no aportaba nada. Sin el, los wrappers heredan del elemento
   real y el estilo se respeta en los dos idiomas. NO volver a agregarlo. */

/* ===========================================================================
   Destacados: el titulo de la tarjeta ahora es un enlace
   ---------------------------------------------------------------------------
   Lo inserta js/destacados-titulo-enlace.js. Sin estas reglas heredaria el
   azul de bootstrap (a { color: #337ab7 }) y el titulo cambiaria de color.
   Debe seguir viendose igual que antes; solo cambia que se pueda pulsar.
   =========================================================================== */
.destacados .views-field-field-subtitulo-destacado .field-content a.sw-destacado-titulo-enlace{
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}
.destacados .views-field-field-subtitulo-destacado .field-content a.sw-destacado-titulo-enlace:hover,
.destacados .views-field-field-subtitulo-destacado .field-content a.sw-destacado-titulo-enlace:focus-visible{
    text-decoration: underline !important;
}

/* ===========================================================================
   Destacados: que el clic en la tarjeta abra a la primera
   ---------------------------------------------------------------------------
   Dos comportamientos NATIVOS del navegador cancelaban el clic antes de que
   llegara al enlace, y se suman al arrastre propio del carrusel:

   1) Arrastre nativo de imagen. Al presionar sobre un <img> y mover apenas
      unos pixeles, Chrome inicia un drag de la imagen. Ese gesto cancela el
      clic: nunca se despacha. De ahi que sobre la foto costara mas que sobre
      el texto.

   2) Seleccion de texto. Si el arrastre cruza de un elemento a otro, el
      navegador despacha el click en el ANCESTRO COMUN de donde se presiono y
      donde se solto, no en el <a>. El enlace no se enteraba.

   Desactivar ambos es lo habitual en un carrusel arrastrable. Si se quisiera
   volver a permitir seleccionar y copiar los titulares, basta quitar la regla
   de user-select (el arrastre de imagen conviene dejarlo desactivado).
   =========================================================================== */
.destacados .view-content img{
    -webkit-user-drag: none;
    user-drag: none;
}
.destacados .view-content{
    -webkit-user-select: none;
    user-select: none;
}
/* el enlace sigue siendo enfocable y navegable por teclado */
.destacados .view-content a:focus-visible{
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ===========================================================================
   Funcionarios Superiores (nodo 4251): tarjetas legibles
   ---------------------------------------------------------------------------
   El contenido son 49 <li> con "background-color:white" EN LINEA, sin padding
   ni radio, sobre un contenedor casi blanco: no se distinguia una persona de
   la siguiente.

   IMPORTANTE: el .field--name-body de esta pagina NO se toca, se queda como
   estaba. El panel celeste va en el <ul type="disc"> de la lista, que es lo unico
   que se reestiliza. Se ancla al atributo type y no al elemento: si alguien
   agrega otra lista sin ese atributo, no hereda el panel.

   Los estilos en linea del contenido obligan a !important: una hoja con
   !important si le gana a un style en linea sin el.

   Acotado a body.node-4251 para no tocar ninguna otra pagina.
   =========================================================================== */
body.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"]{
    list-style: none !important;
    margin: 0 !important;
    padding: 18px !important;
    background: linear-gradient(180deg, #eef6fd 0%, #e4eff9 100%) !important;
    border: 1px solid rgba(0, 80, 143, .10) !important;
    border-radius: 16px !important;
}
body.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li{
    background: #ffffff !important;
    color: #2c3947 !important;
    list-style: none !important;
    margin: 0 0 10px !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(0, 80, 143, .10) !important;
    border-left: 3px solid #00508F !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 42, 74, .06) !important;
    transition: background-color .15s ease, box-shadow .15s ease, border-left-color .15s ease;
}
body.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li:last-child{
    margin-bottom: 0 !important;
}
body.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li:hover{
    background: #f8fbff !important;
    border-left-color: #0a6cc4 !important;
    box-shadow: 0 3px 10px rgba(16, 42, 74, .10) !important;
}
/* El nombre es el primer <span> de cada li (venia con color:#337AB7 en linea,
   que sobre blanco da ~3.6:1 y no alcanza el 4.5:1 de WCAG AA para texto
   normal). Se lleva al azul institucional, que si cumple, y se le da peso
   para separarlo del cargo. */
body.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li > span:first-child,
body.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li > span:first-child *{
    color: #00508F !important;
    font-weight: 600 !important;
}


/* Reset tipografía */
#block-solucionweb-controlesdetamanodefuente .font-controls {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

#block-solucionweb-controlesdetamanodefuente .font-scale-reset {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 10px !important;
    line-height: 1 !important;
    font-family: inherit;
    color: #00467f;
    cursor: pointer;
    z-index: 20;
    &:hover{
      color: #00a3cf;
    }
}

#block-solucionweb-controlesdetamanodefuente .font-scale-reset[hidden] {
    display: none !important;
}