/* ==========================================================================
   Constructora Bolívar — Ferias en el exterior
   Requiere: tokens.css · components.css · shell.css
   Lo propio de la gira del mes (hero, mapa, cards, modal) vive en gira.css.

   Este archivo tiene dos capas separadas a propósito:

   A · COMPONENTES NUEVOS  → candidatos a subir a components.css cuando se
       validen. Todos usan tokens (color, radio, tipografía, espaciado) y
       ninguno introduce un valor crudo que no esté ya en el sistema.
         .cb-grid12     retícula de 12 columnas (gutter 24)
         .cb-accordion  preguntas frecuentes
         .cb-quote      testimonio
         .cb-flag       disco de bandera (20 / 24)

   B · SECCIONES          → composición propia de la landing.

   Ago 2026: se eliminaron los bloques del buscador país → ciudad (.cb-chip,
   .cb-stepper, .cb-map, .cb-card-feria, .cb-tabs-mes) y los de la página
   interna de feria (.cb-countdown, .cb-agenda, .fhero, .fbar). El cliente
   pasó a publicar una sola gira por mes y la interna desapareció; el estado
   anterior queda en el historial del repo.
   ========================================================================== */


/* ##########################################################################
   A · COMPONENTES NUEVOS
   ########################################################################## */

/* --------------------------------------------------------------------------
   RETÍCULA · .cb-grid12
   12 columnas de 78 con gutter 24 dentro de .cb-container (1200).
   En mobile colapsa a 1 columna (la retícula mobile de marca es de 1 col
   con margen lateral de 18).
   -------------------------------------------------------------------------- */
.cb-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cb-grid-gutter); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* --------------------------------------------------------------------------
   BANDERA · .cb-flag
   Disco de bandera simplificado (no es el escudo oficial, es señalética).
   -------------------------------------------------------------------------- */
.cb-flag { position: relative; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
           flex: none; display: block; box-shadow: inset 0 0 0 1px rgba(51,62,51,.12); }
