/* MainMenu.css — Encabezado del sitio: dos barras, navegación con megamenús y buscador. Nodos
   1560:17291 (escritorio), 1535:27457 (tablet/laptop) y 1535:27783 (móvil).
   La hoja se enlaza desde _Layout.cshtml, no desde la vista: el encabezado está arriba del pliegue.
   Tipografía: site.css. NO usar var(--font-size-*): no existen en el repo y una var() sin definición
   descarta la declaración entera. El rojo de marca #ed1c24 es el único acento del encabezado.
   Las clases son el contrato entre la vista, esta hoja y MainMenu.js.
   EL CORTE DE 1200 ESTÁ DUPLICADO EN MainMenu.js como (min-width: 1201px): si se cambia acá, hay que
   cambiarlo allá. Laptop y tablet comparten bloque porque la navegación de escritorio NO ENTRA en el
   rango de laptop. */

/* --- Modelo de caja: el widget declara el suyo en vez de heredar el reset de Bootstrap, porque
   varias medidas son anchos al 100 % sobre elementos con relleno. --- */
.MainMenu,
.MainMenu *,
.MainMenu *::before,
.MainMenu *::after {
    box-sizing: border-box; /* El relleno y el borde entran DENTRO del ancho declarado. */
}

/* --- Encabezado completo: es el bloque de posicionamiento de los paneles. Por eso
   .MainMenu-navItem NO lleva position:relative. NO lleva márgenes negativos: site.css ya puso en
   cero el relleno del body. --- */
.MainMenu {
    position: relative; /* Origen del posicionamiento absoluto de los paneles. */
    z-index: 1000; /* Sobre el contenido de la página, para que un panel abierto no quede tapado. */
}

/* Barra superior. En escritorio es blanca y queda vacía; del 1200 para abajo se pinta roja y lleva
   el logo de Legrand. Lleva el fondo y el alto, no el ancho del contenido. */
.MainMenu-topBar {
    height: 37px; /* Alto del diseño. */
    padding-inline: 20px; /* Relleno horizontal, POR FUERA del techo del contenido. */
    background-color: rgba(255, 255, 255, 0.85); /* Blanco translúcido del diseño. */
    border-bottom: 1px solid #e5e7eb; /* Línea que separa las dos barras. */
}

/* Contenido de la barra superior. NO lleva relleno propio: los 20px están en la barra, igual que en
   la barra principal, y es lo que conserva la relación del diseño en cualquier ancho. */
.MainMenu-topBarInner {
    display: flex; /* Fila, para poder empujar el logo al extremo. */
    align-items: center; /* Centra el logo en el alto de la barra. */
    justify-content: flex-end; /* El logo va a la derecha, como en el diseño. */
    height: 100%; /* Ocupa el alto que declara la barra. */
    max-width: var(--container-max-width, 1280px); /* Mismo techo que la fila de la barra principal. */
    margin-inline: auto; /* Centrado cuando la pantalla es más ancha que el contenido. */
}

/* Logo de Legrand de la franja superior. En escritorio no se ve: ahí lo muestra el sello. */
.MainMenu-legrandLogo {
    display: none; /* Solo lo muestran los bloques de tablet y de móvil. */
    width: auto; /* Cada rango declara el suyo. */
    height: auto; /* Sale de la proporción del archivo. */
}

/* --- Sello de Legrand (solo escritorio): cuadrado rojo que atraviesa las dos barras. El rojo lo
   pinta esta regla y no es una imagen, así el mismo archivo sirve para el sello y para la franja.
   El sello viaja con la columna de contenido, no con el borde de la ventana. --- */
.MainMenu-seal {
    position: absolute; /* Contra .MainMenu, para poder atravesar las dos barras. */
    top: 0; /* Arranca en el borde de arriba del encabezado. */
    right: calc(max(20px, (100% - var(--container-max-width, 1280px)) / 2) + 27px); /* Borde de la columna + 27px del diseño. */
    display: flex; /* Para centrar el logo en los dos ejes. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 97px; /* Lado del diseño. */
    height: 97px; /* Corta 21px antes del borde de abajo de la barra principal. */
    background-color: #ed1c24; /* Rojo de marca. */
    z-index: 10; /* Sobre las dos barras, debajo de los paneles. */
}

/* Logo de Legrand dentro del sello. */
.MainMenu-sealLogo {
    display: block; /* Quita el espacio de línea base. */
    width: 65px; /* Ancho del diseño, medido sobre la tinta del render. */
    height: auto; /* Sale de la proporción del archivo. */
}

/* Barra principal: lleva el logo, la navegación y el buscador. */
.MainMenu-mainBar {
    padding-inline: 20px; /* Relleno horizontal del diseño. */
    background-color: rgba(255, 255, 255, 0.95); /* Blanco translúcido del diseño. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Borde del diseño. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra del diseño. */
}

/* Fila de contenido de la barra principal: marca, navegación y buscador. El relleno derecho NO es
   simétrico a propósito: reserva el lugar del sello. */
