.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ================================================================
   HEADER MAPLOCA — CSS
   ================================================================
   Pega TODO este archivo en: Elementor → Ajustes del sitio →
   CSS personalizado. Aplica a todo el sitio.
   Si tienes CSS antiguo de pruebas, bórralo antes.
   ================================================================ */

/* ---- VARIABLES DE MARCA (ajusta aquí si cambian colores/fuente) ---- */
:root {
  --mp-c-bg:           #EAECEF;          /* fondo del header */
  --mp-c-text:         #002D40;          /* texto principal navy */
  --mp-c-accent:       #FF5E14;          /* naranja Maploca */
  --mp-c-card:         #FFFFFF;          /* fondo dropdown */
  --mp-c-card-soft:    #F4F6F8;          /* hover de items del dropdown */
  --mp-c-divider:      rgba(0, 45, 64, 0.08);
  --mp-c-shadow:       0 14px 40px rgba(0, 45, 64, 0.12);
  --mp-c-overlay:      rgba(0, 45, 64, 0.55);

  --mp-font:           'Montserrat', system-ui, -apple-system, sans-serif;
  --mp-header-h:       80px;
  --mp-dropdown-w:     260px;
  --mp-subdropdown-w:  220px;
  --mp-radius:         6px;
  --mp-radius-card:    10px;
  --mp-trans:          200ms cubic-bezier(.2, .6, .2, 1);
}

/* ---- RESET LOCAL (no afecta al resto del sitio) ---- */
.mp-header,
.mp-header *,
.mp-header *::before,
.mp-header *::after {
  box-sizing: border-box;
}
.mp-header ul { list-style: none; margin: 0; padding: 0; }
.mp-header a {
  text-decoration: none;
  color: inherit;
}
.mp-header img { display: block; max-width: 100%; height: auto; }

/* ---- HEADER PRINCIPAL ---- */
.mp-header {
  position: relative;
  width: 100%;
  background: var(--mp-c-bg);
  font-family: var(--mp-font);
  color: var(--mp-c-text);
  z-index: 1000;
}

.mp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  height: var(--mp-header-h);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- LOGO ---- */
.mp-logo { display: flex; align-items: center; height: 100%; }
.mp-logo img { height: 36px; width: auto; }

/* ---- NAVEGACIÓN PRINCIPAL ---- */
.mp-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: flex-end;
}
.mp-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
}
.mp-item { position: relative; }

.mp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mp-c-text);
  padding: 8px 0;
  position: relative;
  transition: color var(--mp-trans);
}

/* Underline indicator (current + hover) */
.mp-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--mp-c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mp-trans);
}
.mp-link:hover,
.mp-link[aria-current="page"] {
  color: var(--mp-c-text);
}
.mp-link:hover::after,
.mp-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.mp-chevron {
  transition: transform var(--mp-trans);
}
.mp-has-dropdown.is-open > .mp-link .mp-chevron {
  transform: rotate(180deg);
}

/* ---- DROPDOWN NIVEL 1 (PRODUCTOS) ---- */
.mp-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: var(--mp-dropdown-w);
  background: var(--mp-c-card);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-c-shadow);
  padding: 12px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--mp-trans),
              transform var(--mp-trans),
              visibility 0s linear var(--mp-trans);
  z-index: 100;
}
.mp-has-dropdown.is-open > .mp-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--mp-trans),
              transform var(--mp-trans),
              visibility 0s;
}

/* Puente invisible para que el cursor pueda viajar del link al dropdown */
.mp-dropdown::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}

.mp-dropdown-list { display: block; }

.mp-dropdown-item {
  position: relative;
  margin: 0;
}

.mp-dropdown-link {
  display: block;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mp-c-text);
  transition: background var(--mp-trans), color var(--mp-trans);
  white-space: nowrap;
}
.mp-dropdown-item:hover > .mp-dropdown-link,
.mp-dropdown-item.is-open > .mp-dropdown-link {
  background: var(--mp-c-card-soft);
  color: var(--mp-c-accent);
}

/* ---- SUB-DROPDOWN NIVEL 2 (cascada lateral) ---- */
.mp-subdropdown {
  position: absolute;
  top: 0;
  left: 100%;
  width: var(--mp-subdropdown-w);
  background: var(--mp-c-card);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-c-shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity var(--mp-trans),
              transform var(--mp-trans),
              visibility 0s linear var(--mp-trans);
}
.mp-has-subdropdown:hover > .mp-subdropdown,
.mp-has-subdropdown.is-open > .mp-subdropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: opacity var(--mp-trans),
              transform var(--mp-trans),
              visibility 0s;
}

/* Puente invisible entre dropdown y sub-dropdown */
.mp-subdropdown::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -8px;
  width: 8px;
}

/* Tarjeta de sub-producto (imagen + label) */
.mp-sub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--mp-radius);
  transition: background var(--mp-trans), transform var(--mp-trans);
  text-align: center;
}
.mp-sub-card:hover {
  background: var(--mp-c-card-soft);
  transform: translateY(-2px);
}
.mp-sub-img {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: var(--mp-radius);
  overflow: hidden;
  background: var(--mp-c-card-soft);
}
.mp-sub-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-sub-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mp-c-text);
  line-height: 1.3;
}

/* ---- SELECTOR DE IDIOMA ---- */
.mp-lang {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.mp-lang :is(a, span, button) {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mp-c-text);
}
/* Estilo del switcher de TranslatePress (.elementor-kit-9es genéricos por si los aplica) */
.mp-lang .trp-language-switcher,
.mp-lang #trp-floater-ls {
  background: transparent;
  border: 0;
}
.mp-lang .trp-ls-shortcode-current-language,
.mp-lang .trp-ls-shortcode-language {
  background: transparent;
  border: 0;
  color: var(--mp-c-text);
  font-family: inherit;
}

