/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/*Add your own styles here:*/

/* ==========================================================================
   Topbar + footer modelo Panamá (assanet.com) replicado en Guatemala
   2026-10-02 — copiado de assanetpaprod/enfold-child/style.css
   ========================================================================== */

/* Topbar (#header_meta) — base (Panamá) */
#top #header_meta .phone-info {float: right; font-size:13px;}
.llama {width:auto; float:right; margin-right: 13px;}
.sub_menu li { border-right-style: none; }
#top .av_font_icon a {margin-right: 4px;}

@media only screen and (max-width: 767px) {
  #nosale { display:none;}
  .responsive .phone-info {float: left !important;width: 50%; clear: none}
  .responsive #header .sub_menu, .responsive #header_meta .sub_menu {padding-top:3px; float:right; width:50%;}
}

/* Selector de paises: deshabilitar hover, usar click-toggle via JS */
#header_meta .sub_menu .menu-item-has-children > .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#header_meta .sub_menu .menu-item-has-children.is-open > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* Topbar (#header_meta) — cambio de color de fondo, todo el sitio */
#top #header_meta {
  background-color: #0D2E68 !important;
}

/* ---------- Topbar (#header_meta) — ajustes visuales SOLO desktop ----------
   1) +15px de alto total.
   2) "Panama" (menu pais) centrado verticalmente con la bandera, no pegado
      al margen inferior.
   3) Divisor vertical entre cada elemento (Whatsapp/Contactenos/Telefono/
      Sucursales/Panama), estilo El Salvador.
   ========================================================================== */
@media only screen and (min-width: 768px) {

  /* (1) +15px de alto: el contenedor no tiene padding fijo propio, hereda
     line-height de sus hijos — se agrega padding vertical extra */
  #top #header_meta .container {
    padding-top: 7.5px !important;
    padding-bottom: 7.5px !important;
  }

  /* (2) Centrar "Panama" con la bandera — el <a> del menu principal usa
     line-height/vertical-align por defecto que lo deja pegado abajo */
  #top #header_meta .sub_menu {
    display: flex !important;
    align-items: center !important;
    margin-top: -4px !important;
  }
  #top #header_meta .sub_menu > ul.menu {
    display: flex !important;
    align-items: center !important;
  }
  #top #header_meta .sub_menu li > a {
    display: flex !important;
    align-items: center !important;
  }

  /* (3) Divisor vertical entre elementos del phone-info (Whatsapp,
     Contactenos, Telefono, Sucursales) */
  #top #header_meta .phone-info .llama {
    position: relative !important;
    padding-left: 16px !important;
    margin-left: 16px !important;
  }
  #top #header_meta .phone-info .llama:last-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  #top #header_meta .phone-info .llama::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 16px !important;
    background: rgba(255,255,255,.4) !important;
  }
  #top #header_meta .phone-info .llama:last-child::before {
    display: none !important;
  }

  /* Espacio entre la bandera y el texto "Panama" */
  #top #header_meta .sub_menu li > a img:first-child {
    margin-right: 5px !important;
  }

  /* Espacio entre el texto "Panama" y la flecha (ultima imagen del <a>) */
  #top #header_meta .sub_menu li > a img:last-child {
    margin-left: 8px !important;
  }
}


/* ==========================================================================
   Footer global "#assa-custom-footer" (post 11114 staging / 11110 local)
   Migrado desde el <style id="assa-custom-footer-css"> embebido en el
   post_content del footer, hacia este archivo. El HTML del footer sigue
   viviendo en el post (bloque av_codeblock), pero ya sin CSS inline.
   Aplica a TODO el sitio (footer global), sin scope de pagina.
   ========================================================================== */


#assa-custom-footer{
  position:relative;
  overflow:hidden;
  font-family:'Roboto',sans-serif;
  box-sizing:border-box;
  background:#0D2E68;
  color:rgba(255,255,255,.75);
  width:100%;
}
#assa-custom-footer *{box-sizing:border-box;}

/* Ilustracion decorativa */
/* Zona principal */
#assa-custom-footer .assa-footer-main{
  position:relative;z-index:1;
  width:100%;margin:0 auto;
  padding:56px 24px 48px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.15fr;
  column-gap:40px;
}
#assa-custom-footer .assa-footer-col{padding:0;}

#assa-custom-footer .assa-footer-title{
  font-size:1rem;font-weight:700;
  text-transform:none;letter-spacing:0;
  color:#fff;margin:0 0 22px 0;padding:0;
  background:none;border:none;line-height:1.3;
}

#assa-custom-footer .assa-footer-links{
  display:flex;flex-direction:column;gap:12px;
  margin:0;padding:0;list-style:none;
}
#assa-custom-footer .assa-footer-links li{margin:0;padding:0;background:transparent;}
#top #assa-custom-footer .assa-footer-links li a,
#assa-custom-footer .assa-footer-links li a{
  font-size:.78rem;
  color:#74CCFE;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  text-decoration:none;
  display:inline;
  line-height:1.5;
  background:transparent!important;
  border:none;box-shadow:none;
  transition:color .15s ease;
}
#top #assa-custom-footer .assa-footer-links li a:hover,
#top #assa-custom-footer .assa-footer-links li a:focus{color:#fff;background:transparent!important;}

/* Columna App */
#assa-custom-footer .assa-footer-col-app{max-width:280px;}
#assa-custom-footer .assa-footer-app-text{
  font-size:.85rem;font-weight:700;color:#fff;
  line-height:1.45;margin:0 0 18px 0;
}
@media (min-width:768px){
  /* El <br> manual del texto (para forzar el salto en mobile/tablet) deja
     un corte de linea innecesario en desktop, donde el ancho disponible
     alcanza para una sola linea. */
  #assa-custom-footer .assa-footer-app-text br{ display:none; }
}
#assa-custom-footer .assa-footer-app-badges{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
#assa-custom-footer .assa-footer-app-badges a{display:inline-block;line-height:0;}
#assa-custom-footer .assa-footer-app-badges img{width:135px;height:auto;display:block;}