.MainMenu-inner {
    display: flex; /* Fila de los tres bloques. */
    align-items: center; /* Centrados en el alto de la barra. */
    justify-content: space-between; /* Reparte el aire sobrante entre los tres. */
    gap: 20px; /* Mínimo de aire entre bloques cuando el espacio se achica. */
    height: 80px; /* Alto del diseño. */
    padding-left: 24px; /* Se suma a los 20px de la barra: 44px de inset, como el diseño. */
    padding-right: 144px; /* Lugar del sello: 47 de hueco + 97 del cuadrado + 20 de aire. */
    max-width: var(--container-max-width, 1280px); /* Techo del CONTENIDO, no de la barra. */
    margin-inline: auto; /* Centrado cuando la pantalla es más ancha que el contenido. */
}

/* --- Marca: un solo enlace que envuelve el logotipo y su firma. --- */
.MainMenu-brand {
    display: flex; /* Apila el logo y la firma. */
    flex-direction: column; /* La firma va debajo del logo. */
    align-items: flex-start; /* Los dos alineados a la izquierda. */
    gap: 8px; /* Separación del diseño entre el logotipo y la firma. */
    flex-shrink: 0; /* El logo no se comprime: se comprime la navegación. */
    text-decoration: none; /* Sin subrayado: el contenido del enlace son imágenes. */
}

/* Logotipo de bticino. LOS ANCHOS SON LOS DEL DIBUJO, NO LOS DE LA CAJA: las imágenes que se
   carguen en el CMS tienen que venir recortadas a su tinta o se verán más chicas. */
.MainMenu-brandLogo {
    display: block; /* Quita el espacio de línea base. */
    width: 154px; /* Ancho del dibujo en el diseño. */
    height: auto; /* Sale de la proporción del archivo. */
}

/* Firma "Una marca de legrand". Va a ras del logotipo, sin desplazamiento. */
.MainMenu-brandSignature {
    display: block; /* Quita el espacio de línea base. */
    width: 157px; /* Ancho del dibujo en el diseño. */
    height: auto; /* Sale de la proporción del archivo. */
}

/* --- Hamburguesa: oculta en escritorio y laptop. LA CAJA MIDE LO QUE MIDE EL DIBUJO y el área de
   toque se agranda con el ::after: un botón más grande inflaría la separación del diseño. --- */
.MainMenu-toggle {
    display: none; /* En escritorio y laptop no existe: la navegación está a la vista. */
    position: relative; /* Origen del ::after que agranda el área de toque. */
    flex-direction: column; /* Apila las tres barras. */
    justify-content: space-between; /* Reparte las barras: da las separaciones del diseño. */
    align-items: center; /* Centra las barras en el ancho de la caja. */
    padding: 0; /* Sin relleno: la caja mide lo que mide el dibujo. */
    background: none; /* Sin fondo: son solo las tres barras. */
    border: 0; /* Quita el borde que el navegador le da a un button. */
    cursor: pointer; /* Indica que es accionable. */
}

/* Una de las tres barras de la hamburguesa. */
.MainMenu-toggleBar {
    display: block; /* Ocupa su propia línea dentro de la columna. */
    height: 2px; /* Grosor del diseño. */
    width: 100%; /* Ancho completo de la caja. */
    background-color: #364153; /* Gris del diseño, el mismo de los enlaces. */
    border-radius: 1px; /* Redondea los extremos. */
}

/* --- Lupa que despliega el buscador. Existe solo en móvil: es el único rango donde el buscador no
   está a la vista. --- */
.MainMenu-searchToggle {
    display: none; /* Solo el bloque de móvil lo muestra. */
    position: relative; /* Origen del ::after que agranda el área de toque. */
    align-items: center; /* Centra la lupa. */
    justify-content: center; /* Ídem, en horizontal. */
    width: 21px; /* Lado del diseño de móvil. */
    height: 21px; /* Cuadrado. */
    padding: 0; /* Sin relleno: la caja mide lo que mide el dibujo. */
    background: none; /* Sin fondo: es solo la lupa. */
    border: 0; /* Quita el borde del button. */
    cursor: pointer; /* Indica que es accionable. */
}

/* Dibujo de la lupa. Es el mismo archivo que la lupa de adentro del campo. */
.MainMenu-searchToggleIcon {
    display: block; /* Quita el espacio de línea base. */
    width: 21px; /* Lado del diseño de móvil. */
    height: 21px; /* Cuadrado. */
}

/* Área de toque de los dos botones de la barra colapsada: un rectángulo transparente que no ocupa
   lugar en el flujo. EL DESBORDE ES DE 9PX Y NO DE 12: con 12 las dos áreas se superponen y el
   borde derecho de la lupa deja de responder. */
.MainMenu-toggle::after,
.MainMenu-searchToggle::after {
    content: ""; /* Necesario para que el pseudoelemento exista. */
    position: absolute; /* Se apoya sobre el botón sin ocupar lugar en el flujo. */
    inset: -9px; /* Desborde en los cuatro lados. */
}

/* --- Navegación. El bloque colapsable es transparente al flex en escritorio, para que el
   space-between reparta TRES bloques y no dos. --- */