.cb-flag--sm { width: 20px; height: 20px; }
.cb-flag--us { background: linear-gradient(180deg, #b22234 0 20%, #fff 20% 40%, #b22234 40% 60%, #fff 60% 80%, #b22234 80%); }
.cb-flag--us::before { content: ""; position: absolute; inset: 0 55% 50% 0; background: #3c3b6e; }
.cb-flag--es { background: linear-gradient(180deg, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%); }
.cb-flag--ca { background: linear-gradient(90deg, #d52b1e 0 28%, #fff 28% 72%, #d52b1e 72%); }
.cb-flag--mx { background: linear-gradient(90deg, #006847 0 33.3%, #fff 33.3% 66.6%, #ce1126 66.6%); }
.cb-flag--cl { background: linear-gradient(180deg, #fff 0 50%, #d52b1e 50%); }
.cb-flag--cl::before { content: ""; position: absolute; inset: 0 62% 50% 0; background: #0039a6; }
.cb-flag--gb { background:
  linear-gradient(90deg, transparent 38%, #cf142b 38% 62%, transparent 62%),
  linear-gradient(180deg, transparent 38%, #cf142b 38% 62%, transparent 62%),
  #00247d; }
.cb-flag--pa { background: conic-gradient(from 0deg, #d21034 0 25%, #fff 25% 50%, #005293 50% 75%, #fff 75%); }
.cb-flag--co { background: linear-gradient(180deg, #fcd116 0 50%, #003893 50% 75%, #ce1126 75%); }

/* --------------------------------------------------------------------------
   ACORDEÓN · .cb-accordion
   Estructura del diseño aprobado:
   preguntas numeradas, cada una en su propia caja con radio 12 y el chevron
   dentro de un círculo verde claro. Numeración por contador CSS: el orden lo
   pone la hoja de estilos, no el marcado.
   -------------------------------------------------------------------------- */
.cb-accordion { display: flex; flex-direction: column; gap: var(--cb-spacing-2); counter-reset: faq; }
.cb-accordion__item { background: var(--cb-color-gray-300); border-radius: var(--cb-rounded-lg); overflow: hidden; }
.cb-accordion__btn {
  width: 100%; display: flex; align-items: center; gap: var(--cb-spacing-4);
  padding: var(--cb-spacing-4) var(--cb-spacing-6); background: none; border: none;
  cursor: pointer; text-align: left;
  font-family: var(--cb-text-h4-family); font-weight: var(--cb-text-h4-weight);
  font-size: var(--cb-text-h4-size); line-height: var(--cb-text-h4-leading);
  letter-spacing: var(--cb-text-h4-spacing); color: var(--cb-text-primary);
}
.cb-accordion__btn::before {
  counter-increment: faq; content: counter(faq) ".";
  flex: none; min-width: 28px; text-align: right; color: var(--cb-text-primary);
}
.cb-accordion__btn span { flex: 1 1 0; min-width: 0; }
.cb-accordion__btn:hover { color: var(--cb-brand-primary); }
.cb-accordion__ic {
  width: 32px; height: 32px; flex: none; padding: 4px; border-radius: 50%;
  background: var(--cb-brand-primary-subtle); color: var(--cb-brand-primary);
  transition: transform .25s ease;
}
.cb-accordion__item.is-open .cb-accordion__ic { transform: rotate(180deg); }
.cb-accordion__panel { display: none; padding: 0 var(--cb-spacing-6) var(--cb-spacing-5) 68px; }
.cb-accordion__item.is-open .cb-accordion__panel { display: block; }
.cb-accordion__panel p { margin: 0; font-size: var(--cb-text-paragraph-size); line-height: var(--cb-text-paragraph-leading);
                         letter-spacing: var(--cb-text-paragraph-spacing); color: var(--cb-text-tertiary); }

/* --------------------------------------------------------------------------
   CERTIFICACIONES · slots de 3 columnas
   -------------------------------------------------------------------------- */
.recon__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cb-grid-gutter); }

/* --------------------------------------------------------------------------
   TESTIMONIO · .cb-quote
   Diseño aprobado: comilla ámbar
   centrada, bandera + nombre, y el texto debajo. Sin caja, sin sombra y sin
   avatar. Se le agregó el país bajo el nombre.
   -------------------------------------------------------------------------- */
.cb-quote { display: flex; flex-direction: column; gap: var(--cb-spacing-3); align-items: center;
            padding-inline: var(--cb-grid-gutter); }
.cb-quote__mark { width: 38px; height: 29px; color: var(--cb-color-amber-100); flex: none;
                  margin-bottom: var(--cb-spacing-3); }   /* 12 + 12 = 24 hasta el nombre */
.cb-quote__author { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cb-quote__id { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cb-quote__name {
  font-family: var(--cb-text-h4-family); font-weight: var(--cb-text-h4-weight);
  font-size: var(--cb-text-h4-size); line-height: var(--cb-text-h4-leading);
  letter-spacing: var(--cb-text-h4-spacing); color: var(--cb-text-primary);
}
.cb-quote__from { font-size: var(--cb-font-size-cta); line-height: 18px; letter-spacing: 0.035px;
                  color: var(--cb-text-tertiary); }
.cb-quote__text { margin: 0; text-align: center; font-size: var(--cb-text-paragraph-size);
                  line-height: var(--cb-text-paragraph-leading); letter-spacing: 0.08px;
                  color: var(--cb-text-primary); }

   B · SECCIONES
   ########################################################################## */

/* el header es sticky: los anclas deben frenar antes de quedar debajo */
section[id] { scroll-margin-top: 180px; }

/* helpers tipográficos de sección (mismos estilos nombrados de tokens.css) */
.sec { padding: var(--cb-spacing-16) 0; }
.sec--tight { padding: var(--cb-spacing-12) 0; }
.sec__head { display: flex; flex-direction: column; gap: var(--cb-spacing-3); margin-bottom: var(--cb-spacing-10); max-width: 720px; }
.sec__head--center { margin-inline: auto; text-align: center; align-items: center; }
.h1 { font-family: var(--cb-text-h1-family); font-size: var(--cb-text-h1-size); line-height: var(--cb-text-h1-leading);
      font-weight: var(--cb-text-h1-weight); letter-spacing: var(--cb-text-h1-spacing); margin: 0; }
.h2 { font-family: var(--cb-text-h2-family); font-size: var(--cb-text-h2-size); line-height: var(--cb-text-h2-leading);
      font-weight: var(--cb-text-h2-weight); letter-spacing: var(--cb-text-h2-spacing); margin: 0; }
.h3 { font-family: var(--cb-text-h3-family); font-size: var(--cb-text-h3-size); line-height: var(--cb-text-h3-leading);
      font-weight: var(--cb-text-h3-weight); letter-spacing: var(--cb-text-h3-spacing); margin: 0; }
.h4 { 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); letter-spacing: var(--cb-text-h4-spacing); margin: 0; }
.p  { font-size: var(--cb-text-paragraph-size); line-height: var(--cb-text-paragraph-leading);
      letter-spacing: var(--cb-text-paragraph-spacing); margin: 0; }
.p--sm { font-size: var(--cb-font-size-cta); line-height: 18px; letter-spacing: 0.035px; }
.eyebrow { font-size: var(--cb-font-size-2xs); line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase;
           font-weight: var(--cb-font-weight-bold); color: var(--cb-brand-primary); margin: 0; }
.eyebrow--inv { color: var(--cb-color-amber-50); }
/* salto de línea solo en mobile (en desktop el título corre de un tirón) */
.br-mbl { display: none; }
.muted { color: var(--cb-text-tertiary); }
.on-dark { color: var(--cb-color-white); }
.on-dark .muted { color: var(--cb-color-gray-400); }
.green { color: var(--cb-brand-primary); }
.amber { color: var(--cb-color-amber-50); }

/* --------------------------------------------------------------------------
   PASOS (cómo comprar desde el exterior)
   -------------------------------------------------------------------------- */
/* Diseño aprobado: disco gris con
   el icono, el número en una pastilla montada arriba a la izquierda, y el
   texto centrado debajo. */
.pasos__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
               gap: var(--cb-grid-gutter); justify-items: center; }
.paso-card { display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-md);
             text-align: center; max-width: 232px; }
.paso-card__badge { position: relative; flex: none; }
.paso-card__circle {
  width: 84px; height: 84px; border-radius: 50%; background: var(--cb-background-surface);
  display: flex; align-items: center; justify-content: center; color: var(--cb-text-primary);
}
.paso-card__circle svg { width: 42px; height: 42px; display: block; }
.paso-card__num {
  position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cb-color-black); color: var(--cb-color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--cb-font-size-base); line-height: 22px; font-weight: var(--cb-font-weight-bold);
}
.paso-card__txt { display: flex; flex-direction: column; gap: 6px; }
.paso-card__title { margin: 0; font-size: var(--cb-text-paragraph-size); line-height: var(--cb-text-paragraph-leading);
                    font-weight: var(--cb-font-weight-bold); letter-spacing: 0.08px; }
.paso-card__desc { margin: 0; font-size: var(--cb-text-paragraph-size); line-height: var(--cb-text-paragraph-leading);
                   letter-spacing: 0.08px; color: var(--cb-text-tertiary); }

/* --------------------------------------------------------------------------
   BENEFICIOS  ·  diseño aprobado
   Cuatro tarjetas iguales: icono 24 arriba, título H4 y párrafo. Fondo casi
   blanco y una sombra alta que las despega del fondo de la página.
   -------------------------------------------------------------------------- */
:root { --cb-shadow-xl: 0 35px 30px 0 rgba(0, 0, 0, .12); }   /* "Sombra XL" del diseño */

.benef__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cb-grid-gutter); }
.benef-card {
display: flex;
    flex-direction: column;
    gap: var(--cb-spacing-3);
    padding: var(--cb-space-md);
    border-radius: var(--cb-rounded-lg);
    background: rgba(255, 255, 255, .05);
}
.benef-card__ic { width: 24px; height: 24px; flex: none; color: #a3f7d4; }
.benef-card__ic svg { width: 24px; height: 24px; display: block; }
.benef-card__txt { display: flex; flex-direction: column; gap: 6px; }

/* --------------------------------------------------------------------------
   RECONOCIMIENTOS  ·  diseño aprobado
   Bloque gris con dos tarjetas blancas; los sellos van en discos que se montan
   sobre el borde superior de cada tarjeta. Esta versión va sin botón.
   -------------------------------------------------------------------------- */
.recon__bloque {
  background: var(--cb-background-surface); border-radius: var(--cb-rounded-lg);
  padding: var(--cb-spacing-10) var(--cb-spacing-8) var(--cb-spacing-12);
}
.recon__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: var(--cb-grid-gutter); margin-top: calc(var(--cb-spacing-16) + var(--cb-spacing-2)); }
.recon__card {
  position: relative; background: var(--cb-color-white);
  border: 1px solid var(--cb-border-default); border-radius: var(--cb-rounded-lg);
  box-shadow: var(--cb-shadow-card);
  padding: var(--cb-spacing-12) var(--cb-spacing-8) var(--cb-spacing-8);
  display: flex; flex-direction: column; gap: var(--cb-spacing-3);
}
/* discos de sello montados sobre el borde superior */
.recon__sellos { position: absolute; top: 0; left: var(--cb-spacing-8); display: flex; gap: var(--cb-spacing-3);
                 transform: translateY(-50%); }
.recon__sello {
  width: 96px; height: 96px; border-radius: 50%; flex: none;
  background: var(--cb-color-white); box-shadow: var(--cb-shadow-card);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.recon__sello img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* --------------------------------------------------------------------------
   PROYECTOS (slider de cb-card-proy)
   -------------------------------------------------------------------------- */
.proyectos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cb-grid-gutter); }
.proyectos__grid .cb-card-proy { width: 100%; }

/* --------------------------------------------------------------------------
   TESTIMONIOS
   -------------------------------------------------------------------------- */
.testi__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cb-grid-gutter); }

/* --------------------------------------------------------------------------
   AVISO (captura de leads sin feria en su ciudad)
   -------------------------------------------------------------------------- */
.aviso { background-image: linear-gradient(255.49deg, #095636 .56%, #083c27 99.26%); }
.aviso .cb-container { display: grid; grid-template-columns: 5fr 7fr; gap: var(--cb-spacing-12); align-items: center;
                       padding-top: var(--cb-spacing-16); padding-bottom: var(--cb-spacing-16); }
.aviso__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-spacing-4); }
.aviso__form .cb-field { width: 100%; }
.aviso__form .cb-field__label { color: var(--cb-color-white); }
.aviso__form .aviso__submit { grid-column: 1 / -1; justify-self: start;
                              min-width: 0; padding-inline: var(--cb-spacing-10); }   /* 40 */
.aviso__legal { grid-column: 1 / -1; font-size: var(--cb-font-size-xs); line-height: 14px; color: var(--cb-color-gray-400); }
.aviso__legal a { color: var(--cb-color-amber-50); }

/* Formulario y confirmación comparten la misma celda de la retícula: al enviar,
   uno reemplaza al otro sin que la sección cambie de alto ni de posición. */
.aviso__side { min-width: 0; }
.aviso__ok { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-spacing-4); }
.aviso__ok:focus { outline: none; }
.aviso__ok .h3 { margin: 0; color: var(--cb-color-white); }
.aviso__ok .p { margin: 0; color: var(--cb-color-gray-100); max-width: 52ch; }
.aviso__ok-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
                background: var(--cb-color-amber-50); color: var(--cb-brand-primary); }
.aviso__ok-ic svg { width: 26px; height: 26px; }

/* Casilla de autorización de datos. La usan el formulario de #aviso y el modal
   de inscripción; vivía en el bloque de la página interna y se cayó al
   borrarlo, así que se queda aquí, que es donde sigue haciendo falta. */
.registro__check { display: flex; align-items: flex-start; gap: var(--cb-spacing-3); grid-column: 1 / -1; cursor: pointer; }
/* 18 = alto de línea del texto: así la caja calza con la primera línea */
.registro__check input { margin: 0; accent-color: var(--cb-brand-primary); width: 18px; height: 18px; flex: none; }
.registro__check span { font-size: var(--cb-font-size-cta); line-height: 18px; letter-spacing: 0.035px;
                        color: var(--cb-text-tertiary); }
.registro__check a { color: var(--cb-brand-primary); }
/* sobre la banda verde el verde del enlace no se lee: pasa a ámbar */
.aviso .registro__check span { color: var(--cb-color-gray-100); }
.aviso .registro__check a { color: var(--cb-color-amber-50); }

.benef {
    background: var(--cb-brand-primary);
}
.on-dark .muted {
    color: var(--cb-color-gray-400);
}

@media (max-width: 1023px) {
  .cb-grid12 { grid-template-columns: 1fr; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 1; }

  .br-mbl { display: inline; }
  .h1 { font-size: var(--cb-font-size-2xl); line-height: 38px; }
  .h2 { font-size: var(--cb-font-size-xl); line-height: 30px; }
  .sec { padding: var(--cb-spacing-12) 0; }
  .sec__head { margin-bottom: var(--cb-spacing-8); }

  /* mismo patrón de la home: slider horizontal a sangre de pantalla */
  .proyectos__grid, .testi__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);
  }
  .proyectos__grid::-webkit-scrollbar, .testi__grid::-webkit-scrollbar { display: none; }
  .proyectos__grid > *, .testi__grid > * { flex: 0 0 300px; width: auto; scroll-snap-align: start; }

  .pasos__grid, .benef__grid, .recon__grid { grid-template-columns: 1fr; }
  .recon__bloque { padding: var(--cb-spacing-8) var(--cb-spacing-4) var(--cb-spacing-10); }
  .recon__grid { margin-top: var(--cb-spacing-16); gap: var(--cb-spacing-16); }
  .recon__sello { width: 72px; height: 72px; padding: 10px; }
  .recon__sellos { left: var(--cb-spacing-5); gap: var(--cb-spacing-2); }
  .recon__card { padding: var(--cb-spacing-10) var(--cb-spacing-5) var(--cb-spacing-6); }

  .aviso .cb-container { grid-template-columns: 1fr; gap: var(--cb-spacing-8);
                         padding-top: var(--cb-spacing-12); padding-bottom: var(--cb-spacing-12); }
  .aviso__form { grid-template-columns: 1fr; }
  section[id] { scroll-margin-top: 24px; }
}