/* ==========================================================================
   "Nos tomamos tu ciudad" — una gira por mes
   Bloque nuevo, separado de ferias.css a propósito: cuando se valide con el
   cliente, sube a components.css.

   Reemplaza al buscador país → ciudad → resultados. Como la gira ocurre en un
   solo territorio por mes, ya no hay nada que filtrar: el mapa pasa de ser un
   control a ser un plano de sedes.
   ========================================================================== */

/* Varios bloques de aquí abajo se muestran con flex/grid, que le gana al
   comportamiento por defecto de [hidden]. Sin esto, ocultar algo por JS no
   surte efecto. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* el fondo lo pone .lp-top (ver shell.css): header + hero son una sola banda */
.gira-hero { position: relative; }
/* sin aire arriba: el hero arranca pegado al header, que ya es la misma banda */
.gira-hero__intro { padding: 0 0 var(--cb-spacing-12); text-align: center; }
.gira-hero__intro .h1 { color: var(--cb-color-white); }
.gira-hero__intro .p { color: var(--cb-color-gray-100); margin-top: var(--cb-spacing-4);
                       max-width: 760px; margin-inline: auto; }   /* medida de lectura */

/* Mes + país: es el dato que cambia cada 30 días, va antes del titular. */
.gira-hero__kicker {
  display: inline-flex; align-items: center; gap: var(--cb-spacing-2);
  margin: 0 0 var(--cb-spacing-4); padding: 6px var(--cb-spacing-4);
  border-radius: var(--cb-rounded-full); border: 1px solid rgba(234,222,179,.45);
  font-size: var(--cb-font-size-cta); line-height: 18px; letter-spacing: 0.035px;
  font-weight: var(--cb-font-weight-bold); color: var(--cb-color-amber-50);
  text-transform: uppercase;
}
.gira-hero__badges { display: flex; flex-wrap: wrap; justify-content: center;
                     gap: var(--cb-spacing-6); margin-top: var(--cb-spacing-6); }
.gira-hero__badge { display: flex; align-items: center; gap: 8px; font-size: var(--cb-font-size-cta);
                    line-height: 18px; letter-spacing: 0.035px; color: var(--cb-color-white); }
.gira-hero__badge svg { width: 20px; height: 20px; color: var(--cb-color-amber-50); flex: none; }

/* --------------------------------------------------------------------------
   ESTADOS DE LA PÁGINA
   Solo se publica el mes en curso. Cuando no queda nada por mostrar, la
   captura de datos ocupa el lugar del contenido en vez de dejar un vacío.
   -------------------------------------------------------------------------- */
/* Piezas que solo aplican a un estado. `revert` devuelve al elemento su
   display natural (block en un <p>, inline en un <span>), así la misma regla
   sirve para párrafos y para trozos de titular. */
.solo-activa, .solo-terminada, .solo-singira { display: none; }
body[data-gira="activa"]    .solo-activa,
body[data-gira="terminada"] .solo-terminada,
body[data-gira="sin-gira"]  .solo-singira { display: revert; }
/* el kicker y los badges son flex, no su display por defecto */
body[data-gira="activa"] .gira-hero__kicker,
body[data-gira="terminada"] .gira-hero__kicker { display: inline-flex; }
body[data-gira="activa"] .gira-hero__badges { display: flex; }

.gira-vacio { display: none; background: var(--cb-color-green-800); padding: var(--cb-spacing-16) 0; }
body[data-gira="terminada"] .gira-vacio,
body[data-gira="sin-gira"] .gira-vacio { display: block; }
body[data-gira="terminada"] .gira,
body[data-gira="sin-gira"] .gira { display: none; }
/* cada estado muestra su propio titular */
body[data-gira="terminada"] .gira-vacio__proxima,
body[data-gira="sin-gira"] .gira-vacio__terminada { display: none; }

.gira-vacio__box { max-width: 680px; margin-inline: auto; text-align: center;
                   display: flex; flex-direction: column; align-items: center; gap: var(--cb-spacing-4); }