.MainMenu-collapsible {
    display: contents; /* Sus hijos participan del flex de la barra como si el div no existiera. */
}

/* Región de navegación. */
.MainMenu-nav {
    min-width: 0; /* Permite que la fila de enlaces se comprima en vez de desbordar la barra. */
}

/* Fila de los ocho enlaces. */
.MainMenu-navList {
    display: flex; /* Fila de enlaces. */
    align-items: center; /* Centra los enlaces entre sí. */
    gap: 20px; /* Separación del diseño. */
    margin: 0; /* Quita el margen propio de la ul. */
    padding: 0; /* Quita la sangría de la lista. */
    list-style: none; /* Sin viñetas: es una barra de navegación. */
}

/* Un ítem de la barra. NO lleva position:relative: los paneles se anclan a .MainMenu. */
.MainMenu-navItem {
    display: flex; /* Fila del enlace más el botón de despliegue táctil. */
    align-items: center; /* Alinea el enlace con el botón. */
}

/* Enlace de la barra. EL max-width ES LO QUE HACE QUE LA FILA ENTRE: obliga a envolver las dos
   etiquetas largas, que sin él se montarían sobre el buscador. */
.MainMenu-navLink {
    max-width: 100px; /* Tope que fuerza a envolver las etiquetas largas. */
    font-size: 13px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    color: #364153; /* Gris del diseño. */
    text-decoration: none; /* Sin subrayado en reposo. */
    text-align: center; /* Centrado de las etiquetas que quedan en dos líneas. */
    line-height: 1.3; /* Interlineado del diseño. */
}

/* Estado activo del enlace, con el puntero encima o con el foco del teclado. */
.MainMenu-navLink:hover,
.MainMenu-navLink:focus-visible {
    color: #ed1c24; /* Rojo de marca. */
    text-decoration: underline; /* Señal que no depende del color. */
}

/* Botón de despliegue del panel para pantallas táctiles. En escritorio el panel se abre al pasar el
   puntero o al recibir el foco. */
.MainMenu-panelToggle {
    display: none; /* En escritorio no existe. */
    align-items: center; /* Centra el ícono. */
    justify-content: center; /* Ídem, en horizontal. */
    width: 44px; /* Mínimo recomendado para un objetivo táctil. */
    height: 44px; /* Cuadrado. */
    background: none; /* Sin fondo. */
    border: 0; /* Quita el borde del button. */
    cursor: pointer; /* Indica que es accionable. */
}

/* Punta de flecha del botón, dibujada con dos bordes de una caja rotada para no pedir un archivo. */
.MainMenu-panelToggleIcon {
    display: block; /* Caja propia. */
    width: 8px; /* Lado del cuadrado que forma la punta. */
    height: 8px; /* Cuadrado. */
    border-right: 2px solid #364153; /* Uno de los dos lados que forman la punta. */
    border-bottom: 2px solid #364153; /* El otro. */
    transform: rotate(45deg) translateY(-2px); /* Apunta hacia abajo y compensa el centro óptico. */
}

/* Con el panel abierto la punta apunta hacia arriba. */
.MainMenu-navItem.is-open .MainMenu-panelToggleIcon {
    transform: rotate(225deg) translateY(-2px); /* Media vuelta. */
}

/* --- Panel del megamenú. La visibilidad la maneja el script con el atributo hidden, no esta hoja.
   NO hay transición de entrada: [hidden] es display:none y no se puede animar. --- */
.MainMenu-panel {
    position: absolute; /* Se posiciona contra .MainMenu, no contra su ítem. */
    top: 100%; /* Justo debajo de las dos barras. */
    left: 50%; /* Punto de partida del centrado. */
    transform: translateX(-50%); /* Centrado real, sin depender del ancho. */
    width: min(1120px, 100%); /* Ancho del diseño, con techo para pantallas angostas. */
    z-index: 20; /* Sobre el resto del encabezado. */
}

/* Caja visible del panel: el fondo, el redondeo y la sombra del diseño. */
.MainMenu-panelInner {
    display: flex; /* Apila la fila de columnas y el enlace del pie. */
    flex-direction: column; /* En columna. */
    gap: 14px; /* Separación del diseño. */
    padding: 26px 26px 20px; /* Rellenos del diseño. */
    background-color: rgba(255, 255, 255, 0.9); /* Blanco translúcido del diseño. */
    backdrop-filter: blur(3px); /* Desenfoque del diseño sobre lo que queda detrás. */
    border-radius: 0 0 6px 6px; /* Solo las esquinas de abajo: arriba se apoya en la barra. */
    box-shadow: 0 12px 32px rgba(15, 18, 23, 0.18); /* Sombra del diseño. */
    overflow: hidden; /* Recorta lo que sobresalga del redondeo. */
}

/* Fila de columnas más la tarjeta. */
.MainMenu-columns {
    display: flex; /* Columnas en línea. */
    align-items: flex-start; /* Arrancan arriba, sin estirarse al alto del panel. */
    gap: 26px; /* Separación del diseño. */
}

