/* =========================================================
   Mega menu TecnetOne
   Todas las clases llevan el prefijo teomm- porque el tema
   del sitio carga Bootstrap y FontAwesome de forma global.
   Nombres genéricos como .panel o .nav chocarían con ellos.
   ========================================================= */

.teomm,
.teomm *,
.teomm *::before,
.teomm *::after { box-sizing: border-box; }

.teomm {
  font-family: var(--teomm-font-body);
  color: var(--teomm-text-strong);
  -webkit-font-smoothing: antialiased;
}

/* Header fijo con position: fixed, no con sticky.
   Un elemento sticky solo se queda pegado mientras su contenedor siga
   a la vista, y aquí el contenedor mide exactamente lo mismo que el
   header, así que no hay recorrido donde pegarse y se iba con el
   scroll. En HubSpot es todavía más marcado, porque el módulo se
   dibuja dentro de un contenedor tan alto como él mismo. Comprobado
   en el arnés de prueba: el margen para pegarse era de 0px. */
.teomm-is-sticky {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
}
/* Reserva en la página el alto que el header dejó de ocupar al volverse
   fijo, para que el contenido no salte hacia arriba. El alto real lo
   escribe module.js midiendo el header. */
.teomm-spacer { display: none; }
.teomm-is-sticky + .teomm-spacer { display: block; }

/* Neutraliza los estilos globales del tema sobre enlaces, botones y
   títulos. Va envuelto en :where() a propósito: así todo el bloque pesa
   lo mismo que una sola clase y las reglas del componente que vienen
   más abajo siempre ganan. Sin esto, un reset como ".teomm button"
   pesa más que ".teomm-navbtn" y le pisa el color y la tipografía. */
.teomm :where(a) { text-decoration: none; color: inherit; }
.teomm :where(a:hover, a:focus) { text-decoration: none; }
.teomm :where(button) {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0;
  background: none; border: none; box-shadow: none;
  font: inherit; color: inherit; cursor: pointer;
  text-align: left;
}
.teomm :where(h2, h3, h4, h5, h6, p) { margin: 0; }
.teomm :where(img) { max-width: 100%; height: auto; display: block; }
.teomm :where(details, summary) { margin: 0; padding: 0; }

.teomm-svg { width: 1em; height: 1em; display: block; flex: none; }

/* Enlace para saltar el menu. Fuera de pantalla hasta que recibe el
   foco, nunca con display: none ni visibility: hidden, que lo sacarian
   del recorrido del teclado y es justo para eso que existe.
   position: fixed y no absolute: el header no siempre es bloque
   contenedor, con "Header fijo" apagado es estatico. */