/* Barra inferior */
#assa-custom-footer .assa-footer-bottom{position:relative;z-index:1;background:#0D2E68;}
#assa-custom-footer .assa-footer-bottom-inner{
  width:100%;margin:0 auto;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
#assa-custom-footer .assa-footer-bottom-left{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;}
#assa-custom-footer .assa-footer-superin-logo{flex:none;width:88px;height:auto;}
#assa-custom-footer .assa-footer-bottom-text{display:flex;flex-direction:column;gap:4px;}
#assa-custom-footer .assa-footer-superin-text{font-size:.72rem;color:rgba(255,255,255,.8);line-height:1.35;}
#assa-custom-footer .assa-footer-bottom-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#assa-custom-footer .assa-footer-copy,
#assa-custom-footer .assa-footer-bottom-sep{font-size:.72rem;color:rgba(255,255,255,.8);}
#top #assa-custom-footer .assa-footer-bottom-nav a{
  font-size:.72rem;color:rgba(255,255,255,.8);text-decoration:none;
  background:transparent!important;transition:opacity .15s ease;
}
#top #assa-custom-footer .assa-footer-bottom-nav a:hover{opacity:.7;color:#fff;}

/* Redes sociales */
#assa-custom-footer .assa-footer-bottom-right{display:flex;align-items:center;}
#top #assa-custom-footer .assa-footer-social{
  display:flex;align-items:center;gap:16px;
  list-style:none;margin:0;padding:0;
}
#top #assa-custom-footer .assa-footer-social li{margin:0;padding:0;background:transparent;border:none;}
#top #assa-custom-footer .assa-footer-social li::before,
#top #assa-custom-footer .assa-footer-social li::after{content:none;display:none;}
#top #assa-custom-footer .assa-footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;padding:0;margin:0;border:none;border-radius:0;
  background:transparent!important;color:#fff;
  transition:opacity .15s ease;
}
#top #assa-custom-footer .assa-footer-social a:hover{opacity:.7;color:#fff;background:transparent!important;}
#top #assa-custom-footer .assa-footer-social svg{width:18px;height:18px;fill:#fff;display:block;}

/* Responsive */
@media (max-width:1100px){
  #assa-custom-footer .assa-footer-main{grid-template-columns:1fr 1fr;gap:32px 40px;}
  #assa-custom-footer .assa-footer-col-app{grid-column:1 / -1;max-width:none;}
  #assa-custom-footer .assa-footer-app-badges{flex-direction:row;}
}
@media (max-width:640px){
  #assa-custom-footer .assa-footer-main{grid-template-columns:1fr;padding:36px 20px 32px;}
  #assa-custom-footer .assa-footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:16px;padding:18px 20px;}
  }

/* ==========================================================================
   Acordeon mobile del footer (av_toggle_container, styling=av-minimal-toggle)
   Reemplaza visualmente las 4 columnas de menu en mobile (Figma). Las
   columnas (.assa-footer-main dentro del av_codeblock) siguen intactas y
   visibles en desktop; el toggle vive fuera del av_codeblock, como bloque
   hermano en el post, oculto en desktop y visible solo en mobile.
   Limitado a #footer-page (2026-10-21): sin el prefijo ocultaba en desktop
   los acordeones "minimal" de las páginas (Condiciones Generales, productos…).
   ========================================================================== */
#footer-page .togglecontainer.av-minimal-toggle{ display:none; }

/* Redes sociales duplicadas arriba (Figma: antes de "Disfruta de ASSA
   APP"). El original vive en la barra legal, para no alterar su posicion
   en desktop (columna derecha, junto a copyright). El duplicado
   (assa-footer-social-mobile) esta oculto en desktop por defecto. */
#top #assa-custom-footer .assa-footer-social-mobile{ display:none !important; }

@media (max-width:767px){
  #footer-page .togglecontainer.av-minimal-toggle{ display:block; }
  /* Ocultar las 4 columnas de menu (Explorar Productos, Acerca de Nosotros,
     Recursos y Ayuda) en mobile — el acordeon las reemplaza visualmente.
     La columna de redes/ASSA APP (assa-footer-col-app) no se oculta aqui. */
  #assa-custom-footer .assa-footer-col:not(.assa-footer-col-app){ display:none; }

  /* Mostrar el duplicado de redes arriba, ocultar el original de la
     barra legal (queda solo logo+copyright+links legales en mobile). */
  #top #assa-custom-footer .assa-footer-social-mobile{ display:flex !important; margin:0 0 22px 0 !important; }
  .assa-footer-social-mobile svg{ width:26px !important; height:26px !important; }
  #assa-custom-footer .assa-footer-app-text{ font-size:14.6px !important; font-weight:400 !important; margin-bottom:20px !important; }
  #assa-custom-footer .assa-footer-app-badges img{ width:150px !important; }
  #assa-custom-footer .assa-footer-app-badges img[alt="Google Play"]{ width:170px !important; }
  .assa-footer-bottom-right .assa-footer-social{ display:none; }
}

/* Estilo visual del acordeon del footer, calcando el Figma: fondo azul
   oscuro igual al footer, texto blanco, sin caja/borde del estilo minimal
   de Enfold, flecha blanca (+ que rota a - al abrir). Scoped a este toggle
   especifico para no afectar otros av_toggle del sitio que usen la misma
   clase av-minimal-toggle en otras paginas. */
/* Fusionar los 3 bloques del footer (codeblock principal, acordeon,
   codeblock de barra legal) en un solo fondo continuo sin cortes. Enfold
   agrega margin-bottom automatico entre elementos hermanos del Layout
   Builder — se anula solo dentro de #footer-page para no afectar otros
   codeblocks/toggles del sitio. */
