/* ═══════════════════════════════════════════════════════════════════════
   Teldat Mega Menu
   Los valores replican el prototipo aprobado en /menu/Product Mega Menu.dc.html.
   No cambiar tamaños ni colores sin contrastar con ese archivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Animaciones ---------- */
@keyframes mmFadeInDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes mmOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes mmTabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes mmColIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes mmSideIn{from{opacity:0}to{opacity:1}}
/* Salida con keyframes propios, no "reverse": con direction:reverse + delay
   el elemento se congela en el ultimo fotograma (opacity:0) durante la
   espera y desaparece de golpe en vez de escalonarse. */
@keyframes mmFadeOutUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-14px)}}
@keyframes mmFadeOut{from{opacity:1}to{opacity:0}}
@keyframes mmColOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}

/* ---------- Alineacion header / panel ----------
   La fila del header de Divi lleva max-width:2560px, asi que en pantallas
   anchas su contenido (logo, menu, CTA) se separa mas que los bordes de la
   caja del megamenu. Se acotan ambos a 1330px, fluidos por debajo.
   Va aqui y no en Theme Builder para que desactivar el plugin lo revierta. */
@media (min-width:961px){
  /* La fila conserva el ancho completo porque es quien lleva el fondo
     blanco de la barra: limitarla lo encogia con ella al fijarse por
     scroll y el contenido se pegaba a la izquierda.
     El tope de 1330px se aplica con padding lateral: el fondo sigue a
     sangre y el contenido (logo, menu, CTA) queda centrado dentro. */
  .et_pb_row_1_tb_header{
    max-width:100%!important;
    /* 20px verticales son los que trae Divi; no tocarlos. */
    padding:20px max(0px,calc((100% - 1330px) / 2))!important;
    /* Las tres columnas arrancan a la misma altura pero miden distinto
       (logo 16px, menu 61px, CTA 50px), asi que sus centros quedaban
       desalineados hasta 23px. Con flex se centran verticalmente entre si. */
    display:flex!important;
    align-items:center!important;
  }
  .et_pb_row_1_tb_header > .et_pb_column{
    display:flex!important;
    align-items:center!important;
    /* Divi las maqueta con float + width en %: sin esto, flex las
       recalcularia y descuadraria el reparto horizontal. */
    flex:0 0 auto;
  }
  /* El modulo de menu colapsa a 10px de alto y queda arriba del todo
     dentro de su columna: se estira y centra su contenido.
     Se prefija con .et-db #et-boc .et-l para ganar a los estilos que Divi
     genera con esa misma especificidad. */
  .et-db #et-boc .et-l .et_pb_row_1_tb_header .et_pb_menu,
  .et_pb_row_1_tb_header .et_pb_menu{
    width:100%;
    /* Divi le pone margin-bottom:35px (su margen de modulo por defecto),
       que dentro de una columna centrada desplazaba el menu 18px hacia
       arriba respecto al logo y al CTA. */
    margin-bottom:0!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
  }
  .et-db #et-boc .et-l .et_pb_row_1_tb_header .et_pb_menu__wrap,
  .et_pb_row_1_tb_header .et_pb_menu__wrap{
    width:100%;
    align-items:center!important;
  }
  .et_pb_row_1_tb_header .et_pb_menu__menu,
  .et_pb_row_1_tb_header .et_pb_menu__menu > nav{
    display:flex!important;
    align-items:center!important;
  }
  /* Los otros dos modulos de la fila (logo y CTA) centran igual su
     contenido dentro de la columna ya estirada. */
  .et_pb_row_1_tb_header .et_pb_image,
  .et_pb_row_1_tb_header .et_pb_button_module_wrapper{
    display:flex!important;
    align-items:center!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
  /* Divi le pone padding-bottom:8px a los enlaces del menu, que los
     descentra respecto al logo y al CTA. */
  .et_pb_row_1_tb_header .et_pb_menu__menu li > a{padding-bottom:0!important}

  /* Subrayado del item que abre el megamenu, como en el prototipo. Va en
     un ::after y no en padding+border para no alterar la altura del
     enlace ni volver a descentrarlo.
     Crece del centro a los extremos al pasar por encima y se queda fijo
     mientras el panel esta abierto. */
  .et_pb_row_1_tb_header .mm-trigger > a{position:relative}
  .et_pb_row_1_tb_header .mm-trigger > a::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-6px;
    height:2px;
    background:currentColor;
    transform:scaleX(0);
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
  }
  .et_pb_row_1_tb_header .mm-trigger:hover > a::after,
  .et_pb_row_1_tb_header .mm-trigger > a[aria-expanded="true"]::after{
    transform:scaleX(1);
  }
  /* Divi le pone margin-bottom:-12px al <ul>, que lo descentra respecto
     al logo y al CTA. */
  .et_pb_row_1_tb_header .et_pb_menu__menu > nav > ul{
    margin-top:0!important;
    margin-bottom:0!important;
    align-items:center!important;
  }

  /* Al fijarla, Divi le aplica top:-110px (con 101px de alto la barra
     quedaba casi entera fuera de pantalla, con el logo y el CTA cortados)
     y left:0 inline, que con position:fixed la ancla al borde izquierdo y
     desplaza el contenido a la derecha respecto al resto de la pagina.
     Se recentra con left/right:0 + los margin:auto de arriba, no con
     translateX: un transform crearia un contexto de apilamiento y romperia
     el 100vw del overlay, que cuelga de esta fila. */
  .et_pb_row_1_tb_header.et_pb_sticky{
    top:0!important;
    left:0!important;
    right:0!important;
  }
}

