/* ==========================================================================
   frame.css — el marco de la pagina: aviso de demo, cabecera, barra fija de
   movil y pie. Todo lo que rodea al contenido y se repite en cada pagina.

   Selectores de una sola clase. Nada de selectores de elemento que puedan
   pelearse con base.css por margenes o rellenos.
   ========================================================================== */

/* --- Aviso de demo -------------------------------------------------------- */
/* Se apaga con flags.show_demo_notice en los sitios de cliente. */

.demo-notice {
  background: var(--field);
  color: var(--field-ink-soft);
}

.demo-notice .wrap {
  padding-block: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}

/* --- Cabecera ------------------------------------------------------------- */

.site-header {
  background: var(--fog);
  border-bottom: var(--hairline) solid var(--rule-hair);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
}

.site-header__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* El telefono de la cabecera va en tinta, no en naranja: el color de accion
   pertenece al boton de llamar y a nada mas. */
.site-header__call {
  font-size: var(--text-sm);
  font-weight: var(--weight-body-bold);
  text-decoration: none;
  border-bottom: var(--rule-weight) solid var(--rule-strong);
  padding-bottom: 1px;
}

.site-header__call[data-pending] {
  border-bottom-style: dashed;
  cursor: default;
}

/* --- Barra fija de movil -------------------------------------------------- */

.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--hairline) solid var(--field-rule);
}

.callbar__call,
.callbar__text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--callbar-height);
  font-weight: var(--weight-body-bold);
  text-decoration: none;
}

.callbar__call { background: var(--action); color: var(--action-ink); }
.callbar__text { background: var(--field);  color: var(--field-ink); }

.callbar__call[data-pending],
.callbar__text[data-pending] { cursor: default; }

/* --- Pie ------------------------------------------------------------------ */

.site-footer {
  background: var(--field);
  color: var(--field-ink-soft);
  padding-block: var(--space-6);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
}

.site-footer__name {
  font-family: var(--font-display);
  color: var(--field-ink);
}

/* --- Reserva para la barra fija ------------------------------------------- */

@media (max-width: 899px) {
  .site-footer { padding-bottom: calc(var(--space-6) + var(--callbar-height)); }
}

@media (min-width: 900px) {
  .callbar { display: none; }
}