#footer-page .avia_codeblock_section,
#footer-page .togglecontainer.assa-footer-toggle {
  margin: 0 !important;
  padding: 0 !important;
}
#footer-page .entry-content-wrapper,
#footer-page .template-page,
#footer-page .container,
#footer-page .container_wrap {
  padding: 0 !important;
  margin: 0 !important;
}
#footer-page #assa-custom-footer {
  overflow: visible;
}

/* El .container de Enfold trae un ancho limitado por defecto
   (95%/max-width calculado), dejando el footer angosto con una franja
   en blanco a la derecha tanto en mobile como en desktop. Se fuerza a
   100% en ambos breakpoints para que el footer ocupe todo el ancho. */
#footer-page .container {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width:767px){
  #assa-custom-footer .assa-footer-bottom {
    margin-top: -10px !important;
  }
}

.togglecontainer.assa-footer-toggle {
  font-family: 'Roboto', sans-serif;
  background: #0D2E68;
}
.togglecontainer.assa-footer-toggle .av_toggle_section {
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.togglecontainer.assa-footer-toggle .av_toggle_section:last-child {
  border-bottom: none;
}
.togglecontainer.assa-footer-toggle .toggler {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 18px 45px 18px 24px !important;
  position: relative !important;
}
/* Chevron (Figma) en vez del "+" nativo de Enfold: se ocultan las 2 barras
   originales (vert_icon/hor_icon, forman el "+") y se dibuja una flecha
   propia con border, rotando 180deg al abrir (clase activeTitle). */
.togglecontainer.assa-footer-toggle .toggle_icon {
  border: none !important;
  width: 14px !important;
  height: 14px !important;
  left: auto !important;
  right: 24px !important;
  margin-top: -7px !important;
}
.togglecontainer.assa-footer-toggle .toggle_icon .vert_icon,
.togglecontainer.assa-footer-toggle .toggle_icon .hor_icon {
  display: none !important;
}
.togglecontainer.assa-footer-toggle .toggle_icon::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 1px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: rotate(45deg) !important;
  transition: transform 0.3s ease !important;
}
.togglecontainer.assa-footer-toggle .activeTitle .toggle_icon::before {
  transform: rotate(225deg) !important;
  top: 7px !important;
}
.togglecontainer.assa-footer-toggle .toggle_wrap {
  background: transparent !important;
  border: none !important;
}
.togglecontainer.assa-footer-toggle .toggle_content {
  background: transparent !important;
  padding: 0 24px 18px 24px !important;
  text-align: left !important;
}
.togglecontainer.assa-footer-toggle .toggle_content p {
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
}
.togglecontainer.assa-footer-toggle .toggle_content a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  padding-left: 20px !important;
  display: inline-block !important;
}
.togglecontainer.assa-footer-toggle .toggle_content a:hover {
  color: #74CCFE !important;
}



/* Topbar GT: igualar aspecto de Panamá (negrita, ícono 13px, texto centrado con el ícono) */
#top #header_meta .phone-info .llama { font-weight: 700; }
#top #header_meta .phone-info .llama .av-icon-char { font-size: 13px !important; line-height: 23px !important; }
#top #header_meta .phone-info .llama > a,
#top #header_meta .phone-info .llama > span { display: block; float: left; margin-top: 0; line-height: 23px; }
#top #header_meta .phone-info .llama a { font-weight: 700; }

/* Selector de idioma ESP | ENG (estilo El Salvador, assanetsvprod) */
#top #header_meta .sub_menu > ul.assa-header-lang {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}
#top #header_meta .assa-header-lang {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    list-style: none !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    line-height: 1 !important;
    height: auto !important;
    background: transparent !important;
}

#top #header_meta .assa-header-lang li {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 5px !important;
    line-height: 1 !important;
    float: none !important;
    border: none !important;
    background: transparent !important;
}

#top #header_meta .assa-header-lang li.assa-header-lang-sep {
    padding: 0 2px !important;
    cursor: default !important;
}

#top #header_meta .assa-header-lang a {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    padding: 0 !important;
    opacity: 0.75 !important;
    transition: opacity 0.15s ease !important;
    background: transparent !important;
    border: none !important;
}

#top #header_meta .assa-header-lang a:hover,
#top #header_meta .assa-header-lang a:focus,
#top #header_meta .assa-header-lang li.lang-active a {
    opacity: 1 !important;
    text-decoration: underline !important;
    background: transparent !important;
}

@media screen and (max-width: 767px) {
    .responsive #top #header_meta .assa-header-lang { margin: 0 0 0 8px !important; }
}

/* Selector de idioma del footer ESP | ENG (estilo El Salvador, assanetsvprod) */
#assa-custom-footer .assa-footer-bottom-right { gap: 18px; }
/* Selector de idioma */
#assa-custom-footer .assa-footer-lang {
    display: flex !important;
    align-items: center !important;
}

#assa-custom-footer .assa-footer-lang a {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    padding: 0 6px 0 0 !important;
}

#assa-custom-footer .assa-footer-lang a + a {
    padding: 0 0 0 6px !important;
}

#assa-custom-footer .assa-footer-lang a:hover {
    color: #fff !important;
}

#assa-custom-footer .assa-footer-lang a.lang-active {
    color: #fff !important;
}

#assa-custom-footer .assa-footer-lang-sep {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem !important;
    padding: 0 2px !important;
}

/* Ocultar el selector nativo de WPML con banderas debajo del footer (igual que SV) */
#lang_sel_footer,
.wpml-ls-statics-footer { display: none !important; }

/* Dropdown de países (topbar): alineado con el país, mismo azul del topbar, texto 13px, separador punteado */
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu {
    /* banderas de la lista en línea con la bandera del país (borde 1px + relleno 18px + 8px antes de la bandera) */
    left: -27px !important;
    right: auto !important;
    /* debajo de la barra, sin tapar el país: top se calcula desde el borde inferior del li */
    top: calc(100% + 7.5px) !important;
    background-color: #0D2E68 !important;
}
/* Móvil: el topbar tiene 2 filas (la 2a es ESP | ENG) → bajar el dropdown hasta el borde de la barra
   y alinear banderas (en móvil no hay los 8px extra y el país tiene 10px de margen) */
