/* =====================================================
   como-llegar.responsive.css — SOLO teléfonos (<=600px)
   No afecta tabletas ni computadoras
   Autor: ChatGPT (para Ing. Mario Isaac)
   Página: como-llegar.html
   ===================================================== */
@media (max-width: 600px) {
  :root {
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
  }
  html { font-size: 16px; }
  body { margin: 0; overflow-x: hidden; }

  /* ===== Header & navegación compactos ===== */
  header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
  }
  header img.escudo { height: 92px; }

  .titulo-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .titulo-nav h1 {
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: var(--space-2);
    right: var(--space-4);
    font-size: 1rem;
  }
  .menu-toggle .menu-icon { font-size: 1.8rem; }

  nav.menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; width: 100%;
    background: #0f2c53;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  nav.menu.show { display: block; }

  nav.menu ul {
    display: flex; flex-direction: column;
    gap: 0; margin: 0; padding: 0; list-style: none;
  }
  nav.menu li { border-top: 1px solid rgba(255,255,255,0.1); }
  nav.menu a,
  nav.menu li button#toggle-theme {
    display: block; width: 100%; text-align: left;
    padding: 12px 16px; font-size: 1rem;
  }

  /* Evitar traslape del header fijo con el contenido */
  main { margin-top: 185px; }
  /* En esta página no hay <main>, así que ajustamos los primeros bloques */
  .ubicacion-box { margin-top: 180px !important; }

  /* ===== Botón/box "NUESTRA UBICACIÓN" ===== */
  
  .ubicacion-box {
    margin-top: 220px !important; /* antes 180px */
    width: calc(100% - 32px);
    margin-left: 16px !important;
    margin-right: 16px !important;
    border-radius: 14px;
    font-size: 1rem;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .icono-ubicacion { font-size: 1.25rem; }

  /* ===== Descripción ===== */
  .descripcion-box {
    width: calc(100% - 32px);
    margin: var(--space-4) 16px;
    padding: var(--space-4);
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.55;
    text-align: justify;
  }
  .frase-destacada {
    display: inline-block;
    margin-top: var(--space-3);
    text-align: center;
    width: 100%;
  }

  /* ===== Tarjeta del mapa ===== */
  .mapa-elegante {
    padding: 0 16px;
  }
  .mapa-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 16px;
  }
  .mapa-header {
    padding: 12px 14px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .mapa-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .mapa-title h3 {
    font-size: 1.15rem;
    margin: 0;
  }
  .mapa-action {
    display: inline-block;
    font-size: 0.98rem;
    padding: 10px 12px;
    border-radius: 12px;
    width: 100%;
    text-align: center;
  }

  /* Escenario/iframe responsive (16:9) */
  .mapa-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
  }
  .mapa-stage::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  .mapa-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ===== Modal anti-plagio ===== */
  .modal-plagio .modal-contenido {
    width: calc(100% - 40px);
    max-width: 520px;
    padding: var(--space-4);
    border-radius: 14px;
  }
  .modal-plagio .icono { font-size: 2rem; }
  .modal-plagio h2 { font-size: 1.2rem; }
  .modal-plagio p  { font-size: 0.95rem; }
  .progress .bar { transform-origin: left center; }

  /* ===== Flechas/elementos flotantes (si existieran) ===== */
  .flecha-scroll { bottom: 18px; left: 18px; }
  .flecha-icono { width: 38px; height: 38px; }

  /* ===== Preloader menor en móviles ===== */
  #preloader img {
    width: min(60vw, 240px);
    height: auto;
  }

  /* ===== Footer ===== */
  .footer {
    padding: var(--space-5) 16px;
    text-align: center;
  }
  .marca-agua-footer,
  .marca-agua-izquierda {
    font-size: 12px;
  }
}

/* =====================================================
   Micro-ajustes para pantallas MUY pequeñas (<=360px)
   ===================================================== */
@media (max-width: 360px) {
  header img.escudo { height: 82px; }
  .titulo-nav h1 { font-size: 1rem; }
  .ubicacion-box { margin-top: 168px !important; }
}