/* Viva - Complianz legal pages (privacy, cookie policy, opt-out) formatting */
main.gutenberg-page .cmplz-document{max-width:800px;margin:72px auto 110px;padding:0 24px;box-sizing:border-box;line-height:1.7;color:#2b2f42;}
main.gutenberg-page .cmplz-document h1{font-size:2.4rem;line-height:1.2;margin:0 0 1.5rem;color:#051651;font-weight:800;}
main.gutenberg-page .cmplz-document h2{font-size:1.5rem;margin:2.6rem 0 .8rem;color:#051651;font-weight:700;padding-top:1.4rem;border-top:1px solid #E6E6EE;}
main.gutenberg-page .cmplz-document h3{font-size:1.1rem;margin:1.6rem 0 .5rem;color:#051651;}
main.gutenberg-page .cmplz-document a{color:#8015E8;}
main.gutenberg-page .cmplz-document ul{padding-left:1.3rem;margin:.8rem 0;}
main.gutenberg-page .cmplz-document li{margin:.35rem 0;}
main.gutenberg-page .cmplz-document input[type=text],main.gutenberg-page .cmplz-document input[type=email]{border:1px solid #E6E6EE;border-radius:8px;padding:.55rem .8rem;margin:.25rem .5rem .25rem 0;min-width:260px;font-size:1rem;}
main.gutenberg-page .cmplz-document input[type=submit],main.gutenberg-page .cmplz-document button[type=submit]{background:#8015E8;color:#fff;border:none;border-radius:999px;padding:.6rem 1.6rem;font-weight:600;cursor:pointer;margin-top:1rem;}

/* Mobile: ocultar mega-panel Solutions (no pensado para mobile) */
@media(max-width:759px){.navbar .menu li.mega-menu > .sub-menu{display:none !important;}}



/* Mobile v2: tapar mega-panel Solutions incluso en hover/tap */
@media(max-width:759px){body .navbar .menu li.mega-menu:hover>.sub-menu,body .navbar .menu li.mega-menu>.sub-menu{display:none !important;}}


/* Pricing: evitar orphans en features */
.viva_pricing .in__features li{text-wrap:balance;}

/* === VIVA FOOTER MOBILE 2026-08-27 === */
/* --- 1. Columnas en mobile ------------------------------------------------
   El tema pasa el footer a flex-wrap en 991px (no en 767) y ahi hace tres cosas
   que rompen el layout ahora que son 5 columnas de navegacion:
     .footer__container > :last-child  { order:-1; width:100% }  -> By situation subia arriba
     .footer__container > :not(:last-child) { max-width:173px }  -> dos por fila
     gap: 60px 20px                                              -> huecos enormes
   Ese CSS venia de un footer anterior donde la ultima columna era otro bloque.
   Verificado en vivo el 2026-08-27 contra execviva.com. */
@media (max-width: 991px) {
  .footer .footer__container {
    display: block !important;
    margin-top: 40px !important;
  }
  .footer .footer__container > .footer__item {
    max-width: none !important;
    width: 100% !important;
    order: 0 !important;
    margin: 0 0 28px !important;
  }
  .footer .footer__container > .footer__item:last-child {
    margin-bottom: 0 !important;
  }
  .footer .footer__item h4 { margin: 0 0 12px; }
  .footer .footer__item li { margin: 0 0 10px; }
}

/* --- 2. Boton "Work at Viva" ----------------------------------------------
   Vive en la columna de marca, debajo de la descripcion. El markup lo inserta
   viva_footer_careers_block.sh. Sin flecha: es un boton, no un link de lista. */
.footer__careers a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  transition: background .16s ease, border-color .16s ease;
}
.footer__careers a:hover,
.footer__careers a:focus-visible {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.65);
}

/* --- 3. Barra inferior -----------------------------------------------------
   [redes]                                    Privacy Policy    (c) 2026 Viva
   El markup lo arma viva_footer_barra.sh: mueve .footer__soc dentro de
   .footer__policy y descomenta el link legal que el tema ya tenia ahi.
   El orden del DOM queda redes / parrafo / link, asi que se reordena por flex. */
.footer .footer__policy .footer__soc  { order: 1; }
.footer .footer__policy .privacy-link { order: 2; }
.footer .footer__policy > p           { order: 3; }

.footer .footer__policy .privacy-link   { text-decoration: none; opacity: .85; transition: opacity .16s ease; }
.footer .footer__policy .privacy-link:hover,
.footer .footer__policy .privacy-link:focus-visible { opacity: 1; text-decoration: underline; }
.footer .footer__policy .privacy-link p { margin: 0; }

@media (min-width: 992px) {
  .footer .footer__careers { margin-top: 28px; }
  .footer .footer__policy {
    margin-top: 56px !important;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    gap: 28px;
    text-align: left;
  }
  /* las redes empujan al resto contra el borde derecho */
  .footer .footer__policy .footer__soc     { margin: 0 auto 0 0 !important; }
  .footer .footer__policy .footer__soc ul  { margin: 0 !important; }
  .footer .footer__policy > p              { margin: 0 !important; }
}

/* En mobile: el boton y las redes centrados, el logo y la descripcion no.
   Ese contraste es lo que hace que el boton se lea como CTA. */
@media (max-width: 991px) {
  .footer .footer__careers { margin-top: 24px; text-align: center; }
  .footer .footer__policy {
    margin-top: 36px !important;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
  .footer .footer__policy .footer__soc    { margin: 0 !important; }
  .footer .footer__policy .footer__soc ul { margin: 0 !important; justify-content: center; }
  .footer .footer__policy > p             { margin: 0 !important; }
}
/* === /VIVA FOOTER MOBILE === */

/* === VIVA MENU MOBILE 2026-09-01 === */
@media (max-width: 991px) {

  /* --- El panel: con scroll propio, si no los ultimos items son inalcanzables --- */
  .navbar__nav.is-active {
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 28px !important;
  }
  .navbar__nav > ul { margin: 4px 0 20px !important; }

  /* --- Primer nivel: fila completa, etiqueta a la izquierda --- */
  .navbar__nav > ul > li {
    margin: 0 !important;
    text-align: left !important;
    width: 100% !important;
    border-top: 1px solid #ECECF3;
  }
  .navbar__nav > ul > li:first-of-type { border-top: 0; }

  /* el prefijo body + .navbar es para ganarle en especificidad al mega-menu,
     que declara sus propias reglas con !important */
  body .navbar .navbar__nav > ul > li > a {
    display: flex !important;
    align-items: center;
    min-height: 56px;
    font-size: 18px !important;
    font-weight: 600 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 56px 0 0 !important;
  }

  /* --- Subniveles: links, no cabeceras de mega-menu --- */
  body .navbar .navbar__nav .menu li.mega-menu > .sub-menu > li > a,
  body .navbar .navbar__nav .menu .sub-menu li > a {
    display: flex !important;
    align-items: center;
    min-height: 46px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #3A4166 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 52px 0 14px !important;
    max-width: none !important;
    width: 100% !important;
  }
  body .navbar .navbar__nav .menu .sub-menu .sub-menu li > a {
    padding-left: 30px !important;
    font-size: 15px !important;
    min-height: 42px !important;
    color: #5A6180 !important;
  }
  .navbar .menu .sub-menu { padding-left: 0 !important; }
  .navbar .menu .menu-item-has-children.viva-open > .sub-menu { padding: 0 0 8px !important; }
  .navbar .menu .sub-menu li { position: relative; width: 100% !important; margin: 0 !important; }

  /* --- Chevrons: centrados en su fila, area tactil de verdad --- */
  .navbar .menu .menu-item-has-children > .viva-subtoggle {
    top: 0 !important;
    right: 0 !important;
    width: 56px !important;
    height: 56px !important;
  }
  .navbar .menu .sub-menu .menu-item-has-children > .viva-subtoggle {
    width: 46px !important;
    height: 46px !important;
  }

  /* --- CTA al final, a ancho completo --- */
  .navbar__nav .navbar__cta-group { width: 100% !important; margin-top: 10px !important; display: block !important; }
  .navbar__nav .navbar__cta-group > .btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
  }
  /* el logo duplicado dentro del panel no aporta nada en mobile */
  .navbar__nav > .navbar__logo { display: none !important; }
  /* --- El hover no manda: manda solo .viva-open --------------------------
     ESTE ES EL BUG DE "Solutions tarda 5 a 10 segundos en abrir".
     Reproducido el 2026-09-01 en un viewport real de 390px.

     El tema declara, para el mega-menu (que es UNICAMENTE "Solutions"):

       @media (max-width: 759px){
         body .navbar .menu li.mega-menu:hover > .sub-menu,
         body .navbar .menu li.mega-menu > .sub-menu { display: none !important }
       }

     Esa regla con :hover pesa (0,5,2) y le gana a la del acordeon, que pesa
     (0,4,2). En un telefono el primer toque aplica :hover y se queda pegado
     hasta que tocas otra cosa: mientras tanto el submenu esta en display:none
     y no aparece por mas que .viva-open este puesto. Por eso parecia que
     tardaba 5-10 segundos, y por eso con el mouse abria y cerraba sin control.

     Solutions es el unico li.mega-menu del menu. Los demas no tienen esa regla
     y por eso funcionaban bien.

     Medido: abierto sin hover -> block, 192px. Con :hover -> none, 0px.
     Con estas reglas -> block, 192px, con o sin el dedo encima. */

  /* cerrado: el hover no abre nada */
  body .navbar .navbar__nav .menu li:hover > .sub-menu,
  body .navbar .navbar__nav .menu li.mega-menu:hover > .sub-menu {
    display: block !important;
    position: static !important;
    max-height: 0 !important;
    padding: 0 !important;
  }

  /* abierto: le gana al display:none del tema aunque el dedo siga encima */
  body .navbar .navbar__nav .menu li.mega-menu.viva-open > .sub-menu,
  body .navbar .navbar__nav .menu li.mega-menu.viva-open:hover > .sub-menu,
  body .navbar .navbar__nav .menu .menu-item-has-children.viva-open > .sub-menu,
  body .navbar .navbar__nav .menu .menu-item-has-children.viva-open:hover > .sub-menu {
    display: block !important;
    position: static !important;
    max-height: 1600px !important;
    padding: 0 0 8px !important;
  }
}
/* === /VIVA MENU MOBILE === */