/* Sección "Cómo llegar" - mariacolombia.com */
  #como-llegar .mapa-card { padding: 20px; color: #333; }
  #como-llegar .mapa-barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  #como-llegar .mapa-chip {
    border: 1px solid var(--primary); background: transparent; color: var(--primary);
    border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  #como-llegar .mapa-chip[aria-pressed="true"] { background: var(--primary); color: #fff; }
  #como-llegar .mapa-chip.tipo { margin-left: auto; }
  #como-llegar .mapa-chip[hidden] { display: none; }
  #como-llegar .mapa-layout {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 20px; align-items: start;
  }
  #como-llegar .mapa-lienzo {
    height: 460px; border-radius: 20px; overflow: hidden; background: #e3ecd9;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center; text-align: center; color: #33443a;
  }
  #como-llegar .mapa-lienzo.cargado { display: block; }
  #como-llegar .mapa-subtitulo {
    font-family: 'Merriweather', serif; color: var(--primary); margin: 0 0 10px; font-size: 1.1rem;
  }
  #como-llegar .mapa-pasos, #como-llegar .mapa-lugares { list-style: none; margin: 0; padding: 0; }
  #como-llegar .mapa-pasos { counter-reset: paso; max-height: 460px; overflow: auto; }
  #como-llegar .mapa-pasos li {
    counter-increment: paso; position: relative; padding: 12px 12px 12px 52px;
    border-radius: 14px; line-height: 1.5;
  }
  #como-llegar .mapa-pasos li::before {
    content: counter(paso); position: absolute; left: 10px; top: 12px; width: 30px; height: 30px;
    border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  #como-llegar .mapa-pasos strong, #como-llegar .mapa-lugares strong { display: block; color: var(--primary); }
  #como-llegar .mapa-lugares-wrap { margin-top: 22px; }
  #como-llegar .mapa-lugares {
    counter-reset: lugar; display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  #como-llegar .mapa-lugares li {
    counter-increment: lugar; position: relative; padding: 10px 12px 10px 50px;
    border-radius: 14px; background: rgba(27, 77, 62, 0.07); line-height: 1.4;
  }
  #como-llegar .mapa-lugares li::before {
    content: counter(lugar, upper-alpha); position: absolute; left: 10px; top: 10px;
    width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; background: #2E7D6B;
  }
  #como-llegar .mapa-lugares li[data-capa="alojamiento"]::before { background: #B8793E; }
  #como-llegar .mapa-lugares li[data-capa="comida"]::before { background: #B3472F; }
  #como-llegar .mapa-lugares li.sin-coord { display: none; }
  #como-llegar .mapa-pasos li.interactivo, #como-llegar .mapa-lugares li.interactivo { cursor: pointer; }
  #como-llegar li.interactivo:hover { background: rgba(212, 163, 115, 0.2); }
  #como-llegar li.activo { background: rgba(212, 163, 115, 0.35) !important; }
  #como-llegar .mapa-lugares li.con-foto { padding-left: 12px; padding-top: 0; }
  #como-llegar .mapa-lugares li.con-foto::before { top: 18px; left: 18px; z-index: 1; box-shadow: 0 0 0 2px #fff; }
  #como-llegar .mapa-lugares li .mapa-mini {
    display: block; width: calc(100% + 24px); height: auto; aspect-ratio: 1 / 1; margin: 0 -12px 8px; object-fit: cover;
    border-radius: 14px 14px 0 0;
  }
  #como-llegar .mapa-lugares li .mapa-meta { display: block; font-size: 0.82rem; font-weight: 700; margin-top: 4px; opacity: 0.85; }
  #como-llegar .mapa-reservar {
    display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: #1B4D3E;
    color: #fff !important; font-size: 12px; font-weight: 700; text-decoration: none;
  }
  #como-llegar .mapa-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
  #como-llegar .mapa-nota { font-size: 0.85rem; opacity: 0.8; margin: 14px 0 0; }
  /* --- Compatibilidad con style.css del sitio --- */
  #como-llegar .glass-card:hover { transform: none; }               /* evita que el mapa "salte" al pasar el mouse */
  #como-llegar .mapa-lienzo img,
  #como-llegar .gm-style img {                                      /* style.css fuerza .glass-card img a 180px: rompería las teselas */
    width: auto; height: auto; max-width: none; object-fit: fill; margin: 0;
    border-radius: 0; animation: none;
  }
  /* --- Modo noche --- */
  body.night-mode #como-llegar .mapa-card { color: #f5e6d3; }
  body.night-mode #como-llegar .mapa-subtitulo,
  body.night-mode #como-llegar .mapa-pasos strong,
  body.night-mode #como-llegar .mapa-lugares strong { color: #ffcc80; }
  body.night-mode #como-llegar .mapa-chip { border-color: #ffcc80; color: #ffcc80; }
  body.night-mode #como-llegar .mapa-chip[aria-pressed="true"] { background: #ffcc80; color: #1a120b; }
  body.night-mode #como-llegar .mapa-lugares li { background: rgba(255, 204, 128, 0.08); }
  body.night-mode #como-llegar .mapa-pasos li::before { background: #d4a373; color: #1a120b; }
  @media (max-width: 800px) {
    #como-llegar .mapa-layout { grid-template-columns: 1fr; }
    #como-llegar .mapa-lienzo { height: 380px; }
    #como-llegar .mapa-pasos { max-height: 340px; }
    #como-llegar .mapa-lugares {
      display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 10px; padding-bottom: 8px;
      -webkit-overflow-scrolling: touch;
    }
    #como-llegar .mapa-lugares li { flex: 0 0 200px; scroll-snap-align: start; }
    #como-llegar .mapa-chip.tipo { margin-left: 0; }
  }