/* Una columna de grupos. Sin medida propia: el reparto lo hace flex. */
.MainMenu-column {
    display: flex; /* Apila los grupos. */
    flex-direction: column; /* En columna. */
    gap: 18px; /* Separación del diseño entre grupos. */
    flex: 1 1 0; /* Reparto en partes iguales del espacio disponible. */
    min-width: 0; /* Permite comprimirse: sin esto un enlace largo desborda el panel. */
}

/* Un grupo: el encabezado más su lista de enlaces. */
.MainMenu-group {
    display: flex; /* Apila el encabezado y la lista. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Separación del diseño. */
}

/* Encabezado del grupo. Puede no existir: hay columnas de continuación sin encabezado. */
.MainMenu-groupHeading {
    margin: 0; /* Quita el margen propio del p. */
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    color: #243746; /* Gris del diseño. */
    line-height: 1.3; /* Interlineado del diseño. */
    text-transform: uppercase; /* Sostiene las mayúsculas si el contenido cambia. */
}

/* Lista de enlaces del grupo. */
.MainMenu-groupLinks {
    display: flex; /* Apila los enlaces. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Separación del diseño. */
    margin: 0; /* Quita el margen propio de la ul. */
    padding: 0; /* Quita la sangría de la lista. */
    list-style: none; /* Sin viñetas: el diseño no las tiene. */
}

/* Un enlace del grupo. */
.MainMenu-groupLink {
    font-size: 13px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    color: #364054; /* Gris del diseño, distinto del de la barra (#364153). */
    text-decoration: none; /* Sin subrayado en reposo. */
    line-height: 1.3; /* Interlineado del diseño. */
}

/* Estado activo del enlace del grupo. */
.MainMenu-groupLink:hover,
.MainMenu-groupLink:focus-visible {
    color: #ed1c24; /* Rojo de marca. */
    text-decoration: underline; /* Señal que no depende del color. */
}

/* --- Tarjeta promocional del panel: la única pieza con medida propia. --- */
.MainMenu-card {
    display: flex; /* Apila ícono, título, texto y botón. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Alineados a la izquierda. */
    gap: 12px; /* Separación del diseño. */
    flex: 0 0 250px; /* Ancho fijo del diseño, sin crecer ni encogerse. */
    padding: 18px 20px; /* Rellenos del diseño. */
    background-color: #1b2d3a; /* Azul petróleo del diseño, el mismo del pie de página. */
    border-radius: 6px; /* Esquinas redondeadas. */
    overflow: hidden; /* Recorta lo que sobresalga del redondeo. */
}

/* Fila del ícono y el teléfono, arriba de todo en la tarjeta. */
.MainMenu-cardHeader {
    display: flex; /* Ícono y teléfono uno al lado del otro. */
    align-items: center; /* Centrados entre sí. */
    gap: 13px; /* Separación del diseño. */
    width: 100%; /* Ancho de la tarjeta, para que un número largo envuelva. */
    margin-bottom: 3px; /* Completa los 15px hasta el título que pide el diseño. */
}

/* Caja del ícono, con el teléfono adentro. */
.MainMenu-cardIcon {
    display: flex; /* Para centrar el dibujo en los dos ejes. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 40px; /* Lado del diseño. */
    height: 40px; /* Cuadrado. */
    flex-shrink: 0; /* No se comprime si el texto crece. */
    background-color: #ed1c24; /* Rojo de marca. */
    border-radius: 6px; /* Esquinas redondeadas. */
}

/* Dibujo del teléfono. El archivo ya viene blanco y con fondo transparente. */
.MainMenu-cardIconImage {
    display: block; /* Quita el espacio de línea base. */
    width: 36px; /* Lado del diseño dentro de la caja de 40. */
    height: 36px; /* Cuadrado. */
    background-color: #ed1c24; /* Rojo de marca, detrás del PNG transparente. */
}

/* Teléfono de atención, al lado del ícono. */
.MainMenu-cardPhone {
    margin: 0; /* Quita el margen propio del p. */
    min-width: 0; /* Deja que el texto envuelva en vez de ensanchar la fila. */
    font-size: 24px; /* Tamaño del diseño. */
    font-weight: 400; /* Regular del diseño. */
    color: #ffffff; /* Blanco sobre el azul. */
    line-height: 1.35; /* Interlineado del diseño. */
}

/* Título de la tarjeta. */
.MainMenu-cardTitle {
    margin: 0; /* Quita el margen propio del p. */
    width: 100%; /* Ancho de la tarjeta, para que el texto largo envuelva. */
    font-size: 16px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    color: #ffffff; /* Blanco sobre el azul. */
    line-height: 1.35; /* Interlineado del diseño. */
}

/* Texto de apoyo de la tarjeta. */
.MainMenu-cardText {
    margin: 0; /* Quita el margen propio del p. */
    width: 100%; /* Ocupa el ancho de la tarjeta. */
    font-size: 16px; /* Tamaño del diseño. */
    font-weight: 400; /* Regular del diseño. */
    color: #ffffff; /* Blanco sobre el azul. */
    line-height: 1.6; /* Interlineado del diseño, más suelto que el del título. */
}

