/* ================================================================
   INICIO PARA ESCRITORIO
   Solo se aplica a partir de 961px.
   ================================================================ */

@media (min-width: 961px) {
  /* ==============================================================
     HEADER
     ============================================================== */

  .site-header {
    top: 20px;
    width: min(1320px, calc(100% - 48px));
    height: 82px;
    grid-template-columns:
      180px
      minmax(560px, 1fr)
      220px;
    gap: 18px;
    padding: 10px 14px 10px 18px;
    border: 0;
    border-radius: 18px;
    background: var(--glass-fill);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 58%),
      0 22px 46px rgb(69 51 38 / 12%);
    transition:
      background 0.35s ease,
      box-shadow 0.35s ease;
  }

  .site-header.is-open {
    background:
      linear-gradient(
        115deg,
        rgb(255 255 255 / 28%),
        rgb(91 151 107 / 17%)
      ),
      var(--glass-fill);
  }

  .site-header.is-closed {
    background:
      linear-gradient(
        115deg,
        rgb(255 255 255 / 28%),
        rgb(178 89 84 / 16%)
      ),
      var(--glass-fill);
  }

  .site-header.is-soon {
    background:
      linear-gradient(
        115deg,
        rgb(255 255 255 / 28%),
        rgb(193 139 66 / 17%)
      ),
      var(--glass-fill);
  }

  /* Borde del header según el estado del despacho */

  .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%);
  }

  .brand {
    width: 158px;
  }

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

  /* Navegación */

  .desktop-nav {
    width: min(100%, 690px);
    min-width: 0;
    justify-self: center;
    grid-template-columns:
      repeat(5, minmax(92px, 1fr));
    gap: 5px;
  }

  .desktop-nav a {
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    color: rgb(21 20 18 / 68%);
    font-size: 14px;
    font-weight: 500;
  }

  .desktop-nav a:hover,
  .desktop-nav a[aria-current="page"] {
    color: var(--ink);
  }

  .desktop-nav__indicator {
    top: 2px;
    bottom: 2px;
    border: 0;
    border-radius: 11px;
    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 52%),
        rgb(255 255 255 / 17%)
      );
    box-shadow:
      inset 0 0 0 0.5px
        rgb(255 255 255 / 66%),
      inset 0 1px 0
        rgb(255 255 255 / 72%),
      0 8px 18px
        rgb(77 57 42 / 8%);
  }

  .header-consult {
    display: none !important;
  }

  /* ==============================================================
     HORARIO INTEGRADO
     ============================================================== */

  .schedule-shell {
    position: fixed;
    top: 20px;
    right:
      max(
        36px,
        calc((100vw - 1320px) / 2 + 14px)
      );
    left: auto;
    z-index: 140;
    width: 220px;
  }

  .schedule-pill {
    width: 100%;
    height: 82px;
    grid-template-columns:
      minmax(0, 1fr)
      14px;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 0;
    border-radius: 0 18px 18px 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: 3px;
    text-align: center;
  }

  .schedule-copy strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
  }

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

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

  /* Modal del horario */

  .schedule-popover {
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    width: 350px;
    padding: 16px;
    border: 0;
    color: var(--ink);
    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 76%),
        rgb(235 226 218 / 68%)
      );
    box-shadow:
      inset 0 0 0 0.5px
        rgb(255 255 255 / 68%),
      inset 0 1px 0
        rgb(255 255 255 / 76%),
      0 18px 38px
        rgb(69 51 38 / 15%);
    backdrop-filter:
      blur(24px)
      saturate(125%);
    -webkit-backdrop-filter:
      blur(24px)
      saturate(125%);
  }

  .schedule-popover__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    padding: 0 8px;
  }

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

  .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;
  }

  .schedule-list {
    gap: 3px;
  }

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

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

  .schedule-list div.is-today {
    background:
      linear-gradient(
        135deg,
        rgb(255 255 255 / 42%),
        rgb(255 255 255 / 14%)
      );
    color: var(--ink);
    font-weight: 600;
    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%);
  }

  /* ==============================================================
     INICIO
     ============================================================== */

  .page-panel--home {
    padding-top: 122px;
  }

  .home-layout {
    width: min(1240px, calc(100% - 64px));
    min-height: calc(100dvh - 122px);
    grid-template-columns:
      minmax(0, 1fr)
      minmax(430px, 0.92fr);
    grid-template-rows:
      auto
      auto
      auto
      auto
      auto
      auto;
    align-content: center;
    gap: 0 64px;
    padding: 46px 0 30px;
  }

  .home-copy {
    display: contents;
  }

  .home-copy > .eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    z-index: 10;
    width: 100%;
    margin: 0;
    padding-top: 4px;
    color: var(--bronze-deep);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-align: center;
  }

  .home-copy h1 {
    grid-column: 1;
    grid-row: 2;
    max-width: 690px;
    margin: 0;
    font-size: clamp(44px, 3.5vw, 64px);
    font-weight: 400;
    line-height: 1.1;
    white-space: normal;
  }

  .home-lead {
    grid-column: 1;
    grid-row: 3;
    max-width: 540px;
    margin: 24px 0 0;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.55;
    text-align: left;
  }

  .home-actions {
    grid-column: 1;
    grid-row: 4;
    margin-top: 30px;
  }

  .home-actions .button {
    min-height: 56px;
    padding: 0 24px;
  }

  .home-actions .text-link {
    display: none;
  }

  /* ==============================================================
     LOGO COMPLETO CON EFECTO 3D
     ============================================================== */

  .mobile-hero-logo {
    --logo-turn-left: -12deg;
    --logo-turn-right: 7deg;
    --logo-turn-duration: 8s;

    position: relative;
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    justify-self: center;
    display: grid;
    width: min(100%, 540px);
    aspect-ratio: 4 / 3;
    margin: 0;
    place-items: center;
    perspective: 950px;
    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__depth,
  .mobile-hero-logo__reflection {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .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__depth,
  .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__depth--back {
    z-index: 1;
    background: #4e3b2f;
    opacity: 0.35;
    transform: translateZ(-24px);
  }

  .mobile-hero-logo__depth--middle {
    z-index: 2;
    background:
      linear-gradient(
        90deg,
        #5d4636,
        #b99b82 48%,
        #47362c
      );
    opacity: 0.4;
    transform: translateZ(-12px);
  }

  .mobile-hero-logo__depth--front {
    z-index: 3;
    background:
      linear-gradient(
        90deg,
        #725846,
        #d6bda7 46%,
        #604938
      );
    opacity: 0.32;
    transform: translateZ(4px);
  }

  .mobile-hero-logo__glass-disc {
    position: absolute;
    top: 9.8%;
    left: 3.7%;
    z-index: 0;
    width: 60.2%;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 50%;
    background:
      radial-gradient(
        circle at 28% 17%,
        rgb(255 255 255 / 30%),
        transparent 35%
      ),
      linear-gradient(
        135deg,
        rgb(255 255 255 / 14%),
        rgb(103 72 51 / 5%)
      );
    box-shadow:
      inset 2px 2px 3px
        rgb(255 255 255 / 42%),
      inset -7px -5px 18px
        rgb(89 60 41 / 10%);
    transform: translateZ(-30px);
    backdrop-filter:
      blur(10px)
      saturate(145%);
    -webkit-backdrop-filter:
      blur(10px)
      saturate(145%);
  }

  .mobile-hero-logo__glass-edge {
    position: absolute;
    top: 9.8%;
    left: 3.7%;
    z-index: 4;
    width: 60.2%;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 50%;
    box-shadow:
      inset 3px 2px 4px
        rgb(255 255 255 / 34%),
      inset -2px -2px 6px
        rgb(70 44 28 / 15%);
    pointer-events: none;
    transform: translateZ(10px);
  }

  .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(24px);
    animation:
      delnorte-reflection-turn
      var(--logo-turn-duration)
      ease-in-out
      infinite;
  }

  .mobile-hero-logo__shadow {
    position: absolute;
    bottom: 5%;
    left: 8%;
    z-index: 0;
    width: 84%;
    height: 8%;
    border-radius: 50%;
    background:
      radial-gradient(
        ellipse at center,
        rgb(35 29 25 / 38%) 0%,
        rgb(35 29 25 / 25%) 34%,
        rgb(35 29 25 / 10%) 64%,
        transparent 82%
      );
    filter: blur(10px);
    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;
  }

  .compass-visual {
    display: none;
  }

  /* ==============================================================
     SERVICIOS DE INICIO
     ============================================================== */

  .home-services {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 34px;
    padding-top: 30px;
    border-top:
      1px solid rgb(139 117 96 / 18%);
  }

  .home-services h2 {
    margin: 0 0 18px;
    padding: 0 8px;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.3;
  }

  .service-choice-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .service-choice {
    min-width: 0;
    min-height: 146px;
    grid-template-columns:
      50px
      minmax(0, 1fr)
      auto;
    align-items: center;
    gap: 20px;
    padding: 26px 28px;
    border: 0;
    border-radius: 16px;
    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 50%),
        rgb(255 255 255 / 16%)
      );
    box-shadow:
      inset 0 0 0 0.5px
        rgb(255 255 255 / 70%),
      inset 0 1px 0
        rgb(255 255 255 / 72%),
      0 18px 36px
        rgb(69 51 38 / 9%);
  }

  .service-choice > i {
    align-self: center;
    color: var(--bronze);
    font-size: 28px;
  }

  .service-choice__copy {
    align-self: center;
  }

  .service-choice__copy strong {
    font-size: 21px;
    font-weight: 500;
  }

  .service-choice__copy small {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
  }

  .service-choice__link {
    font-size: 11px;
  }

  /* Sobre nosotros continúa como página individual */

  .mobile-home-about {
    display: none;
  }

  /* ==============================================================
     FOOTER GENERAL
     ============================================================== */

  .page-panel--home .site-footer {
    grid-column: 1 / -1;
    grid-row: 6;
    margin-top: 30px;
  }
}

