/* ==========================================================
   PUBLIMPACTO · LOTE 161
   STORYTELLING · TELÉFONO · FLUJO NATURAL DE SECCIONES
   ----------------------------------------------------------
   Objetivo:
   - En teléfono, ninguna sección 00–05 trabaja como pantalla
     completa ni queda fijada/pinneada durante el scroll.
   - Cada sección ocupa únicamente la altura que necesita su
     contenido.
   - Neutraliza reglas de sticky/fixed/100vh/snap heredadas de
     escritorio que pueden provocar que 02 y 04 se deslicen por
     debajo de la sección anterior.
   - No modifica tablet ni escritorio.
   ========================================================== */

@media (max-width: 767.98px) {

  /* El documento móvil debe desplazarse como una página normal. */
  html,
  body,
  #contenido,
  [data-pi-service-experience="storytelling-v1"] {
    scroll-snap-type: none !important;
  }

  /* 00–05: altura real del contenido, sin pinning ni fullscreen. */
  #service-hero,
  #problema,
  #sistema,
  #principio,
  #proceso,
  #conexiones,
  .pi-se-chapter {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;

    transform: none !important;
    translate: none !important;
    z-index: auto !important;

    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  /* Si el comportamiento fullscreen estaba aplicado al shell
     interior, también queda anulado sin perder su función como
     contenedor de posicionamiento de elementos decorativos. */
  #service-hero > .pi-se-shell,
  .pi-se-chapter > .pi-se-shell {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;

    transform: none !important;
  }

  /* Refuerzo específico sobre los bloques que mostraban el fallo. */
  #sistema,
  #proceso,
  #sistema > .pi-se-shell,
  #proceso > .pi-se-shell,
  .pi-se-system-grid,
  .pi-se-process-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* El rail de escritorio/tablet no participa en teléfono. */
  .pi-se-rail,
  .pi-service-sticky-nav {
    display: none !important;
  }
}

/* ==========================================================
   PUBLIMPACTO · LOTE 162
   STORYTELLING · TELÉFONO · RITMO VERTICAL + MICROANIMACIONES
   ----------------------------------------------------------
   Ajustes solicitados sobre el flujo natural del Lote 161:
   - 01: acerca el slider al copy superior ~24 px.
   - 02: recupera aire superior e inferior.
   - 03: tratamiento editorial independiente, mucho más abierto.
   - 04: recupera aire superior e inferior.
   - 05: conserva el top y amplía únicamente el cierre inferior.
   - Slider 01: las microanimaciones SVG se disparan también al
     cambiar de slide con las flechas en dispositivos táctiles.
   ========================================================== */

@media (max-width: 767.98px) {

  /* 01 · El slider estaba demasiado separado del último párrafo.
     El valor anterior efectivo era 3rem (~48 px); queda en 1.5rem
     (~24 px), reduciendo aproximadamente 24 px sin tocar el track. */
  .pi-service-experience-story
  #problema.pi-se-section-01-default
  .pi-se-section-close--slider {
    margin-top: 1.5rem !important;
  }

  /* 02 · Sistema: algo más de respiración que el compacto heredado. */
  .pi-service-experience-story #sistema {
    padding-top: 4.5rem !important;
    padding-bottom: 5rem !important;
  }

  /* 03 · Principio: excepción editorial deliberada.
     No vuelve a fullscreen: sigue en flujo natural, pero recibe una
     gran cámara de aire arriba y abajo para dar protagonismo al texto. */
  .pi-service-experience-story #principio {
    --pi-se-principle-pad: 8.75rem;
    padding-top: var(--pi-se-principle-pad) !important;
    padding-bottom: var(--pi-se-principle-pad) !important;
  }

  .pi-service-experience-story
  #principio.pi-se-statement
  > .pi-se-shell {
    min-height: 0 !important;
    row-gap: clamp(2.25rem, 8vw, 3rem);
  }

  /* 04 · Proceso: más aire de entrada y salida, manteniendo intacta
     la composición interna que ya se ha dado por buena. */
  .pi-service-experience-story #proceso {
    padding-top: 4.75rem !important;
    padding-bottom: 5rem !important;
  }

  /* 05 · FAQ: el top queda como estaba; solo abrimos el cierre. */
  .pi-service-experience-story #conexiones.pi-se-faq-master {
    padding-bottom: 5rem !important;
  }

  /* ----------------------------------------------------------
     01 · SVG · ACCIÓN AL CAMBIAR SLIDE EN MÓVIL
     ----------------------------------------------------------
     En escritorio estas acciones dependen de :hover. En teléfono
     no existe ese estado de forma fiable, así que el JS del Lote 162
     añade .pi-phone-svg-action al slide recién activado. */

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.pi-phone-svg-action
  .pi-se-section-close-icon--plane {
    animation:
      pi-se-plane-double-depart
      3.6s
      steps(1,end)
      1
      forwards !important;
  }

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.pi-phone-svg-action
  .pi-se-section-close-icon--swan {
    animation:
      pi-se-swan-turn
      900ms
      steps(6,end)
      0s
      1
      forwards,
      pi-se-swan-return
      900ms
      steps(6,end)
      2.7s
      1
      forwards !important;
  }

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.pi-phone-svg-action
  .pi-se-section-close-icon--pinwheel {
    animation:
      pi-se-pinwheel-gust
      3.6s
      cubic-bezier(.42,0,.58,1)
      1
      forwards !important;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .pi-service-experience-story
  #problema
  .pi-se-close-slide.pi-phone-svg-action
  .pi-se-section-close-icon--plane,
  .pi-service-experience-story
  #problema
  .pi-se-close-slide.pi-phone-svg-action
  .pi-se-section-close-icon--swan,
  .pi-service-experience-story
  #problema
  .pi-se-close-slide.pi-phone-svg-action
  .pi-se-section-close-icon--pinwheel {
    animation: none !important;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 163
   STORYTELLING · TELÉFONO · LECTURA CONTINUA + CONTROLES
   ----------------------------------------------------------
   - Oculta la fila de endpoints del hero solo en teléfono.
   - Mantiene la experiencia como relato vertical por scroll.
   - Desplaza el acceso flotante de Cookies a la izquierda.
   - Añade un control Publimpacto fijo a la derecha para volver
     al inicio, visible solo cuando ya se ha recorrido la página.
   ========================================================== */

@media (max-width: 767.98px) {

  /* En móvil los capítulos se descubren por scroll; la fila de
     accesos rápidos del hero deja de aportar valor y se oculta. */
  .pi-service-experience-story .pi-se-hero-nav {
    display: none !important;
  }

  /* El script detecta el botón flotante de Cookies generado por
     el sistema global y marca su contenedor fijo con esta clase. */
  .pi-cookie-trigger-mobile {
    position: fixed !important;
    right: auto !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    z-index: 9997 !important;
  }

  /* Con el megamenú abierto Cookies desaparece por completo para no
     competir ni tapar los accesos del propio menú. Al cerrar vuelve
     automáticamente a su posición fija de la izquierda. */
  .pi-cookie-trigger-mobile.pi-cookie-menu-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Navegador de retorno al inicio · geometría Publimpacto. */
  .pi-phone-scrolltop {
    position: fixed;
    z-index: 9998;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 0;
    background: rgba(17,17,17,.94);
    color: var(--pi-brand-live-color, #18a64a);
    box-shadow: none;
    clip-path: polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px)
    );
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      background-color 180ms ease,
      color 180ms ease;
  }

  .pi-phone-scrolltop.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .pi-phone-scrolltop svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }

  .pi-phone-scrolltop:active {
    transform: translateY(1px);
  }

  .pi-phone-scrolltop:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
}