.gira-vacio__ic { display: grid; place-items: center; width: 64px; height: 64px;
                  border-radius: 50%; background: rgba(234,222,179,.15); color: var(--cb-color-amber-50); }
.gira-vacio__ic svg { width: 30px; height: 30px; }
.gira-vacio__box .h2 { color: var(--cb-color-white); margin: 0; }
.gira-vacio__p { color: var(--cb-color-gray-100); margin: 0; }
.gira-vacio__box .cb-btn { margin-top: var(--cb-spacing-2); }

/* --------------------------------------------------------------------------
   SECCIÓN DEL MES: mapa + sedes
   -------------------------------------------------------------------------- */
.gira { padding: var(--cb-spacing-16) 0; background: var(--cb-color-white); }
.gira__head { display: flex; flex-direction: column; gap: var(--cb-spacing-3);
              text-align: center; margin-bottom: var(--cb-spacing-8); }
.gira__head .p { max-width: 720px; margin-inline: auto; }

/* mapa a 7 columnas, panel de apoyo a 5: el mapa manda pero no se come la
   explicación de qué es cada tipo de evento */
.gira__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
               gap: var(--cb-grid-gutter); align-items: stretch; }
.gira__mapwrap {
  grid-column: span 8; position: relative; min-height: 520px;
  border-radius: var(--cb-rounded-xl); overflow: hidden;
  background: var(--cb-map-ocean); box-shadow: var(--cb-shadow-card);
}
.gira__aside { grid-column: span 4; align-self: start; min-width: 0;
               display: flex; flex-direction: column; gap: var(--cb-spacing-6);
               padding: var(--cb-spacing-6); border-radius: var(--cb-rounded-xl);
               border: 1px solid var(--cb-border-default); }
.gira__count { margin: 0; font-family: var(--cb-text-h4-family);
               font-size: var(--cb-text-h4-size); line-height: var(--cb-text-h4-leading);
               font-weight: var(--cb-text-h4-weight); color: var(--cb-text-primary); }
.gira__count b { color: var(--cb-brand-primary); }
.gira__tipos { display: flex; flex-direction: column; gap: var(--cb-spacing-5);
               padding-top: var(--cb-spacing-5); border-top: 1px solid var(--cb-border-default); }
.gira__tipo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-spacing-2); }
.gira__tipo .p { margin: 0; }

/* alternador Mapa / Lista — solo mobile */
.gira__toggle { display: none; }

/* --------------------------------------------------------------------------
   LAYOUT B · lista de sedes en el panel  (?layout=panel)
   Prueba pedida por Sergio (ago 2026): en pantallas bajas, el mapa y las
   cards no caben juntos, así que al pasar el mouse por un punto no se ve
   reaccionar a su card. Con la lista al lado, el módulo completo entra en un
   viewport corto y la relación pin ↔ sede queda a la vista.
   -------------------------------------------------------------------------- */
.gira__lista, .gira__tipos-tira, .layout-panel { display: none; }
body[data-layout="panel"] .layout-grid { display: none; }
body[data-layout="panel"] .layout-panel { display: revert; }

body[data-layout="panel"] .gira__tipos { display: none; }
body[data-layout="panel"] .gira__grid  { display: none; }
body[data-layout="panel"] .gira__lista { display: flex; }
body[data-layout="panel"] .gira__tipos-tira {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-grid-gutter);
  margin-top: var(--cb-spacing-6); padding-top: var(--cb-spacing-6);
}
/* La razón de ser de este layout es caber en una pantalla baja, así que el
   alto del módulo se fija: el panel NO puede estirar el mapa al crecer la
   lista — la lista rueda por dentro. */
