/* MIND MIAMI REAL ESTATE — modo acción.
   Barra de acción persistente, formularios de captura y bloques de oferta.
   Hereda los tokens de system.css: aquí no se define ni un color nuevo.
   Radio 0, sin sombras difusas, sin degradados: el sistema es plano. */

/* ══════════════════════════ 1 · Barra de acción ══════════════════════════ */

.ac-bar {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 12px clamp(16px, 4vw, 34px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--navy);
  border-top: 1px solid var(--cyan);
  color: var(--text-on-navy);
  /* Fuera de pantalla hasta que .is-on: nada de opacity sola, que dejaría
     los enlaces clicables en el aire. */
  transform: translateY(101%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s;
}

.ac-bar.is-on {
  transform: translateY(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

.ac-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--body);
  font-size: clamp(.82rem, 1.5vw, .95rem);
  line-height: 1.35;
  color: var(--text-on-navy);
}

.ac-bar-text b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(.94rem, 1.8vw, 1.08rem);
  color: #fff;
}

.ac-bar-text span {
  color: var(--muted-on-navy);
}

.ac-bar-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 clamp(16px, 2.4vw, 28px);
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid var(--cyan);
  transition: background .18s ease, color .18s ease;
}

.ac-bar-cta:hover,
.ac-bar-cta:focus-visible {
  background: transparent;
  color: var(--cyan);
}

.ac-bar-cta svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.ac-bar-close {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-paper);
  color: var(--muted-on-navy);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.ac-bar-close:hover,
.ac-bar-close:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

/* El pie no puede quedar debajo de la barra en el último scroll.
   La clase la pone action.js y NO se retira al cerrar la barra: con
   `body:has(.ac-bar)` el hueco desaparecía en el mismo instante en que se
   quita la barra del DOM, y estando al final de la página eso es un salto
   de 76 px bajo el dedo. El hueco reservado se queda. */
.has-ac-bar .site-footer,
.has-ac-bar footer {
  padding-bottom: calc(clamp(48px, 6vw, 80px) + 76px);
}

@media (max-width: 700px) {
  /* En móvil la barra envuelve a dos filas y ocupa ~97 px. */
  .has-ac-bar .site-footer,
  .has-ac-bar footer {
    padding-bottom: calc(clamp(48px, 6vw, 80px) + 100px);
  }
}

@media (max-width: 700px) {
  .ac-bar {
    flex-wrap: wrap;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .ac-bar-text {
    flex: 1 1 100%;
    order: 1;
    font-size: .78rem;
  }
  .ac-bar-text b { font-size: .92rem; }
  /* En móvil la segunda línea es ruido: el titular y el botón bastan. */
  .ac-bar-text span { display: none; }
  .ac-bar-cta {
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 46px;
  }
  .ac-bar-close { order: 3; width: 46px; height: 46px; }
}

/* ══════════════════════════ 2 · Bloque de oferta ═════════════════════════ */

.ac-offer {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(28px, 4vw, 52px);
  background: var(--navy);
  color: var(--text-on-navy);
  border: 1px solid var(--line-paper);
}

.ac-offer.on-paper {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line-ink);
}

.ac-offer-kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}

/* El cian de marca solo es legible sobre navy: #06d6dd da 10.18:1 ahí, pero
   1.64:1 sobre papel #f6f4f1 y 1.51:1 sobre #eeebe5 — invisible, muy por
   debajo del 4.5:1 de AA. Ratios calculados con los hex reales, no estimados.
   #0a6e73 es el mismo cian oscurecido hasta 5.48:1 y 5.06:1. Se toma de
   --cyan-ink si la vertical lo define, con el valor por defecto aquí para que
   funcione aunque no lo haga. */
.ac-offer.on-paper .ac-offer-kicker,
.on-paper .ac-offer-kicker { color: var(--cyan-ink, #0a6e73); }

.ac-offer-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  color: #fff;
}

.ac-offer.on-paper .ac-offer-h { color: var(--ink); }

.ac-offer-p {
  font-family: var(--body);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.62;
  color: var(--muted-on-navy);
  margin: 0 0 22px;
  max-width: 54ch;
}

.ac-offer.on-paper .ac-offer-p { color: var(--ink-soft); }

.ac-offer-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.ac-offer-list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.5;
}

.ac-offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 13px;
  height: 2px;
  background: var(--cyan);
}

.ac-offer-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--line-paper);
}

