@import url("design-system.css");
@import url("components.css");
@import url("reference.css");

/* Shared document behavior. Original declarations live in reference.css. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--surface-page); }
main, section, article, .services-grid > *, .stats-grid > * { min-width: 0; }
:focus-visible { box-shadow: var(--focus-ring); }
.site-header a:not(.sbp-button), .site-footer a:not(.sbp-icon-button) { color: var(--green-700); }
.site-header a:not(.sbp-button):hover, .site-footer a:not(.sbp-icon-button):hover { color: var(--green-800); }
.site-header .site-nav a { font: var(--weight-regular) var(--text-sm)/1 var(--font-sans); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.site-header .site-nav a:hover { color: var(--text-strong); }
.site-nav a, .footer-inner a:not(.sbp-icon-button), .brand-lockup { min-height: var(--tap-min); display: inline-flex; align-items: center; }
.site-nav a { position: relative; }
.site-header { height: 68px; }
.site-header .header-inner { height: 100%; }
.header-actions { flex-shrink: 0; }
.brand-lockup { flex-shrink: 0; }
.footer-link { font: var(--type-body-sm); text-decoration: none; }
.footer-inner > div { min-width: 0; }
.footer-inner a, .footer-inner span { overflow-wrap: anywhere; }
.footer-inner > div:first-child { min-width: 200px; }
#menu-toggle { display: none; }
.skip-link { position: fixed; top: var(--space-3); left: var(--space-3); transform: translateY(-200%); z-index: 50; background: var(--surface-card); padding: var(--space-4); }
.skip-link:focus { transform: none; }

/* New section: same section, prose and typography tokens as the reference. */
.about-section { max-width: var(--container-max); margin: 0 auto; padding: var(--section-y) var(--gutter-inline-lg); display: grid; gap: var(--space-4); }
.about-copy { max-width: var(--container-prose); }
.about-copy h2 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-8); }
.about-copy p { font: var(--type-body); color: var(--text-muted); margin-top: var(--space-5); }
.contact-section > div:first-child > .sbp-button { justify-self: start; }
.form-demo-note { font: var(--type-body-sm); color: var(--text-subtle); max-width: var(--container-prose); }

/* Legal layout: exact roles and spacing from especificacion_paginas_legales.md. */
.legal-main { max-width: var(--container-max); margin: 0 auto; padding: var(--section-y) var(--gutter-inline-lg); }
.legal-article { width: 100%; max-width: var(--container-prose); margin: 0 auto; text-align: left; overflow-wrap: anywhere; }
.legal-article h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0; }
.legal-article h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-9) 0 0; }
.legal-article h3 { font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-9) 0 0; }
.legal-article p, .legal-article li { font: var(--type-body); color: var(--text-body); }
.legal-article p, .legal-article ul { margin: var(--space-5) 0 0; }
.legal-article ul + p { margin-top: var(--space-5); }
.legal-article h2 + *, .legal-article h3 + * { margin-top: var(--space-4); }
.legal-article h1 + * { margin-top: var(--space-8); }
.legal-article ul { padding-inline-start: var(--space-7); }
.legal-article li + li { margin-top: var(--space-3); }
.legal-article .literal-markers { list-style: none; padding-inline-start: 0; }
.legal-article .legal-date { font: var(--type-body); font-family: var(--font-mono); color: var(--text-body); }
.legal-article a { font: inherit; color: var(--text-link); text-decoration: underline; }
.legal-article a:hover { color: var(--text-link-hover); }

/* Keep all navigation links on compact desktops without duplicating About. */
@media (min-width: 901px) and (max-width: 1199px) {
  .site-header .header-inner { padding-inline: var(--gutter-inline); gap: var(--space-5); }
  .site-header .site-nav { margin-left: 0; gap: var(--space-4); }
  .header-actions > .sbp-button--ghost { display: none; }
}
/* One shared mobile/tablet navigation, including every legal document. */
@media (max-width: 900px) {
  .site-header .site-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; margin: 0; padding: var(--space-5) var(--gutter-inline-lg); background: var(--surface-page); border-bottom: var(--border-hairline) solid var(--border-subtle); box-shadow: var(--shadow-2); gap: var(--space-3); }
  .site-header .site-nav.is-open { display: flex; flex-wrap: wrap; }
  #menu-toggle { display: inline-flex; }
}
@media (max-width: 1000px) {
  .hero-section { grid-template-columns: 1fr; gap: var(--space-9); }
  .hero-section > div:first-child { max-width: var(--container-prose); }
  .hero-chat { max-width: var(--container-prose); width: 100%; justify-self: center; }
  .results-grid { grid-template-columns: 1fr; gap: var(--space-9); }
  .contact-section { grid-template-columns: 1fr; gap: var(--space-9); }
  .contact-section > .sbp-card { max-width: var(--container-prose); width: 100%; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { flex-wrap: wrap; }
  .footer-inner > div:first-child { flex-basis: 100%; }
}
@media (max-width: 700px) {
  .site-header .header-inner { padding-inline: var(--gutter-inline); gap: var(--space-3); }
  .site-header .brand-lockup { gap: var(--space-3); }
  .site-header .brand-lockup > span { display: none; }
  .header-actions { gap: var(--space-3); }
  .header-actions > .sbp-button--ghost { display: none; }
  .site-header .site-nav { padding-inline: var(--gutter-inline); flex-direction: column; }
  .hero-section, .section-container, .contact-section, .legal-main, .footer-inner { padding-inline: var(--gutter-inline); }
  .hero-section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .hero-section h1 { font: var(--type-h1); }
  .hero-section > div:first-child > div { flex-wrap: wrap; }
  .hero-section > div:first-child > div > .sbp-button { white-space: normal; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-chat { padding: var(--space-5); }
  .hero-chat > div:first-child { flex-wrap: wrap; }
  .hero-chat > div:first-child > span:last-child { margin-left: 0; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbp-stat-data { flex-wrap: wrap; }
  .sbp-stat-delta { margin-left: 0; }
  .footer-inner { gap: var(--space-9); }
}
@media (max-width: 380px) {
  .stats-grid, .process-grid { grid-template-columns: minmax(0, 1fr); }
  .site-header .header-inner { gap: var(--space-2); }
  .site-header .sbp-button--sm { padding-inline: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}