body[data-layout="panel"] .gira__panel { --gira-panel-h: 520px; }
body[data-layout="panel"] .gira__mapwrap { min-height: 0; height: var(--gira-panel-h); }
body[data-layout="panel"] .gira__aside {
  align-self: stretch; height: var(--gira-panel-h); min-height: 0;
  gap: var(--cb-spacing-4); padding: var(--cb-spacing-5); overflow: hidden;
}
body[data-layout="panel"] .gira__count {
  flex: none; padding-bottom: var(--cb-spacing-4);
  border-bottom: 1px solid var(--cb-border-default);
}
/* OJO: el display se declara solo en la regla de layout=panel de arriba. Si se
   pusiera aquí, pisaría el `display:none` de la base y la lista aparecería
   también en el layout de grid. */
.gira__lista { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
               flex-direction: column; gap: var(--cb-spacing-3);
               margin-inline: calc(-1 * var(--cb-spacing-2));
               padding-inline: var(--cb-spacing-2); }
/* difuminado en los bordes: avisa que la lista sigue. El JS apaga cada lado
   al llegar a su extremo, para que la última fila no se vea cortada. */
.gira__lista.has-mas-abajo { mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.gira__lista.has-mas-arriba { mask-image: linear-gradient(to bottom, transparent, #000 28px); }
.gira__lista.has-mas-arriba.has-mas-abajo {
  mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* Fila = botón. Toda el área inscribe: no hay dos destinos que explicar. */
.gira-item {
  position: relative;   /* ancla del CTA flotante */
  display: flex; align-items: stretch; gap: var(--cb-spacing-3); width: 100%;
  padding: var(--cb-spacing-3) var(--cb-spacing-3) var(--cb-spacing-3) 0;
  background: none; border: 0; border-radius: var(--cb-radius-md);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .18s ease;
}
/* separadas por el gap de la lista (12), no por una línea: con aire de por
   medio el divisor sobra y cada sede se lee como una pieza propia */
.gira-item { flex: none; }
.gira-item:hover, .gira-item.is-on, .gira-item:focus-visible { background: var(--cb-color-green-50); }
.gira-item:focus-visible { outline: 2px solid var(--cb-brand-primary); outline-offset: -2px; }

/* la barra de color hace de pin: mismo código que en el mapa */
.gira-item__bar { flex: none; width: 4px; border-radius: 4px; }
.gira-item--feria .gira-item__bar { background: var(--cb-brand-primary); }
.gira-item--punto .gira-item__bar { background: var(--cb-color-amber-100); }

/* Sin miniatura (cliente, ago 2026). Hubo una variante con imagen de 56 px en
   cada fila; se retiró porque a ese tamaño la foto no se lee y le robaba ancho
   al nombre de la ciudad. La imagen de la sede ahora existe en un solo sitio:
   el banner del modal de inscripción, donde sí se ve. */

.gira-item__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gira-item__top { display: flex; align-items: baseline; gap: var(--cb-spacing-2); }
/* nowrap + ellipsis: "Fort Lauderdale" y "West Palm Beach" se partían en tres
   líneas y descuadraban la altura de las filas */
.gira-item__ciudad { min-width: 0; flex: 0 1 auto; font-family: var(--cb-text-h4-family);
                     font-size: var(--cb-font-size-md); line-height: 22px;
                     font-weight: var(--cb-text-h4-weight); color: var(--cb-text-primary);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gira-item__fecha { flex: none; margin-left: auto; white-space: nowrap;
                    font-size: var(--cb-font-size-2xs); line-height: 18px;
                    letter-spacing: -0.25px; color: var(--cb-text-secondary); }
.gira-item__pronto { margin-left: 5px; padding: 1px 6px; border-radius: var(--cb-rounded-full);
                     background: var(--cb-color-amber-100); color: var(--cb-text-primary);
                     font-weight: var(--cb-font-weight-bold); font-size: var(--cb-font-size-xs); }
.gira-item__sub { font-size: var(--cb-font-size-xs); line-height: 16px; color: var(--cb-text-tertiary);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gira-item__tipo { font-weight: var(--cb-font-weight-bold); color: var(--cb-text-secondary); }
.gira-item__sede { font-size: var(--cb-font-size-2xs); line-height: 18px; letter-spacing: -0.25px;
                   color: var(--cb-text-tertiary);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gira-item__tba { font-style: italic; }
/* El CTA solo aparece en la fila activa —en reposo, ocho botones seguidos
   compiten entre sí y ninguno se lee— y va **encima**, no en el flujo: si
   reservara su ancho le quitaría 90 px al texto en todas las filas, y ahí es
   donde se estrangulan los nombres largos. Como la fila ya está resaltada,
   el CTA se apoya en ese fondo con un degradado a la izquierda. */
.gira-item__cta {
  position: absolute; right: var(--cb-spacing-3); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px; padding-left: var(--cb-spacing-8);
  font-size: var(--cb-font-size-cta); line-height: 18px;
  font-weight: var(--cb-font-weight-bold); color: var(--cb-brand-primary);
  background: linear-gradient(to right, transparent, var(--cb-color-green-50) 32px);
  opacity: 0; transition: opacity .18s ease;
}
.gira-item__cta svg { width: 16px; height: 16px; }
.gira-item:hover .gira-item__cta, .gira-item.is-on .gira-item__cta,
.gira-item:focus-visible .gira-item__cta { opacity: 1; }

/* Diagnóstico UX · hallazgo 02 — En un teléfono no hay hover, así que el CTA
   se quedaba invisible y nada anunciaba que la fila lleva a la inscripción.
   Donde no hay hover queda una flecha permanente, con su espacio reservado
   para que no se monte sobre el texto. El rótulo se oculta pero sigue en el
   nombre accesible del botón. */
@media (hover: none) {
  .gira-item { padding-right: 34px; }
  .gira-item__cta { opacity: 1; background: none; padding-left: 0; right: 10px; }
  .gira-item__cta-txt { display: none; }
  .gira-item__cta svg { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   MAPA DEL TERRITORIO
   Mismo patrón que el mapamundi anterior (pines en una capa HTML sobre el
   SVG) pero sin zoom ni selección de país: el lienzo es fijo.
   -------------------------------------------------------------------------- */
/* Token de componente: el azul del océano. No está en tokens.css porque nace
   con este componente; sube al sistema junto con él. */
:root { --cb-map-ocean: #aadaff; }

.gira-map { position: relative; width: 100%; height: 100%; overflow: hidden;
            border-radius: var(--cb-rounded-xl); background: var(--cb-map-ocean); }
.gira-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* estados vecinos: solo dan referencia de dónde queda el territorio */
.gira-map__ctx { fill: var(--cb-color-gray-100); stroke: var(--cb-color-white);
                 stroke-width: 1; vector-effect: non-scaling-stroke; }
.gira-map__terr { fill: var(--cb-color-green-50); stroke: var(--cb-brand-primary);
                  stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.gira-map__layer { position: absolute; inset: 0; pointer-events: none; }
.gira-map__pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 15px; height: 15px; padding: 0; border-radius: 50%;
  border: 2px solid var(--cb-color-white); box-shadow: 0 1px 4px rgba(45,58,52,.35);
  cursor: pointer; pointer-events: auto;
  transition: width .2s ease, height .2s ease, transform .2s ease;
}
/* el color del pin es el mismo del tag de su tipo: el mapa y las cards se
   leen con el mismo código, sin tener que mirar la leyenda dos veces */
.gira-map__pin--feria { background: var(--cb-brand-primary); }
.gira-map__pin--punto { background: var(--cb-color-amber-100); }
.gira-map__pin:hover, .gira-map__pin.is-on, .gira-map__pin:focus-visible {
  width: 23px; height: 23px; border-width: 3px; z-index: 3;
}
.gira-map__pin::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid currentColor; color: inherit; opacity: 0;
}

/* línea guía de la etiqueta a su pin */
.gira-map__leaders { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.gira-map__leaders line { stroke: var(--cb-brand-primary); stroke-width: 1; opacity: .6; }
.gira-map__leaders line.is-on { stroke-width: 2; opacity: 1; }

/* la posición la calcula el JS (left/top): la etiqueta va al lado del pin */
.gira-map__tag {
  position: absolute; padding: 3px 8px; border-radius: var(--cb-radius-sm);
  background: var(--cb-color-white); box-shadow: var(--cb-shadow-card);
  font-size: var(--cb-font-size-2xs); line-height: 16px; letter-spacing: -0.5px;
  color: var(--cb-text-primary); white-space: nowrap; pointer-events: none;
  transition: background .2s ease, color .2s ease;
}
.gira-map__tag.is-on { background: var(--cb-brand-primary); color: var(--cb-color-white);
                       font-weight: var(--cb-font-weight-bold); z-index: 4; }

.gira-map__legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px;
                    background: rgba(255,255,255,.92); border-radius: var(--cb-radius-md);
                    padding: 8px 10px; pointer-events: none; }
.gira-map__legend-row { display: flex; align-items: center; gap: 6px; font-size: var(--cb-font-size-xs);
                        line-height: 14px; color: var(--cb-text-tertiary); }
.gira-map__legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gira-map__legend-dot--feria { background: var(--cb-brand-primary); }
.gira-map__legend-dot--punto { background: var(--cb-color-amber-100); }

/* --------------------------------------------------------------------------
   CARD DE SEDE
   Una por sede, no una por fecha: la inscripción es a un lugar concreto.
   Hereda la geometría de la card de feria aprobada (imagen 282×120, radio 12,
   sin caja ni sombra) y le suma las filas de sede y horario.
   -------------------------------------------------------------------------- */
/* stretch, no start: una sede sin dirección ocupa dos líneas menos y sin esto
   los botones de la fila quedan a distintas alturas */
.gira__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: var(--cb-spacing-10) var(--cb-grid-gutter); align-items: stretch;
              margin-top: var(--cb-spacing-12); }

.gira-card { display: flex; flex-direction: column; gap: var(--cb-spacing-4); height: 100%;
             border-radius: var(--cb-rounded-lg); transition: box-shadow .2s ease; }
.gira-card__body { flex: 1 1 auto; }
/* respuesta visual cuando se llega desde un pin del mapa */
.gira-card.is-flash { box-shadow: 0 0 0 3px var(--cb-color-amber-100); }
/* el reflejo del hover sobre un pin, para que se vea de qué sede se trata */
.gira-card.is-on { box-shadow: 0 0 0 3px var(--cb-color-green-50); }

.gira-card__media { position: relative; height: 120px; border-radius: var(--cb-rounded-lg); overflow: hidden; }
/* la posición es cosa de la card; el color viaja aparte porque el mismo tag
   se usa suelto en el panel lateral y en la cabecera del modal */
.gira-card__tag { position: absolute; left: var(--cb-spacing-3); top: var(--cb-spacing-3); }
/* el tag de tipo usa la misma paleta que su pin en el mapa */
.gira-tag--feria { background: var(--cb-brand-primary); color: var(--cb-color-white); }
.gira-tag--punto { background: var(--cb-color-amber-100); color: var(--cb-text-primary); }

.gira-card__body { display: flex; flex-direction: column; gap: var(--cb-spacing-3); }
.gira-card__head { display: flex; flex-direction: column; gap: 2px; }
.gira-card__ciudad { margin: 0; font-family: var(--cb-text-h4-family);
                     font-size: var(--cb-text-h4-size); line-height: var(--cb-text-h4-leading);
                     letter-spacing: var(--cb-text-h4-spacing); font-weight: var(--cb-text-h4-weight);
                     color: var(--cb-text-primary); }
/* la cabecera que comunica el cliente (Miami) cuando la sede real es otra */
.gira-card__zona { font-size: var(--cb-font-size-2xs); line-height: 16px; letter-spacing: -0.5px;
                   color: var(--cb-text-tertiary); }

.gira-card__rows { display: flex; flex-direction: column; gap: var(--cb-spacing-2); }
.gira-card__row { display: flex; align-items: flex-start; gap: 8px;
                  font-size: var(--cb-font-size-2xs); line-height: 18px; letter-spacing: -0.25px;
                  color: var(--cb-text-secondary); }
.gira-card__ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--cb-brand-primary); }
.gira-card__sede { display: flex; flex-direction: column; }
.gira-card__sede b { font-weight: var(--cb-font-weight-bold); color: var(--cb-text-primary); }
.gira-card__dir { color: var(--cb-text-tertiary); }
/* enlace al mapa de Google con la dirección — es lo único para lo que se usa
   Google aquí: el iframe/enlace no necesita API key ni facturación */
.gira-card__como { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
                   color: var(--cb-brand-primary); text-decoration: none;
                   font-weight: var(--cb-font-weight-bold); }
.gira-card__como:hover { text-decoration: underline; }
.gira-card__como svg { width: 16px; height: 16px; }
/* Dato aún no confirmado. Se marca en vez de esconder la fila: un hueco deja
   pensando que se nos olvidó; esto dice que va a llegar. */
.gira-card__tba { display: inline-block; padding: 1px 8px; border-radius: var(--cb-rounded-full);
                  background: var(--cb-color-gray-300); border: 1px dashed var(--cb-border-default);
                  color: var(--cb-text-tertiary); font-style: italic; }
.gira-card__pronto { margin-left: 6px; padding: 1px 8px; border-radius: var(--cb-rounded-full);
                     background: var(--cb-color-amber-100); color: var(--cb-text-primary);
                     font-weight: var(--cb-font-weight-bold); font-size: var(--cb-font-size-xs); }

.gira-card__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-spacing-2);
                  margin-top: auto; padding-top: var(--cb-spacing-3); }
.gira-card__cta .cb-btn--main { width: 100%; }

/* llamado para quien no tiene sede cerca */
.gira__aviso {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cb-spacing-6);
  margin-top: var(--cb-spacing-12); padding: var(--cb-spacing-6);
  border: 1px solid var(--cb-border-default); border-radius: var(--cb-rounded-lg);
}

/* --------------------------------------------------------------------------
   MODAL DE INSCRIPCIÓN
   Sustituye a la página interna: el formulario llega al usuario sin sacarlo
   de la lista de sedes.
   -------------------------------------------------------------------------- */
body.has-modal { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
         padding: var(--cb-spacing-6); }
.modal__backdrop { position: absolute; inset: 0; background: rgba(51,62,51,.55);
                   opacity: 0; transition: opacity .2s ease; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__dialog {
  position: relative; width: min(680px, 100%); max-height: calc(100vh - var(--cb-spacing-12));
  overflow-y: auto; background: var(--cb-modal-background); border-radius: var(--cb-modal-radius);
  box-shadow: var(--cb-shadow-xl);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .2s ease, transform .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__close {
  position: absolute; right: var(--cb-spacing-4); top: var(--cb-spacing-4); z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--cb-color-white); border: 1px solid var(--cb-border-default);
  color: var(--cb-text-secondary); cursor: pointer;
}
.modal__close:hover { background: var(--cb-color-gray-300); color: var(--cb-text-primary); }
.modal__close svg { width: 18px; height: 18px; }

/* banner de la sede: el único color del modal, y la única imagen que se ve a
   buen tamaño en este layout */
/* el tag va fuera del .greybox a propósito: `.greybox > span` pinta la píldora
   blanca del placeholder y le ganaba en especificidad al color del tipo */
.modal__media { position: relative; height: 190px; overflow: hidden;
                border-radius: var(--cb-modal-radius) var(--cb-modal-radius) 0 0; }
.modal__media-img { display: flex; width: 100%; height: 100%; }
.modal__media-tag { position: absolute; left: var(--cb-spacing-6); bottom: var(--cb-spacing-4); }

/* cabecera: recuerda a qué evento se está inscribiendo */
.modal__head { padding: var(--cb-spacing-5) var(--cb-spacing-6) var(--cb-spacing-5);
               background: var(--cb-color-white);
               display: flex; flex-direction: column; gap: var(--cb-spacing-2); }
.modal__head .h3 { margin: 0; }
.modal__zona { margin: 0; font-size: var(--cb-font-size-2xs); line-height: 16px;
               letter-spacing: -0.5px; color: var(--cb-text-tertiary); }
.modal__desc { margin: var(--cb-spacing-2) 0 0; color: var(--cb-text-secondary); }

.modal__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: var(--cb-spacing-4); margin: var(--cb-spacing-3) 0 0;
                padding-top: var(--cb-spacing-4); border-top: 1px solid var(--cb-border-default); }
.modal__datos dt { font-size: var(--cb-font-size-xs); line-height: 14px; text-transform: uppercase;
                   letter-spacing: .4px; color: var(--cb-brand-primary); font-weight: var(--cb-font-weight-bold); }
/* Fechas / sede / horario van al mismo tamaño que el párrafo introductorio
   (.p--sm, 14/18): son el dato que el usuario viene a verificar antes de
   inscribirse, no una nota al pie. */
.modal__datos dd { margin: 4px 0 0; font-size: var(--cb-font-size-cta); line-height: 18px;
                   letter-spacing: 0.035px; color: var(--cb-text-primary); }
.modal__dir { display: block; color: var(--cb-text-tertiary); }

.modal__nota { display: flex; align-items: flex-start; gap: 8px; margin: var(--cb-spacing-3) 0 0;
               padding: var(--cb-spacing-3); border-radius: var(--cb-radius-md);
               background: var(--cb-color-green-50);
               font-size: var(--cb-font-size-2xs); line-height: 18px; letter-spacing: -0.25px;
               color: var(--cb-text-secondary); }
.modal__nota svg { width: 18px; height: 18px; flex: none; color: var(--cb-brand-primary); }

.modal__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-spacing-4);
               padding: 0 var(--cb-spacing-6) var(--cb-spacing-6);
               border-top: 1px solid var(--cb-border-default); padding-top: var(--cb-spacing-6); }
/* .cb-field trae los 273px del componente suelto; dentro de una grilla el campo
   tiene que ocupar su celda (mismo ajuste que ya hacía .aviso__form). Y va
   alineado arriba: los que llevan helper son más altos y no deben estirar a su
   vecino de fila. */
.modal__form .cb-field { width: 100%; align-self: start; }
.modal__form .full { grid-column: 1 / -1; }

/* Los helpers bajan a 12/18 —el tamaño que tenían fechas/sede/horario— para
   que no compitan con la etiqueta del campo: son la letra pequeña del
   formulario. Solo aquí; el token del sistema (14) no se toca. */
.modal__form .cb-field__helper { font-size: var(--cb-font-size-2xs); line-height: 18px;
                                 letter-spacing: -0.25px; }

/* Indicativo fijo delante del teléfono (cliente, ago 2026). Es dato, no
   entrada: se lee en gris y con un filete que lo separa de lo que sí se
   escribe. Si se aprueba, sube a components.css como parte del sistema. */
.cb-field__prefix {
  flex: none; padding-right: var(--cb-spacing-2);
  border-right: 1px solid var(--cb-input-border-default);
  font-size: var(--cb-input-text-size); line-height: var(--cb-input-text-leading);
  letter-spacing: var(--cb-input-text-spacing); color: var(--cb-text-secondary);
}
/* el botón no va a todo el ancho: se ajusta a su texto con 40 de aire a cada
   lado, y arranca alineado con la primera columna del formulario */
.modal__submit { grid-column: 1 / -1; justify-self: start; width: auto;
                 padding-inline: 40px; }

.modal__ok { display: flex; flex-direction: column; align-items: center; text-align: center;
             gap: var(--cb-spacing-4); padding: var(--cb-spacing-12) var(--cb-spacing-6); }
.modal__ok:focus { outline: none; }
.modal__ok-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
                background: var(--cb-color-green-50); color: var(--cb-brand-primary); }