/* ================================================================
   ESCRITORIOS ESTRECHOS
   ================================================================ */

@media (min-width: 961px) and (max-width: 1160px) {
  .site-header {
    top: 16px;
    width: calc(100% - 32px);
    height: 78px;
    grid-template-columns:
      145px
      minmax(500px, 1fr)
      180px;
    gap: 12px;
    padding: 8px 12px 8px 16px;
  }

  .brand {
    width: 136px;
  }

  .desktop-nav {
    width: 100%;
    grid-template-columns:
      repeat(5, minmax(72px, 1fr));
    gap: 2px;
  }

  .desktop-nav a {
    padding: 0 6px;
    font-size: 12px;
  }

  .schedule-shell {
    top: 16px;
    right: 28px;
    width: 180px;
  }

  .schedule-pill {
    height: 78px;
  }

  .schedule-copy small {
    max-width: 138px;
    font-size: 9px;
  }

  .schedule-copy strong {
    font-size: 13px;
  }

  .page-panel--home {
    padding-top: 110px;
  }

  .home-layout {
    width: min(1100px, calc(100% - 56px));
    min-height: calc(100dvh - 110px);
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 0.85fr);
    gap: 0 32px;
    padding-top: 38px;
  }

  .home-copy h1 {
    font-size: 45px;
  }

  .home-lead {
    font-size: 16px;
  }

  .mobile-hero-logo {
    width: min(100%, 430px);
  }

  .service-choice {
    grid-template-columns:
      42px
      minmax(0, 1fr);
    gap: 16px;
    padding: 22px 24px;
  }

  .service-choice__link {
    grid-column: 2;
  }
}