.ac-offer.on-paper .ac-offer-price { border-top-color: var(--line-ink); }

.ac-offer-price b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.03em;
  color: var(--cyan);
}

/* Este es EL precio. Sobre papel iba en cian a 1.64:1: el número que decide
   la compra, ilegible. Mismo arreglo que el kicker. */
.ac-offer.on-paper .ac-offer-price b,
.on-paper .ac-offer-price b { color: var(--cyan-ink, #0a6e73); }

.ac-offer-price span {
  font-family: var(--body);
  font-size: .86rem;
  color: var(--muted-on-navy);
}

.ac-offer.on-paper .ac-offer-price span { color: var(--ink-soft); }

@media (max-width: 900px) {
  .ac-offer { grid-template-columns: 1fr; }
}

/* ══════════════════════════ 3 · Formulario ═══════════════════════════════ */

.ac-form {
  display: grid;
  gap: 16px;
  align-content: start;
}

.ac-form-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  margin: 0;
  color: #fff;
}

.ac-offer.on-paper .ac-form-h,
.on-paper .ac-form-h { color: var(--ink); }

.ac-field { display: grid; gap: 6px; }

.ac-field > label {
  font-family: var(--display);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
}

.on-paper .ac-field > label { color: var(--ink-soft); }

.ac-input,
.ac-select,
.ac-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 1rem; /* 16px: por debajo, iOS hace zoom al enfocar. */
  line-height: 1.4;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-paper);
  border-radius: 0;
  appearance: none;
  transition: border-color .16s ease, background .16s ease;
}

.on-paper .ac-input,
.on-paper .ac-select,
.on-paper .ac-textarea {
  color: var(--ink);
  background: #fff;
  border-color: var(--line-ink);
}

.ac-textarea { min-height: 104px; resize: vertical; }

.ac-input::placeholder,
.ac-textarea::placeholder { color: rgba(159, 176, 192, .72); }

.on-paper .ac-input::placeholder,
.on-paper .ac-textarea::placeholder { color: rgba(65, 83, 106, .6); }

.ac-input:focus-visible,
.ac-select:focus-visible,
.ac-textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
  border-color: var(--cyan);
}

.ac-select {
  /* Flecha dibujada en el propio CSS: no hay imagen que cargar ni que 404ee. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.ac-field.is-bad .ac-input,
.ac-field.is-bad .ac-select,
.ac-field.is-bad .ac-textarea { border-color: #ff6b6b; }

.ac-err {
  font-family: var(--body);
  font-size: .8rem;
  line-height: 1.35;
  color: #ff8f8f;
  min-height: 0;
}

.on-paper .ac-err { color: #c62828; }

.ac-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px) {
  .ac-row { grid-template-columns: 1fr; }
}

.ac-hp {
  /* Trampa para bots. No es display:none — algunos bots lo detectan. */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: .96rem;
  letter-spacing: .01em;
  border: 1px solid var(--cyan);
  border-radius: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.ac-btn:hover:not(:disabled),
.ac-btn:focus-visible:not(:disabled) {
  background: transparent;
  color: var(--cyan);
}

.on-paper .ac-btn:hover:not(:disabled),
.on-paper .ac-btn:focus-visible:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.ac-btn:disabled { opacity: .6; cursor: progress; }

.ac-fine {
  font-family: var(--body);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted-on-navy);
  margin: 0;
}

.on-paper .ac-fine { color: var(--ink-soft); }

/* Resultado — éxito y error. Nunca se finge un envío: el error lo dice. */
.ac-result {
  padding: 22px;
  border: 1px solid var(--cyan);
  background: rgba(6, 214, 221, .07);
}

.ac-result.is-err {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, .09);
}

.ac-result:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.ac-result-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  color: #fff;
}

.on-paper .ac-result-h { color: var(--ink); }

.ac-result-p {
  font-family: var(--body);
  font-size: .94rem;
  line-height: 1.6;
  margin: 0;
  color: var(--muted-on-navy);
}

.on-paper .ac-result-p { color: var(--ink-soft); }

.ac-result-mail {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--cyan);
}

.on-paper .ac-result-mail { color: var(--ink); }

/* ══════════════════════════ Movimiento reducido ══════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ac-bar,
  .ac-bar.is-on,
  .ac-bar-cta,
  .ac-btn,
  .ac-input,
  .ac-select,
  .ac-textarea,
  .ac-bar-close {
    transition: none;
  }
}