/* ═══════════ ESCRITORIO ═══════════
   Secuencia de apertura: overlay -> caja -> barra lateral -> contenido
     1. overlay      0ms   240ms
     2. caja       140ms   420ms
     3. lateral    340ms   300ms
     4. columnas   380ms+  340ms                                        */

/* El JS lo reubica dentro del header; top:100% lo cuelga de su borde inferior */
.mm-panel{position:absolute;top:100%;left:0;right:0;z-index:1000}
.mm-panel[hidden]{display:none}
/* Sin padding lateral: el panel cuelga de la fila del header, que tiene
   fondo blanco propio. Un margen aqui dejaria ver ese fondo a los lados de
   la caja como dos barras blancas. */
/* Mismo ancho que el contenido del header: 1330px de tope y fluido por
   debajo, para que los bordes de la caja queden alineados con el logo y
   el boton de contacto en cualquier resolucion. */
.mm-panel__inner{width:min(100%,1330px);max-width:1330px;margin:0 auto}

/* El overlay vive DENTRO del panel, no en <body>: asi hereda su posicion
   y acompaña a la barra sticky sin recalculos en JS (la transicion del
   sticky de Divi dura varios frames y cualquier medicion puntual llega
   tarde, dejando una franja sin oscurecer).
   top:0 lo alinea con el borde superior de la caja y 100vw de ancho cubre
   los laterales; la caja queda por encima por z-index. */
.mm-overlay{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100vh;z-index:-1;background:rgba(26,15,46,.45);cursor:default;animation:mmOverlayIn 240ms ease both}
.mm-overlay[hidden]{display:none}

/* position:relative para quedar por encima del overlay, que va detras
   con z-index:-1 dentro del mismo panel. */
