:root {
  --mobile-logo-mask: url("assets/logo-delnorte.webp");
}

@media (max-width: 960px) {
  /* ==============================================================
     HEADER MÓVIL: UNA SOLA BARRA
     ============================================================== */

  .site-header {
    top: 14px;
    width: calc(100% - 28px);
    height: 66px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 7px 178px 7px 15px;
    border-radius: 16px;
    background: var(--glass-fill);
    transition: background 0.35s ease;
  }

  .site-header.is-open,
  .mobile-intro__status[data-tone="open"] {
    background:
      linear-gradient(
        115deg,
        rgb(255 255 255 / 24%),
        rgb(91 151 107 / 18%)
      ),
      var(--glass-fill);
  }

  .site-header.is-closed,
  .mobile-intro__status[data-tone="closed"] {
    background:
      linear-gradient(
        115deg,
        rgb(255 255 255 / 24%),
        rgb(178 89 84 / 17%)
      ),
      var(--glass-fill);
  }

  .site-header.is-soon,
  .mobile-intro__status[data-tone="soon"] {
    background:
      linear-gradient(
        115deg,
        rgb(255 255 255 / 24%),
        rgb(193 139 66 / 18%)
      ),
      var(--glass-fill);
  }

  .brand {
    width: 118px;
    flex: 0 0 auto;
  }

  .brand img {
    width: 100%;
    height: 44px;
    object-fit: contain;
  }

  .desktop-nav,
  .header-consult,
  .menu-toggle,
  .mobile-menu {
    display: none;
  }

  /* Horario superpuesto sobre la misma barra */
  .schedule-shell {
    position: fixed;
    top: 14px;
    right: 14px;
    left: auto;
    width: 164px;
  }

  .schedule-pill {
    width: 100%;
    height: 66px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 8px 6px;
    border: 0;
    border-radius: 0 16px 16px 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .schedule-pill.liquid-glass::before,
  .schedule-pill.liquid-glass::after,
  .schedule-pill::before,
  .schedule-pill::after {
    display: none;
    content: none;
  }

  .schedule-pill.is-open,
  .schedule-pill.is-closed,
  .schedule-pill.is-soon {
    background: transparent;
  }

  .schedule-pill:hover,
  .schedule-pill:active {
    transform: none;
  }

  .schedule-copy {
    min-width: 0;
    align-items: center;
    gap: 2px;
    text-align: center;
  }

  .schedule-copy strong {
    display: block;
    font-size: 12px;
    line-height: 1.1;
  }

  .schedule-copy small {
    display: block;
    max-width: 126px;
    overflow: visible;
    font-size: 9px;
    line-height: 1.18;
    text-overflow: clip;
    white-space: normal;
  }

  .schedule-pill > i {
    font-size: 10px;
  }

  .schedule-popover {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: min(350px, calc(100vw - 28px));
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
  }

  /* ==============================================================
     LOGO 3D
     ============================================================== */

  .mobile-hero-logo {
    --logo-turn-left: -6deg;
    --logo-turn-right: 3deg;
    --logo-turn-duration: 8s;

    position: relative;
    display: grid;
    width: min(100%, 390px);
    aspect-ratio: 4 / 3;
    margin: 4px auto 0;
    place-items: center;
    perspective: 1450px;
    perspective-origin: 50% 50%;
  }

  .mobile-hero-logo__coin {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    backface-visibility: visible;
    animation:
      delnorte-standing-coin
      var(--logo-turn-duration)
      cubic-bezier(0.45, 0.05, 0.55, 0.95)
      infinite;
    will-change: transform;
  }

  .mobile-hero-logo__image,
  .mobile-hero-logo__letter-shadow,
  .mobile-hero-logo__reflection {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Una sola sombra de las letras, cercana al logo para evitar copias separadas.
     La máscara usa el mismo encuadre de 2000 × 1300 dentro de 2160 × 1620. */
  .mobile-hero-logo__letter-shadow {
    z-index: 1;
    transform: translate3d(0, 1px, 0);
    filter: blur(1.2px);
    pointer-events: none;
  }

  .mobile-hero-logo__letter-shadow::before {
    position: absolute;
    inset: 0;
    content: "";
    background: rgb(42 33 26 / 36%);
    -webkit-mask: url("assets/letras.webp") center / 92.592593% 80.246914% no-repeat;
    mask: url("assets/letras.webp") center / 92.592593% 80.246914% no-repeat;
  }

  .mobile-hero-logo__image {
    z-index: 6;
    object-fit: contain;
    transform: translateZ(18px);
    filter: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  .mobile-hero-logo__reflection {
    pointer-events: none;
    -webkit-mask:
      var(--mobile-logo-mask)
      center / contain no-repeat;
    mask:
      var(--mobile-logo-mask)
      center / contain no-repeat;
  }

  .mobile-hero-logo__reflection {
    z-index: 7;
    background:
      radial-gradient(
        circle at 31% 20%,
        rgb(255 255 255 / 52%),
        transparent 23%
      ),
      linear-gradient(
        105deg,
        transparent 34%,
        rgb(255 255 255 / 45%) 47%,
        rgb(255 255 255 / 9%) 54%,
        transparent 64%
      );
    background-size: 100% 100%, 230% 100%;
    mix-blend-mode: screen;
    opacity: 0.36;
    transform: translateZ(18px);
    animation:
      delnorte-reflection-turn
      var(--logo-turn-duration)
      ease-in-out
      infinite;
  }

  .mobile-hero-logo__shadow {
    position: absolute;
    bottom: 5%;
    right: auto;
    left: 6%;
    z-index: 0;
    width: 60%;
    height: 10%;
    border-radius: 50%;
    background:
      radial-gradient(
        ellipse at center,
        rgb(55 43 34 / 20%) 0%,
        rgb(55 43 34 / 9%) 40%,
        transparent 72%
      );
    filter: none;
    opacity: .65;
    transform: scaleX(1);
    transform-origin: center;
    pointer-events: none;
    animation:
      delnorte-shadow-turn
      var(--logo-turn-duration)
      cubic-bezier(0.45, 0.05, 0.55, 0.95)
      infinite;
  }
}

@media (max-width: 700px) {
  .mobile-hero-logo {
    --logo-turn-left: -5deg;
    --logo-turn-right: 2deg;
    --logo-turn-duration: 8s;
  }
}

@keyframes delnorte-standing-coin {
  0%,
  100% {
    transform: rotateY(var(--logo-turn-left));
  }

  50% {
    transform: rotateY(var(--logo-turn-right));
  }
}

@keyframes delnorte-reflection-turn {
  0%,
  100% {
    background-position: center, 135% 0;
    opacity: 0.25;
  }

  50% {
    background-position: center, -35% 0;
    opacity: 0.43;
  }
}

@keyframes delnorte-shadow-turn {
  0%,
  100% {
    opacity: .65;
    transform: scaleX(.96);
  }

  50% {
    opacity: .7;
    transform: scaleX(1);
  }
}

/* ================================================================
   AJUSTE FINAL DEL LOGO 3D Y DIVISOR
   ================================================================ */

@media (max-width: 960px) {
  /* Giro más perceptible sin desplazar el logo */
  .mobile-hero-logo {
    --logo-turn-left: -12deg;
    --logo-turn-right: 7deg;
    --logo-turn-duration: 8s;

    perspective: 950px;
  }

  .mobile-hero-logo__coin {
    transform-origin: 50% 50%;
    animation:
      delnorte-standing-coin
      var(--logo-turn-duration)
      cubic-bezier(0.45, 0.05, 0.55, 0.95)
      infinite;
  }

  /* Línea antes de “¿En qué podemos ayudarte?” */
  .home-services {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid rgb(139 117 96 / 18%);
  }
}

/* ================================================================
   AJUSTES VISUALES FINALES
   ================================================================ */

/* Fondo general más cálido */
/* Fondo fijo: blanco superior y arena inferior */

body::before {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 22%,
      #faf7f4 44%,
      #eee5dc 72%,
      #dfcfc1 100%
    );
}

@media (max-width: 960px) {
  /* Lugares vinculados visualmente con el logo */
  .home-copy > .eyebrow {
    width: 100%;
    margin: 0 0 -10px;
    color: var(--bronze-deep);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.8px;
    text-align: center;
  }

  /* Logo ligeramente más pequeño */
  .mobile-hero-logo {
    width: min(92%, 350px);
    margin: -2px auto -8px;
  }

  /* Texto situado debajo del logo */
  .home-lead {
    max-width: 350px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
  }

  /* Separación lateral de los títulos de Inicio */
  .home-services > h2,
  .mobile-home-about > h2 {
    padding-right: 8px;
    padding-left: 8px;
  }

  /* Título de Sobre nosotros */
  .mobile-home-about > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-home-about > h2 i {
    flex: 0 0 auto;
    color: var(--bronze);
    font-size: 18px;
  }

  /* Texto del horario dentro del header */
  .schedule-copy strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .schedule-copy small {
    max-width: 128px;
    font-size: 10px;
    line-height: 1.2;
  }

  /* Ventana desplegable del horario */
  .schedule-popover {
    padding: 16px;
    color: var(--ink);
    border: 1px solid rgb(255 255 255 / 62%);
    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 76%),
        rgb(235 226 218 / 68%)
      );
    box-shadow:
      0 18px 38px rgb(69 51 38 / 15%),
      inset 0 1px 0 rgb(255 255 255 / 76%);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
  }

  .schedule-popover__heading {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    padding: 0 8px;
  }

  .schedule-popover__heading span {
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
  }

  /* Filas del horario */
  .schedule-list {
    gap: 3px;
  }

  .schedule-list div {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgb(21 20 18 / 72%);
    font-size: 12px;
    line-height: 1.35;
  }

  .schedule-list dt {
    font-weight: 500;
  }

  /* Día actual con efecto cristal */
  .schedule-list div.is-today {
    border-color: rgb(255 255 255 / 74%);
    border-radius: 10px;
    background:
      linear-gradient(
        135deg,
        rgb(255 255 255 / 52%),
        rgb(255 255 255 / 18%)
      );
    color: var(--ink);
    font-weight: 600;
    box-shadow:
      0 7px 16px rgb(77 57 42 / 10%),
      inset 0 1px 0 rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ================================================================
   MODAL DE HORARIO Y FOOTER DE INICIO
   ================================================================ */

@media (max-width: 960px) {
  /* Modal con un único borde de cristal */
  .schedule-popover {
    border: 0;
  }

  .schedule-popover__heading {
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    }

    .schedule-popover__heading small {
    display: block;
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    }

  /* Día seleccionado sin borde grueso */
  .schedule-list div.is-today {
    border: 0;
    background:
      linear-gradient(
        135deg,
        rgb(255 255 255 / 42%),
        rgb(255 255 255 / 14%)
      );
    box-shadow:
      inset 0 0 0 0.5px rgb(255 255 255 / 58%),
      inset 0 1px 0 rgb(255 255 255 / 55%),
      0 6px 14px rgb(77 57 42 / 8%);
  }

  /* Icono de Sobre nosotros */
  .mobile-home-about > h2 i {
    color: var(--bronze);
    font-size: 19px;
  }

  /* Footer común sin logotipo */
  .site-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 0;
    padding: 16px 8px 4px;
    border-top: 1px solid rgb(139 117 96 / 18%);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }

  .page-panel--home .site-footer,
  .page-panel--services .site-footer {
    margin-top: 26px;
  }

  .site-footer .footer-animated-logo {
    display: none;
  }

  .site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
  }

  .site-footer .footer-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .site-footer a {
    transition: color 0.2s ease;
  }

  .site-footer a:hover {
    color: var(--ink);
  }
}

/* ================================================================
   BORDE DEL HEADER SEGÚN EL ESTADO DEL DESPACHO
   ================================================================ */

@media (max-width: 960px) {
  .site-header.is-open::before {
    background: rgb(72 133 89 / 52%);
  }

  .site-header.is-closed::before {
    background: rgb(158 67 64 / 50%);
  }

  .site-header.is-soon::before {
    background: rgb(174 119 45 / 50%);
  }
}

/* ================================================================
   BORDE Y TEXTO DEL HEADER MÓVIL
   ================================================================ */

@media (max-width: 960px) {
  .site-header.is-open::before,
  .mobile-intro__status[data-tone="open"]::before {
    background: rgb(91 151 107 / 18%);
  }

  .site-header.is-closed::before,
  .mobile-intro__status[data-tone="closed"]::before {
    background: rgb(178 89 84 / 17%);
  }

  .site-header.is-soon::before,
  .mobile-intro__status[data-tone="soon"]::before {
    background: rgb(193 139 66 / 18%);
  }

  .schedule-copy small {
    max-width: 128px;
    font-size: 11px;
    line-height: 1.2;
  }
}