.teomm-skip {
  position: fixed; left: 12px; top: -100px; z-index: 100;
  background: var(--teomm-accent); color: #fff;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 14px; line-height: 1;
  padding: 12px 16px; border-radius: 8px;
}
.teomm-skip:focus { top: 12px; color: #fff; }
/* El ancla de destino no debe ocupar ni mover nada. */
.teomm-skip-fin { display: block; height: 0; overflow: hidden; }
.teomm-skip-fin:focus { outline: none; }

.teomm { --teomm-accent-text: var(--teomm-accent); }

/* Indicador de foco para todo lo enfocable del módulo.
   A propósito NO va envuelto en :where(): tiene que pesar más que una
   regla del tema tipo "a:focus { outline: 0 }", que si no dejaría el
   menú entero sin indicador de foco visible. */
.teomm a:focus-visible,
.teomm button:focus-visible,
.teomm summary:focus-visible {
  outline: 2px solid var(--teomm-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.teomm-logo { display: flex; align-items: center; flex: none; }
/* Pegado al borde derecho de su columna, es decir justo a la izquierda de
   las opciones. Los 32px más los 16 de relleno del primer botón dan los
   48px de separación que se ven en el header actual del sitio. */
.teomm-header .teomm-logo { grid-column: 1; justify-self: end; margin-right: 32px; }
.teomm-brand { height: var(--teomm-logo-h); width: auto; display: block; }
.teomm-logo img { height: var(--teomm-logo-h); width: auto; }

/* ---------------- Header de escritorio ---------------- */
.teomm-header {
  /* Tres columnas: la del medio se centra de verdad en el header, así el
     panel desplegable (que también se centra) queda alineado con las
     opciones. Las dos columnas de los lados miden lo mismo, por eso el
     ancho del botón de contacto no descuadra el centro.
     El display: grid lo pone la media query de module.html. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  height: var(--teomm-h);
  background: var(--teomm-bg-header);
  border-bottom: 1px solid var(--teomm-line);
  /* El panel se mide desde el header, así que el header tiene que ser
     bloque contenedor siempre, no solo cuando está fijo. Si esto
     depende de .teomm-is-sticky, al apagar "Header fijo" el panel se
     ancla a otro ancestro y cae una pantalla más abajo.
     Ojo: relative va en el header, nunca en .teomm-nav, porque la
     navegación es más baja que el header y descuadra la vertical. */
  position: relative; z-index: 90;
}

.teomm-nav {
  grid-column: 2;
  display: flex; align-items: center;
  gap: 16px;
  min-width: 0;
}

.teomm-navbtn {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 16px; line-height: 1;
  color: var(--teomm-text-strong);
  padding: 11px 16px; border-radius: 8px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

/* Los tres estados van en este orden a propósito, porque todos pesan
   igual y decide el orden del archivo: foco, luego cursor encima, y al
   final el panel abierto, que es la señal más fuerte.
   El :focus tiene que estar declarado aunque no cambie nada visible: el
   tema del sitio trae "button:focus { background: naranja }", que pesa
   más que una sola clase, y dejaba el botón pintado de naranja después
   de cerrar el panel, como si el cursor siguiera ahí. */
.teomm-navbtn:focus { background: none; color: var(--teomm-text-strong); }
/* Hover y estado abierto, los dos neutros. Nada de azul ni de línea de
   color debajo, es una restricción de marca. El estado abierto va más
   claro que el hover para que se note dónde estás parado. */
.teomm-navbtn:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.teomm-navbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .3); color: #fff; }
/* Pagina actual. Declarado ANTES del hover y del estado abierto, que
   pesan lo mismo y decide el orden del archivo: pasar el cursor o abrir
   el panel tiene que poder tapar esta marca.
   Solo cambia el color del texto. Nada de linea debajo ni de azul, es
   la misma restriccion de marca que cumplen el hover y el estado
   abierto. La clase la reparte module.js a partir del aria-current que
   ya viene renderizado del servidor, asi nunca se contradicen. */
.teomm-navbtn.is-active { color: #fff; }

.teomm-car { width: 10px; opacity: .65; transition: transform .18s ease; }
.teomm-navbtn[aria-expanded="true"] .teomm-car { opacity: 1; transform: rotate(180deg); }

.teomm-cta {
  grid-column: 3;
  justify-self: end;
  /* Separado del borde derecho. Con solo el relleno de 28px del header
     el boton quedaba pegado a la orilla, mientras el logo respira a
     mas de 250px del borde izquierdo. Va como margen y no como relleno
     del header para no mover el logo ni descentrar la navegacion. */
  margin-right: 72px;
  flex: none;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 16px; line-height: 1;
  white-space: nowrap;
  padding: 12px 22px; border-radius: 8px;
  background: var(--teomm-accent); color: #fff;
  transition: background .15s ease;
}
.teomm-cta:focus, .teomm-cta:active { background: var(--teomm-accent); color: #fff; }
.teomm-cta:hover { background: var(--teomm-accent-dark); color: #fff; }
.teomm-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.teomm-cta .teomm-svg { width: 15px; height: 15px; }

/* ---------------- Panel desplegable ---------------- */
.teomm-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(var(--teomm-pw, 1040px), calc(100% - 32px));
  padding: 14px;
  background: var(--teomm-bg-panel);
  border: 1px solid var(--teomm-line);
  border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 30px 60px -20px rgba(4, 9, 16, .6);
  /* En pantallas bajas el panel se desbordaba de la ventana y los
     últimos enlaces quedaban inalcanzables: al hacer scroll el panel se
     cierra, y como el header es fijo, enfocar un enlace de fuera de
     pantalla tampoco lo traía a la vista. Con scroll propio sí lo hace,
     y el scroll interno no dispara el del window, así que no se
     autocierra. El alto lo calcula module.js al abrir. */
  max-height: var(--teomm-panel-max, none);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transform-origin: top;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 80;
}
.teomm-panel.is-open {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.teomm-panel-grid { display: grid; gap: 10px; align-items: start; }
.teomm-panel-grid.is-grouped { grid-template-columns: repeat(var(--teomm-cols, 2), minmax(0, 1fr)); }
.teomm-panel-grid.is-grouped.has-promo { grid-template-columns: repeat(var(--teomm-cols, 2), minmax(0, 1fr)) 190px; }
.teomm-panel-grid:not(.is-grouped) { grid-template-columns: minmax(0, 1fr); }
.teomm-panel-grid:not(.is-grouped).has-promo { grid-template-columns: minmax(0, 1fr) 190px; }

.teomm-col { padding: 8px; min-width: 0; }
.teomm-col-label {
  font-family: var(--teomm-font-title);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teomm-accent-text);
  margin: 4px 0 10px; padding: 0 12px;
}
.teomm-flat {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px; align-content: start; padding: 12px;
}

.teomm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: 10px;
  min-width: 0;
  transition: background .12s ease;
}
.teomm-item:hover, .teomm-item:focus, .teomm-item:active, .teomm-item:focus-visible { background: var(--teomm-surface-2); }
.teomm-item:focus-visible { outline: 2px solid var(--teomm-accent); outline-offset: 1px; }
.teomm-item.is-active { background: var(--teomm-surface-2); }
.teomm-item.is-active .teomm-item-tx b { color: #fff; }
.teomm-item.is-active .teomm-item-ic,
.teomm-mrow.is-active .teomm-item-ic { background: var(--teomm-accent); color: #fff; }
.teomm-item-ic {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--teomm-accent-soft); color: var(--teomm-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.teomm-item-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.teomm-item-tx b {
  font-family: var(--teomm-font-title);
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--teomm-ink);
}

/* ---------------- Tarjeta destacada ---------------- */
.teomm-promo {
  border-radius: 12px; overflow: hidden;
  background: var(--teomm-surface-2);
  border: 1px solid var(--teomm-line);
  display: flex; flex-direction: column;
}
.teomm-promo-art {
  height: 84px; position: relative;
  background: linear-gradient(135deg, #16304f 0%, #0a1420 100%);
}
/* La imagen se encuadra centrada y recortada, igual que el fondo del
   header y del footer. Al llevar imagen se apagan las rayas diagonales
   de adorno, que sobre una imagen se leen como suciedad. */
.teomm-promo-art.has-img { background-size: cover; background-position: center; }
.teomm-promo-art.has-img::after { content: none; }
.teomm-promo-art::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px);
}
.teomm-promo-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: rgba(10, 20, 32, .75); color: var(--teomm-accent-text);
  border: 1px solid var(--teomm-accent-line);
  font-family: var(--teomm-font-body);
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px;
}
.teomm-promo-glyph {
  position: absolute; right: 10px; bottom: 8px; z-index: 1;
  width: 26px; height: 26px; color: rgba(255, 255, 255, .5);
}
.teomm-promo-glyph .teomm-svg { width: 100%; height: 100%; }
.teomm-promo-body { padding: 12px 12px 14px; flex: 1; display: flex; flex-direction: column; }
.teomm-promo-body b {
  font-family: var(--teomm-font-title);
  font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--teomm-ink);
}
.teomm-promo-body a {
  margin-top: auto; padding-top: 10px;
  font-family: var(--teomm-font-body);
  font-size: 12px; font-weight: 700; color: var(--teomm-accent-text);
  display: flex; align-items: center; gap: 5px;
}
.teomm-promo-body a:hover, .teomm-promo-body a:focus, .teomm-promo-body a:active { color: var(--teomm-ink); }
.teomm-promo-body a .teomm-svg { width: 13px; height: 13px; }

/* ---------------- Header móvil ---------------- */
.teomm-mhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px;
  background: var(--teomm-bg-header);
  border-bottom: 1px solid var(--teomm-line);
  /* Incondicional, igual que en el header de escritorio: el overlay es
     fixed con z-index 89, así que sin esto se pintaría encima del botón
     de cerrar cuando "Header fijo" está apagado. */
  position: relative; z-index: 90;
}
/* Con el overlay abierto el botón de cerrar tiene que estar siempre a
   la vista. Si el header no es fijo y la página venía desplazada, el
   botón queda fuera de pantalla y, como el scroll del fondo está
   bloqueado, no habría forma de cerrar el menú salvo con Escape. */
.teomm-mobile-open .teomm-mhead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 91;
}
.teomm-mhead .teomm-brand,
.teomm-mhead .teomm-logo img { height: var(--teomm-logo-h-m); }
.teomm-burger {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  background: var(--teomm-surface-2); color: var(--teomm-ink);
  display: flex; align-items: center; justify-content: center;
}
/* Sin esto el tema le pone fondo naranja al enfocarlo. */
.teomm-burger:hover, .teomm-burger:focus, .teomm-burger:active {
  background: var(--teomm-surface-2); color: var(--teomm-ink);
}
.teomm-burger .teomm-svg { width: 19px; height: 19px; }

/* ---------------- Overlay móvil de pantalla completa ---------------- */
.teomm-overlay {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--teomm-mh, 64px);
  background: var(--teomm-bg-overlay);
  transform: translateX(100%);
  /* La visibilidad tiene que entrar en la transición. Sin ella se
     aplicaba de golpe y el deslizamiento de cierre no se veía nunca. */
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s;
  display: flex; flex-direction: column;
  z-index: 89;
  visibility: hidden;
}
.teomm-overlay.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
/* En iOS un elemento fijo con bottom: 0 se mide contra el viewport
   grande, así que el pie del menú puede quedar bajo la barra del
   navegador. dvh sigue el viewport real, y bottom queda de respaldo
   para navegadores que no lo soporten. */