/* ================================================================
   AJUSTES FINALES DEL HEADER Y ALINEACIÓN DEL INICIO
   ================================================================ */

@media (min-width: 961px) {
  /* Borde más suave, usando el tono del degradado interior */

  .site-header.is-open::before {
    background: rgb(91 151 107 / 17%);
  }

  .site-header.is-closed::before {
    background: rgb(178 89 84 / 16%);
  }

  .site-header.is-soon::before {
    background: rgb(193 139 66 / 17%);
  }

  /* Texto del horario */

  .schedule-copy strong {
    font-size: 14px;
  }

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

  /* Nueva estructura de la cabecera de Inicio */

  .home-layout {
    grid-template-rows:
      auto
      auto
      auto
      auto
      auto;
  }

  /* Ubicaciones centradas sobre el logo */

  .home-copy > .eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    z-index: 10;
    width: 100%;
    margin: 0;
    padding-top: 18px;
    color: var(--bronze-deep);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2.2px;
    text-align: center;
  }

  /* Titular alineado con las ubicaciones */

  .home-copy h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding-top: 18px;
  }

  .home-lead {
    grid-column: 1;
    grid-row: 2;
  }

  .home-actions {
    grid-column: 1;
    grid-row: 3;
  }

  /* Logo ocupando toda la parte superior derecha */

  .mobile-hero-logo {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  /* Recolocación de servicios y footer */

  .home-services {
    grid-row: 4;
  }

  .page-panel--home .site-footer {
    grid-row: 5;
  }
}

