/*
  Sustania City — componentes unificados (Etapa 3).
  Se carga DESPUÉS de styles.css e inner-refresh.css. Usa solo los tokens de tokens.css.
  Geometría con !important a propósito: styles.css conserva decenas de reglas por página que
  cambiaban altura y radio de los botones; aquí se fija una sola forma. Los COLORES de los
  botones no se fuerzan: ya cumplen la matriz de contraste (docs/rediseno/01-sistema.md).
*/

/* ── 1. Botón único: 48 px, radio 6 px, una línea ─────────────────────── */
.btn,
a.btn,
button.btn,
.form-submit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  align-self: auto !important;
  width: auto;
  max-width: 100%;
  height: var(--ds-control-h) !important;
  min-height: var(--ds-control-h) !important;
  max-height: var(--ds-control-h) !important;
  margin-block: 0;
  padding: 0 var(--ds-btn-px) !important;
  overflow: hidden;
  border-radius: var(--ds-radius) !important;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-btn-font) !important;
  font-weight: var(--ds-btn-weight) !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap !important;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.btn.primary,
.btn.dark-action,
.dark-action,
.form-submit {
  box-shadow: var(--ds-shadow-1), var(--ds-inset-light);
}

.btn.primary:hover,
.btn.dark-action:hover,
.dark-action:hover,
.form-submit:hover:not(:disabled) {
  box-shadow: var(--ds-shadow-2), var(--ds-inset-light);
}

/* Foco visible en fondos claros y oscuros: anillo doble avena + carbón */
.btn:focus-visible,
.form-submit:focus-visible,
.menu-btn:focus-visible,
.language-button:focus-visible,
.back-to-top:focus-visible,
.float-contact:focus-visible {
  outline: 2px solid var(--ds-avena) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 5px var(--ds-carbon-700) !important;
}

.btn:disabled,
.form-submit:disabled {
  opacity: 0.55;
  box-shadow: none;
}

/* Fila de botones: misma altura y separación; en móvil, ancho completo */
.hero-cta-row,
.portal-actions,
.privacy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

@media (max-width: 560px) {
  .hero-cta-row .btn,
  .portal-actions .btn,
  .privacy-actions .btn,
  .form-submit {
    width: 100%;
  }
}

/* Otros controles con la misma forma */
.menu-btn,
.language-button {
  border-radius: var(--ds-radius) !important;
}

.language-button {
  font-size: var(--ds-text-xs) !important;
}

.back-to-top {
  width: var(--ds-control-h) !important;
  height: var(--ds-control-h) !important;
  border-radius: var(--ds-radius) !important;
}

/* Campos de formulario: misma altura y radio que los botones */
.field input,
.field select,
.field textarea,
.mini-form input,
.mini-form select,
.mini-form textarea {
  border-radius: var(--ds-radius) !important;
}

.field input,
.field select,
.mini-form input,
.mini-form select {
  min-height: var(--ds-control-h);
}

/* ── 2. Superficies: un solo radio y profundidad en capas ─────────────── */
.model-card,
.feature-card,
.faq-card,
.timeline-card,
.inventory-card,
.process-step,
.pillar,
.stat,
.overview-card,
.invest-card,
.image-panel,
.section-note,
.home-residence-card,
.subbrand,
.editorial-panel,
.info-card,
.contact-card,
.simulator-shell,
.mini-form,
.privacy-banner,
.live-inventory-note,
.status-card {
  border-radius: var(--ds-radius) !important;
}

.model-card,
.feature-card,
.faq-card,
.timeline-card,
.inventory-card,
.invest-card,
.overview-card {
  box-shadow: var(--ds-shadow-1);
}

.model-card:hover,
.feature-card:hover,
.faq-card:hover,
.invest-card:hover,
.overview-card:hover {
  box-shadow: var(--ds-shadow-2);
}

/* ── 3. Anti-rotura: nada se desborda ni se corta ─────────────────────── */
img,
video,
svg {
  max-width: 100%;
}

main :is(h1, h2, h3, h4, p, li, a, span, strong, small) {
  overflow-wrap: break-word;
}

