/* =========================================================
   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); }

/* Contenedor de los botones de accion: incidente + contacto. Hereda la
   columna 3 y el margen que antes llevaba el CTA solo, asi agregar o
   quitar el boton de incidentes no mueve nada del resto del header. */
.teomm-actions {
  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;
  display: flex; align-items: center; gap: 14px;
}

.teomm-cta {
  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; }

/* ---------------- Boton Reportar Incidente ----------------
   Diseño aprobado en mockup (v4/v5): misma caja que el CTA (40px de
   alto, radio 8px), contorno y texto rojos, punto que emite ondas y un
   destello de luz roja que barre el boton cada 7s (pasada de 2.2s).
   El rojo va en duro a proposito: es el color de incidente, no un
   acento configurable del modulo. */
.teomm-inc {
  position: relative; overflow: hidden;
  flex: none;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 16px; line-height: 1;
  white-space: nowrap;
  height: 40px;
  padding: 0 22px; border-radius: 8px;
  color: #FF5257;
  border: 1.5px solid rgba(255, 82, 87, .55);
  background: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Los tres estados declarados por la misma razon que en .teomm-navbtn:
   el tema trae "button:focus { background: naranja }" y hay que taparlo. */
.teomm-inc:focus { background: none; color: #FF5257; }
.teomm-inc:hover, .teomm-inc:focus-visible {
  background: rgba(255, 82, 87, .10);
  border-color: #FF5257;
  box-shadow: 0 0 18px rgba(255, 82, 87, .30);
  color: #FF5257;
}
.teomm-inc:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.teomm-inc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF5257;
  flex: none; position: relative;
}
.teomm-inc-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #FF5257;
  animation: teomm-inc-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes teomm-inc-ping {
  0% { transform: scale(1); opacity: .8; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

/* Destello: franja de luz inclinada que cruza el boton y descansa el
   resto del ciclo. El ::after se recorta con el overflow hidden. */
.teomm-inc::after {
  content: ""; pointer-events: none;
  position: absolute; top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(90deg,
    transparent, rgba(255, 82, 87, .10), rgba(255, 122, 126, .28),
    rgba(255, 82, 87, .10), transparent);
  transform: translateX(-110%) skew(-15deg);
  animation: teomm-inc-sweep 7s ease-in-out .8s infinite;
}
@keyframes teomm-inc-sweep {
  0%    { transform: translateX(-110%) skew(-15deg); }
  31.5% { transform: translateX(320%) skew(-15deg); }
  100%  { transform: translateX(320%) skew(-15deg); }
}

/* ---------------- 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; }

/* Boton de incidentes del menu movil: misma fila que el CTA movil pero
   con la piel roja del boton de escritorio. Sin destello aqui: en movil
   el boton solo se ve con el menu abierto y el barrido no aporta. */
.teomm-minc {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--teomm-font-title);
  font-weight: 600; font-size: 14px;
  color: #FF5257;
  border: 1.5px solid rgba(255, 82, 87, .55);
  border-radius: 10px;
  background: none;
  padding: 12px; margin-bottom: 10px;
  cursor: pointer;
}
.teomm-minc:focus { background: none; color: #FF5257; }
.teomm-minc:hover, .teomm-minc:active {
  background: rgba(255, 82, 87, .10); color: #FF5257;
}
.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 ---------------- */
/* ---------------- Pop-up de reporte de incidente ----------------
   Backdrop oscuro con desenfoque y caja blanca al estandar de modales
   del sitio (720px, estilo aprobado en Conocenos), con cabecera roja.
   z-index por encima del header movil (91) y del velo (89). */
.teomm-inc-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 6vh 20px 40px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.teomm-inc-overlay.is-open { display: flex; }
/* El candado de scroll del modal es una clase propia, no la
   teomm-locked del menu movil: module.js la sincroniza con el overlay
   del menu y soltaria el candado del modal al cerrar el menu. */
body.teomm-inc-locked { overflow: hidden; }

.teomm-inc-modal {
  width: 100%; max-width: 720px;
  background: #fff; border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
  animation: teomm-inc-in .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes teomm-inc-in {
  0% { opacity: 0; transform: translateY(14px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.teomm-inc-head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(100deg, #E5484D, #C43B40);
  color: #fff;
}
.teomm-inc-head-ic {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.teomm-inc-head-ic .teomm-svg { width: 20px; height: 20px; }
.teomm-inc-head-tx { min-width: 0; }
.teomm-inc-head-tx b {
  display: block;
  font-family: var(--teomm-font-title);
  font-size: 18px; font-weight: 700; line-height: 1.2;
  color: #fff;
}
.teomm-inc-head-tx span {
  font-family: var(--teomm-font-body);
  font-size: 13px; color: rgba(255, 255, 255, .85);
}
.teomm-inc-close {
  margin-left: auto; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.teomm-inc-close .teomm-svg { width: 14px; height: 14px; }
.teomm-inc-close:focus { background: rgba(255, 255, 255, .16); color: #fff; }
.teomm-inc-close:hover { background: rgba(255, 255, 255, .30); color: #fff; }
.teomm-inc-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.teomm-inc-body { padding: 26px 24px 24px; }
/* Anchura del modal solo en desktop (estilo aprobado en Conocenos) */
@media (min-width: 981px) { .teomm-inc-body { padding: 36px 46px 34px; } }

/* El formulario v4 se pinta dentro de su iframe con su propio estilo y
   se veia un punto grande dentro del modal. zoom lo encoge completo y
   en proporcion (iframe incluido), cosa que un font-size de aqui
   afuera no puede hacer. Pedido por Alexander, 03-sep-2026. */
.teomm-inc-form { zoom: .9; }

/* ----- Formulario dentro del modal (v2 clasico + v4 nuevo) -----
   Mismo bloque probado en cn-hero/cn-cta, con el acento en el rojo de
   incidente. El form de HubL sale inline, sin iframe, asi que estas
   reglas si lo alcanzan; los !important tapan el CSS global del tema. */
.teomm-inc-form fieldset { border: 0; padding: 0; margin: 0; max-width: none !important; }
.teomm-inc-form fieldset[class*="form-columns"] { display: flex; gap: 14px; }
.teomm-inc-form fieldset[class*="form-columns"] .hs-form-field { flex: 1 1 0; width: auto !important; float: none !important; }
.teomm-inc-form .hs-form-field { margin: 0 0 16px; }
.teomm-inc-form .hs-form-field .input { margin: 0 !important; }
.teomm-inc-form .hs-form-field > label {
  display: block; margin: 0 0 6px;
  font-family: var(--teomm-font-body);
  font-size: 14px; font-weight: 600; color: #0d1221;
}
.teomm-inc-form .hs-form-required { color: #d63638; margin-left: 2px; }
.teomm-inc-modal .teomm-inc-form .hs-input {
  box-sizing: border-box; width: 100%;
  font-family: var(--teomm-font-body);
  font-size: 16px; color: #0d1221;
  background: #f7f9fd !important;
  border: 1px solid #d5dce9 !important;
  border-radius: 10px; padding: 12px 14px;
  min-height: 0; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.teomm-inc-modal .teomm-inc-form .hs-input:focus {
  outline: none;
  border-color: #E5484D !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .15);
  background: #fff !important;
}
.teomm-inc-modal .teomm-inc-form .hs-input::placeholder { color: #93a0b4; }
.teomm-inc-form select.hs-input { cursor: pointer; }
.teomm-inc-form textarea.hs-input { min-height: 110px; resize: vertical; }
.teomm-inc-modal .teomm-inc-form input.hs-input[type="checkbox"],
.teomm-inc-modal .teomm-inc-form input.hs-input[type="radio"] {
  width: auto; min-width: 16px; height: 16px; accent-color: #E5484D;
  background: none !important; border: none !important; box-shadow: none; padding: 0;
}
.teomm-inc-form .inputs-list { list-style: none; margin: 0; padding: 0; }
.teomm-inc-form .inputs-list li { margin: 6px 0; }
.teomm-inc-form .inputs-list label {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--teomm-font-body);
  font-size: 14px; font-weight: 400; color: #0d1221; margin: 0;
}
.teomm-inc-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
.teomm-inc-form .hs-error-msgs label,
.teomm-inc-form .hs-error-msg {
  color: #d63638;
  font-family: var(--teomm-font-body);
  font-size: 13px; font-weight: 500;
}
.teomm-inc-form .hs_error_rollup { margin-top: 10px; }
.teomm-inc-form .legal-consent-container,
.teomm-inc-form .legal-consent-container p {
  font-family: var(--teomm-font-body);
  font-size: 12.5px; line-height: 1.55; color: #5b6474;
}
.teomm-inc-form .hs_recaptcha { margin: 16px 0 0; }
.teomm-inc-form .hs-submit { margin-top: 18px; }
.teomm-inc-modal .teomm-inc-form .hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; border: none; cursor: pointer;
  font-family: var(--teomm-font-title);
  font-size: 16px; font-weight: 600;
  padding: 14px 30px; border-radius: 12px;
  background: linear-gradient(100deg, #E5484D, #C43B40) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(229, 72, 77, .40);
  text-shadow: none;
  transition: filter .15s ease, transform .15s ease;
}
.teomm-inc-modal .teomm-inc-form .hs-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.teomm-inc-form .submitted-message {
  font-family: var(--teomm-font-body);
  font-size: 16px; line-height: 1.6; color: #0d1221;
}
.teomm-inc-form .hs-form-frame { min-height: 120px; }
@media (max-width: 640px) {
  .teomm-inc-form fieldset[class*="form-columns"] { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .teomm-panel,
  .teomm-overlay,
  .teomm-car { transition: none !important; }
  .teomm-inc::after,
  .teomm-inc-dot::after { animation: none !important; }
  .teomm-inc-modal { animation: none !important; }
}