/* Botón de la tarjeta. Es un enlace con forma de botón: navega, no ejecuta. */
.MainMenu-cardCta {
    display: flex; /* Para poder centrar la etiqueta en los dos ejes. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 100%; /* Ancho completo de la tarjeta. */
    height: 36px; /* Alto del diseño. */
    background-color: #ffffff; /* Fondo blanco del diseño. */
    border-radius: 4px; /* Redondeo del diseño, menor que el de la tarjeta. */
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    color: #243746; /* Azul del diseño sobre el fondo blanco del botón. */
    text-decoration: none; /* Ya se lee como botón. */
}

/* Estado activo del botón. NO se subraya: la forma de botón ya distingue al elemento. */
.MainMenu-cardCta:hover,
.MainMenu-cardCta:focus-visible {
    color: #ed1c24; /* Rojo de marca. */
}

/* --- Enlace del pie del panel. --- */

/* Contenedor del enlace "Ver todo en ...", sin línea divisoria. */
.MainMenu-viewAll {
    padding-top: 10px; /* Aire del diseño. */
}

/* Enlace "Ver todo en ...". */
.MainMenu-viewAllLink {
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    color: #243746; /* Gris del diseño. */
    text-decoration: none; /* Sin subrayado en reposo. */
    line-height: 1.3; /* Interlineado del diseño. */
}

/* Estado activo del enlace del pie. */
.MainMenu-viewAllLink:hover,
.MainMenu-viewAllLink:focus-visible {
    color: #ed1c24; /* Rojo de marca. */
    text-decoration: underline; /* Señal que no depende del color. */
}

/* --- Buscador. En escritorio es una píldora de 147px que se expande a 256 al recibir el foco, y
   CRECE POR ENCIMA DE LA NAVEGACIÓN en vez de empujarla, para que el hueco del flex no cambie. La
   apertura es solo CSS (:focus-within). --- */
.MainMenu-search {
    --mm-search-width: 147px; /* Ancho de la píldora cerrada (nodo 1560:17291). La usan el campo y la lupa. */
    margin: 0; /* Anula el margen inferior de 1em que el navegador le da al form y descentraba. */
    position: relative; /* Origen del posicionamiento absoluto de la lupa y del campo. */
    display: flex; /* Fila, para que el campo ocupe todo el ancho. */
    align-items: center; /* Centra el campo. */
    flex: 0 0 147px; /* Hueco fijo en la fila: no cambia al expandirse el campo. */
    height: 38px; /* Alto del diseño: lo declara el form porque el campo va en absoluto. */
}

/* Con el foco adentro, la píldora se expande. */
.MainMenu-search:focus-within {
    --mm-search-width: 256px; /* Ancho expandido. */
}

/* Etiqueta del campo: oculta a la vista pero presente para los lectores de pantalla. NO se usa
   display:none ni visibility:hidden, que la sacarían también del árbol de accesibilidad. */
.MainMenu-searchLabel {
    position: absolute; /* Fuera del flujo, para que no ocupe lugar. */
    width: 1px; /* Reducida al mínimo. */
    height: 1px; /* Ídem. */
    overflow: hidden; /* Recorta el texto que no entra. */
    clip-path: inset(50%); /* Oculta lo que quede. */
    white-space: nowrap; /* Evita que el texto se reacomode antes de recortarse. */
}

/* Lupa del buscador, decorativa. Va anclada a la derecha porque el campo crece hacia la izquierda. */
.MainMenu-searchIcon {
    position: absolute; /* Apoyada dentro del campo. */
    right: calc(var(--mm-search-width) - 32px); /* A 16px del borde izquierdo del campo. */
    top: 50%; /* Punto de partida del centrado vertical. */
    transform: translateY(-50%); /* Centrado real, sin depender del alto. */
    width: 16px; /* Lado del diseño. */
    height: 16px; /* Cuadrada. */
    z-index: 2; /* Sobre el campo, que también va en absoluto. */
    pointer-events: none; /* Los clics sobre la lupa llegan al campo. */
    transition: right 0.28s ease; /* Acompaña la apertura del campo. */
}

/* Campo de búsqueda. Va en absoluto contra el borde derecho del form para crecer hacia la izquierda
   sin mover el hueco que ocupa en la fila. */
.MainMenu-searchInput {
    position: absolute; /* Contra el borde derecho del formulario. */
    top: 0; /* Ocupa el alto del formulario. */
    right: 0; /* Ancla derecha: es el borde que no se mueve. */
    width: var(--mm-search-width); /* Ancho de la píldora, cerrada o abierta. */
    height: 38px; /* Alto del diseño. */
    padding: 8px 16px 8px 42px; /* Rellenos del diseño; el izquierdo deja lugar a la lupa. */
    background-color: rgba(255, 255, 255, 0.5); /* Blanco translúcido del diseño. */
    border: 2px solid #ed1c24; /* Borde rojo de marca. */
    border-radius: 9999px; /* Extremos completamente redondeados. */
    font-family: inherit; /* Un input no hereda solo la tipografía del sitio. */
    font-size: 14px; /* Tamaño del diseño. */
    letter-spacing: -0.1504px; /* Interletrado del diseño. */
    color: #243746; /* Gris del texto del diseño. */
    transition: width 0.28s ease; /* Apertura y cierre de la píldora. */
}

