/* ==========================================================================
   CHASQUI — responsive.css
   Puntos de quiebre, movimiento reducido, impresión y modo claro forzado.
   ========================================================================== */

/* ══ Escritorio ancho: aparece el riel de la ruta ═══════════════════════ */
@media (min-width:1400px){
  .riel{display:block}
}

/* ══ ≤ 1180px ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .navegacion__links a{padding:.5rem .55rem;font-size:.875rem}
  .tarifa{padding:1.7rem}
  .portada__bucle{width:min(112%,560px)}
}

/* ══ ≤ 1100px: la navegación se guarda en el menú ═══════════════════════ */
@media (max-width:1100px){
  .navegacion__links{display:none}
  .navegacion__burger{display:grid}
  .navegacion__acciones .boton--fantasma{display:none}
 
}

/* ══ ≤ 1020px: el hero se apila ═════════════════════════════════════════ */
@media (max-width:1020px){
  .portada__reja{grid-template-columns:1fr;gap:3rem}
  .portada__art{min-height:0;padding:0}
  .portada__bucle{width:min(calc(100% + 2 * var(--pad)),560px);margin-block:-8% -4%}
  .portada__bajada{max-width:58ch}
  .hoja--portada{left:2%;bottom:-10px}
  .hoja--mini{right:2%;top:-6px}

  .manifiesto{grid-template-columns:1fr;gap:2.8rem}
  .comparativa{transform:none;max-width:620px}

  .escenario{grid-template-columns:1fr}
  .escenario__plot{aspect-ratio:16/9}

  .tarifas{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
  .voces{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
}

/* ══ ≤ 900px: rejillas de dos columnas ══════════════════════════════════ */
@media (max-width:900px){
  :root{--pad:20px}

  .mosaico{grid-template-columns:repeat(2,1fr)}
  .tarjeta,
  .tarjeta--ancha,
  .tarjeta--ancha + .tarjeta,
  .tarjeta--ancha + .tarjeta + .tarjeta{grid-column:span 1;grid-row:auto}
  .tarjeta--ancha{grid-column:span 2}

  .dualidad{grid-template-columns:1fr}
  .credenciales{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:2.6rem}
  .postales{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}

  .piedepagina__reja{grid-template-columns:repeat(2,1fr);gap:2.2rem}
  .piedepagina__logo{grid-column:span 2}

  /* El notebook y el teléfono dejan de ser una fila: si no, flex los encoge */
  .dispositivos{
    flex-direction:column;
    align-items:center;
    padding-bottom:0;
    margin-bottom:0;
  }
  .dispositivos .portatil{width:100%;flex:none}
  .dispositivos .telefono--dispositivos{
    position:relative;
    right:auto;bottom:auto;
    align-self:flex-end;
    margin-right:4%;
    margin-top:-3.4rem;
    flex:none;
    transform:rotate(3deg);
  }

  .carrusel__pista{padding-inline:var(--pad)}
}

/* ══ ≤ 720px ════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .seccion{padding-block:clamp(3.4rem,9vw,5rem)}

  .recorrido__pestanas{
    width:100%;
    border-radius:var(--radio);
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .recorrido__pestanas::-webkit-scrollbar{display:none}
  .pestana{padding:.55rem .9rem;font-size:.84rem}

  .maq-ruta__f{grid-template-columns:56px minmax(0,1fr);row-gap:.4rem}
  .maq-ruta__f .pastilla{grid-column:2;justify-self:start}

  .inventario__f{grid-template-columns:1fr auto;row-gap:.2rem}
  .inventario__cod{grid-column:1}
  .inventario__nom{grid-column:1;grid-row:2;white-space:normal}
  .inventario__est{grid-column:2;grid-row:1 / span 2;align-self:center}

  .gastos__f{grid-template-columns:38px minmax(0,1fr) auto;gap:.65rem}
  .gastos__mini{width:38px;height:32px}

  .personas__f{grid-template-columns:32px minmax(0,1fr);row-gap:.25rem}
  .personas__perm{grid-column:2;text-align:left;max-width:none;font-size:0.82rem}

  .cuadre{grid-template-columns:1fr;gap:.6rem}
  .cuadre > div{flex-direction:row;justify-content:space-between;align-items:baseline}

  .canales{grid-template-columns:1fr}

  .maq-app{grid-template-columns:44px 1fr}
  .maq-app__reja{grid-template-columns:1fr}
  .maq-bloque--mapa{display:none}

  .escenario__plot{aspect-ratio:4/3}
  .posicion{min-width:48px;padding:.26rem .38rem}
  .posicion span{font-size:0.78rem}
  .posicion b{font-size:0.77rem}

  .duda__respuesta{padding-right:.4rem}

  .proxima{border-radius:var(--radio);padding:1.1rem;gap:.3rem .7rem}
  .proxima__cuenta{margin-left:0;width:100%;padding-top:.55rem;border-top:1px solid var(--brd)}
  .proxima__sep{display:none}

  .carrusel__alpie{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ══ ≤ 620px: una sola columna ══════════════════════════════════════════ */
@media (max-width:620px){
  :root{--pad:18px;--radio:12px;--radio-lg:16px}

  .mosaico{grid-template-columns:1fr}
  .tarjeta--ancha{grid-column:span 1}

  .portada{padding-top:6.4rem}
  .portada__cta{flex-direction:column;align-items:stretch}
  .portada__cta .boton{width:100%}

  .portada__art{padding:0 0 1rem}
  .portada__art .telefono{width:212px;transform:none}
  .hoja--portada{width:168px;left:-5%;bottom:-14px;transform:rotate(-4deg)}
  .hoja--mini{width:146px;right:-3%;top:-16px;transform:rotate(3deg)}
  .hoja__sello{width:42px;height:42px;right:.5rem;bottom:.5rem}

  .piedepagina__reja{grid-template-columns:1fr}
  .piedepagina__logo{grid-column:span 1}
  .piedepagina__abajo{flex-direction:column;align-items:flex-start}

  .flotante{width:46px;height:46px;right:14px;bottom:14px}

  .ciclo__control{width:100%}
  .ciclo__boton{flex:1;padding:.6rem .8rem}

  /* La tabla de cuatro columnas no cabe: cada criterio pasa a ser un bloque.
     Los selectores van con la misma especificidad que los de escritorio para
     que el width:100% gane. */
  .comparativa{padding:1.1rem 1rem 1.2rem}
  .tabla,
  .tabla tbody,
  .tabla tr,
  .tabla th,
  .tabla td,
  .tabla tbody th,
  .tabla tbody td,
  .tabla thead th{display:block;width:auto}
  .tabla thead{display:none}
  .tabla tr{
    padding:.95rem .2rem;
    border-bottom:1px solid rgba(20,23,26,.16);
  }
  .tabla tbody tr:last-child{border-bottom:0;padding-bottom:.2rem}
  .tabla tbody th{
    font-size:.95rem;
    padding:0 0 .55rem;
    border:0;
  }
  .tabla td{
    padding:.34rem 0 .34rem .75rem;
    border:0;
    border-left:2px solid rgba(20,23,26,.14);
    font-size:.875rem;
  }
  .tabla td + td{margin-top:.3rem}
  .tabla td::before{
    content:attr(data-opcion);
    display:block;
    font-family:var(--f-mono);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--tinta-3);
    margin-bottom:.1rem;
  }
  .tabla td.tabla__nuestro{
    background:rgba(194,90,12,.10);
    border-left:2px solid var(--sodio-hondo);
    border-radius:0 6px 6px 0;
    padding:.5rem .7rem;
    margin-top:.45rem;
  }
  .comparativa__nota{font-size:.72rem}

  .panel{padding:1rem}
  .panel__cab{gap:.7rem}
  .agenda__f{grid-template-columns:60px minmax(0,1fr);gap:.7rem}
  .agenda__f::before{left:74px}
  .agenda__h{font-size:.78rem}

  .portatil__pantalla{border-width:6px}
  .maq-app__cab b{font-size:.9rem}
  .maq-dia{padding:.35rem .45rem}
}

/* ══ ≤ 420px ════════════════════════════════════════════════════════════ */
@media (max-width:420px){
  .portada__h1{font-size:clamp(2.2rem,11vw,2.9rem)}
  .hoja--mini{display:none}
  .posicion--teclado,.posicion--bajo{display:none}
  .ventana__url{font-size:0.81rem;padding:.2rem .5rem}
}

/* ══ Íconos de puntero fino: los realces de hover solo ahí ══════════════ */
@media (hover:none){
  .fecha:hover,
  .tarjeta:hover,
  .postal:hover,
  .voz:hover,
  .boton:hover{transform:none}
  .postal:hover img{transform:none}
  .carrusel__pista-ayuda{animation:none;opacity:.8}
  .credencial{animation:none;transform:none}
}

/* ══ Movimiento reducido ════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }

  .aparece{opacity:1;transform:none}
  .subrayado::after{transform:scaleX(1)}
  .grano{animation:none}
  .credencial{transform:none}
  .hoja--portada,.hoja--mini{animation:none}
  .carrusel__pista-ayuda{animation:none}
  .pulso,.maq-mapa__pin{animation:none}
}

/* ══ Contraste alto ═════════════════════════════════════════════════════ */
@media (prefers-contrast:more){
  :root{
    --tx-2:#D2D6DA;
    --tx-3:#AEB4BA;
    --brd:#3C444C;
    --brd-2:#525C66;
  }
  .tarjeta,.credencial__carta,.tarifa,.voz{border-color:var(--brd-2)}
}

/* ══ Impresión ══════════════════════════════════════════════════════════ */
@media print{
  .grano,.resplandor,.riel,.flotante,.cabecera,.menu-movil,.carrusel__pista-ayuda{display:none!important}
  body{background:#fff;color:#000}
  .seccion,.remate{padding-block:1.5rem;break-inside:avoid}
  .aparece{opacity:1!important;transform:none!important}
  .portada{padding-top:1rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}