/* Todo el contenido y la navegación de escritorio conservan su presentación. */
.menu-movil-extra, .controles-moviles { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  .boton-menu { min-height: 44px; }
  .menu-movil-extra { display: block; }
  body.menu-movil-bloqueado { position: fixed; width: 100%; overflow: hidden; }
  header.menu-movil-abierto { background: #050507; border-bottom-color: rgb(255 255 255 / 8%); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .boton-menu { border-radius: 12px; }
  .boton-menu[aria-expanded="true"] { border-color: rgb(255 255 255 / 26%); background: rgb(255 255 255 / 9%); }
  /* Con el menú abierto la barra flotante sólo taparía los últimos accesos. */
  body.menu-movil-bloqueado .controles-moviles { display: none; }
  #navegacion {
    visibility: hidden;
    height: calc(100dvh - var(--alto-barra, 80px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 16%) transparent;
    padding: 22px 18px calc(30px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    /* Negro de marca con el acento rojo entrando por arriba, como la portada. */
    background:
      radial-gradient(125% 55% at 100% 0%, rgb(225 29 42 / 15%), transparent 62%),
      radial-gradient(110% 45% at 0% 100%, rgb(59 130 246 / 10%), transparent 60%),
      #07070a;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #navegacion.abierto { visibility: visible; opacity: 1; transform: none; }
  /* Cada bloque entra un poco después que el anterior. */
  #navegacion > * { opacity: 0; transform: translateY(12px); transition: opacity 240ms ease, transform 380ms cubic-bezier(.22, .9, .3, 1); }
  #navegacion.abierto > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 26ms); }

  .menu-movil-intro, .menu-movil-rotulo, .menu-movil-soluciones, .menu-movil-acciones { grid-column: 1 / -1; }
  .menu-movil-intro p { margin: 0 0 4px; font: 600 1.72rem/1.16 var(--titulos); letter-spacing: -.03em; }
  .menu-movil-intro span { display: block; color: var(--rojo); }
  .menu-movil-rotulo {
    margin: 16px 0 2px;
    color: #6d7480; font-family: var(--mono); font-size: .6rem; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
  }
  .menu-movil-soluciones, .menu-movil-acciones { display: grid; gap: 8px; }

  #navegacion a {
    display: flex; align-items: center; gap: 12px; min-height: 46px;
    padding: 11px 14px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 13px;
    background: rgb(255 255 255 / 4%); color: #e9ecf1;
    font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none;
    transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
  }
  #navegacion a:hover, #navegacion a:focus-visible { border-color: rgb(225 29 42 / 55%); background: rgb(225 29 42 / 10%); }
  #navegacion a:active { transform: scale(.985); }
  /* Los seis enlaces sueltos del nav: a dos columnas y con el tono del menú de escritorio. */
  #navegacion > a {
    position: relative; border-radius: 999px;
    justify-content: center; min-height: 44px; padding: 11px 8px;
    color: #b9c0cb; font-family: var(--mono); font-size: .67rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
  }
  /* La sección en la que estás queda señalada también dentro del menú. */
  #navegacion > a.activo { border-color: rgb(255 255 255 / 16%); background: rgb(255 255 255 / 10%); color: #fff; }
  #navegacion > a.activo::after {
    content: ''; position: absolute; bottom: 5px; left: 50%;
    width: 4px; height: 4px; border-radius: 50%; background: var(--rojo);
    transform: translateX(-50%);
  }
  #navegacion b {
    display: grid; place-items: center; flex-shrink: 0;
    width: 22px; height: 22px; margin-left: auto; padding-bottom: 2px;
    border-radius: 50%; background: rgb(255 255 255 / 6%);
    color: #949ba7; font-size: 15px; font-weight: 400; line-height: 1;
    transition: background 220ms ease, color 220ms ease;
  }
  #navegacion a:hover b, #navegacion a:focus-visible b { background: rgb(225 29 42 / 30%); color: #fff; }

  #navegacion .menu-movil-soluciones a { --acento: var(--azul); position: relative; gap: 13px; padding-left: 15px; overflow: hidden; }
  /* Filete del acento, hermano del borde superior de colores de las tarjetas. */
  #navegacion .menu-movil-soluciones a::before {
    content: ''; position: absolute; top: 11px; bottom: 11px; left: 0;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--acento);
  }
  #navegacion .menu-movil-soluciones a:nth-child(3n + 2) { --acento: var(--cian); }
  #navegacion .menu-movil-soluciones a:nth-child(3n) { --acento: var(--rojo); }
  #navegacion svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--rojo); }
  #navegacion .menu-movil-soluciones svg, #navegacion .menu-movil-acciones svg {
    box-sizing: content-box; padding: 8px;
    border: 1px solid rgb(255 255 255 / 10%); border-radius: 12px;
    background: rgb(255 255 255 / 5%);
  }
  #navegacion .menu-movil-soluciones svg { color: var(--acento); }

  #navegacion .menu-movil-cotizar {
    display: grid; justify-items: start; gap: 3px;
    margin-top: 4px; padding: 15px 16px;
    border-color: rgb(225 29 42 / 42%);
    background: linear-gradient(115deg, rgb(225 29 42 / 24%), rgb(225 29 42 / 7%) 58%, rgb(255 255 255 / 4%));
    color: #f3f5f8; font-size: .78rem; font-weight: 300;
  }
  .menu-movil-cotizar strong { color: #ff5a66; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
  .controles-moviles {
    display: block;
    --acento-barra: var(--rojo);
    --resorte: cubic-bezier(.34, 1.3, .38, 1);
  }

  /* Píldora flotante con los accesos sueltos, sin cápsula propia: el activo
     pasa a blanco y lleva un punto rojo bajo el rótulo. La curva que
     navegacion-movil.js sigue moviendo ya no se muestra. */
  .barra-movil {
    position: fixed; z-index: 950;
    left: 12px; right: 12px; bottom: calc(11px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: stretch;
    height: 66px; padding: 5px;
    border-radius: 33px;
    /* Algo transparente: deja ver la página detrás. Sin backdrop-filter, que
       en una barra fija se recalcula en cada cuadro del desplazamiento. */
    background: rgb(19 19 22 / 72%);
    box-shadow: 0 14px 34px #000c, inset 0 0 0 1px #ffffff12;
  }
  .barra-curva { display: none; }

  .barra-movil a {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
    padding-bottom: 6px; overflow: hidden;
    border-radius: 999px;
    color: #8f959f; font-size: .63rem; letter-spacing: .01em;
    transition: color 300ms ease, transform 160ms ease;
    isolation: isolate;
  }
  /* Al tocar, el círculo rojo del menú de escritorio sube desde abajo y se
     desvanece. Un toque dura muy poco para verlo con :active, así que
     navegacion-movil.js le pone .pintado al acceso y la animación corre
     entera aunque el dedo ya se haya levantado. */
  .barra-movil a::before {
    content: ''; position: absolute; bottom: 0; left: 50%; z-index: -1;
    width: calc(100% + 40px); aspect-ratio: 1; border-radius: 50%;
    background: var(--rojo);
    opacity: 0;
    transform: translate(-50%, 50%) scale(0);
    pointer-events: none;
  }
  .barra-movil a.pintado::before { animation: pintar-acceso 620ms cubic-bezier(.22, 1, .36, 1); }
  @keyframes pintar-acceso {
    0% { opacity: 1; transform: translate(-50%, 50%) scale(0); }
    45% { opacity: 1; transform: translate(-50%, 50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 50%) scale(1); }
  }
  .barra-movil a.pintado { color: #fff; }
  .barra-movil a:active { transform: scale(.96); }
  .barra-movil a::after {
    content: ''; position: absolute; bottom: 5px; left: 50%;
    width: 4px; height: 4px; border-radius: 50%; background: var(--rojo);
    transform: translateX(-50%) scale(0);
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
  }
  .barra-movil a svg { width: 21px; height: 21px; }
  .barra-movil a:not(.activo).atajo-cotizar svg { color: #d0555e; }
  .barra-movil a.activo { color: #fff; font-weight: 500; }
  .barra-movil a.activo::after { transform: translateX(-50%) scale(1); }
  .barra-movil a.pintado::after { background: #fff; }

  .progreso-movil {
    position: fixed; z-index: 940; right: 2px; top: 50%; transform: translateY(-50%);
    display: grid; padding: 4px 0;
    border: 0; border-radius: 0; background: transparent;
  }
  /* La línea y los puntos flotan sobre el contenido sin cubrirlo. */
  .progreso-movil::before {
    content: ''; position: absolute; z-index: -1; top: 18px; bottom: 18px; left: 50%;
    width: 1px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgb(190 212 232 / 55%) 10%, rgb(190 212 232 / 55%) 90%, transparent);
  }
  .progreso-movil a { position: relative; display: grid; place-items: center; width: 24px; height: 36px; }
  /* Nombre del módulo: sólo aparece al tocar el rail. */
  .progreso-movil a b {
    position: absolute; right: calc(100% + 1px); top: 50%;
    padding: 4px 8px; border: 1px solid rgb(190 212 232 / 20%); border-radius: 999px;
    /* Fondo opaco a propósito: un `backdrop-filter` en los ocho rótulos hacía
       trabajar al compositor en cada fotograma del desplazamiento. */
    background: #060b13;
    color: rgb(216 229 242 / 78%);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .54rem; font-weight: 500; letter-spacing: .14em; line-height: 1;
    text-transform: uppercase; white-space: nowrap;
    opacity: 0; transform: translate(8px, -50%); pointer-events: none;
    transition: opacity 240ms ease, transform 380ms var(--resorte), color 260ms ease, border-color 260ms ease;
  }
  .progreso-movil.con-rotulos a b {
    opacity: 1; transform: translate(0, -50%);
    transition-delay: calc(var(--i, 0) * 22ms);
  }
  .progreso-movil a.activo b {
    border-color: rgb(22 140 255 / 55%); color: #fff;
    box-shadow: 0 0 12px rgb(22 140 255 / 28%);
  }
  .progreso-movil a span {
    display: block; width: 8px; height: 8px; border: 1px solid #d8e5f2; border-radius: 50%;
    background: rgb(0 8 16 / 38%);
    transition: background 260ms ease, box-shadow 260ms ease, transform 260ms ease;
  }
  .progreso-movil a.activo span {
    transform: scale(1.08); background: #168cff; border-color: #fff;
    box-shadow: 0 0 6px 2px rgb(22 140 255 / 90%), 0 0 14px 4px rgb(22 140 255 / 45%);
  }
  .controles-moviles a:focus-visible, .boton-menu:focus-visible { outline: 2px solid #ff6b76; outline-offset: -2px; }
  body:has(input:focus, textarea:focus, select:focus) .controles-moviles { display: none; }
}
@media (max-width: 900px) and (max-height: 540px) { .progreso-movil { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #navegacion, #navegacion > *, #navegacion.abierto > * { transition: none; transition-delay: 0s; }
  .barra-curva-grupo, .barra-movil a, .barra-movil a::before, .barra-movil a::after { transition: none; }
  /* El rojo aparece de golpe y sólo se desvanece, sin crecer. */
  .barra-movil a.pintado::before { animation-name: pintar-acceso-quieto; }
  @keyframes pintar-acceso-quieto {
    from { opacity: .9; transform: translate(-50%, 50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, 50%) scale(1); }
  }
  .progreso-movil a b { transition: none; transition-delay: 0s; }
  .progreso-movil.con-rotulos a b { transition-delay: 0s; }
}