@supports (height: 100dvh) {
  .teomm-overlay { height: calc(100dvh - var(--teomm-mh, 64px)); }
}

.teomm-mlist {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 8px 0;
  /* Evita que al llegar al final de la lista el gesto se encadene a la
     página de detrás. */
  overscroll-behavior: contain;
}
.teomm-mgroup { border-bottom: 1px solid var(--teomm-line); }
.teomm-mgroup > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 10px;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 15.5px; color: var(--teomm-ink);
}
.teomm-mgroup > summary::-webkit-details-marker { display: none; }
.teomm-mgroup > summary::marker { content: ""; }
.teomm-mgroup > summary .teomm-car { width: 16px; color: var(--teomm-text); transition: transform .15s ease; }
.teomm-mgroup[open] > summary .teomm-car { transform: rotate(180deg); }
.teomm-msub { padding: 0 10px 14px; display: flex; flex-direction: column; gap: 1px; }
.teomm-msubhead {
  font-family: var(--teomm-font-title);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teomm-accent-text); padding: 10px 8px 4px;
}
.teomm-msubgroup:not(:first-child) {
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--teomm-line);
}
.teomm-mrow {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 8px; border-radius: 8px;
}
.teomm-mrow:hover, .teomm-mrow:focus, .teomm-mrow:active, .teomm-mrow:focus-visible { background: rgba(255, 255, 255, .08); }
.teomm-mrow.is-active { background: rgba(255, 255, 255, .08); }
.teomm-mrow.is-active > span:last-child { color: #fff; }
.teomm-mtoplink.is-active { color: #fff; }
.teomm-mrow .teomm-item-ic { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }
.teomm-mrow > span:last-child {
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 14.5px; color: var(--teomm-text-strong);
}
.teomm-mtoplink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 18px;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 15.5px; color: var(--teomm-ink);
  border-bottom: 1px solid var(--teomm-line);
}
.teomm-mtoplink:hover, .teomm-mtoplink:focus, .teomm-mtoplink:active { color: var(--teomm-ink); }
.teomm-mtoplink .teomm-svg { width: 15px; height: 15px; color: var(--teomm-text); }

.teomm-mfoot {
  padding: 16px;
  /* Deja aire para el indicador de inicio en los iPhone con notch. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--teomm-line);
}
.teomm-mcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--teomm-accent); color: #fff;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 14px;
  padding: 13px; border-radius: 10px; margin-bottom: 14px;
}
.teomm-mcta:focus, .teomm-mcta:active { background: var(--teomm-accent); color: #fff; }
.teomm-mcta:hover { background: var(--teomm-accent-dark); color: #fff; }
.teomm-mcta .teomm-svg { width: 15px; height: 15px; }
.teomm-msocial { display: flex; justify-content: center; gap: 8px; }
.teomm-msocial a {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--teomm-surface-2); color: var(--teomm-text-strong);
  display: flex; align-items: center; justify-content: center;
}
.teomm-msocial a:hover, .teomm-msocial a:focus, .teomm-msocial a:active {
  background: rgba(255, 255, 255, .12); color: #fff;
}
.teomm-msocial .teomm-svg { width: 15px; height: 15px; }

/* La tarjeta destacada dentro del menu movil. Se le quita el ancho fijo
   de 190px que usa como columna del panel de escritorio. */
.teomm-mpromo { margin: 12px 8px 4px; }
.teomm-mpromo .teomm-promo { width: 100%; }

/* Bloquea el scroll del fondo mientras el menú móvil está abierto */
body.teomm-locked { overflow: hidden; }

/* ---------------- Preferencias de movimiento ---------------- */
@media (prefers-reduced-motion: reduce) {
  .teomm-panel,
  .teomm-overlay,
  .teomm-car { transition: none !important; }
}