/* =============================================================
   SEDEL · Navegación lateral
   Logo centrado en el header + menú vertical fijo sobre el margen
   izquierdo. Se carga DESPUÉS de style.css y no modifica el HTML.

   Para desactivar: quitar el <link> de esta hoja. El sitio vuelve
   al header horizontal sin ningún otro cambio.

   Se activa desde 1200px. Por debajo, el menú sigue funcionando
   como cajón lateral con el botón hamburguesa, igual que hoy.
   ============================================================= */

@media (min-width: 1200px) {

  :root { --sdl-rail-w: 176px; }

  /* ---------- HEADER: Cotizar · LOGO · Mi cuenta ----------
     Grilla de tres columnas: las laterales son 1fr, así el logo queda
     exactamente centrado sin importar el ancho de cada botón.
     display:contents en .site-header__actions hace que sus hijos sean
     items de la grilla, para poder ponerlos a cada lado del logo. */
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sdl-sp-5);
    justify-content: initial;
  }

  .site-header__actions { display: contents; }

  .site-header__logo {
    position: static;
    transform: none;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .site-header__logo img { height: 46px; }

  /* grid-row explícito: sin él, la auto-colocación manda Cotizar a una segunda fila */
  .site-header .btn--orange { grid-column: 1; grid-row: 1; justify-self: end; }
  .site-header .btn--login  { grid-column: 3; grid-row: 1; justify-self: start; }

  /* ---------- Los dos botones del header, iguales ----------
     Cotizar deja de ser naranja y vuelve al botón base (.btn), el mismo
     que usa «Iniciar sesión». El naranja del sitio queda para los CTA
     del cuerpo, que no compiten con el header. */
  .site-header .btn--orange {
    background: rgba(255,255,255,.05);
    border-color: var(--sdl-line-strong);
    color: var(--sdl-ink);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .site-header .btn--orange:hover {
    background: var(--sdl-orange-surface);
    border-color: var(--sdl-orange-surface);
    color: var(--sdl-ink);
  }
  /* El foco del botón naranja usaba un anillo blanco pensado para fondo
     naranja; sobre el fondo del header corresponde el del botón base. */
  .site-header .btn--orange:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sdl-bg), 0 0 0 4px rgba(215,81,62,.7);
  }

  /* Mismo ancho mínimo para que la simetría se lea de verdad */
  .site-header .btn--orange,
  .site-header .btn--login { min-width: 150px; }

  /* ---------- Los dos botones del header, iguales ----------
     Cotizar deja de ser naranja macizo y toma el mismo tratamiento de
     vidrio que «Iniciar sesión», para que el logo quede entre dos pesos
     iguales. Se revierte a los valores de .btn, que .btn--orange pisaba.
     Fuera del header, .btn--orange sigue naranja como siempre. */
  .site-header .btn--orange {
    background: rgba(255,255,255,.05);
    border-color: var(--sdl-line-strong);
    color: var(--sdl-ink);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .site-header .btn--orange:hover {
    background: var(--sdl-orange-surface);
    border-color: var(--sdl-orange-surface);
    color: var(--sdl-ink);
  }
  /* El foco vuelve al del resto del sitio: el de .btn--orange estaba
     pensado para fondo naranja macizo. */
  .site-header .btn--orange:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sdl-bg), 0 0 0 4px rgba(215,81,62,.7);
  }

  /* Mismo ancho mínimo: el logo queda entre dos bloques parejos */
  .site-header .btn--orange,
  .site-header .btn--login { min-width: 168px; }

  /* El menú está siempre visible: la hamburguesa no hace falta */
  .site-header .nav-toggle { display: none; }

  /* ---------- MENÚ LATERAL ---------- */
  .nav {
    position: fixed;
    /* Centrado vertical en la ventana. Se usa 50vh y no 50%: un porcentaje
       dentro de max() no resuelve de forma confiable en un elemento fixed
       (Chromium devuelve el otro operando según el alto de ventana). */
    top: max(calc(var(--sdl-nav-h) + 24px), 50vh);
    transform: translateY(-50%);
    left: 0;
    z-index: 98;
    width: var(--sdl-rail-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  /* Cada ítem: raya corta + etiqueta, como en el bosquejo */
  .nav > .nav__link,
  .nav__group > .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px 11px 0;
    font-family: var(--sdl-font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--sdl-text);
    white-space: nowrap;
    transition: color .2s ease, padding-left .2s ease;
  }

  .nav > .nav__link::before,
  .nav__group > .nav__link::before {
    content: "";
    width: 30px;
    height: 1.5px;
    background: var(--sdl-line-strong);
    flex: none;
    transition: width .28s ease, background-color .28s ease, box-shadow .28s ease;
  }

  .nav > .nav__link:hover,
  .nav__group > .nav__link:hover,
  .nav > .nav__link[aria-current],
  .nav__group:hover > .nav__link { color: var(--sdl-ink); }

  .nav > .nav__link:hover::before,
  .nav__group:hover > .nav__link::before { width: 46px; background: var(--sdl-orange); }

  .nav > .nav__link:focus-visible,
  .nav__group > .nav__link:focus-visible { outline: 2px solid var(--sdl-mint); outline-offset: 3px; }

  /* ---------- Ítem encendido ----------
     Lo pone nav-lateral.js: la página actual en páginas internas, o la
     sección que estás mirando en la home. */
  .nav > .nav__link.is-current,
  .nav__group > .nav__link.is-current { color: var(--sdl-ink); }

  .nav > .nav__link.is-current::before,
  .nav__group > .nav__link.is-current::before {
    width: 56px;
    background: var(--sdl-orange);
    box-shadow: 0 0 12px rgba(215,81,62,.55);
  }

  /* La flecha del desplegable apunta a la derecha */
  .nav__chev { transform: rotate(-90deg); font-size: 8px; opacity: .6; }

  /* ---------- SUBMENÚS: se abren hacia la derecha ---------- */
  .nav__group { position: relative; }

  .nav__menu {
    position: absolute;
    top: -14px;
    left: calc(var(--sdl-rail-w) - 4px);
    margin: 0;
    transform: none;
    /* El panel cae sobre el contenido y no bajo el header: necesita más cuerpo */
    background: rgba(20,28,24,.985);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 70px rgba(0,0,0,.55);
  }

  .nav__group:hover .nav__menu,
  .nav__group:focus-within .nav__menu { display: flex; }

  /* ---------- Corrimiento del contenido ----------
     Se fija el margen izquierdo de .wrap, no el padding de main.
     Con padding sobre main hay un bucle: al angostar main, .wrap se
     recentra y vuelve hacia la izquierda, metiéndose debajo del riel.
     Fijando el margen el cálculo es determinista.

     margen = el mayor entre «lo que ocupa el riel» y «el margen natural
     del contenido». En pantallas anchas gana el segundo y el contenido
     queda exactamente donde estaba sin el riel. */
  main .wrap,
  .site-footer .wrap,
  .breadcrumb .wrap {
    margin-left: max(
      calc(var(--sdl-rail-w) + 26px),
      calc((100vw - var(--sdl-wrap)) / 2)
    );
    margin-right: auto;
    width: min(
      var(--sdl-wrap),
      calc(100vw - var(--sdl-rail-w) - 26px - var(--sdl-gutter))
    );
  }
}

/* Desde 1760px el margen natural del contenido ya aloja el riel: se despega
   del borde y el contenido no se corre ni un píxel. */
@media (min-width: 1760px) {
  .nav { left: calc((100vw - var(--sdl-wrap)) / 2 - var(--sdl-rail-w) - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .nav > .nav__link,
  .nav__group > .nav__link,
  .nav > .nav__link::before,
  .nav__group > .nav__link::before { transition: none; }
}