@media (min-width: 768px) {
  .pi-phone-scrolltop {
    display: none !important;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .pi-phone-scrolltop {
    transition: none !important;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 164
   STORYTELLING · TELÉFONO · CTA AUDITORÍA CERRADO
   ----------------------------------------------------------
   Objetivo: convertir el banner cerrado en una lectura vertical
   real de tres niveles: icono / copy / acción.

   Solo se aplica mientras el botón de auditoría está cerrado.
   El desarrollo del panel abierto se tratará por separado.
   ========================================================== */

@media (max-width: 767.98px) {

  /* 1 · BANNER CERRADO · UNA SOLA COLUMNA */
  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 0 !important;
    row-gap: 22px !important;
  }

  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"])
  .pi-audit-col {
    grid-column: 1 !important;
    min-width: 0;
  }

  /* 2 · ICONO · PRIMER NIVEL */
  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"])
  .pi-audit-col-icon {
    align-self: auto !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* 3 · COPY · SEGUNDO NIVEL */
  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"])
  .pi-audit-col-copy {
    width: 100%;
  }

  /* 4 · ACCIÓN · TERCER NIVEL, CENTRADA */
  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"])
  .pi-audit-col-action {
    display: flex !important;
    grid-column: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 2px !important;
  }

  /* El CTA deja de estirarse a todo el ancho. El texto y la flecha
     forman una única pieza compacta y quedan juntos en la misma fila. */
  .pi-story-audit
  .pi-audit-btn[aria-expanded="false"] {
    width: max-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    gap: 17px !important;
    padding-left: 22px !important;
    padding-right: 12px !important;
  }

  .pi-story-audit
  .pi-audit-btn[aria-expanded="false"]
  .pi-audit-btn-copy {
    flex: 0 1 auto;
    min-width: 0;
  }

  .pi-story-audit
  .pi-audit-btn[aria-expanded="false"]
  .pi-audit-btn-arrow {
    flex: 0 0 42px !important;
    margin-left: 0 !important;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 165
   STORYTELLING · TELÉFONO · CTA CERRADO · EJE IZQUIERDO
   ----------------------------------------------------------
   - Icono, copy y acción comparten el mismo eje izquierdo.
   - El avión gana aire inferior.
   - El CTA recupera lectura horizontal y formato de botón.
   - Solo afecta al estado cerrado en teléfono.
   ========================================================== */

@media (max-width: 767.98px) {

  /* Ritmo vertical más compacto y dirigido. */
  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"]) {
    row-gap: 18px !important;
  }

  /* Avión: deja de flotar centrado y entra en la retícula del copy. */
  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"])
  .pi-audit-col-icon {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 0 12px 0 !important;
  }

  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"])
  .pi-audit-live-icon {
    margin: 0 !important;
  }

  /* Acción: mismo eje izquierdo que icono, meta, título y párrafo. */
  .pi-story-audit
  .pi-audit-banner:has(.pi-audit-btn[aria-expanded="false"])
  .pi-audit-col-action {
    width: 100% !important;
    justify-content: flex-start !important;
    padding-top: 6px !important;
  }

  /* Botón móvil convencional, horizontal y compacto. */
  .pi-story-audit
  .pi-audit-btn[aria-expanded="false"] {
    width: auto !important;
    max-width: 100% !important;
    min-height: 62px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 14px !important;
    padding: 10px 12px 10px 20px !important;

    border-radius: 0 !important;
    clip-path: polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px)
    );

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
  }

  /* Copy: nunca vertical, nunca rotado. Dos líneas horizontales limpias. */
  .pi-story-audit
  .pi-audit-btn[aria-expanded="false"]
  .pi-audit-btn-copy {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    gap: 3px !important;
    min-width: 0 !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
    text-align: left !important;
  }

  .pi-story-audit
  .pi-audit-btn[aria-expanded="false"]
  .pi-audit-btn-copy span {
    display: block !important;
    width: auto !important;
    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
  }

  .pi-story-audit
  .pi-audit-btn[aria-expanded="false"]
  .pi-audit-btn-arrow {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;

    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 166
   STORYTELLING · TELÉFONO · CTA CERRADO + ABIERTO COHERENTES
   ----------------------------------------------------------
   - Reduce ligeramente el aire exterior del estado cerrado.
   - Aumenta el aire entre el avión y la línea "Sin coste".
   - Mantiene icono / copy / acción sobre un único eje izquierdo.
   - La misma retícula se conserva al abrir el formulario.
   - No modifica tablet ni escritorio.
   ========================================================== */

@media (max-width: 767.98px) {

  /* Estado cerrado: menos cámara exterior arriba y abajo.
     El banner sigue respirando, pero deja de sentirse como una
     pantalla independiente demasiado alta. */
  .pi-story-audit:not(.is-open) {
    min-height: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* La cabecera del CTA usa la misma estructura tanto cerrada
     como abierta: una sola columna, eje izquierdo continuo. */
  .pi-story-audit .pi-audit-banner {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 0 !important;
    row-gap: 18px !important;
  }

  .pi-story-audit .pi-audit-banner .pi-audit-col {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  /* Avión: gana 10 px de aire respecto al lote 165. */
  .pi-story-audit .pi-audit-banner .pi-audit-col-icon {
    width: 100% !important;
    align-self: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 0 22px 0 !important;
  }

  .pi-story-audit .pi-audit-banner .pi-audit-live-icon {
    margin: 0 !important;
  }

  /* Acción: también permanece en el eje izquierdo al abrir. */
  .pi-story-audit .pi-audit-banner .pi-audit-col-action {
    display: flex !important;
    width: 100% !important;
    grid-column: 1 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 6px !important;
  }

  /* Botón móvil común a ambos estados.
     Cuando está abierto, la flecha se sustituye por la X existente,
     pero la geometría y la retícula no cambian. */
  .pi-story-audit .pi-audit-btn {
    width: auto !important;
    max-width: 100% !important;
    min-height: 62px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 14px !important;
    padding: 10px 12px 10px 20px !important;

    border-radius: 0 !important;
    clip-path: polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px)
    );

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
  }

  .pi-story-audit .pi-audit-btn .pi-audit-btn-copy {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
    text-align: left !important;
  }

  .pi-story-audit .pi-audit-btn .pi-audit-btn-copy span {
    display: block !important;
    width: auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
  }

  .pi-story-audit .pi-audit-btn .pi-audit-btn-arrow {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    writing-mode: horizontal-tb !important;
  }

  /* En estado abierto no dejamos que reglas antiguas recuperen
     la composición de dos columnas del banner. */
  .pi-story-audit.is-open .pi-audit-banner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 167
   STORYTELLING · TELÉFONO · AJUSTE FINO CTA
   ----------------------------------------------------------
   Valores validados en DevTools por el usuario.
   Se conservan la retícula móvil a una columna y el eje izquierdo.
   ========================================================== */

@media (max-width: 767.98px) {
  .pi-story-audit .pi-audit-value-line {
    margin-top: 20px !important;
    font-size: 10px !important;
  }

  .pi-story-audit .pi-audit-banner {
    /* La retícula móvil sigue siendo una sola columna. */
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 0 !important;
    row-gap: 18px !important;

    margin: 30px 0 !important;
    padding: 40px 0 !important;

    border-bottom: 1px solid var(--pi-audit-rule) !important;
  }
}

/* ==========================================================
   PUBLIMPACTO · LOTE 168
   STORYTELLING · TELÉFONO · FORMULARIO ABIERTO
   ----------------------------------------------------------
   1) El footer del formulario pasa de dos columnas a dos filas.
   2) Consentimiento arriba a todo el ancho.
   3) Acción debajo a todo el ancho.
   4) Aire inferior antes del footer global.
   5) El panel abierto dispone de un anclaje limpio para el
      reencuadre automático del viewport.
   ========================================================== */

@media (max-width: 767.98px) {

  /* El punto de llegada al abrir es el panel/formulario, no el banner. */
  .pi-story-audit .pi-audit-panel {
    scroll-margin-top: 24px !important;
  }

  /* Último bloque del formulario: una sola columna real. */
  .pi-story-audit .pi-audit-form-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "consent"
      "action" !important;
    align-items: start !important;
    gap: 28px !important;
    width: 100% !important;
    padding-bottom: 44px !important;
  }

  .pi-story-audit .pi-audit-consent {
    grid-area: consent !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .pi-story-audit .pi-audit-check {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .pi-story-audit .pi-audit-actions {
    grid-area: action !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: stretch !important;
  }

  /* Botón final: ocupa el ancho útil del formulario y conserva
     la geometría Publimpacto sin apretar texto y flecha. */
  .pi-story-audit .pi-submit-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 72px !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 12px 14px 12px 22px !important;
  }

  .pi-story-audit .pi-submit-copy {
    min-width: 0 !important;
    text-align: left !important;
  }

  .pi-story-audit .pi-submit-arrow {
    flex: 0 0 42px !important;
    margin-left: 0 !important;
  }
}

/* ==========================================================
   PUBLIMPACTO · LOTE 170
   STORYTELLING · CTA 945–1100 + MENÚ MÓVIL COMPACTO
   ----------------------------------------------------------
   1) Corrige la franja intermedia en la que el CTA quedaba
      demasiado separado y el avión demasiado cerca de su regla.
   2) Elimina la franja blanca lateral del megamenú en teléfono.
   3) Reduce ligeramente el tamaño de la navegación principal móvil.
   ========================================================== */

/* PORTÁTIL COMPACTO / FRANJA INTERMEDIA PROBLEMÁTICA */
@media (min-width: 945px) and (max-width: 1100px) {
  .pi-story-audit .pi-audit-banner {
    /* La tercera columna deja de reservar 246 px innecesarios. */
    grid-template-columns: 118px minmax(0, 1fr) 176px !important;
    column-gap: 24px !important;
  }

  .pi-story-audit .pi-audit-col-icon {
    box-sizing: border-box !important;
    padding-right: 20px !important;
  }

  .pi-story-audit .pi-audit-col-action {
    justify-content: flex-end !important;
  }

  .pi-story-audit:not(.is-open) .pi-audit-btn,
  .pi-story-audit .pi-audit-btn {
    /* El CTA conserva su arquitectura vertical de escritorio, pero
       texto + regla/flecha quedan juntos, sin la bolsa central vacía. */
    width: 164px !important;
    min-width: 164px !important;
    max-width: 164px !important;
    display: grid !important;
    grid-template-columns: 88px 62px !important;
    column-gap: 14px !important;
    justify-content: start !important;
  }

  .pi-story-audit .pi-audit-btn-copy {
    min-width: 0 !important;
  }

  .pi-story-audit .pi-audit-btn-arrow {
    margin-left: 0 !important;
  }
}

/* TELÉFONO · MEGAMENÚ A SANGRE, SIN FRANJA BLANCA LATERAL */
@media (max-width: 767.98px) {
  .pi-menu-premium,
  .pi-interior-menu-frame.pi-menu-premium,
  #pi-main-menu.pi-menu-premium {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
  }

  .pi-menu-premium .mil-menu-content,
  .pi-menu-premium .pi-menu-premium__layout,
  .pi-menu-premium .mil-main-menu,
  .pi-menu-premium .mil-menu-right-frame {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #000 !important;
  }

  /* Navegación principal: mantiene presencia, pero deja de dominar
     tanto la pantalla pequeña. */
  .pi-menu-premium .mil-main-menu ul li {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .pi-menu-premium .mil-main-menu ul li:last-child {
    margin-bottom: 0 !important;
  }

  .pi-menu-premium .mil-main-menu ul li a {
    font-size: 24px !important;
    line-height: 1.06 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
}

/* ==========================================================
   PUBLIMPACTO · LOTE 172
   STORYTELLING · TELÉFONO · CIERRE CTA ABIERTO EN EJE IZQUIERDO
   ----------------------------------------------------------
   Cuando el formulario está abierto, el control de cierre deja
   de ocupar el eje central y se alinea con el avión / contenido.
   ========================================================== */
@media (max-width: 767.98px) {
  .pi-story-audit.is-open .pi-audit-col-action {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pi-story-audit.is-open .pi-audit-btn[aria-expanded="true"] {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    min-height: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    justify-content: start !important;
    align-self: flex-start !important;

    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  /* En abierto sólo necesitamos el gesto de cierre. */
  .pi-story-audit.is-open .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
    display: none !important;
  }

  .pi-story-audit.is-open .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-arrow {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    justify-self: start !important;
    transform: none !important;
  }
}

/* ==========================================================
   PUBLIMPACTO · LOTE 175
   STORYTELLING · HERO MÓVIL · GEOMETRÍA MÁS VISIBLE
   ----------------------------------------------------------
   Ajuste exclusivo de teléfono. Conserva escritorio/tablet.
   - acerca la geometría principal al viewport;
   - aumenta su contraste/nitidez;
   - mantiene el contenido y la composición del Hero intactos.
   ========================================================== */
@media (max-width: 767.98px) {
  .pi-service-experience-story
  .pi-se-hero--dark-default[data-geometry-phase="identification"]
  .pi-se-hero-geometry .mil-position-1 {
    right: -135px !important;
    opacity: .34 !important;
  }

  .pi-service-experience-story
  .pi-se-hero--dark-default[data-geometry-phase="identification"]
  .pi-se-hero-geometry .mil-position-1 .mil-pentagon div {
    border-top-color: rgba(255, 255, 255, .88) !important;
    border-top-width: .5px !important;
  }
}