@media only screen and (max-width: 767px) {
    #top #header_meta .sub_menu .menu-item-has-children > .sub-menu {
        top: calc(100% + 35px) !important;
        left: -9px !important;
    }
}
/* Nombre del país actual ("Guatemala") del mismo tamaño que ESP | ENG */
#top #header_meta .sub_menu .menu-item-has-children > a {
    font-size: 13px !important;
}
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu li,
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu li a {
    background-color: transparent !important;
}
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu li a {
    font-size: 13px !important;
}
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu li + li {
    border-top: 1px dotted rgba(255, 255, 255, 0.45) !important;
}

/* ==========================================================================
   TOPBAR v2 — estándar regional (2026-10-02). Mismo estilo en GT, CR, SV, HN, NI.
   Idioma (ESP | ENG) a la izquierda · elementos del país · lista de países al extremo derecho.
   Texto en mayúsculas con espaciado, íconos SVG de contorno, divisores verticales, chevron celeste.
   Requiere en el campo "phone" de Enfold: <div class="llama assa-tb-item"><a ...><svg class="assa-tb-icon">..</svg><span>Texto</span></a></div>
   ========================================================================== */
#top #header_meta,
#top #header_meta .assa-tb-item a,
#top #header_meta .assa-header-lang a,
#top #header_meta .sub_menu #avia2-menu > li > a {
    font-family: 'Roboto', sans-serif !important;
}
#top #header_meta .assa-tb-item a,
#top #header_meta .sub_menu #avia2-menu > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
#top #header_meta .assa-tb-item a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}
#top #header_meta .assa-tb-item a span { display: inline !important; float: none !important; margin: 0 !important; line-height: 1 !important; }
#top #header_meta .assa-tb-icon {
    width: 18px; height: 18px; flex: 0 0 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Chevron celeste en el país actual (reemplaza la flechita en imagen) */
#top #header_meta .sub_menu #avia2-menu > li > a > img:not(:first-child) { display: none !important; }
#top #header_meta .sub_menu #avia2-menu > li.menu-item-has-children > a::after {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; margin-top: -4px;
    border-right: 2px solid #4DA3FF; border-bottom: 2px solid #4DA3FF; transform: rotate(45deg);
}
#top #header_meta .sub_menu #avia2-menu > li > a > img:first-child { margin-right: 8px !important; }
#top #header_meta .sub_menu #avia2-menu > li > a { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; }
#top #header_meta .assa-header-lang a { font-size: 13px !important; letter-spacing: 0.08em !important; }

@media only screen and (min-width: 768px) {
    /* Layout: idioma | (espacio) | elementos | país */
    #top #header_meta .container { display: flex !important; align-items: center !important; }
    #top #header_meta .container > nav.sub_menu { display: contents !important; }
    #top #header_meta .container > nav.sub_menu > ul.assa-header-lang { order: 1; margin: 0 auto 0 0 !important; }
    #top #header_meta .container > .phone-info { order: 2; float: none !important; display: flex !important; align-items: center !important; margin: 0 !important; width: auto !important; }
    #top #header_meta .container > .phone-info > div { display: flex !important; align-items: center !important; }
    #top #header_meta .container > nav.sub_menu > #avia2-menu { order: 3; float: none !important; display: flex !important; align-items: center !important; }
    /* Divisores: entre cada elemento y antes de la lista de países */
    #top #header_meta .phone-info .assa-tb-item {
        float: none !important; position: relative !important; margin: 0 !important; padding: 0 22px !important;
    }
    #top #header_meta .phone-info .assa-tb-item::before {
        content: "" !important; display: block !important; position: absolute !important; left: 0 !important; top: 50% !important;
        transform: translateY(-50%) !important; width: 1px !important; height: 16px !important; background: rgba(255,255,255,.4) !important;
    }
    #top #header_meta .phone-info .assa-tb-item:first-child::before { display: none !important; }
    #top #header_meta .container > nav.sub_menu > #avia2-menu { position: relative !important; padding-left: 22px !important; }
    #top #header_meta .container > nav.sub_menu > #avia2-menu::before {
        content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: rgba(255,255,255,.4);
    }
}

/* --- TOPBAR v2 ajustes (2026-10-02 b) --- */
/* Divisor también en el último elemento (una regla vieja de Panamá lo ocultaba) */
#top #header_meta .phone-info .assa-tb-item:last-child::before { display: block !important; }
#top #header_meta .phone-info .assa-tb-item:first-child::before { display: none !important; }
@media only screen and (min-width: 768px) {
    #top #header_meta .phone-info .assa-tb-item:last-child { margin: 0 !important; padding: 0 22px !important; }
}
/* Lista de países: más ancha y alineada al borde derecho de la barra azul */
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu {
    width: 240px !important;
    left: auto !important;
    right: -28.5px !important;
}
@media only screen and (max-width: 767px) {
    #top #header_meta .sub_menu .menu-item-has-children > .sub-menu { left: auto !important; right: -39.4px !important; }
}
/* Países de la lista con la misma tipografía y tamaño que el país actual */
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu li a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu li a img { margin-right: 8px !important; }

/* Footer: fondo degradado como El Salvador, SOLO desktop (móvil queda igual) */
@media only screen and (min-width: 768px) {
    #assa-custom-footer:has(.assa-footer-main) {
        background: linear-gradient(180deg, #0D2E68 0%, #1E59C0 100%) !important;
    }
    #assa-custom-footer .assa-footer-bottom { background: #0D2E68 !important; }
}

