/* =========================================================
   Red CORS – Geostore (estilo oscuro coherente con el sitio)
   ========================================================= */
   :root{
    --brand-gold: #f3b334;
    --brand-gold-600: #d49c25;
    --brand-teal: #266b58;
    --brand-olive: #959e3c;
    --bg: #000;
    --text: #fff;
    --muted: #cfcfcf;
    --muted-2: #bdbdbd;
    --card-bg: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.10);
    --field-bg: #121212;
    --field-border: rgba(255,255,255,.16);
    --field-border-focus: rgba(243,179,52,.65);
  }
  
  /* Reset mínimo */
  *{ margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
  
  /* === LAYOUT BASE === */
  body{
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
  }
  
  
  /* =========================
     HERO/INTRO Red CORS
     ========================= */
  .rc-hero{
    padding: 28px 5% 10px;
    background: #333333;
    color:#fff;
  }
  .rc-hero h1{ font-size: clamp(1.4rem, 2.4vw, 2rem); margin:0 0 6px; font-weight:800; }
  .rc-hero p{ margin:0; opacity:.95; }
  
  /* =========================
     MAPA + PANEL LATERAL
     ========================= */
  /*Full-width real */
  .map-wrap{
    padding: 18px 0 40px;   /* sin padding lateral */
    width: 100%;
    max-width: 100%;
  }
  /* ✅ Panel fijo + mapa gigante */
  .rc-grid{
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr); /* panel 320px, mapa se estira */
    gap: 16px;
    width: 100%;
  }
  @media (max-width:980px){ .rc-grid{ grid-template-columns:1fr; } }
  
  .card{
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
    color:#fff;
  }
  
  /* Panel */
  .panel{ padding:16px; }
  .panel h3{ margin:4px 0 8px; font-size:1.1rem; font-weight:800; color:#fff; }
  .panel p{ margin:0 0 12px; color:#ddd; font-size:.95rem; }
  
  /* Campos */
  .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:560px){ .row{ grid-template-columns:1fr; } }
  
  .field{ margin-bottom:10px; }
  .field label{ display:block; margin-bottom:6px; font-weight:600; color:#fff; }
  .field input{
    width:100%; padding:10px 12px; border-radius:10px;
    border:1px solid var(--field-border);
    background: var(--field-bg); color:#fff; outline:none;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .field input::placeholder{ color:#9da3ad; }
  .field input:focus{
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 3px rgba(243,179,52,.18);
  }
  
  /* Botones */
  .actions{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 2px; }
  .btn{
    appearance:none; border:none; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--brand-gold); color:#000; font-weight:800;
    border-radius:10px; padding:10px 14px; min-width:150px;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 24px rgba(243,179,52,.25);
  }
  .btn:hover{ background: var(--brand-gold-600); transform: translateY(-1px); }
  .btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(243,179,52,.28); }
  .btn:disabled{ opacity:.6; cursor: not-allowed; }
  
  .btn-outline{
    background: transparent; color:#fff; border:2px solid #fff; box-shadow:none;
  }
  .btn-outline:hover{ background:#fff; color:#000; }
  
  /* Ayuda/nota */
  .help{ color: var(--muted); font-size:.9rem; margin-top:6px; }
  
  /* Lista “Estaciones más cercanas” */
  .result-box{ margin-top:12px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.18); }
  .result-box h4{ margin:0 0 8px; font-weight:800; color:#fff; }
  .nearest-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
  .nearest-item{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius:10px; padding:8px 10px; line-height:1.35; cursor:pointer;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .nearest-item strong{ color: var(--brand-gold); }
  .nearest-item:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
  }
  
  /* Mapa */
  .map-card{ overflow:hidden; }
  
  /* InfoWindow compacto (sin “X”) */
  .gm-ui-hover-effect{ display:none !important; }
  .gm-style .gm-style-iw-c{ padding:8px !important; border-radius:8px !important; }
  .gm-style .gm-style-iw-d{ overflow:hidden !important; }
  .gm-style .gm-style-iw-t::after{ display:none; }
  
  /* === FOOTER === */
  .footer{
    background:#000;
    color:#fff;
    padding:40px 5%;
    border-top: 3px solid transparent;
    border-image: linear-gradient(to right, var(--brand-teal), var(--brand-olive)) 1;
    font-family: Arial, sans-serif;
  }
  .footer-row{ display:grid; grid-template-columns:1fr 1fr 0.8fr; gap:25px; }
  .footer-links h4{ font-size:1.1rem; margin-bottom:15px; position:relative; color:#fff; }
  .footer-links h4::after{ content:""; position:absolute; left:0; bottom:-6px; width:40px; height:2px; background:#fff; }
  .footer-links.small-col h4{ font-size:.95rem; margin-bottom:12px; }
  .footer-links.small-col .footer-payments h4{
    font-size:1.1rem; margin-bottom:10px; color:#fff; font-weight:600; text-align:center;
  }
  .footer-links ul{ list-style:none; padding:0; }
  .footer-links ul li{ margin-bottom:10px; }
  .footer-links ul li a{ color:#eee; text-decoration:none; transition:.3s; }
  .footer-links ul li a:hover{ color: var(--brand-gold); padding:2px 6px; border-radius:4px; }
  
  .footer-links.small-col .social-link a{
    margin-right:10px; font-size:1rem; display:inline-flex; align-items:center; justify-content:center;
    width:35px; height:35px; background:#222; color:#fff; border-radius:50%;
    transition:.3s ease;
  }
  .footer-links.small-col .social-link a:hover{ transform:scale(1.3); background: var(--brand-gold); color:#000; }
  .footer-payments{ margin-top:20px; text-align:center; }
  .payment-icons{
    display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap;
  }
  .payment-icons div{
    width:80px; height:80px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .payment-icons div img{
    width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1);
    transition: transform .3s;
  }
  .payment-icons div img:hover{ transform:scale(1.1); filter:brightness(0) invert(1); }
  .footer-bottom{ text-align:center; margin-top:30px; font-size:.85rem; color:#ccc; }
  .footer-bottom .direccion{ margin-bottom:5px; font-size:.9rem; font-weight:500; }
  
  /* === RESPONSIVE === */
  @media (max-width:768px){
    .banner-nav nav{
      display:none; flex-direction:column; gap:15px; background:#222; padding:15px;
      position:absolute; top:100%; left:0; width:100%;
    }
    #nav.active{ display:flex; }
    .hamburger{ display:flex; }
  
    .footer-row{ grid-template-columns:1fr; text-align:center; gap:25px; }
    .footer-links.small-col{ margin:0 auto; }
    .footer-links ul{ display:inline-block; }
    .footer-links ul li{ margin-bottom:8px; }
    .footer-payments{ margin-top:15px; }
    .payment-icons{ justify-content:center; }
    .footer-links.small-col .social-link a{ margin:0 6px 10px; }
    .footer-bottom{ margin-top:20px; font-size:.8rem; }
  }

  /* =========================
   Mobile polish – Red CORS
   (añadir al FINAL del CSS)
   ========================= */
@media (max-width: 820px){
  /* Layout: una sola columna con buen respiro */
  .rc-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Tarjetas: fondo un poco más sólido para legibilidad */
  .card{
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
  }

  /* Panel: tipografías + padding más cómodos */
  .panel{ padding: 16px 14px; }
  .panel h3{ font-size: 1.2rem; }
  .panel p{ font-size: 1rem; color: #e6e6e6; }

  /* Campos: más altos y legibles */
  .row{ grid-template-columns: 1fr; gap: 12px; }
  .field label{ font-size: 1rem; }
  .field input{
    padding: 12px 14px;
    font-size: 1rem;
    background: #121212;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
  }
  .field input::placeholder{ color: #d5d5d5; }

  /* Botones: full width y cómodos al tacto */
  .actions{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 10px;
  }
  .btn,
  .btn-outline{
    width: 100%;
    min-width: 0;
    padding: 12px 16px;
    font-size: 1rem;
    line-height: 1.1;
  }

  /* Lista de cercanas: un poquito más grande */
  .nearest-item{
    font-size: 1rem;
    padding: 10px 12px;
  }
  .result-box h4{ font-size: 1.05rem; }
  .help{ font-size: .95rem; color: #d9d9d9; }

  /* Hero: títulos un punto más grandes en móvil */
  .rc-hero h1{ font-size: clamp(1.35rem, 5.5vw, 1.9rem); }
  .rc-hero p{ opacity: 1; } /* evita que se vea “lavado” en algunas pantallas */
}

@media (max-width: 480px){
  /* Un poco más de contraste en pantallas muy pequeñas */
  .card{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
  }
  .panel{ padding: 16px; }
  .panel h3{ font-size: 1.25rem; }
  .panel p{ font-size: 1.02rem; }

  .field label{ font-size: 1.02rem; }
  .field input{
    padding: 13px 15px;
    font-size: 1.02rem;
    border: 1px solid rgba(255,255,255,.26);
  }

  .nearest-item{ font-size: 1.02rem; }
  .help{ font-size: .98rem; }
}

/* iOS/Android: evitar auto-reducción de texto */
html{-webkit-text-size-adjust:100%;}

.near-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.near-buy{
  width:100%;
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.near-buy:hover{ background: rgba(255,255,255,.12); }

.near-buy .chev{
  transition: transform .18s ease;
  opacity:.9;
}

.near-buy[aria-expanded="true"] .chev{
  transform: rotate(180deg);
}

.near-drop{
  margin-top:10px;
  display:none;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

.near-drop.show{ display:block; }

.near-drop .dur-grid{
  margin-top:8px;
}

/* ===== Mantener el mapa ocupando TODO el alto disponible ===== */

/* La fila del grid tendrá una altura basada en viewport */
.rc-grid{
  align-items: start;              /* evita comportamientos raros */
}

/* El contenedor del mapa SIEMPRE tiene un alto fijo relativo al viewport */
.map-card{
  height: 72vh;                    /* puedes ajustar */
  max-height: 820px;
  min-height: 420px;
  overflow: hidden;
  display: flex;                   /* para que el hijo estire */
}

/* El mapa ocupa TODO el alto/ancho del contenedor */
#map{
  width: 100%;
  height: 100%;
  max-height: none;                /* IMPORTANTE: quita los límites anteriores */
  min-height: 0;                   /* evita conflictos */
  flex: 1;
}

/* ===== Duraciones como menú vertical (solo dropdown de "Estaciones más cercanas") ===== */

/* 1) Cambia el layout de 3 columnas a lista vertical */
.near-drop .dur-grid{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;              /* sin separación tipo grid */
  margin-top: 8px;
}

/* 2) Botones full width, sin borde, sin redondeo, estilo menú */
.near-drop .dur-btn{
  width: 100% !important;
  display: block !important;
  text-align: left !important;

  background: #000 !important;
  color: #fff !important;

  border: none !important;        /* sin borde */
  border-radius: 0 !important;    /* sin esquinas redondeadas */

  padding: 12px 12px !important;
  font-weight: 800;
  cursor: pointer;

  transition: background .18s ease;
}

/* 3) Hover gris (como pediste) */
.near-drop .dur-btn:hover{
  background: #2a2a2a !important;
  transform: none !important;     /* quita el “lift” para look de menú */
}

/* 4) (Opcional, recomendado) separadores sutiles entre opciones */
.near-drop .dur-btn + .dur-btn{
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* 5) (Opcional) primer/último para que se vea “bloque” limpio dentro del near-drop */
.near-drop{
  overflow: hidden;               /* para que los separadores no “salgan” */
  padding: 0 !important;          /* el padding lo tendrán los botones */
}

/* ===== MODAL COMPRA ===== */
.rc-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.rc-modal[aria-hidden="false"]{ display:block; }

.rc-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
}

.rc-modal__dialog{
  position:relative;
  width: min(560px, calc(100vw - 26px));
  margin: 7vh auto 0;
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow:hidden;
  color:#fff;
}

.rc-modal__header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.rc-modal__title{ font-weight:900; font-size:1.15rem; }
.rc-modal__sub{ color:#bdbdbd; font-size:.92rem; margin-top:2px; }

.rc-modal__x{
  appearance:none; border:none; background:transparent;
  color:#fff; font-size:1.2rem; cursor:pointer; padding:6px 8px;
  opacity:.8;
}
.rc-modal__x:hover{ opacity:1; }

.rc-modal__body{ padding: 14px 16px; display:grid; gap:12px; }
.rc-modal__box{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
}
.rc-modal__boxTitle{ font-weight:900; margin-bottom:10px; }

.rc-kv{ display:grid; grid-template-columns: 110px 1fr; gap:8px 10px; }
.rc-kv__k{ color:#bdbdbd; font-size:.92rem; }
.rc-kv__v{ font-weight:800; }
.rc-kv__price{ color: var(--brand-gold); font-size:1.05rem; }

.rc-label{ display:block; font-weight:800; margin-bottom:6px; }
.rc-input{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,.18);
  background:#121212;
  color:#fff;
  outline:none;
}
.rc-input:focus{
  border-color: rgba(243,179,52,.65);
  box-shadow: 0 0 0 3px rgba(243,179,52,.18);
}

.rc-help{ color:#bdbdbd; font-size:.9rem; margin-top:8px; }
.rc-error{ color:#ff6b6b; font-weight:800; font-size:.92rem; margin-top:8px; }

.rc-modal__footer{
  display:flex; gap:10px; justify-content:flex-end;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.rc-btn{
  appearance:none; border:none; cursor:pointer;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight:900;
}

.rc-btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
}
.rc-btn--ghost:hover{ background: rgba(255,255,255,.08); }

.rc-btn--paypal{
  background:#ffc439; /* PayPal amarillo oficial */
  color:#111;
  display:inline-flex; gap:8px; align-items:center;
}
.rc-btn--paypal:hover{ filter:brightness(.95); }

.pp-mark{
  font-weight:1000;
  letter-spacing:.2px;
}

.rc-input.is-bad{
  border-color: rgba(255,107,107,.75) !important;
  box-shadow: 0 0 0 3px rgba(255,107,107,.15) !important;
}
.rc-input.is-ok{
  border-color: rgba(46,196,182,.75) !important;
  box-shadow: 0 0 0 3px rgba(46,196,182,.12) !important;
}
/* =========================
   FIX MODAL PAYPAL (scroll interno)
   Pegar al FINAL del CSS
   ========================= */

/* Centrar modal en pantalla y limitar altura */
.rc-modal__dialog{
  /* sobrescribe tu margin: 7vh auto 0; */
  margin: 0 auto !important;
  top: 50%;
  transform: translateY(-50%);
  max-height: calc(100vh - 24px); /* deja aire arriba/abajo */
  display: flex;                  /* clave: header/body/footer en columna */
  flex-direction: column;
}

/* Header y footer fijos dentro del modal */
.rc-modal__header,
.rc-modal__footer{
  flex: 0 0 auto;
}

/* Body scrolleable */
.rc-modal__body{
  flex: 1 1 auto;          /* ocupa el espacio disponible */
  overflow-y: auto;         /* scroll vertical */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* iOS smooth */
  min-height: 0;            /* MUY importante para que overflow funcione en flex */
}

/* Extra: cuando PayPal mete iframes altos, que no rompa */
#ppWrap,
#paypal-button-container{
  max-width: 100%;
}

/* En móviles: modal casi a pantalla completa */
@media (max-width: 560px){
  .rc-modal__dialog{
    width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 18px);
  }
}