/* ---- HAMBURGUESA (oculta en desktop) ---- */
.mp-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 1100;
}
.mp-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mp-c-text);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform var(--mp-trans), opacity var(--mp-trans);
}

/* ================================================================
   RESPONSIVE — TABLET Y MÓVIL
   Breakpoint: 1024px (cuando los items ya no caben cómodos)
   ================================================================ */
@media (max-width: 1024px) {

  .mp-header-inner {
    padding: 0 20px;
    height: 70px;
  }

  .mp-toggle { display: block; }

  /* Overlay backdrop */
  .mp-header::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--mp-c-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mp-trans), visibility 0s linear var(--mp-trans);
    z-index: 1050;
  }
  .mp-header.is-nav-open::after {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--mp-trans), visibility 0s;
  }

  /* Hamburguesa → "X" cuando está abierto */
  .mp-header.is-nav-open .mp-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mp-header.is-nav-open .mp-toggle span:nth-child(2) {
    opacity: 0;
  }
  .mp-header.is-nav-open .mp-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Panel lateral con la navegación */
  .mp-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 88vw);
    background: var(--mp-c-bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 90px 28px 28px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--mp-trans);
    z-index: 1060;
    box-shadow: -10px 0 40px rgba(0, 45, 64, 0.15);
  }
  .mp-header.is-nav-open .mp-nav {
    transform: translateX(0);
  }

  .mp-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .mp-item {
    border-bottom: 1px solid var(--mp-c-divider);
  }

  .mp-link {
    padding: 16px 0;
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
  }

  /* Subrayado animado: en mobile lo escondemos (sería distractor en accordion) */
  .mp-link::after { display: none; }

  /* Dropdown en mobile → acordeón en flujo, no flotante */
  .mp-dropdown {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 320ms cubic-bezier(.2,.6,.2,1);
  }
  .mp-has-dropdown.is-open > .mp-dropdown {
    max-height: 2000px;
    transform: none;
    transition: max-height 480ms cubic-bezier(.2,.6,.2,1);
  }
  .mp-dropdown::before { display: none; }

  .mp-dropdown-link {
    padding: 12px 16px;
    font-size: 13px;
  }
  .mp-dropdown-item:hover > .mp-dropdown-link {
    background: transparent;
    color: var(--mp-c-text);
  }
  .mp-dropdown-item.is-open > .mp-dropdown-link {
    color: var(--mp-c-accent);
  }

  /* Sub-dropdown en mobile → también acordeón, grid de 2 columnas */
  .mp-subdropdown {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    background: transparent;
    padding: 8px 16px 16px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 320ms cubic-bezier(.2,.6,.2,1),
                padding 320ms cubic-bezier(.2,.6,.2,1);
  }
  .mp-has-subdropdown.is-open > .mp-subdropdown {
    max-height: 2000px;
  }
  .mp-subdropdown::before { display: none; }

  /* FIX mobile: cards con imagen cuadrada que se adapta al ancho */
  .mp-sub-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: calc(50% - 6px) !important;
    padding: 8px !important;
    background: var(--mp-c-card) !important;
    border-radius: var(--mp-radius) !important;
  }
  .mp-sub-img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: var(--mp-radius) !important;
    background: var(--mp-c-card-soft) !important;
  }
  .mp-sub-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .mp-sub-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: var(--mp-c-text) !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* Idioma al final del panel */
  .mp-lang {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--mp-c-divider);
    justify-content: flex-start;
  }
}

/* Móvil pequeño: ajuste de logo */
@media (max-width: 480px) {
  .mp-logo img { height: 30px; }
  .mp-header-inner { padding: 0 16px; }
}

/* ================================================================
   FIX: si Elementor envuelve el HTML widget con padding raro,
   forzamos al header a ocupar el ancho completo.
   ================================================================ */
.elementor-widget-html:has(.mp-header) {
  padding: 0 !important;
  width: 100%;
}
.elementor-widget-html:has(.mp-header) > .elementor-widget-container {
  padding: 0 !important;
}
/* ========================================================
   FIX MOBILE V2 — aspect-ratio aplicado al <img> directamente
   No depende de padding-bottom ni del span padre.
   ======================================================== */
@media (max-width: 1024px) {
  /* El span vuelve a ser un contenedor simple sin altura forzada */
  .mp-header .mp-subdropdown .mp-sub-card .mp-sub-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 0 !important;
    position: static !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: var(--mp-radius) !important;
    background: var(--mp-c-card-soft) !important;
  }
  /* La imagen se vuelve cuadrada por sí misma */
  .mp-header .mp-subdropdown .mp-sub-card .mp-sub-img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    border-radius: var(--mp-radius) !important;
  }
  /* Label con buena legibilidad */
  .mp-header .mp-subdropdown .mp-sub-card .mp-sub-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: var(--mp-c-text) !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
  }
}
/* ========================================================
   PUNTO 8 — Menú móvil de Productos: solo nombres, sin imágenes
   (anula los FIX mobile de imágenes anteriores)
   ======================================================== */
@media (max-width: 1024px) {
  .mp-header .mp-subdropdown .mp-sub-img { display: none !important; }

  .mp-header .mp-subdropdown {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 4px 0 8px !important;
  }
  .mp-header .mp-subdropdown .mp-sub-card {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px 12px 32px !important;
    background: transparent !important;
    text-align: left !important;
  }
  .mp-header .mp-subdropdown .mp-sub-card:hover {
    background: var(--mp-c-card-soft) !important;
    transform: none !important;
  }
  .mp-header .mp-subdropdown .mp-sub-label {
    display: block !important;
    font-size: 13px !important;
    text-align: left !important;
    margin-top: 0 !important;
  }
}/* End custom CSS */