/* Ajustes para ordenadores estrechos */

@media (min-width: 961px) and (max-width: 1160px) {
  .schedule-copy strong {
    font-size: 13px;
  }

  .schedule-copy small {
    max-width: 138px;
    font-size: 10px;
  }
}

/* Brillo de las tarjetas de Inicio */

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .service-choice {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .service-choice::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -34%;
    z-index: 1;
    width: 22%;
    height: 190%;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(
      90deg,
      transparent,
      rgb(255 255 255 / 34%),
      transparent
    );
  }

  .service-choice:hover::after {
    animation:
      home-service-choice-shine 0.85s ease-out 1;
  }

  .service-choice__link i,
  .service-choice:hover .service-choice__link i {
    transform: none;
    transition: none;
  }
}

@keyframes home-service-choice-shine {
  0% {
    left: -34%;
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    left: 116%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-choice:hover::after {
    animation: none;
  }
}

/* Texto igualado con las tarjetas de Servicios */

@media (min-width: 961px) {
  .service-choice__copy {
    gap: 8px;
  }

  .service-choice__copy strong {
    font-size: 22px;
    line-height: 1.25;
  }

  .service-choice__copy small {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
  }

  .service-choice__link {
    gap: 18px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ================================================================
   FOOTER GENERAL PARA ESCRITORIO
   ================================================================ */

@media (min-width: 961px) {
  .app-viewport .page-panel {
    scrollbar-gutter: stable both-edges;
  }

  .contact-layout {
    padding-bottom: 18px;
  }

  .about-layout,
  .page-panel--blog .section-layout {
    row-gap: 42px;
    padding-bottom: 18px;
  }

  .page-panel--services .site-footer {
    margin-top: 30px;
  }

  .site-footer {
    position: relative;
    left: 50%;
    width: min(1280px, calc(100vw - 64px));
    transform: translateX(-50%);
    padding-top: 16px;
    font-size: 13px;
    line-height: 1.55;
  }

  .site-footer .footer-links {
    gap: 32px;
  }

  .site-footer .footer-copy {
    gap: 6px;
  }

  .footer-animated-logo {
    width: 164px;
  }

  .footer-logo-frame {
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 720ms var(--logo-ease);
  }

  .footer-animated-logo.is-active .footer-logo-frame,
  .footer-animated-logo:focus-visible .footer-logo-frame {
    transform: scale(.88);
  }

  .footer-animated-logo.is-active .footer-logo-layer--arrows,
  .footer-animated-logo:focus-visible .footer-logo-layer--arrows {
    animation:
      footer-arrows-return
      720ms
      var(--logo-ease)
      both;
  }
}

@keyframes footer-arrows-return {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform:
      translateX(-5.5%)
      rotate(-16deg)
      scale(.88);
  }

  68% {
    opacity: 1;
    filter: blur(0);
    transform:
      translateX(0)
      rotate(9deg)
      scale(1);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translateX(0)
      rotate(0)
      scale(1);
  }
}

@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .footer-logo-frame {
    transition: none;
  }

  .footer-animated-logo.is-active .footer-logo-layer--arrows,
  .footer-animated-logo:focus-visible .footer-logo-layer--arrows {
    animation: none;
  }
}