/* ============================================================
   movil.css — TODO lo responsivo, en un solo archivo
   Tablet ≤ 1024px · Móvil ≤ 767px · Mini ≤ 359px
   El móvil no es el escritorio encogido: cada sección redefine
   su disposición (analisis-estructura-movil-referencia.md).
   ============================================================ */

/* ================= ESCRITORIO ANGOSTO ================= */

@media (max-width: 1180px) {
  .rocas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ================= TABLET ================= */

@media (max-width: 1024px) {

  /* Header: hamburguesa con panel */
  .nav-toggle { display: inline-flex; }

  .nav-main {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 20px 20px;
    background: rgba(10, 10, 28, 0.98);
    border-bottom: 1px solid rgba(102, 126, 234, 0.25);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0.3s;
  }

  .nav-abierto .nav-main {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-width: 760px;
    margin-inline: auto;
  }

  .nav-link {
    min-height: 54px;
    font-size: 1.05rem;
    padding: 0 12px;
  }

  .nav-link::after { left: 12px; bottom: 12px; transform: scaleX(0); transform-origin: left; }
  .nav-link.activo::after { transform: scaleX(1); }

  /* Hero: una columna, ocular debajo */
  .hero { padding-top: 116px; }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .hero-badges,
  .hero-acciones { justify-content: center; }

  .hero-description { margin-inline: auto; }

  .ocular { width: min(380px, 100%); }

  /* Accesos: una fila por acceso */
  .accesos-lista { grid-template-columns: 1fr; }
  .acceso { padding: 20px 8px; }
  .acceso + .acceso { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }

  /* Colección */
  .rocas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  #lab-carrusel { position: static; }

  /* Pestañas de familia: fila deslizable, nunca 3 renglones */
  .familias {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .familias::-webkit-scrollbar { display: none; }
  .familia-tab { scroll-snap-align: start; flex-shrink: 0; }

  /* En táctil las flechas del carrusel siempre visibles */
  .carrusel-btn { opacity: 1; }

  /* Laboratorio, acerca, video: una columna */
  .lab-layout,
  .acerca-layout,
  .video-layout { grid-template-columns: 1fr; gap: 36px; }

  .acerca-layout .seccion-cabeza { position: static; }

  .acervo-grupos { grid-template-columns: 1fr; gap: 44px; }
  .software-lista { grid-template-columns: 1fr; margin-bottom: 64px; }
  .enlaces-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ================= MÓVIL ================= */

@media (max-width: 767px) {

  .header-content { min-height: 66px; }
  .marca-escudo { height: 40px; }
  .marca-nombre { font-size: 0.95rem; }
  .marca-sub { font-size: 0.7rem; }
  .nav-toggle { width: 46px; height: 46px; }

  .section { padding-block: 72px; }

  /* Hero */
  .hero { padding-top: 100px; min-height: auto; }
  .hero-container { gap: 40px; padding-bottom: 56px; }
  .hero-badges { gap: 8px; margin-bottom: 20px; }
  .hero-badge { font-size: 0.74rem; padding: 8px 13px; }
  .hero-title { font-size: 2.35rem; letter-spacing: -0.03em; margin-bottom: 18px; }
  .hero-description { font-size: 1rem; margin-bottom: 30px; }

  /* Botones: píldoras anchas apiladas (decisión heredada de geologiavirtual) */
  .hero-acciones { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn { width: 100%; min-height: 56px; border-radius: 60px; }

  .ocular { width: min(320px, 88vw); padding: 14px; }

  /* Encabezados */
  .seccion-cabeza { margin-bottom: 32px; }
  .seccion-titulo { font-size: 1.95rem; }
  .seccion-lead { font-size: 1rem; }

  /* Colección */
  .familias {
    margin-inline: -18px;
    padding: 6px 18px;
    border-radius: 0;
    border-inline: 0;
  }
  .familia-tab { min-height: 48px; padding: 0 16px; font-size: 0.92rem; }

  .familia-intro { flex-direction: column; align-items: flex-start; }
  .familia-nombre { font-size: 1.35rem; }
  .doc-chip { width: 100%; }
  .familia-docs { width: 100%; }

  /* Chips de subgrupo también deslizables */
  .subgrupos {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -18px;
    padding: 2px 18px 6px;
    scrollbar-width: none;
    margin-bottom: 24px;
  }
  .subgrupos::-webkit-scrollbar { display: none; }
  .subgrupo-chip { flex-shrink: 0; }

  .rocas-grid { grid-template-columns: 1fr; gap: 24px; }

  /* Tarjeta de roca: foto de borde a borde */
  .roca-card {
    margin-inline: -18px;
    border-radius: 0;
    border-inline: 0;
  }
  .roca-card:hover { transform: none; }
  .roca-cuerpo { padding: 18px 18px 22px; }
  .roca-nombre { font-size: 1.2rem; }

  .carrusel-btn { width: 44px; height: 44px; }
  .carrusel-btn.prev { left: 8px; }
  .carrusel-btn.next { right: 8px; }

  /* Visor */
  .visor-escena { grid-template-columns: 1fr; padding: 0; }
  .visor-escena .visor-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    background: rgba(10, 10, 26, 0.6);
  }
  .visor-escena .visor-btn.prev { left: 8px; }
  .visor-escena .visor-btn.next { right: 8px; }
  .visor-figura img { border-radius: 0; }
  .visor-texto { font-size: 0.9rem; padding: 12px 18px 20px; }

  /* Laboratorio: carrusel de borde a borde */
  .lab-carrusel {
    margin-inline: -18px;
    border-radius: 0;
  }

  .acordeon-item summary { min-height: 64px; font-size: 1.08rem; }

  .doc-fila { gap: 12px; }
  .doc-tipo { width: 38px; height: 38px; }

  .software-item { grid-template-columns: 1fr; gap: 12px; }
  .enlaces-grupos { grid-template-columns: 1fr; gap: 32px; }

  .video-marco { margin-inline: -18px; border-radius: 0; }

  .footer { padding: 64px 0 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .footer-legal { flex-direction: column; }
}

/* ================= MINI (≤ 359px) ================= */

@media (max-width: 359px) {
  .container { padding-inline: 14px; }
  .hero-title { font-size: 2rem; }
  .marca-sub { display: none; }
  .familias, .subgrupos { margin-inline: -14px; padding-inline: 14px; }
  .roca-card, .lab-carrusel, .video-marco { margin-inline: -14px; }
}