/* --- TOPBAR v2 ajustes (2026-10-02 c): países con nombre largo (El Salvador) en móvil --- */
#top #header_meta .sub_menu #avia2-menu > li.menu-item-has-children > a::after,
#top #header_meta .sub_menu #avia2-menu > li > a > img { flex-shrink: 0 !important; }
@media only screen and (max-width: 767px) {
    #top #header_meta .sub_menu #avia2-menu > li > a { letter-spacing: 0.04em !important; }
    #top #header_meta .sub_menu #avia2-menu > li.menu-item-has-children > a::after { margin-left: 8px; }
}

/* --- TOPBAR v2 ajustes (2026-10-02 d): lista de países menos ancha y más espacio vertical por país --- */
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu { width: 200px !important; }
#top #header_meta .sub_menu .menu-item-has-children > .sub-menu li a { padding-top: 11px !important; padding-bottom: 11px !important; }

/* Ajuste por sitio (móvil): borde derecho de la lista = borde de la barra (depende del ancho del nombre del país) */
@media only screen and (max-width: 767px) {
    #top #header_meta .sub_menu .menu-item-has-children > .sub-menu { right: -42.7px !important; }
}

/* WPML: ocultar "This post is also available in" (igual que HN dev) */
.wpml-ls-statics-post_translations { display: none !important; }

/* ==========================================================================
   Acerca de ASSA > Información financiera (ES 151, EN 9601/9603)
   La regla del footer `.togglecontainer.av-minimal-toggle{display:none}`
   ocultaba en desktop los acordeones de la pestaña. Se vuelven a mostrar
   solo dentro de la sección de pestañas; el acordeón del footer no cambia.
   (2026-10-15)
   ========================================================================== */
#top.page-id-151 .av-tab-section-container .togglecontainer.av-minimal-toggle,
#top.page-id-9601 .av-tab-section-container .togglecontainer.av-minimal-toggle,
#top.page-id-9603 .av-tab-section-container .togglecontainer.av-minimal-toggle{ display:block; }

/* ==========================================================================
   HEADER MÓVIL (≤767px) — 2026-10-17, mismo formato que Honduras/Panamá, medidas del Figma "navbar" (nodo 2242:30166)
   Topbar 44px #092049: país a la izquierda; a la derecha selector ESP | ENG + íconos de 24px sin texto
   (teléfono y Sucursales con pin; enlaces propios del país). Contáctenos se oculta en móvil; el tercer ícono es el pin de Sucursales (Figma).
   Barra del logo 64px: logo visible 99px a 10px del borde; ☰ de 3 líneas 28×3px #0D2E68 a la derecha.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	/* ---- Topbar ---- */
	#top #header_meta { background-color: #092049 !important; }
	#top #header_meta .container { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; height: 44px; min-height: 44px; padding: 0 17px 0 14px !important; box-sizing: border-box; }
	#top #header_meta .container::before, #top #header_meta .container::after { display: none !important; } /* el clearfix de Enfold ocupaba lugar en el flex */
	#top #header_meta .container > nav.sub_menu { display: contents !important; }
	#top #header_meta .sub_menu #avia2-menu { order: 1; margin-right: auto !important; position: relative; top: 0 !important; height: auto !important; line-height: 20px !important; }
	/* Selector de idioma ESP | ENG antes de los íconos */
	#top #header_meta .sub_menu ul.assa-header-lang { order: 2; display: flex !important; align-items: center; margin: 0 28px 0 0 !important; padding: 0 !important; float: none !important; position: static !important; top: 0 !important; }
	#top #header_meta .sub_menu ul.assa-header-lang li { line-height: 20px !important; padding: 0 !important; margin: 0 !important; }
	#top #header_meta .sub_menu ul.assa-header-lang a { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; line-height: 20px !important; padding: 0 !important; }
	#top #header_meta .sub_menu ul.assa-header-lang li.assa-header-lang-sep { padding: 0 8px !important; }
	#top #header_meta .container > .phone-info { order: 3; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
	#top #header_meta .container > .phone-info > div { display: flex !important; align-items: center !important; gap: 28px; }
	#top #header_meta .phone-info .assa-tb-item { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
	#top #header_meta .phone-info .assa-tb-item::before { display: none !important; }
	#top #header_meta .phone-info .assa-tb-item:last-child { display: none !important; } /* Contáctenos se oculta en móvil; el pin lleva a Sucursales */
	#top #header_meta .phone-info .assa-tb-item a { gap: 0 !important; padding: 0 !important; display: flex !important; }
	#top #header_meta .phone-info .assa-tb-item a span { display: none !important; }
	#top #header_meta .phone-info .assa-tb-item svg { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; stroke-width: 2; }
	/* País: bandera 19px, "Panamá" 14px sin mayúsculas, flecha blanca */
	#top #header_meta .sub_menu #avia2-menu > li { float: none !important; margin: 0 !important; padding: 0 !important; }
	#top #header_meta .sub_menu #avia2-menu { float: none !important; padding: 0 !important; }
	#top #header_meta .sub_menu #avia2-menu > li > a { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: none !important; padding: 0 !important; line-height: 20px !important; height: auto !important; }
	#top #header_meta .sub_menu #avia2-menu > li > a > img:first-child { width: 19px !important; height: auto !important; margin-right: 6px !important; }
	#top #header_meta .sub_menu #avia2-menu > li.menu-item-has-children > a::after { width: 8px; height: 8px; margin-left: 9px; margin-top: -5px; border-color: #fff !important; }
	/* La lista de países abre hacia la derecha desde el país */
	#top #header_meta .sub_menu .menu-item-has-children > .sub-menu { left: 0 !important; right: auto !important; }

	/* ---- Barra del logo ---- */
	#top #header_main .container { width: 100% !important; max-width: none !important; padding: 0 10px !important; box-sizing: border-box; }
	#top #header_main .container, #top #header_main .logo, #top #header_main .logo a { height: 64px !important; max-height: 64px !important; }
	#top #header_main .logo a { display: flex !important; align-items: center; }
	/* El PNG (200×80) trae aire: a 121px de ancho la parte visible mide 99px, como el Figma */
	#top #header_main .logo img { width: 121px !important; height: auto !important; max-height: none !important; margin-left: -11px; padding: 0 !important; }
	#top #header_main .ubermenu-responsive-toggle { top: 9px !important; right: 0 !important; width: 48px !important; max-width: none !important; height: 48px !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; position: absolute !important; display: flex !important; align-items: center; justify-content: center; background: none !important; }
	#top #header_main .inner-container { position: relative; }
	/* ☰ dibujado: 3 líneas de 28×3px separadas 10.5px, redondeadas */
	#top #header_main .ubermenu-responsive-toggle .fa-bars { display: none !important; }
	#top #header_main .ubermenu-responsive-toggle:not(.ubermenu-responsive-toggle-open)::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: #0d2e68; box-shadow: 0 -10.5px 0 #0d2e68, 0 10.5px 0 #0d2e68; }
	/* Menú abierto: UberMenu solo agrega la clase -open (no cambia el ícono) → ✕ dibujada con dos líneas iguales */
	#top #header_main .ubermenu-responsive-toggle .fa-times { display: none !important; }
	#top #header_main .ubermenu-responsive-toggle.ubermenu-responsive-toggle-open::before,
	#top #header_main .ubermenu-responsive-toggle.ubermenu-responsive-toggle-open::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 3px; margin: -1.5px 0 0 -14px; border-radius: 2px; background: #0d2e68; transform: rotate(45deg); }
	#top #header_main .ubermenu-responsive-toggle.ubermenu-responsive-toggle-open::after { transform: rotate(-45deg); }

	/* Ajustes con más prioridad que reglas viejas de HN (min-height 67px, lista del país al 50% centrada, margen del idioma) */
	.responsive #top #header_meta .container { min-height: 44px !important; height: 44px !important; }
	.responsive #top #header_meta .sub_menu #avia2-menu { width: auto !important; margin: 0 auto 0 0 !important; text-align: left !important; }
	.responsive #top #header_meta .sub_menu ul.assa-header-lang { width: auto !important; margin: 0 28px 0 0 !important; }
}

