/* =========================================================================
   TRAZENIA · RESPONSIVE
   El móvil no es el escritorio encogido: es la misma dirección de arte
   leída en vertical. Cambia el encuadre, la navegación y el movimiento.
   ========================================================================= */

/* --- laptop y abajo: el trazo lateral ya no cabe fuera del contenido --- */
@media (max-width: 1500px) {
  .trazo-guia { display: none; }
  .progreso { display: block; }
}

/* --- tablet --- */
@media (max-width: 900px) {
  .hero__fondo img { object-position: 68% 55%; }
  .hero__fondo::after {
    background:
      linear-gradient(120deg, var(--grafito) 34%, color-mix(in srgb, var(--grafito) 70%, transparent) 66%, transparent 100%),
      linear-gradient(to top, var(--grafito) 4%, transparent 50%);
  }
  .paso { grid-template-columns: 62px minmax(0, 1fr); }
}

/* --- móvil --- */
@media (max-width: 760px) {
  :root { --ancho-lectura: 100%; }

  /* Navegación: panel completo, no un menú colgante */
  .menu-btn { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    /* dvh y no vh: con vh el panel queda por debajo de la barra del navegador
       y el último enlace se pierde fuera de la pantalla. */
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    /* flex-start y NO center: centrado, si el contenido desborda se recorta
       por arriba y esa parte no se puede alcanzar ni desplazando. */
    justify-content: flex-start;
    gap: 0;
    background: var(--grafito);
    transform: translateY(-100%);
    transition: transform var(--medio) var(--curva-firme);
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--alto-cabecera, 84px) + 8px) var(--margen) var(--margen);
  }
  .nav.abierto { transform: none; }

  /* Una línea entre opciones: sin ellas el panel parece un título suelto y no
     se ve que haya más abajo. */
  .nav .nav__enlace + .nav__enlace,
  .nav .nav__enlace + .btn {
    border-top: 1px solid var(--linea);
  }

  .nav__enlace {
    font-family: var(--display);
    font-stretch: 112%;
    font-variation-settings: "wdth" 112;
    font-size: var(--t-34);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--tinta);
    padding-block: 18px;
    width: 100%;
  }
  .nav__enlace::before { left: -20px; width: 8px; height: 8px; }
  .nav .btn { margin-top: 24px; font-size: var(--t-12); align-self: flex-start; }

  /* En móvil el índice se lee como una lista, con miniatura en vez de flotante */
  .indice__fila {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px 18px;
  }
  .indice__flecha { display: none; }
  .indice__fila:hover { padding-inline: 0; }
  .indice__miniatura {
    display: block;
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
  }
  .indice__miniatura img { width: 100%; height: 100%; object-fit: cover; }

  .hero { min-height: 92svh; align-items: flex-end; }
  .hero__pie { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__acciones { width: 100%; }
  .hero__acciones .btn { flex: 1 1 auto; justify-content: center; }

  .enc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .enc__num { padding-top: 0; }

  .paso { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .paso__marca::before { display: none; }

  .pie__base { flex-direction: column; align-items: flex-start; }

  /* La vista previa flotante depende del cursor: en táctil no existe */
  .previa { display: none; }
}

/* --- pantallas anchas: el hero gana aire, no tamaño de letra --- */
@media (min-width: 1600px) {
  :root { --margen: 88px; }
}

/* --- punteros gruesos: sin estados que dependan del hover --- */
@media (hover: none) {
  .previa { display: none; }
  .indice__fila:hover { padding-inline: 0; }
  .indice__fila:hover::before { opacity: 0; }
  .btn::before { display: none; }
  .btn--linea { border-color: var(--acento-linea); }
}

/* --- impresión: el sitio se vuelve un documento --- */
@media print {
  .cabecera, .nav, .trazo-guia, .progreso, .previa, .marquesina, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion { padding-block: 24px; }
  a::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}