/* Texto de ayuda. Arranca transparente en escritorio: en la píldora cerrada entraría cortado. */
.MainMenu-searchInput::placeholder {
    color: transparent; /* Oculto mientras la píldora está cerrada. */
    opacity: 1; /* Anula la transparencia que agrega el navegador. */
}

/* Señal de foco del campo. SE REEMPLAZA EL ANILLO DEL NAVEGADOR, NO SE ELIMINA LA SEÑAL: el anillo
   por omisión es negro y se lee como un segundo borde alrededor de la píldora roja. */
.MainMenu-searchInput:focus-visible {
    outline: none; /* Fuera el recuadro negro del navegador. */
    box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.25); /* Halo en el rojo del borde. */
}

/* Con el campo abierto, el texto de ayuda se ve. */
.MainMenu-search:focus-within .MainMenu-searchInput::placeholder {
    color: #243746; /* Gris del texto de ayuda del diseño. */
}

/* El fondo se vuelve opaco al abrirse: el campo expandido se apoya encima de los últimos enlaces. */
.MainMenu-search:focus-within .MainMenu-searchInput {
    background-color: #fff; /* Opaco: tapa los enlaces que quedan debajo. */
}

/* --- DESKTOP APRETADO — de 1201 a 1279 px. No es un rango del estándar: es el diseño de escritorio
   con la separación de la lista ajustada, porque el frame de Figma mide 1280 y la fila necesita ese
   ancho. En 1201px con los 20px del diseño el último enlace se monta 21px sobre el buscador. --- */
@media (max-width: 1279px) {

    .MainMenu-navList {
        gap: 14px; /* Separación más corta que los 20px del diseño. */
    }
}

/* --- TABLET Y LAPTOP — hasta 1200 px (nodo "Header · tablet" 452:5284). Tres cambios
   estructurales: la franja de arriba pasa a roja con el logo de Legrand, el buscador ocupa el hueco
   entre el logo y la hamburguesa, y la navegación se colapsa en un acordeón (esto último no está en
   Figma). EL CORTE ES 1200 Y NO 1024: los ocho enlaces NO ENTRAN en el rango de laptop. --- */
