/* ============================================================================
   Página general de la Gira USA (/giras-usa y variantes filtradas).
   Estilos compartidos por todas las versiones de la página general.
   ============================================================================ */
:root{ --bg:#000; --green:#2fbf57; --gold:#fbc421; --line:#26262b; --muted:#a9a9b2; }
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:#fff; font-family:'Montserrat',system-ui,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{width:min(92%,1080px); margin:0 auto}

/* Fondo con la foto de Sebas + bandera, igual que las landings */
.page-bg{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('/gira-usa/2026-08-agosto/_assets/img/hero-bg-pc.webp') no-repeat center top/cover; opacity:.5}
.page-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 45%, #000 100%)}
main{position:relative; z-index:1}

/* Cabecera */
.top{text-align:center; padding:44px 0 10px}
.top .logo{height:auto; width:auto; max-height:200px; max-width:320px; margin:0 auto}
/* Promesa del workshop: mismos valores que .hero-title de las landings */
.top .promesa{margin:6px auto 18px; max-width:640px; font-size:clamp(1.3rem,1.95vw,1.72rem);
  font-weight:800; text-transform:uppercase; line-height:1.18; letter-spacing:0; text-wrap:balance;
  color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.65)}
.top h1{margin:14px 0 6px; font-size:clamp(1.5rem,4.4vw,2.4rem); font-weight:900;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.08}
.top h1 em{font-style:normal; color:var(--gold)}
.top .sub{margin:0 auto; max-width:640px; color:#dcdce2; font-size:1rem}

/* Lista de ciudades */
.cities{padding:34px 0 10px; display:grid; gap:26px}
.city{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#0b0b0d;
  box-shadow:0 18px 46px rgba(0,0,0,.55); transition:transform .18s, box-shadow .18s}
.city:hover{transform:translateY(-3px); box-shadow:0 24px 60px rgba(0,0,0,.7)}
.city .banner{width:100%; height:auto; aspect-ratio:1920/600; object-fit:cover; background:#000}
.city .info{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px;
  flex-wrap:wrap}
.city .meta{min-width:0}
.city .name{font-size:1.15rem; font-weight:900; text-transform:uppercase; letter-spacing:.01em; margin:0}
.city .date{color:var(--muted); font-size:.88rem; margin:2px 0 0}
.city .cta{flex:none; background:var(--green); color:#fff; border-radius:32px; padding:13px 30px;
  font-weight:800; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
  box-shadow:0 8px 22px rgba(47,191,87,.35); transition:transform .15s, filter .15s}
.city:hover .cta{transform:translateY(-2px); filter:brightness(1.07)}
/* ciudad agotada: sin registro, etiqueta roja, sin hover */
.city.is-sold{cursor:default}
.city.is-sold:hover{transform:none; box-shadow:0 18px 46px rgba(0,0,0,.55)}
.city .cta.cta-sold{background:#2a2a30; color:#ff5a5a; box-shadow:none}
.city.is-sold:hover .cta.cta-sold{transform:none; filter:none}

/* Patrocinador */
.sponsor{text-align:center; padding:50px 0 70px}
.sponsor img{height:auto; width:auto; max-height:74px; max-width:300px; margin:0 auto}

@media (max-width:760px){
  .top{padding:32px 0 6px}
  .top .logo{max-height:150px; max-width:240px}
  .top .promesa{max-width:none; font-size:1rem; line-height:1.2; margin-bottom:14px}
  .cities{gap:20px; padding:26px 0 6px}
  .city .info{padding:14px 16px; gap:12px}
  .city .name{font-size:1rem}
  .city .cta{flex:1 1 100%; text-align:center; padding:13px 18px}
  .sponsor{padding:36px 0 54px}
  .sponsor img{max-height:56px; max-width:230px}
  .page-bg{background-image:url('/gira-usa/2026-08-agosto/_assets/img/hero-bg-mb.webp')}

  /* ===== Versión compacta (body.compact): en móvil sube y encoge el header y
     compacta las tarjetas, para intentar que las 3 ciudades entren sin scroll ===== */
  .compact .top{padding:6px 0 2px}
  .compact .top .logo{max-height:84px}
  .compact .top .promesa{font-size:.83rem; line-height:1.14; margin:3px auto 4px}
  .compact .top h1{font-size:1.05rem; margin:3px 0 2px}
  .compact .top .sub{font-size:.76rem}
  .compact .cities{gap:8px; padding:6px 0 6px}
  .compact .city .info{flex-wrap:nowrap; padding:9px 12px; gap:10px}
  .compact .city .name{font-size:.9rem}
  .compact .city .date{font-size:.74rem}
  .compact .city .cta{flex:none; padding:10px 15px; font-size:.7rem}
}

/* ===== Popup de registro (mismo formulario que las landings) ===== */
.modal{position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.78); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal-box{background:linear-gradient(180deg,#16161b,#0c0c10); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; width:100%; max-width:460px; padding:30px 26px; position:relative; max-height:92vh; overflow:auto}
.modal-x{position:absolute; right:16px; top:14px; background:none; border:none; color:#aaa;
  font-size:1.7rem; cursor:pointer; line-height:1}
/* CTA antes del formulario */
.modal-cta{text-align:center; margin-bottom:14px}
.modal-cta-t{font-weight:900; text-transform:uppercase; font-size:1.35rem; line-height:1.1; color:#fff}
.modal-cta-s{margin-top:8px; color:#b6b6bd; font-size:.92rem; line-height:1.4}
.modal-city{text-align:center; color:var(--gold); font-weight:800; text-transform:uppercase; margin-bottom:18px}
/* Formulario */
.cm-form{display:flex; flex-direction:column; gap:13px}
.cm-form .field{position:relative}
.cm-form input{width:100%; background:rgba(18,18,22,.86); border:1px solid rgba(255,255,255,.14);
  color:#fff; border-radius:100px; padding:15px 20px; font-size:1rem; outline:none}
.cm-form input::placeholder{color:#8a8a92}
.cm-form input:focus{border-color:#F37C7B}
.cm-phone{display:flex; align-items:stretch; background:rgba(18,18,22,.86);
  border:1px solid rgba(255,255,255,.14); border-radius:100px; overflow:hidden}
.cm-phone:focus-within{border-color:#F37C7B}
.cm-phone select{background:transparent; border:none; color:#fff; font-family:inherit; font-size:1rem;
  padding:0 6px 0 18px; outline:none; cursor:pointer}
.cm-phone select option{color:#111}
.cm-phone input{background:transparent; border:none; border-radius:0; padding-left:10px}
.cm-form .err{color:#ffb4ad; font-size:.82rem; margin:-4px 0 2px 20px; display:none}
.cm-form.show-err .err.on{display:block}
.modal .btn-red{display:inline-flex; align-items:center; justify-content:center; text-align:center; width:100%;
  font-family:inherit; font-weight:800; font-size:1.05rem; letter-spacing:.01em; text-transform:uppercase; color:#fff;
  background:linear-gradient(89deg,#E91222 0%,#871515 100%); padding:17px 34px; border-radius:100px;
  border:1px solid rgba(255,120,120,.55); cursor:pointer; box-shadow:0 8px 30px rgba(233,18,34,.45);
  transition:transform .15s ease, box-shadow .25s ease}
.modal .btn-red:hover{transform:translateY(-2px); box-shadow:0 0 28px 4px rgba(233,18,34,.6),0 10px 34px rgba(233,18,34,.55)}
.modal .btn-red:disabled{opacity:.7; cursor:default; transform:none}
.modal .hero-safe{color:#8b8b93; font-size:.9rem}
@media (max-width:760px){
  .modal-box{padding:26px 20px}
  .modal-cta-t{font-size:1.15rem}
  .cm-form{gap:10px}
  .cm-form input{padding:13px 18px; font-size:.92rem}
  .cm-phone select{font-size:.92rem; padding:0 4px 0 14px}
  .modal .btn-red{padding:15px 24px; font-size:.98rem}
}