.mm-panelwrap{position:relative;z-index:1;background:#fff;box-shadow:0 24px 64px rgba(26,15,46,.28),0 4px 16px rgba(26,15,46,.12);display:flex;align-items:stretch;min-height:264px;transform-origin:top center;animation:mmFadeInDown 420ms cubic-bezier(.16,.84,.44,1) 140ms both}

.mm-side{flex:0 0 282px;background:#3B2A55;padding:24px 0;display:flex;flex-direction:column;animation:mmSideIn 300ms cubic-bezier(.22,.61,.36,1) 340ms both}
.mm-side .mm-fam{animation:mmColIn 260ms cubic-bezier(.22,.61,.36,1) both}
.mm-side .mm-fam:nth-child(1){animation-delay:380ms}
.mm-side .mm-fam:nth-child(2){animation-delay:420ms}
.mm-side .mm-fam:nth-child(3){animation-delay:460ms}
.mm-side .mm-fam:nth-child(4){animation-delay:500ms}

.mm-body{flex:1 1 auto;min-width:0;padding:32px 36px 40px}

/* Categorias izquierda — 16px */
.mm-fam{position:relative;display:flex;align-items:center;width:100%;height:42px;margin-bottom:24px;padding:0 24px 0 36px;border:0;background:transparent;font:400 16px/1.3 'Roboto',sans-serif;color:#fff;text-align:left;cursor:pointer;transition:background 120ms cubic-bezier(.4,0,.2,1)}
.mm-fam:last-child{margin-bottom:0}
.mm-fam:hover{background:rgba(255,255,255,.07)}
.mm-fam__bar{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:3px;height:17px;border-radius:10px;background:#BAA1FF;opacity:0}
.mm-fam__bg{position:absolute;inset:0;background:#4C3A6B;opacity:0}
.mm-fam__t{position:relative}
.mm-fam--on .mm-fam__bar,.mm-fam--on .mm-fam__bg{opacity:1}
.mm-fam--on .mm-fam__t{font-weight:700}

/* Columnas derecha */
.mm-tab[hidden]{display:none}
.mm-grid3{display:grid;grid-template-columns:repeat(3,240px);gap:70px;align-items:start}
.mm-grid2{display:grid;grid-template-columns:repeat(2,240px);gap:70px;align-items:start}
.mm-col{min-width:0}

/* Contenido: al abrir arranca tras la caja; al cambiar de tab, sin espera */
.mm-tab{animation:mmTabIn 300ms cubic-bezier(.22,.61,.36,1) 340ms both}
.mm-tab .mm-col{animation:mmColIn 340ms cubic-bezier(.22,.61,.36,1) both}
.mm-tab .mm-grid3>.mm-col:nth-child(1){animation-delay:380ms}
.mm-tab .mm-grid3>.mm-col:nth-child(2){animation-delay:440ms}
.mm-tab .mm-grid3>.mm-col:nth-child(3){animation-delay:500ms}
.mm-tab--swap{animation-delay:0ms}
.mm-tab--swap .mm-grid3>.mm-col:nth-child(1){animation-delay:0ms}
.mm-tab--swap .mm-grid3>.mm-col:nth-child(2){animation-delay:55ms}
.mm-tab--swap .mm-grid3>.mm-col:nth-child(3){animation-delay:110ms}

/* Titulos — 16px */
.mm-eyebrow{margin:0 0 32px;font:700 16px/1.2 'Roboto',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6B5B8A}
.mm-sub{margin:0 0 25px;font:700 16px/1.2 'Roboto',sans-serif;color:#6B3FA0}

/* Elementos — 14px */
.mm-link{display:block;margin-bottom:25px;font:400 14px/1.3 'Roboto',sans-serif;color:#3C3C3C;text-decoration:none}
.mm-link:last-child{margin-bottom:0}
/* Underline sin animar: aparece de golpe. La linea que crece del centro a
   los extremos es solo la del item "Products" del nav del header. */
/* text-decoration:none anula el subrayado que el design system aplica a
   todo <a>:hover; aqui solo queremos el desplazamiento. */
.mm-link:hover{color:#3C3C3C;text-decoration:none;transition:all .2s;transform:translate(4px)}
.mm-soon{display:block;margin-top:14px;font:400 14px/1.3 'Roboto',sans-serif;color:#9A93A6}
/* Segunda cabecera apilada dentro de una columna (clase 'group') */
.mm-group{margin-top:32px}

/* Secuencia de cierre: inversa a la de apertura.
   Va despues de las reglas de entrada: la abreviatura "animation" reinicia
   animation-name si se aplica mas tarde en la hoja. */
.mm-anim-out .mm-tab .mm-col{animation:mmColOut 180ms cubic-bezier(.4,0,1,1) both}
.mm-anim-out .mm-tab .mm-grid3>.mm-col:nth-child(1){animation-delay:80ms}
.mm-anim-out .mm-tab .mm-grid3>.mm-col:nth-child(2){animation-delay:40ms}
.mm-anim-out .mm-tab .mm-grid3>.mm-col:nth-child(3){animation-delay:0ms}
.mm-anim-out .mm-side{animation:mmFadeOut 180ms ease 60ms both}
.mm-anim-out .mm-side .mm-fam{animation:none!important}
.mm-anim-out .mm-panelwrap{animation:mmFadeOutUp 260ms cubic-bezier(.4,0,1,1) 160ms both}
.mm-anim-out .mm-overlay{animation:mmFadeOut 220ms ease 300ms both}

/* ═══════════ MOVIL (<=960px) ═══════════ */

/* El JS la saca del <ul> del menu (que Divi oculta en movil) y la monta
   en el contenedor del header, por eso lleva posicionamiento propio. */
.mm-burger-li{display:none!important}
.mm-burger{display:none;position:absolute;top:0;bottom:0;right:20px;margin:auto 0;z-index:100;flex-direction:column;justify-content:center;gap:7px;width:50px;height:50px;padding:0;border:0;background:transparent;cursor:pointer}
.mm-burger span{display:block;width:25px;height:3px;border-radius:2px;background:#32244a;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.mm-burger--on span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.mm-burger--on span:nth-child(2){opacity:0}
.mm-burger--on span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.mm-m-overlay{position:fixed;inset:0;z-index:99998;background:rgba(26,15,46,.5);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.mm-m-overlay--on{opacity:1;visibility:visible}

.mm-m-panel{position:fixed;top:0;left:0;z-index:99999;width:86%;max-width:380px;min-width:300px;height:100%;background:#3B2A55;display:flex;flex-direction:column;transform:translateX(-100%);visibility:hidden;transition:transform .42s cubic-bezier(.16,.84,.44,1),visibility .42s;box-shadow:0 0 48px rgba(0,0,0,.4)}
.mm-m-panel--on{transform:translateX(0);visibility:visible}

.mm-m-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.12)}
.mm-m-head img{height:32px;width:auto;display:block}
.mm-m-x{width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}

/* El track mide 3x el panel y cada vista 1/3 de el, asi que una vista
   equivale al 100% visible. El translate va en % del track: 33.3333%/nivel. */
.mm-m-views{flex:1 1 auto;overflow:hidden;position:relative}
.mm-m-track{display:flex;width:300%;height:100%;transition:transform .38s cubic-bezier(.16,.84,.44,1)}
.mm-m-view{flex:0 0 33.3333%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 32px}

.mm-m-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0 24px;height:54px;border:0;background:transparent;text-align:left;cursor:pointer;font:400 16px/1.3 'Roboto',sans-serif;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);transition:background .15s ease}
.mm-m-item:hover,.mm-m-item:active,.mm-m-item:focus{background:rgba(255,255,255,.07);color:#fff}
/* display:flex anula el hidden nativo, hay que declararlo explicito: afecta
   a los botones de familia sobrantes cuando la seccion tiene menos de 8
   (Services solo tiene 1). */
.mm-m-item[hidden]{display:none!important}
.mm-m-item__ch{flex:0 0 auto;font-size:20px;color:#BAA1FF}

.mm-m-back{display:flex;align-items:center;gap:10px;width:100%;padding:0 24px;height:52px;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);font:600 14px/1.3 'Roboto',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#BAA1FF;text-align:left;cursor:pointer}
.mm-m-back:hover{color:#fff}

.mm-m-eyebrow{margin:24px 0 8px;padding:0 24px;font:700 12px/1.2 'Roboto',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#BAA1FF}
.mm-m-sub{margin:16px 0 4px;padding:0 24px;font:700 14px/1.2 'Roboto',sans-serif;color:#fff}
.mm-m-link{display:block;padding:11px 24px;font:400 15px/1.35 'Roboto',sans-serif;color:rgba(255,255,255,.86);text-decoration:none}
.mm-m-link:hover,.mm-m-link:active{color:#fff;background:rgba(255,255,255,.07)}
.mm-m-soon{display:block;padding:10px 24px 0;font:400 13px/1.3 'Roboto',sans-serif;color:rgba(255,255,255,.45)}

/* ---- Conmutacion escritorio / movil ---- */
@media (max-width:960px){
  .mm-panel,.mm-overlay{display:none!important}
  .mm-burger-li{display:block}
  .mm-burger{display:flex}
  /* La hamburguesa nativa de Divi sobra: el panel offset la sustituye.
     Antes la ocultaba Divi-child/style.css sin media query (y con ella
     tambien en escritorio); ahora esa regla esta acotada a >960px y el
     ocultamiento en movil es responsabilidad de este plugin. */
  .et_mobile_nav_menu{display:none!important}
  /* El menu horizontal de Divi tampoco: su contenido vive en el panel. */
  .et_pb_menu__menu > ul > li:not(.mm-burger-li){display:none!important}
}
@media (min-width:961px){
  .mm-m-panel,.mm-m-overlay,.mm-burger-li,.mm-burger{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .mm-panelwrap,.mm-overlay,.mm-side,.mm-side .mm-fam,.mm-tab,.mm-tab .mm-col,
  .mm-anim-out .mm-panelwrap,.mm-anim-out .mm-overlay{animation:none!important}
  .mm-m-panel,.mm-m-overlay,.mm-m-track,.mm-burger span{transition:none!important}
}