@media (max-width: 1200px) {

    /* La franja de arriba existe y es roja, con el logo de Legrand en blanco a la derecha. El
       relleno de 16px es el que deja el DIBUJO donde lo pinta Figma, no el que declara el nodo. */
    .MainMenu-topBar {
        height: 28px; /* Alto de la franja en el diseño de tablet. */
        padding-inline: 16px; /* Ver la nota de arriba. */
        background-color: #ed1c24; /* Rojo de marca. */
        border-bottom: 0; /* Sin la línea de escritorio: la franja ya separa por color. */
    }

    /* El logo de Legrand aparece: en este rango lo lleva la franja, no el sello. */
    .MainMenu-legrandLogo {
        display: block; /* Visible. */
        width: 56px; /* Ancho del dibujo en el diseño de tablet. */
    }

    /* El sello no existe en este rango. */
    .MainMenu-seal {
        display: none; /* Su logo lo muestra la franja de arriba. */
    }

    /* La barra pasa a blanco opaco, sin sombra ni línea. ATENCIÓN: queda SIN NINGÚN SEPARADOR abajo
       porque es lo que dice el nodo; si la sección de abajo es blanca hay que agregarle una línea.
       El relleno horizontal se muda a la fila, donde el diseño pide 28px de inset. */
    .MainMenu-mainBar {
        padding-inline: 0; /* El relleno se muda a la fila. */
        background-color: #fff; /* Blanco opaco del nodo de tablet. */
        border-bottom: 0; /* Sin línea inferior. */
        box-shadow: none; /* Sin sombra. */
    }

    /* La fila deja de tener alto fijo: con el acordeón abierto crece hacia abajo. */
    .MainMenu-inner {
        flex-wrap: wrap; /* Deja que la navegación baje a su propia línea. */
        column-gap: 40px; /* Separación horizontal del diseño de tablet. */
        row-gap: 24px; /* Aire entre la barra y el acordeón, no es medida del diseño. */
        height: auto; /* El alto lo da el contenido. */
        min-height: 80px; /* Alto del diseño con el menú cerrado. */
        padding-inline: 24px; /* Relleno del diseño de tablet. Anula el hueco del sello. */
    }

    /* ORDEN VISUAL: el diseño pide logo, buscador, hamburguesa y la navegación debajo; el HTML emite
       el orden de escritorio. De ahí el order de cada bloque.
       El min-height es el que sostiene el alto de la barra al abrirse el acordeón: el del contenedor
       solo se nota mientras hay una sola línea. */
    .MainMenu-brand {
        order: 1; /* Primero, como en los tres diseños. */
        gap: 10px; /* Separación del diseño de tablet entre el logotipo y la firma. */
        min-height: 80px; /* Alto del diseño: es lo que fija el alto de la barra. */
        justify-content: center; /* Centra el logo y la firma en ese alto. */
    }

    /* El logotipo pasa a la escala de tablet. Es la medida del DIBUJO. */
    .MainMenu-brandLogo {
        width: 102px; /* Ancho del dibujo en el diseño de tablet. */
    }

    /* La firma, a la misma escala. */
    .MainMenu-brandSignature {
        width: 104px; /* Ancho del dibujo en el diseño de tablet. */
    }

    /* El buscador pasa a ser un campo expandido de entrada que ocupa el hueco sobrante. Hay que
       deshacer las tres cosas de la píldora de escritorio: el hueco fijo, el alto y el absoluto. */
    .MainMenu-search {
        order: 2; /* Entre el logo y la hamburguesa. */
        flex: 1 1 auto; /* Ocupa el hueco sobrante de la fila. */
        height: auto; /* El alto lo da el campo. */
    }

    /* La lupa vuelve a anclarse a la izquierda: acá el campo no se expande. */
    .MainMenu-searchIcon {
        right: auto; /* Anula el anclaje derecho de la píldora de escritorio. */
        left: 14px; /* Distancia al borde izquierdo del diseño de tablet. */
    }

    /* El campo toma las medidas del diseño de tablet y vuelve al flujo. */
    .MainMenu-searchInput {
        position: static; /* Vuelve al flujo: acá no crece hacia la izquierda. */
        width: 100%; /* Ocupa el ancho del formulario. */
        height: 40px; /* Alto del diseño de tablet. */
        padding-left: 40px; /* Hueco de la lupa: 14 del borde + 16 del ícono + 10 de aire. */
        background-color: #fff; /* Blanco opaco del diseño de tablet. */
        border-width: 1px; /* Borde más fino que el de escritorio. */
        border-radius: 6px; /* Radio del diseño de tablet. */
        font-size: 14px; /* Tamaño del diseño de tablet. */
    }

    /* El texto de ayuda se ve siempre: acá el campo está expandido de entrada. */
    .MainMenu-searchInput::placeholder {
        color: #243746; /* Gris del diseño de tablet. */
    }

    /* La hamburguesa aparece, con el dibujo de 24 por 16 del diseño. */
    .MainMenu-toggle {
        order: 3; /* Al final de la fila. */
        display: flex; /* Visible y en columna, como declara su regla base. */
        width: 24px; /* Ancho del dibujo en el diseño. */
        height: 16px; /* Con space-between, las tres barras de 2px quedan a 5px. */
    }

    /* Acá la hamburguesa está sola, así que el área de toque puede usar el desborde completo. */
    .MainMenu-toggle::after {
        inset: -11px; /* Desborde generoso, sin vecino con el que superponerse. */
    }

    /* El bloque colapsable pasa a ser el panel que se despliega. Cerrado no se pinta, y eso además
       lo saca del orden de tabulación. */
    .MainMenu-collapsible {
        order: 4; /* Debajo de la barra. */
        display: none; /* Oculto mientras la hamburguesa esté cerrada. */
        flex-direction: column; /* Los bloques de adentro, uno debajo del otro. */
        gap: 12px; /* Separación entre bloques. */
        flex-basis: 100%; /* Ocupa la línea completa debajo de la barra. */
        padding-bottom: 16px; /* Aire antes del borde de abajo de la barra. */
    }

    /* El script marca esta clase al abrir la hamburguesa. */
    .MainMenu-collapsible.is-open {
        display: flex; /* Visible, en la columna que declara la regla de arriba. */
    }

    /* Cada ítem pasa a ser una fila de acordeón con su línea divisoria. */
    .MainMenu-navList {
        flex-direction: column; /* Uno debajo del otro. */
        align-items: stretch; /* Cada ítem ocupa el ancho completo. */
        gap: 0; /* La separación la dan los rellenos y las líneas. */
    }

    /* La fila del ítem: el enlace a la izquierda y el botón de despliegue a la derecha. */
    .MainMenu-navItem {
        flex-wrap: wrap; /* Permite que el panel baje a su propia línea. */
        justify-content: space-between; /* Empuja el botón de despliegue al extremo. */
        border-bottom: 1px solid #e5e7eb; /* Misma línea que separa las barras en escritorio. */
    }

    /* El enlace ocupa todo el ancho que le deje el botón, para que el área de toque sea grande. */
    .MainMenu-navLink {
        flex: 1 1 auto; /* Crece hasta el botón. */
        max-width: none; /* Sin el tope del modo escritorio: acá hay ancho de sobra. */
        padding-block: 14px; /* Área de toque cómoda. */
        text-align: left; /* Alineado a la izquierda, como el resto de la lista. */
    }

    /* El botón de despliegue aparece. */
    .MainMenu-panelToggle {
        display: flex; /* Visible y centrado, como declara su regla base. */
    }

    /* El panel deja de flotar y ocupa su lugar en el flujo, debajo de su fila. */
    .MainMenu-panel {
        position: static; /* Vuelve al flujo. */
        transform: none; /* Sin el centrado del modo escritorio. */
        width: auto; /* El ancho lo da la fila. */
        flex: 1 0 100%; /* Baja a su propia línea, con el ancho completo del ítem. */
    }

    /* Adentro del acordeón el panel no necesita caja propia: repetirla apilaría dos. */
    .MainMenu-panelInner {
        padding: 0 0 16px; /* Solo aire abajo, antes de la línea del ítem siguiente. */
        background-color: transparent; /* Sin fondo propio. */
        backdrop-filter: none; /* Sin desenfoque: no hay nada detrás que desenfocar. */
        border-radius: 0; /* Sin redondeo. */
        box-shadow: none; /* Sin sombra. */
    }

    /* Las columnas se apilan: en una pantalla angosta cuatro columnas son ilegibles. */
    .MainMenu-columns {
        flex-direction: column; /* Una debajo de la otra. */
        gap: 18px; /* Misma separación que entre grupos. */
    }

    /* La tarjeta ocupa el ancho completo al final del panel. */
    .MainMenu-card {
        flex: 0 0 auto; /* Sin el ancho fijo de 250px. */
        width: 100%; /* Ancho completo de la columna. */
    }
}