/* ---- Íconos del topbar móvil con proporciones del Figma (WhatsApp 20×20, celular 16×24, pin 18×24; línea de 2px):
   el SVG original se oculta y se dibuja con máscara; el color sale de currentColor (blanco). ---- */
@media only screen and (max-width: 767px) {
	#top #header_meta .phone-info .assa-tb-item a svg { display: none !important; }
	#top #header_meta .phone-info .assa-tb-item a::before { content: ""; display: block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--assa-tb-ico) center / var(--assa-tb-ico-size, 24px) no-repeat; mask: var(--assa-tb-ico) center / var(--assa-tb-ico-size, 24px) no-repeat; }
	#top #header_meta .phone-info .assa-tb-item a[href*="whatsapp"] { --assa-tb-ico: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.6 21.4l1.5-4.3A9.9 9.9 0 1 1 7.2 20z%22/%3E%3Cpath d=%22M8.6 7.6c-.5 1.3-.1 3 1.2 4.6 1.4 1.8 3.4 3.2 5 3.6.9.2 1.6-.1 2-.7l.4-.8-2.1-1.3-1 .9c-1.2-.4-2.6-1.7-3.2-3l.8-1.1-1.2-2.2z%22 stroke-width=%221.8%22/%3E%3C/svg%3E'); --assa-tb-ico-size: 21.5px; }
	#top #header_meta .phone-info .assa-tb-item a[href^="tel:"] { --assa-tb-ico: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%221%22 width=%2214%22 height=%2222%22 rx=%223%22/%3E%3Cpath d=%22M10.5 19h3%22/%3E%3C/svg%3E'); }
	#top #header_meta .phone-info .assa-tb-item:nth-last-child(2) a { --assa-tb-ico: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 23c-.5-.4-8-6.9-8-13.2A8 8 0 0 1 12 1.8a8 8 0 0 1 8 8c0 6.3-7.5 12.8-8 13.2z%22/%3E%3Ccircle cx=%2212%22 cy=%229.8%22 r=%223%22/%3E%3C/svg%3E'); } /* Sucursales/Oficinas: el ítem antes de Contáctenos */
}

/* ==========================================================================
   DESPLEGABLE DEL MENÚ PRINCIPAL CON EL ESTILO DEL REDISEÑO (UberMenu) — 2026-10-19
   Mismo estilo que Honduras, Nicaragua y Costa Rica prod, adaptado a los menús de Guatemala.
   Solo el submenú que aparece al pasar el mouse (escritorio): panel blanco, títulos azules, opciones en gris.
   Las pestañas del primer nivel quedan como estaban. Sin sombreado de página.
   Producto ocupa todo el ancho del header (del logo al borde derecho); los demás empiezan bajo el ícono de la primera pestaña.
   ========================================================================== */
