/* ==========================================================================
   Constructora Bolívar — Shell (header + footer + base)
   Extraído tal cual de home.html para que la landing de ferias herede la
   misma cabecera y pie que la home entregada. No introduce estilos nuevos.
   Requiere tokens.css.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--cb-font-family); background: var(--cb-background-page); color: var(--cb-text-primary); }

/* greybox reutilizable (placeholder de imagen) */
.greybox {
  background-color: var(--cb-color-gray-200);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 12px, rgba(0,0,0,.025) 12px, rgba(0,0,0,.025) 24px);
  display: flex; align-items: center; justify-content: center;
  background-repeat: no-repeat;background-position: center;background-size: cover;
}
.greybox > span { font-size: var(--cb-font-size-sm); color: var(--cb-text-tertiary); background: rgba(255,255,255,.85); padding: 6px 12px; border-radius: var(--cb-radius-sm); text-align: center; }

/* ====================================================================
   HEADER + FOOTER de landing
   La home lleva el shell completo (menús, buscador, bottom-nav). Esta
   pieza no: su único trabajo es que el usuario se inscriba, así que se le
   quitan las vías de escape y quedan solo el logo arriba y el mínimo legal
   abajo. Del diseño aprobado por la marca se tomó la estructura y las
   medidas, y los colores se tradujeron a nuestros tokens.
   ==================================================================== */

/* --- Header: 113 de alto, solo el logo al margen del sitio --------------
   El fondo lo pinta .lp-top, que envuelve header + hero: así los dos son una
   sola banda y no hay costura donde uno termina y el otro empieza. */
.lp-top { background-image: linear-gradient(255.49deg, #095636 .56%, #083c27 99.26%); }
.lp-header .cb-container { height: 113px; display: flex; align-items: flex-start; }
/* el logo es la casita: cuelga a ras del borde superior, sin aire arriba */
.lp-header__logo { width: 90px; height: 113px; display: block; }

/* --- Footer: banda ámbar con el logo montado + fila legal --------------- */
/* La banda mide 72 y el logo 98: alineado al fondo, los 26 de diferencia
   sobresalen por arriba (nunca por abajo, o el logo invadiría la fila legal).
   Sin margin-top: esos 26 se montan sobre la sección verde del formulario que
   va justo encima, en vez de abrir una franja blanca entre las dos. */
.lp-footer__band { background: var(--cb-color-amber-50); }
.lp-footer__band .cb-container { height: 72px; display: flex; align-items: flex-end; }
.lp-footer__logo { width: 78px; height: 98px; display: block; }

.lp-footer__legal { background: var(--cb-color-gray-300); }
.lp-footer__legal .cb-container {
  min-height: 60px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--cb-spacing-6); padding-top: 21px; padding-bottom: 21px;
}
.lp-footer__legal p { font-size: var(--cb-font-size-2xs); line-height: 14px; color: var(--cb-text-primary); }
.lp-footer__links a { color: var(--cb-text-primary); font-weight: var(--cb-font-weight-bold); text-decoration: underline; }
.lp-footer__links a:hover { color: var(--cb-brand-primary); }

/* ====================================================================
   MOBILE  (≤ 1023px)
   ==================================================================== */
@media (max-width: 1023px) {
  .lp-header .cb-container { height: 88px; }
  .lp-header__logo { width: 70px; height: 88px; }

  .lp-footer__band .cb-container { height: 56px; }
  .lp-footer__logo { width: 62px; height: 78px; }
  .lp-footer__legal .cb-container {
    flex-direction: column; align-items: flex-start; gap: var(--cb-spacing-2);
  }
}