/* =========================================================
   PUBLIMPACTO · MEGA MENÚ PREMIUM GLOBAL
   Componente autónomo · 2026-09-28
   ---------------------------------------------------------
   Propiedad:
   - overlay del mega menú
   - retícula y responsive del mega menú
   - estados activos / hover / focus
   - geometrías del fondo
   - bloqueo de scroll al abrir

   La geometría base y la hamburguesa conservan las primitivas
   globales ya existentes en /css/style.css.
   ========================================================= */

.pi-menu-premium {
  --pi-menu-live: var(--pi-brand-live-color, #e3063b);
  background:#000;
}

body.pi-menu-open {
  overflow:hidden;
}

.pi-menu-premium .mil-menu-content {
  min-height:100vh;
}

.pi-menu-premium .pi-menu-premium__layout {
  min-height:100vh;
  align-items:stretch;
}

.pi-menu-premium .mil-main-menu {
  min-height:100vh;
  height:auto;
}

.pi-menu-premium .mil-main-menu ul li {
  margin-bottom:28px;
}

.pi-menu-premium .mil-main-menu ul li a {
  font-size:clamp(27px,2.15vw,36px);
  line-height:1.08;
  color:rgba(255,255,255,.78);
  transition:
    color .34s ease,
    transform .48s cubic-bezier(.16,1,.3,1);
  transform:translateX(0);
  will-change:transform,color;
}

/* Sección activa: usa exactamente el color vivo publicado por la hamburguesa. */
.pi-menu-premium .mil-main-menu ul li.mil-active > a {
  color:var(--pi-menu-live);
}

@media (hover:hover) and (pointer:fine) {
  .pi-menu-premium .mil-main-menu ul li a:hover {
    color:var(--pi-menu-live);
    transform:translateX(5px);
  }
}

.pi-menu-premium .mil-main-menu ul li a:focus-visible {
  color:var(--pi-menu-live);
  transform:translateX(5px);
}

.pi-menu-premium .mil-menu-right-frame {
  position:relative;
  min-height:100vh;
  height:auto;
  padding-left:54px;
  align-items:stretch;
  overflow:hidden;
}

.pi-menu-premium .pi-menu-premium__right {
  position:relative;
  z-index:2;
  width:100%;
  min-height:100vh;
  padding:clamp(190px,22vh,260px) 0 52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.pi-menu-premium .pi-menu-premium__top,
.pi-menu-premium .pi-menu-premium__bottom {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(48px,5vw,88px);
}

.pi-menu-premium .pi-menu-premium__heading {
  margin:0 0 22px;
  color:#fff;
  font-size:14px;
  line-height:1.2;
  font-weight:500;
}

.pi-menu-premium .pi-menu-premium__links {
  list-style:none;
  margin:0;
  padding:0;
}

.pi-menu-premium .pi-menu-premium__links li {
  margin:0 0 10px;
}

.pi-menu-premium .pi-menu-premium__links a {
  display:inline-block;
  color:rgba(255,255,255,.5);
  font-size:15px;
  line-height:1.42;
  transition:color .2s ease,transform .2s ease;
}

.pi-menu-premium .pi-menu-premium__links--featured a {
  color:rgba(255,255,255,.68);
  font-size:16px;
}

.pi-menu-premium .pi-menu-premium__links a:hover,
.pi-menu-premium .pi-menu-premium__links a:focus-visible {
  color:#fff;
  transform:translateX(4px);
}

/* Página exacta dentro de Servicios: color vivo, igual que el estado actual. */
.pi-menu-premium .pi-menu-premium__links a[aria-current="page"] {
  color:var(--pi-menu-live);
  transform:translateX(4px);
}

.pi-menu-premium .pi-menu-premium__links--featured a[aria-current="page"] {
  color:var(--pi-menu-live);
}

.pi-menu-premium .pi-menu-premium__divider {
  width:100%;
  height:1px;
  margin:38px 0 34px;
  background:rgba(255,255,255,.13);
}

.pi-menu-premium .pi-menu-premium__contact p {
  margin:0;
  color:rgba(255,255,255,.46);
  font-size:14px;
  line-height:1.65;
}

.pi-menu-premium .pi-menu-premium__contact strong {
  color:rgba(255,255,255,.72);
  font-weight:500;
}

.pi-menu-premium .pi-menu-premium__address-item + .pi-menu-premium__address-item {
  margin-top:13px;
}

.pi-menu-premium .pi-menu-premium__address-label {
  display:block;
  margin-bottom:3px;
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.pi-menu-premium .pi-menu-premium__address-email {
  margin-top:14px;
}

.pi-menu-premium .pi-menu-premium__contact a {
  color:rgba(255,255,255,.58);
}

.pi-menu-premium .pi-menu-premium__contact a:hover,
.pi-menu-premium .pi-menu-premium__contact a:focus-visible {
  color:#fff;
}

.pi-menu-premium .pi-menu-premium__external {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:.9em;
  height:.9em;
  margin-left:.24em;
  background:none!important;
  color:inherit;
  vertical-align:-.05em;
}

.pi-menu-premium .pi-menu-premium__external svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
}

.pi-menu-premium .pi-menu-premium__legal {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:30px;
  color:rgba(255,255,255,.3);
  font-size:12px;
  line-height:1.4;
}

.pi-menu-premium .pi-menu-premium__legal a:hover,
.pi-menu-premium .pi-menu-premium__legal a:focus-visible {
  color:rgba(255,255,255,.75);
}

/* =========================================================
   GEOMETRÍAS DEL MEGA MENÚ
   ---------------------------------------------------------
   Ambas piezas viajan dentro de mega-menu-premium.html.
   No se clonan desde Storytelling ni desde otra página.
   ========================================================= */
.pi-menu-premium .mil-menu-content {
  position:relative;
}

.pi-menu-premium .pi-menu-premium__layout {
  position:relative;
  z-index:2;
}

.pi-menu-premium .pi-menu-premium__geo {
  position:absolute;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}

.pi-menu-premium .pi-menu-premium__geo .pi-menu-geometry {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.pi-menu-premium .pi-menu-premium__geo .mil-animation {
  top:0;
  right:auto;
  bottom:auto;
  left:0;
  transform-origin:center;
  filter:brightness(1.10);
}

/* Geometría principal: borde izquierdo. */
.pi-menu-premium .pi-menu-premium__geo--left {
  top:78px;
  left:-220px;
  width:620px;
  height:620px;
  opacity:1;
}

.pi-menu-premium .pi-menu-premium__geo--left .mil-animation {
  width:520px;
  height:520px;
  opacity:.24;
  scale:1;
}

.pi-menu-premium .pi-menu-premium__geo--left .mil-dodecahedron {
  scale:2.2;
}

/* Contrapunto: geometría secundaria arriba/derecha. */
.pi-menu-premium .pi-menu-premium__geo--right {
  top:72px;
  right:82px;
  width:300px;
  height:300px;
  opacity:1;
}

.pi-menu-premium .pi-menu-premium__geo--right .mil-animation {
  width:280px;
  height:280px;
  opacity:.17;
  scale:1;
}

.pi-menu-premium .pi-menu-premium__geo--right .mil-dodecahedron {
  scale:1.28;
}

/* =========================================================
   RESPONSIVE DEL COMPONENTE
   ---------------------------------------------------------
   A partir de aquí, cualquier ajuste responsive del mega menú
   se hace en ESTE archivo, no en Storytelling.
   ========================================================= */
@media (min-width:1201px) {
  .pi-menu-premium .mil-menu-content {
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .pi-menu-premium .mil-menu-right-frame {
    display:flex!important;
  }
}

@media (max-width:1200px) {
  .pi-menu-premium .mil-menu-content {
    height:100vh;
    overflow-y:auto;
    padding:110px 0 48px;
  }

  .pi-menu-premium .pi-menu-premium__layout {
    min-height:0;
  }

  .pi-menu-premium .mil-main-menu {
    min-height:0;
    height:auto;
    margin-bottom:48px;
    justify-content:flex-start;
  }

  .pi-menu-premium .mil-main-menu ul {
    align-items:flex-start;
  }

  .pi-menu-premium .mil-main-menu ul li {
    margin-bottom:20px;
  }

  .pi-menu-premium .mil-main-menu ul li a {
    justify-content:flex-start;
    font-size:28px;
  }

  .pi-menu-premium .mil-menu-right-frame {
    display:block!important;
    min-height:0;
    height:auto;
    padding:34px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.12);
    opacity:1;
    transform:none;
    overflow:visible;
  }

  .pi-menu-premium .pi-menu-premium__right {
    min-height:0;
    padding:0 0 24px;
  }

  .pi-menu-premium .pi-menu-premium__geo {
    display:none!important;
  }
}


/* =========================================================
   TABLET VERTICAL · CONTACTO
   ---------------------------------------------------------
   Ajuste mínimo: el resto del mega menú conserva exactamente
   su escala y estructura aprobadas.
   ========================================================= */
@media (min-width:768px) and (max-width:1200px) and (orientation:portrait) {
  .pi-menu-premium .pi-menu-premium__contact--direct .pi-menu-premium__heading {
    font-size:16px;
  }

  .pi-menu-premium .pi-menu-premium__contact--direct a {
    font-size:16px;
    line-height:1.7;
  }

  .pi-menu-premium .pi-menu-premium__contact--direct > p:last-child > span:not(.pi-menu-premium__external) {
    font-size:14px;
  }
}

@media (max-width:767px) {
  .pi-menu-premium .mil-menu-content {
    padding:100px 0 36px;
  }

  .pi-menu-premium .pi-menu-premium__top,
  .pi-menu-premium .pi-menu-premium__bottom {
    grid-template-columns:1fr;
    gap:30px;
  }

  .pi-menu-premium .pi-menu-premium__divider {
    margin:30px 0 28px;
  }

  .pi-menu-premium .pi-menu-premium__heading {
    margin-bottom:14px;
  }

  .pi-menu-premium .pi-menu-premium__links a,
  .pi-menu-premium .pi-menu-premium__links--featured a {
    font-size:14px;
  }

  .pi-menu-premium .pi-menu-premium__legal {
    margin-top:24px;
  }
}



/* LOTE 136 · Tablet horizontal:
   centra el bloque con padding vertical simétrico y aproxima
   Servicios/Destacamos al bloque Castellón/Contacto para
   separar mejor el legal del borde inferior. */

/* =========================================================
   PUBLIMPACTO · LOTE 133
   MEGA MENÚ · TABLET HORIZONTAL · CENTRADO REAL
   ---------------------------------------------------------
   En lugar de seguir desplazando el layout otros -50px,
   eliminamos las alturas fullscreen internas heredadas y
   centramos el contenido útil dentro de la altura disponible.

   Además se compactan únicamente separaciones verticales que
   no alteran la jerarquía:
   - links principales: 28px -> 22px;
   - divisor derecho: 38/34px -> 28/26px;
   - legal: 30px -> 22px.

   Se conservan:
   - tamaños tipográficos;
   - columnas;
   - geometrías;
   - enlaces;
   - logo / hamburguesa;
   - tablet vertical.
   ========================================================= */

@media
  (min-width:1201px) and
  (max-width:1600px) and
  (max-height:950px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-menu-premium .mil-menu-content {
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:56px 0;
    box-sizing:border-box;
    overflow-y:auto;
  }

  .pi-menu-premium .pi-menu-premium__layout {
    position:relative;
    top:auto;
    width:100%;
    min-height:0;
    align-items:center;
  }

  .pi-menu-premium .mil-main-menu {
    min-height:0;
    height:auto;
  }

  .pi-menu-premium .mil-main-menu ul li {
    margin-bottom:22px;
  }

  .pi-menu-premium .mil-menu-right-frame {
    min-height:0;
    height:auto;
    align-items:center;
  }

  .pi-menu-premium .pi-menu-premium__right {
    min-height:0;
    padding:0;
    justify-content:center;
  }

  .pi-menu-premium .pi-menu-premium__divider {
    margin:18px 0 16px;
  }

  .pi-menu-premium .pi-menu-premium__legal {
    margin-top:18px;
  }
}