/* --- MOBILE — hasta 500 px (nodo "Header · móvil" 452:5430). Hereda casi todo de tablet: solo
   cambian los altos, la separación, el dibujo más chico y el comportamiento del buscador, que acá no
   está en la barra sino detrás de la lupa (eso no está en Figma). --- */
@media (max-width: 500px) {

    /* La franja roja es más baja que en tablet. El relleno lo hereda de ese bloque. */
    .MainMenu-topBar {
        height: 24px; /* Alto de la franja en el diseño de móvil. */
    }

    /* El logo de la franja también es más chico. */
    .MainMenu-legrandLogo {
        width: 53px; /* Ancho del dibujo en el diseño de móvil. */
    }

    /* La fila de la barra, con las medidas de móvil. */
    .MainMenu-inner {
        column-gap: 20px; /* Separación del diseño entre la lupa y la hamburguesa. */
        min-height: 43px; /* Alto del diseño: los 67 del frame menos los 24 de la franja. */
        padding-inline: 16px; /* Relleno del diseño de móvil. */
    }

    /* El margen automático empuja la lupa y la hamburguesa al extremo derecho DEJÁNDOLAS JUNTAS: el
       space-between repartiría el aire entre los tres bloques y las separaría. */
    .MainMenu-brand {
        gap: 2px; /* Separación del diseño entre el logotipo y la firma. */
        margin-right: auto; /* Se come todo el aire sobrante de la fila. */
        min-height: 43px; /* Alto del diseño de móvil. */
    }

    /* El logotipo, a la escala de móvil. */
    .MainMenu-brandLogo {
        width: 84px; /* Ancho del dibujo en el diseño de móvil. */
    }

    /* La firma, a la misma escala. */
    .MainMenu-brandSignature {
        width: 86px; /* Ancho del dibujo en el diseño de móvil. */
    }

    /* La lupa aparece: móvil es el único diseño donde el buscador no está a la vista. */
    .MainMenu-searchToggle {
        order: 2; /* Entre el logo y la hamburguesa. */
        display: flex; /* Visible y centrada, como declara su regla base. */
    }

    /* EL DIBUJO DE LA HAMBURGUESA NO SE REDECLARA: móvil lo pide igual que tablet y lo hereda. Acá
       vuelve el desborde reducido: la lupa está a 20px y con 11 las dos áreas se superponen. */
    .MainMenu-toggle::after {
        inset: -9px; /* Desborde reducido, para no pisar el área de la lupa. */
    }

    /* El buscador sale de la barra y pasa a ser una fila que la lupa despliega debajo. Cerrado no se
       pinta, y eso además lo saca del orden de tabulación. */
    .MainMenu-search {
        order: 4; /* Debajo de la barra, arriba de la navegación. */
        display: none; /* Cerrado. Lo abre el script poniendo la clase de abajo. */
        flex: 0 0 100%; /* Ocupa la línea completa debajo de la barra. */
        padding-bottom: 4px; /* Aire antes del borde de abajo de la barra. */
    }

    /* El script marca esta clase al tocar la lupa. */
    .MainMenu-search.is-open {
        display: flex; /* Visible, como la fila que declara su regla base. */
    }

    /* La navegación queda al final, debajo de la fila del buscador. */
    .MainMenu-collapsible {
        order: 5; /* Última posición. */
    }
}

/* --- MOVIMIENTO REDUCIDO. Lo único que se mueve en el widget es la píldora del buscador de
   escritorio: sigue funcionando igual, solo deja de animarse. --- */
@media (prefers-reduced-motion: reduce) {

    .MainMenu-searchInput,
    .MainMenu-searchIcon {
        transition: none; /* Sin animación de apertura. */
    }
}