/* ==========================================================================
   MP Ascensores · estilos corporativos sobre The7
   Valores medidos en los diseños Figma v02. Confirmar con el manual de
   identidad (MIC) antes de cerrar.
   ========================================================================== */

:root {
  /* Color */
  --mp-rojo:        #BA0C2F;  /* botones y llamadas a la acción */
  --mp-rojo-hover:  #9A0A27;
  --mp-magenta:     #E21453;  /* caja del hero */
  --mp-gris:        #5B6670;  /* texto, franjas oscuras, pie */
  --mp-gris-medio:  #8C949B;  /* textos secundarios, descripciones del menú */
  --mp-gris-claro:  #EEEFF0;  /* fondos de bloque */
  --mp-blanco:      #FFFFFF;
  --mp-degradado:   linear-gradient(90deg, #5B6670 0%, #BA0C2F 100%);
  --mp-degradado-v: linear-gradient(100deg, #6E7680 0%, #A33A55 55%, #C42F4D 100%);

  /* Tipografía */
  --mp-font-texto:   'Noto Sans MP', 'Noto Sans', Arial, sans-serif;
  --mp-font-display: 'MP Display', 'Noto Sans MP', 'Noto Sans', Arial, sans-serif;

  /* Formas */
  --mp-radio:     18px;
  --mp-radio-sm:  10px;
  --mp-radio-pill: 999px;
  --mp-sombra:    0 12px 32px rgba(91, 102, 112, .16);
}

/* --------------------------------------------------------------------------
   Base
   The7 aplica la tipografía elegida en sus opciones. Si algún selector de
   The7 gana a estos, inspecciónalo y añádelo aquí (o usa !important).
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
  font-family: var(--mp-font-texto);
}

body {
  color: var(--mp-gris);
}

h1, h2, h3,
.h1-size, .h2-size, .h3-size,
.entry-title,
.mp-display {
  font-family: var(--mp-font-display);
  font-weight: 400;
  color: var(--mp-gris);
  letter-spacing: .01em;
}

/* Titular de sección: "Productos", "Referencias", "Contacto"… */
.mp-titulo {
  font-family: var(--mp-font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  line-height: 1.15;
  text-align: center;
  color: var(--mp-gris);
  margin: 0 0 .25em;
}

.mp-subtitulo {
  font-family: var(--mp-font-texto);
  font-size: 1.05rem;
  text-align: center;
  color: var(--mp-gris);
}
.mp-subtitulo strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Botones (clase extra en el botón de WPBakery: mp-btn, mp-btn--gris…)
   -------------------------------------------------------------------------- */
.mp-btn,
.mp-btn a,
a.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  padding: .6em 2.2em;
  border: 1px solid var(--mp-rojo);
  border-radius: var(--mp-radio-pill);
  background: var(--mp-rojo);
  color: var(--mp-blanco) !important;
  font-family: var(--mp-font-texto);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mp-btn:hover,
a.mp-btn:hover {
  background: var(--mp-rojo-hover);
  border-color: var(--mp-rojo-hover);
}

.mp-btn--gris,
a.mp-btn--gris {
  background: var(--mp-gris);
  border-color: var(--mp-gris);
}
.mp-btn--gris:hover,
a.mp-btn--gris:hover {
  background: #47515A;
  border-color: #47515A;
}

.mp-btn--blanco,
a.mp-btn--blanco {
  background: var(--mp-blanco);
  border-color: var(--mp-blanco);
  color: var(--mp-gris) !important;
}

.mp-btn--borde,
a.mp-btn--borde {
  background: transparent;
  border-color: currentColor;
  color: var(--mp-blanco) !important;
}

/* --------------------------------------------------------------------------
   Bloques
   -------------------------------------------------------------------------- */
.mp-bloque-gris {
  background: var(--mp-gris-claro);
  border-radius: var(--mp-radio);
}

.mp-franja-oscura {
  background: var(--mp-gris);
  color: var(--mp-blanco);
  border-radius: var(--mp-radio);
}

.mp-redondeado,
.mp-redondeado img {
  border-radius: var(--mp-radio);
  overflow: hidden;
}

/* Caja magenta del hero */
.mp-hero-box {
  background: var(--mp-magenta);
  color: var(--mp-blanco);
  border-radius: var(--mp-radio);
  padding: 1.5em 1.75em;
}
.mp-hero-box h1,
.mp-hero-box h2 {
  color: var(--mp-blanco);
  line-height: 1.1;
  margin: 0;
}

/* ==========================================================================
   MEGA MENÚ (The7 Classic 14.5)
   HTML que genera The7:
     li.dt-mega-menu.mm-mega
       > a
       > div.dt-mega-menu-wrap                ← el panel desplegable
           > ul.sub-nav
               > li.dt-mega-parent.has-widget.mm-l2      ← columna promo
                   > ul.sub-nav.sub-nav-widgets > li > div.mega-menu-widgets
               > li.dt-mega-parent.hide-mega-title.mm-l2 ← columnas de enlaces
                   > ul.sub-nav > li.mm-l3 > a > span.menu-item-text
                                              > span.menu-text + span.subtitle-text
   Las clases mm-* las pone functions.php automáticamente.
   Los !important solo están donde The7 aplica sus opciones con selectores
   muy específicos (colores de hover).
   ========================================================================== */

:root {
  --mm-ancho: 1000px;          /* ancho del panel */
  --mm-col-promo: 26%;         /* ancho de la columna promocional */
}

/* ---------- Panel ---------- */
.main-nav > li.mm-mega > .dt-mega-menu-wrap {
  padding: 0 !important;
  border-radius: 0 0 var(--mp-radio) var(--mp-radio);
  box-shadow: var(--mp-sombra);
  overflow: hidden;
  background: var(--mp-blanco);
}
.main-nav > li.mm-mega.mega-auto-width > .dt-mega-menu-wrap {
  width: var(--mm-ancho);
  max-width: calc(100vw - 32px);
}
.main-nav > li.mm-mega > .dt-mega-menu-wrap > .sub-nav {
  align-items: stretch;
  flex-wrap: nowrap;
}

/* ---------- Columnas ---------- */
.masthead .main-nav > li.mm-mega > .dt-mega-menu-wrap > .sub-nav > li.mm-l2 {
  flex: 1 1 auto;               /* cada columna toma el ancho que pide su contenido */
  width: auto;
  padding: 3rem 1rem 2.5rem 2.5rem;
  margin: 0;
}
.masthead .main-nav > li.mm-mega > .dt-mega-menu-wrap > .sub-nav > li.mm-l2.has-widget {
  flex: 0 0 var(--mm-col-promo);
  padding: 0;
}
.masthead .main-nav > li.mm-mega li.mm-l2:not(.has-widget) > .sub-nav {
  width: auto;
  max-width: none;
}
/* Título de la columna promo: no se muestra (el contenido es el widget) */
.masthead .main-nav > li.mm-mega li.mm-l2.has-widget > a {
  display: none;
}
.masthead .main-nav > li.mm-mega li.mm-l2.has-widget > .sub-nav-widgets,
.masthead .main-nav > li.mm-mega li.mm-l2.has-widget > .sub-nav-widgets > li,
.masthead .main-nav > li.mm-mega .mega-menu-widgets,
.masthead .main-nav > li.mm-mega .mega-menu-widgets .widget,
.masthead .main-nav > li.mm-mega .mega-menu-widgets .textwidget {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ---------- Enlaces de tercer nivel ---------- */
.masthead .main-nav .mm-mega li.mm-l3 > a {
  display: flex;
  align-items: baseline;
  gap: .9em;
  margin: 0;
  padding: .3em 0 .3em 1.2em;
  background: none;
  text-decoration: none;
}

.masthead .main-nav .mm-mega li.mm-l3 > a .menu-item-text {
  display: flex;
  flex-wrap: wrap;            /* en idiomas largos, la descripción baja de línea */
  align-items: baseline;
  column-gap: .6em;
  row-gap: .1em;
}

.masthead .main-nav .mm-mega li.mm-l3 > a .menu-text {
  font-family: var(--mp-font-texto);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  color: var(--mp-gris);
}

.masthead .main-nav .mm-mega li.mm-l3 > a .subtitle-text {
  display: inline;
  margin: 0;
  font-family: var(--mp-font-texto);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  color: var(--mp-gris-medio);
}
.masthead .main-nav .mm-mega li.mm-l3 > a .subtitle-text::before {
  content: "/";
  margin-right: .6em;
}

/* Flecha roja */
.masthead .main-nav .mm-mega li.mm-l3:not(.mm-heading) > a::before {
  content: "";
  flex: 0 0 auto;
  width: .85em;
  height: .85em;
  background-color: var(--mp-rojo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(.08em);
  transition: transform .2s ease;
}
.masthead .main-nav .mm-mega li.mm-l3:not(.mm-heading) > a:hover::before,
.masthead .main-nav .mm-mega li.mm-l3:not(.mm-heading) > a:focus-visible::before {
  transform: translate(.2em, .08em);
}
.masthead .main-nav .mm-mega li.mm-l3:not(.mm-heading) > a:hover .menu-text,
.masthead .main-nav .mm-mega li.mm-l3:not(.mm-heading) > a:focus-visible .menu-text {
  color: var(--mp-rojo) !important;
}

/* Productos en Nasalization */
.masthead .main-nav .mm-mega li.mm-producto > a .menu-text {
  font-family: var(--mp-font-display);
  font-size: 1.3rem;
  line-height: 1.1;
}

/* Títulos de grupo: "SOLUCIONES PARA CADA EDIFICIO"… */
.masthead .main-nav .mm-mega li.mm-heading > a {
  pointer-events: none;
  cursor: default;
  margin-top: 1.4em;
  padding: 0 0 .2em;
}
.masthead .main-nav .mm-mega li.mm-heading:first-child > a {
  margin-top: 0;
}
.masthead .main-nav .mm-mega li.mm-heading > a .menu-text {
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---------- Columna promocional (widget "HTML personalizado") ----------
   <div class="mm-promo-card">
     <p class="mm-promo-title">Elige tu ascensor</p>
     <p class="mm-promo-text">Tenemos el modelo de ascensor perfecto <strong>para ti</strong></p>
     <a class="mm-promo-btn" href="/elige-tu-ascensor/">Ver más</a>
   </div>
   ----------------------------------------------------------------------- */
.mm-promo-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  min-height: 300px;
  padding: 2rem 2.25rem;
  background: var(--mp-degradado-v);
  border-radius: 0 var(--mp-radio) var(--mp-radio) 0;
  color: var(--mp-blanco);
  box-sizing: border-box;
  font-family: var(--mp-font-texto);
}
.mm-promo-card p {
  margin: 0;
  padding: 0;
}
.mm-promo-card .mm-promo-title {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mp-blanco);
}
.mm-promo-card .mm-promo-text {
  max-width: 16em;
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
}
.mm-promo-card .mm-promo-text strong {
  font-weight: 700;
  color: var(--mp-blanco);
}
.mm-promo-card a.mm-promo-btn {
  align-self: flex-start;
  padding: .45em 1em;
  border: 1.5px solid var(--mp-blanco);
  border-radius: var(--mp-radio-sm);
  color: var(--mp-blanco) !important;
  font-size: .85rem;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.mm-promo-card a.mm-promo-btn:hover,
.mm-promo-card a.mm-promo-btn:focus-visible {
  background: var(--mp-blanco);
  color: var(--mp-rojo) !important;
}

/* ---------- Menú móvil ----------
   functions.php elimina las columnas: los grupos y productos cuelgan
   directamente de "Ascensores y escaleras mecánicas".
   -------------------------------------------------------------------- */
.dt-mobile-header .mobile-main-nav .mm-mega li.mm-heading > a {
  pointer-events: none;
  margin-top: .8em;
}
.dt-mobile-header .mobile-main-nav .mm-mega li.mm-heading > a .menu-text {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}
.dt-mobile-header .mobile-main-nav .mm-mega li.mm-producto > a .menu-text {
  font-family: var(--mp-font-display);
}
.dt-mobile-header .mobile-main-nav .mm-mega li.mm-l3 > a .subtitle-text {
  font-family: var(--mp-font-texto);
  font-size: .78rem;
  line-height: 1.3;
  opacity: .75;
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */
.mm-mega a:focus-visible,
.mp-btn:focus-visible,
a.mm-promo-btn:focus-visible {
  outline: 2px solid var(--mp-rojo);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mm-mega a::before,
  .mp-btn,
  a.mm-promo-btn {
    transition: none;
  }
}