:is(.container, .content-grid, .invest-grid, .page-hero-grid, .feature-grid, .process-grid, .model-card-grid, .timeline-grid, .pillars, .form-grid) > * {
  min-width: 0;
}

/* ── 4. Pie de página (referencia: century21.sustaniacity.com) ────────── */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--ds-space-8);
  color: var(--ds-text-on-dark);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(185, 111, 85, 0.16), transparent 62%),
    var(--ds-grad-carbon-soft);
  border-top: 1px solid rgba(216, 154, 118, 0.38);
  box-shadow: inset 0 1px 0 rgba(247, 244, 237, 0.06);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-7) var(--ds-space-6);
  width: min(1240px, calc(100% - 2 * clamp(20px, 4.5vw, 72px)));
  margin: 0 auto;
  padding: var(--ds-space-8) 0 var(--ds-space-7);
}

.site-footer-brand {
  display: grid;
  align-content: start;
  gap: var(--ds-space-4);
}

.site-footer-logo {
  display: inline-block;
  width: min(250px, 100%);
}

.site-footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer-partners {
  display: grid;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-line-on-dark);
}

.site-footer-partners p {
  display: grid;
  gap: var(--ds-space-2);
  margin: 0;
}

.site-footer-partners span {
  color: var(--ds-text-on-dark-muted);
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
}

.site-footer-partners img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

.site-footer-partner {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  width: fit-content;
  max-width: 100%;
  border-radius: var(--ds-radius);
  text-decoration: none;
  transition: opacity 0.22s ease;
}

.site-footer-partner:hover {
  opacity: 0.82;
}

.site-footer-partner:focus-visible {
  outline: 2px solid var(--ds-avena);
  outline-offset: 4px;
}

.site-footer-partners .site-footer-mark {
  flex: none;
  width: 40px;
  height: 40px;
}

.site-footer-col h2 {
  margin: 0 0 var(--ds-space-4);
  color: var(--ds-text-accent-on-dark);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer-col {
  display: grid;
  align-content: start;
  gap: var(--ds-space-3);
  font-style: normal;
}

.site-footer-col a,
.site-footer-col span,
.site-footer-col address {
  color: var(--ds-text-on-dark);
  font-size: var(--ds-text-md);
  font-style: normal;
  line-height: 1.45;
  text-decoration: none;
}

.site-footer-col address {
  color: var(--ds-text-on-dark-muted);
}

.site-footer-col a {
  width: fit-content;
  padding-block: 2px;
  background: linear-gradient(var(--ds-terra-light), var(--ds-terra-light)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.25s ease, color 0.25s ease;
}

.site-footer-col a:hover,
.site-footer-col a:focus-visible {
  background-size: 100% 1px;
}

.site-footer-col .site-footer-strong {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-footer-col .site-footer-map {
  margin-top: var(--ds-space-2);
  color: var(--ds-text-accent-on-dark);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer-bottom {
  border-top: 1px solid var(--ds-line-on-dark);
  background: rgba(27, 26, 23, 0.4);
}

.site-footer-bottom-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-4) var(--ds-space-6);
  align-items: center;
  width: min(1240px, calc(100% - 2 * clamp(20px, 4.5vw, 72px)));
  margin: 0 auto;
  padding: var(--ds-space-5) 0;
}

.site-footer-bottom p,
.site-footer-bottom a {
  margin: 0;
  color: var(--ds-text-on-dark-muted);
  font-size: var(--ds-text-xs);
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.site-footer-bottom a {
  text-decoration: none;
}

.site-footer-bottom a:hover,
.site-footer-bottom a:focus-visible {
  color: var(--ds-text-on-dark);
  text-decoration: underline;
}

/* El pie deja libre la esquina del botón flotante para que nunca tape un renglón */
.site-footer-bottom-inner {
  padding-right: 264px;
}

@media (max-width: 1100px) {
  .site-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer-bottom-inner {
    grid-template-columns: 1fr 1fr;
    padding-right: 0;
    padding-bottom: calc(var(--ds-space-9) + var(--ds-space-5));
  }
}

@media (max-width: 640px) {
  .site-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-6) var(--ds-space-5);
    padding: var(--ds-space-7) 0 var(--ds-space-6);
  }

  .site-footer-col a,
  .site-footer-col address {
    font-size: var(--ds-text-sm);
  }

  .site-footer-bottom-inner {
    grid-template-columns: 1fr;
    padding-bottom: calc(var(--ds-space-9) + var(--ds-space-5));   /* libre para el botón flotante */
  }
}

/* ── 5. Botón flotante "Habla con un asesor" ──────────────────────────── */
body .float-contact {
  position: fixed !important;
  inset: auto var(--ds-space-5) calc(var(--ds-space-5) + env(safe-area-inset-bottom)) auto !important;
  z-index: 60;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  box-sizing: border-box !important;
  width: auto !important;
  height: var(--ds-control-h) !important;
  min-height: var(--ds-control-h) !important;
  margin: 0 !important;
  padding: 0 var(--ds-btn-px) 0 var(--ds-space-4) !important;
  overflow: hidden !important;
  border: 1px solid rgba(247, 244, 237, 0.22) !important;
  border-radius: var(--ds-radius) !important;
  color: var(--ds-avena) !important;
  background: var(--ds-grad-terra) !important;
  background-image: var(--ds-grad-terra) !important;
  box-shadow: var(--ds-shadow-3), var(--ds-inset-light) !important;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-btn-font) !important;
  font-weight: var(--ds-btn-weight) !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-transform: uppercase;
  white-space: nowrap !important;
  transform: none !important;
  animation: none !important;
  writing-mode: horizontal-tb !important;
}