@media only screen and (min-width: 990px) {
	#top #header_main .ubermenu-main { position: relative !important; }
	#top #header_main .ubermenu-main .ubermenu-nav, #top #header_main .ubermenu-main .ubermenu-item-level-0 { position: static !important; }

	#top #header_main .ubermenu-main .ubermenu-submenu.ubermenu-submenu-type-mega { width: max-content !important; min-width: 0; max-width: none; left: 0 !important; background: #fff !important; border: 0 !important; box-shadow: 0 8px 16px rgba(13,46,104,.08) !important; padding: 36px 0 30px 22px !important; }
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega > .ubermenu-item-level-1 { width: auto !important; padding: 0 56px 0 0 !important; float: left; clear: none !important; }
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-submenu-type-stack { padding: 0 !important; }
	/* Guatemala pinta de azul el panel y las listas internas: dentro del panel van sin fondo */
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-submenu { background: transparent !important; box-shadow: none !important; border: 0 !important; }
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-submenu-type-stack > .ubermenu-item { float: none !important; width: auto !important; padding: 0 !important; clear: none; }

	/* Producto: panel a todo el ancho del header. El contenedor de Enfold mide 95% del sitio en caja (90% de la pantalla, máx. 1140px);
	   las pestañas terminan en su borde derecho */
	#top #header_main .ubermenu-main .ubermenu-nav > .ubermenu-item-level-0:first-child > .ubermenu-submenu { left: auto !important; right: 0 !important; width: min(85.5vw, 1083px) !important; padding-left: 0 !important; padding-right: 0 !important; }
	#top #header_main .ubermenu-main .ubermenu-nav > .ubermenu-item-level-0:first-child > .ubermenu-submenu > .ubermenu-item-level-1 { width: 50% !important; box-sizing: border-box; padding-right: 44px !important; }
	/* ES: tres columnas — Individual Familiar (309), Empresas / Colectivos (7979) y Planes de Seguro (9770) de último.
	   EN: dos mitades — Business / Group (9691) e Individual Family (9685) */
	#top #header_main .ubermenu-main .ubermenu-nav > .ubermenu-item-level-0:first-child > .ubermenu-submenu > :is(.ubermenu-item-309, .ubermenu-item-7979, .ubermenu-item-9770) { width: 33.333% !important; }
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega > :is(.ubermenu-item-9770, .ubermenu-item-9685) { padding-right: 0 !important; }
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega > .ubermenu-item-9770 { position: static !important; float: left !important; clear: none !important; top: auto !important; margin-top: 0 !important; } /* venía con position: absolute y tapaba la lista */
	/* Listas sin agrupar en dos columnas: Servicio al Cliente (ES 1873 / EN 9711) y Acerca de Nosotros (ES 7734 / EN 9719) */
	#top #header_main .ubermenu-main :is(.ubermenu-item-1873, .ubermenu-item-9711, .ubermenu-item-7734, .ubermenu-item-9719) > .ubermenu-submenu { columns: 2; column-gap: 56px; width: 560px; }
	#top #header_main .ubermenu-main :is(.ubermenu-item-1873, .ubermenu-item-9711, .ubermenu-item-7734, .ubermenu-item-9719) > .ubermenu-submenu > .ubermenu-item { break-inside: avoid; display: block; }

	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-item-header > .ubermenu-target,
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-item-level-1 > .ubermenu-target { font: 700 18px/25px Roboto, Arial, sans-serif !important; letter-spacing: .018px; text-transform: none; color: #0d2e68 !important; padding: 0 0 8px !important; border: 0 !important; white-space: nowrap; background: none !important; }
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-item-normal > .ubermenu-target { font: 400 14px/20px Roboto, Arial, sans-serif !important; letter-spacing: .1px; text-transform: none; color: #4a4b4e !important; padding: 3px 0 !important; white-space: nowrap; background: none !important; }
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-item-normal > .ubermenu-target:hover { color: #0193e5 !important; }
	/* Página actual: mismo color que el hover */
	#top #header_main .ubermenu-main .ubermenu-submenu-type-mega .ubermenu-item-normal.ubermenu-current-menu-item > .ubermenu-target { color: #0193e5 !important; }

	/* Panel bajo el header; el fondo blanco con línea arriba/abajo y sombra suave se estira de borde a borde con ::before */
	#top #header_main .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop { top: 55px !important; margin-top: 0 !important; padding-top: 36px !important; padding-bottom: 36px !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
	#top #header_main .ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: #fff; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; box-shadow: 0 14px 18px -10px rgba(13,46,104,.12); z-index: -1; pointer-events: none; }
	/* Puente invisible bajo la pestaña para que el mouse no salga del menú al bajar a los enlaces
	   (con ::before: el ::after es la flecha del submenú de UberMenu y debe quedar al lado del texto) */
	#top #header_main .ubermenu-main .ubermenu-item-level-0.ubermenu-has-submenu-drop > .ubermenu-target { position: relative; }
	#top #header_main .ubermenu-main .ubermenu-item-level-0.ubermenu-has-submenu-drop > .ubermenu-target::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: transparent; }
	#top #header_main .ubermenu-main .ubermenu-item-level-0.ubermenu-active > .ubermenu-target::before { left: -100vw; right: -100vw; }
}
/* El puente a todo el ancho ensanchaba la página con el desplegable abierto */
body:has(#header_main .ubermenu-item-level-0.ubermenu-active) { overflow-x: clip; }

/* =====================================================================
   MI ASSANET: LOGIN NUEVO (Figma "Proyecto de Autenticación" 3610:350)
   Tarjeta blanca con ícono, botón "Iniciar sesión" y "Solicitar acceso".
   Solo aplica donde exista .assa-login-card (bloque de código del home).
   ===================================================================== */
.flex_column.flex_column_table_cell.av-equal-height-column:has(.assa-login-card) {
	padding: 16px !important;
	vertical-align: middle;
}
.assa-login-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	height: 205px;
	padding: 0 10px;
	background: #fff;
	border-radius: 10px;
}
.assa-login-card__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.assa-login-card__icon {
	display: block;
	width: 32px;
	height: 32px;
	color: #0d2e68;
}
.assa-login-card__title {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15.6px;
	line-height: 21.45px;
	color: #0d2e68;
	white-space: nowrap;
}
.assa-login-card__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding-top: 5px;
}
.assa-login-card .assa-login-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: #0077c7;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}
.assa-login-card .assa-login-card__btn:hover,
.assa-login-card .assa-login-card__btn:focus-visible {
	background: #005fa0;
	color: #fff;
	text-decoration: none;
}
.assa-login-card .assa-login-card__link {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 21.45px;
	color: #2d5c88;
	text-decoration: none;
	white-space: nowrap;
}
.assa-login-card .assa-login-card__link:hover,
.assa-login-card .assa-login-card__link:focus-visible {
	color: #0193e5;
	text-decoration: underline;
}

/* =====================================================================
   MENÚ MÓVIL: panel abierto debajo del logo y a todo el ancho
   - UberMenu abre el panel a la altura del logo (#header_main, 64px);
     se baja justo debajo para que no tape el logo ni la X.
   - .main_menu va dentro del .inner-container (10px por lado y, en
     algunos anchos, más a la izquierda); al abrir se estira a -10px
     para cubrir todo el ancho. La X se compensa para que no se mueva.
   Solo celulares y vista móvil de UberMenu.
   ===================================================================== */
@media only screen and (max-width: 767px) {
	#top #header_main .ubermenu-main.ubermenu-mobile-view:not(.ubermenu-responsive-collapse) {
		margin-top: 64px !important;
	}
	#top #header_main .main_menu:has(.ubermenu-main.ubermenu-mobile-view:not(.ubermenu-responsive-collapse)) {
		left: -10px !important;
		right: -10px !important;
		width: auto !important;
	}
	#top #header_main .main_menu .ubermenu-responsive-toggle.ubermenu-responsive-toggle-open {
		right: 10px !important;
	}
}