.modal__ok-ic svg { width: 30px; height: 30px; }
.modal__ok .h3 { margin: 0; }
.modal__ok .p { margin: 0; max-width: 420px; }

.lp-header .cb-container{
    position: relative;
}
.lp-header .cb-container .gira-hero__kicker{
    position: absolute;
    top: 35%;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 289px;
    gap: 4px;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 699px) {
   .modal__media{
        height: 64px;
   }
   .modal__media .modal__media-img{
       height: 0;
   }
   .lp-header .cb-container{
        flex-direction: column;
        height: auto;
        gap: 15px;
    }
    .lp-header .cb-container .gira-hero__kicker{
        position: relative;
        width: auto;
    }
}
@media (max-width: 1023px) {
  .gira-hero__intro { padding: 0 0 var(--cb-spacing-8); }
  .gira-vacio { padding: var(--cb-spacing-12) 0; }
  .gira { padding: var(--cb-spacing-12) 0; }

  /* el mapa deja de ser el protagonista: pasa a visor de apoyo, con el
     alternador para no obligar a hacer pinch-zoom sobre un teléfono */
  .gira__panel { grid-template-columns: minmax(0, 1fr); gap: var(--cb-spacing-4); }
  .gira__mapwrap { grid-column: span 1; min-height: 0; height: 380px; order: -1; }
  .gira__aside { grid-column: span 1; padding: var(--cb-spacing-5) var(--cb-spacing-4); }
  .gira__panel.is-list .gira__mapwrap { display: none; }
  .gira__toggle { display: flex; order: -2; gap: 4px; }
  .gira__toggle button { flex: 1 1 0; height: 36px; border-radius: var(--cb-rounded-full);
                         border: 1px solid var(--cb-brand-primary); background: transparent;
                         font-family: inherit; font-size: var(--cb-text-button-size);
                         font-weight: var(--cb-text-button-weight); color: var(--cb-brand-primary); cursor: pointer; }
  .gira__toggle button.is-active { background: var(--cb-brand-primary); color: var(--cb-color-white); }
  .gira-map__legend { display: none; }
  /* el pin mide 15px: se le amplía el área táctil sin cambiar su dibujo */
  .gira-map__pin::before { content: ""; position: absolute; inset: -13px; border-radius: 50%; }

  /* mismo patrón de la home: slider horizontal a sangre de pantalla */
  .gira__grid {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--cb-mobile-margin)); padding-inline: var(--cb-mobile-margin);
    scroll-padding-inline: var(--cb-mobile-margin); margin-top: var(--cb-spacing-8);
  }
  .gira__grid::-webkit-scrollbar { display: none; }
  .gira__grid > * { flex: 0 0 300px; width: auto; scroll-snap-align: start; }
  .gira__aviso { flex-direction: column; align-items: flex-start; }

  /* Layout B en mobile: no hay dos columnas que cuadrar ni hover que mostrar,
     así que la lista crece con su contenido en vez de rodar dentro del panel */
  body[data-layout="panel"] .gira__aside { align-self: auto; overflow: visible; }
  .gira__lista { overflow-y: visible; }
  body[data-layout="panel"] .gira__tipos-tira { grid-template-columns: 1fr; }

  .modal { padding: 0; align-items: flex-end; }
  .modal__dialog { width: 100%; max-height: 92vh; border-radius: var(--cb-modal-radius) var(--cb-modal-radius) 0 0; }
  .modal__head { border-radius: var(--cb-modal-radius) var(--cb-modal-radius) 0 0; }
  .modal__form { grid-template-columns: 1fr; }
  .modal__datos { grid-template-columns: 1fr; gap: var(--cb-spacing-3); }
}