body .float-contact::before,
body .float-contact::after,
body .float-contact .slide-thumb {
  content: none !important;
  display: none !important;
}

body .float-contact .advisor-glyph {
  display: inline-flex !important;
  position: static !important;
  width: 20px !important;
  height: 20px !important;
  color: inherit !important;
  background: none !important;
}

body .float-contact .advisor-glyph svg {
  width: 20px;
  height: 20px;
}

body .float-contact:hover {
  box-shadow: 0 6px 12px rgba(36, 35, 31, 0.16), 0 28px 60px rgba(36, 35, 31, 0.28), var(--ds-inset-light) !important;
  transform: translateY(-2px) !important;
}

/* Con el banner de privacidad visible en móvil el botón se oculta hasta que se decida */
@media (max-width: 900px) {
  body:has(#privacyBanner) .float-contact {
    display: none !important;
  }
}

/* Banner de privacidad: a la izquierda para no chocar con el botón flotante */
.privacy-banner {
  right: auto !important;
  left: var(--ds-space-5) !important;
  width: min(760px, calc(100% - 2 * var(--ds-space-5) - 300px)) !important;
}

@media (max-width: 900px) {
  .privacy-banner {
    right: var(--ds-space-4) !important;
    left: var(--ds-space-4) !important;
    width: auto !important;
    grid-template-columns: 1fr !important;
  }
}

body.menu-open .float-contact {
  display: none !important;
}

/* Chatwoot activo: se usa su burbuja por defecto, sin decoracion propia (es la que cierra el chat).
   El boton del asesor solo queda como respaldo si el widget no carga (main.js quita la clase). */
html.chatwoot-enabled body .float-contact {
  display: none !important;
}

/* ── 6. Menú, formulario y paneles: mismo radio base ──────────────────── */
.header .nav,
.nav-more-menu,
.language-menu {
  border-radius: var(--ds-radius-lg, 8px) !important;
}

.header .nav a,
.header .nav summary,
.nav-more-menu a,
.nav-link-strong {
  border-radius: var(--ds-radius) !important;
}

.header .nav a::before,
.header .nav summary::before {
  border-radius: var(--ds-radius) !important;
}

form.contact-form,
.contact form,
.contact .mini-form,
form.mini-form {
  border-radius: var(--ds-radius) !important;
}

input,
select,
textarea {
  border-radius: var(--ds-radius) !important;
}

.back-to-top {
  box-sizing: border-box !important;
}

/* Controles del encabezado con la misma altura que los botones */
.menu-btn,
.language-button {
  height: var(--ds-control-h) !important;
  min-height: var(--ds-control-h) !important;
}