/* =====================================================================
   MENÚ MÓVIL: submenús con los colores del menú de escritorio
   Fondo claro, títulos azul marino (#0d2e68) y enlaces gris oscuro
   (#4a4b4e) que pasan a celeste (#0193e5). Solo celulares.
   ===================================================================== */
@media only screen and (max-width: 767px) {
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-item-level-0 > .ubermenu-submenu {
		background: #f4f7fb !important;
		color: #4a4b4e !important;
		padding: 14px 24px 6px !important;
		border-top: 1px solid #e3e8ef !important;
		border-bottom: 1px solid #e3e8ef !important;
		box-sizing: border-box !important;
		width: 100% !important;
		left: 0 !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-submenu {
		background: transparent !important;
		color: #4a4b4e !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-header {
		padding-top: 0 !important;
		margin-bottom: 10px !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-header ~ .ubermenu-item-header {
		padding-top: 8px !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-header > .ubermenu-target,
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-header > .ubermenu-target .ubermenu-target-title {
		font-family: 'Roboto', sans-serif !important;
		font-weight: 700 !important;
		font-size: 16px !important;
		line-height: 22px !important;
		color: #0d2e68 !important;
		background: none !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-header > .ubermenu-target {
		padding: 0 0 4px !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target,
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target .ubermenu-target-title {
		font-family: 'Roboto', sans-serif !important;
		font-weight: 400 !important;
		font-size: 14px !important;
		line-height: 20px !important;
		color: #4a4b4e !important;
		background: none !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target {
		padding: 6px 0 !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:hover .ubermenu-target-title,
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:active .ubermenu-target-title,
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target:hover .ubermenu-target-title,
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target:active .ubermenu-target-title,
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-current-menu-item > .ubermenu-target .ubermenu-target-title {
		color: #0193e5 !important;
	}
	#top #header_main .ubermenu-main.ubermenu-mobile-view .ubermenu-submenu .ubermenu-retractor-mobile {
		margin: 4px -24px -6px !important;
		padding: 12px 0 !important;
		border-top: 1px solid #e3e8ef !important;
		background: #fff !important;
		color: #0d2e68 !important;
		font-family: 'Roboto', sans-serif !important;
		font-weight: 500 !important;
		font-size: 14px !important;
	}
}

/* =====================================================================
   HOME MÓVIL: cuadrícula 2 × 2 de tarjetas ("Compra o calcula" y
   "Conoces Nuestros Beneficios"). El Quick CSS de Enfold fija las
   columnas en 150px de alto y las imágenes miden ~173px, por eso se
   montaban. Aquí: cuadrícula con separación pareja y alto automático.
   Solo filas de tarjetas con imagen (en inglés son bloques de color
   e íconos y se dejan como están).
   ===================================================================== */
@media only screen and (max-width: 480px) {
	/* sin franja cian entre "Compra o calcula" y "Beneficios" (margin-bottom 20px) */
	#top #inicio-mobile:has(.flex_column_table > .av_one_fourth .avia-image-container) {
		margin-bottom: 0 !important;
	}
	#top #inicio-mobile .flex_column_table:has(> .av_one_fourth .avia-image-container) {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding: 16px 0;
	}
	#top #inicio-mobile .flex_column_table:has(> .av_one_fourth .avia-image-container) > .no_margin.av_one_fourth {
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#top #inicio-mobile .flex_column_table > .av_one_fourth .avia-image-container,
	#top #inicio-mobile .flex_column_table > .av_one_fourth .avia-image-container-inner,
	#top #inicio-mobile .flex_column_table > .av_one_fourth .avia-image-container img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 !important;
	}
}

/* =====================================================================
   HOME MÓVIL EN: bloque "Featured products / Personal Accident / Car /
   Travel". El Quick CSS EN pone cada columna al 49 % con float; como
   miden distinto (143/132/115 px) se escalonan y "Travel" queda solo.
   Aquí: cuadrícula 2 × 2 de alturas iguales, alineada con los íconos
   de arriba (49 % + 1px de margen). Solo filas con Special Heading
   (en español no existe ese bloque).
   ===================================================================== */
@media only screen and (max-width: 480px) {
	#top #inicio-mobile .flex_column_table:has(> .av_one_fourth .av-special-heading) {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 2px;
		width: calc(98% + 2px);
		margin-left: 1px;
	}
	#top #inicio-mobile .flex_column_table:has(> .av_one_fourth .av-special-heading) > .no_margin.av_one_fourth {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		min-height: 130px;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
	}
}

/* =====================================================================
   FOOTER MÓVIL: solo los íconos de redes de abajo (junto a ESP | ENG)
   Se oculta el duplicado de arriba (.assa-footer-social-mobile, en
   .assa-footer-col-app) y su contenedor .assa-footer-main, que en móvil
   queda vacío. Solo celulares.
   ===================================================================== */
@media only screen and (max-width: 767px) {
	#top #assa-custom-footer .assa-footer-col-app,
	#top #assa-custom-footer .assa-footer-main {
		display: none !important;
	}
}