/* ---------------------------------------------------------------------------
   Sitio comercial. Vanilla, sin build, sin dependencias.

   Reset + tipografia base + componentes, portado de LocariaWeb/css/{base,site}.css
   y re-tokenizado contra packages/tokens (el navy viejo #0D2A50 ya no es la
   fuente de verdad: /tokens.css, que emite build.mjs, lo es).

   Los overrides de modo oscuro manuales del original (var(--c-navy-500) etc.)
   se sacaron a proposito: el sistema de tokens actual ya resuelve --brand,
   --brand-soft, --accent, etc. por tema via los tres bloques de
   packages/tokens/build.mjs (:root, @media dark, [data-theme=dark]). Repetirlo
   a mano aca era exactamente el tipo de fuente-de-verdad-duplicada que el
   sistema de tokens existe para evitar.

   Ojo con el CSP: script-src y style-src son 'self' sin 'unsafe-inline', asi
   que no puede haber ni un <style> ni un style="" en el HTML.
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  /* Fijo, no var(--bg): el sitio comercial intercala bandas negro-cuadrille y
     gris con contraste propio, independiente del tema claro/oscuro del SO
     (ver "BANDAS" mas abajo). Este es el color de las dos bandas oscuras, por
     si asoma un sliver arriba de la nav o en el safe-area de abajo. */
  background: #0a0a0b;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* La PWA instalada no tiene chrome del navegador. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

/* Special Gothic Expanded One va SOLO en el h1, igual que en las dos apps:
   es una unica variante de 400, ancha, y en textos mas chicos cuesta leer. */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-hover);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Utilidades minimas */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.measure {
  max-width: var(--measure);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: var(--text-on-brand);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* --- BANDAS --------------------------------------------------------------
   El sitio comercial intercala dos fondos, y son FIJOS: se ven igual en SO
   claro y en SO oscuro, como ya hacia .cta-band. No tocan packages/tokens ni
   los 112 pares de contraste medidos ahi; el sistema de tokens sigue siendo
   la fuente de verdad para las dos PWA.

   Como funciona: cada banda RE-DECLARA los tokens semanticos que marketing.css
   consume (--surface, --text-muted, --border, ...) con valores hex fijos. Las
   custom properties heredan, asi que .card, .faq, .table-scroll, .steps, etc.
   quedan re-tematizados sin tocar una sola de sus reglas. Los tres bloques de
   tema de tokens.css viven en :root / [data-theme]; estos selectores son mas
   especificos Y descendientes, asi que ganan siempre -de ahi que el SO deje
   de influir en el color del sitio.

   Banda oscura  -> .nav, .hero, .section (no --sunken), .footer
   Banda gris    -> .section--sunken

   Todos los pares de texto de las dos bandas pasan WCAG AA (medidos, no a ojo):
   ink 19:1, muted ~8:1 sobre negro y ~6.5:1 sobre gris, links y acento >4.5:1.
----------------------------------------------------------------------------- */

.nav,
.hero,
.section:not(.section--sunken),
.footer {
  --bg: #0a0a0b;
  --bg-sunken: #0f0f11;
  --surface: #141416;
  --surface-alt: #1c1c20;
  --border: #27272b;
  --border-strong: #3a3a40;
  --border-control: #52525b;
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-on-brand: #ffffff;
  /* Fijar --brand tambien: es el relleno de .btn--primary y del circulo de
     .steps. Sin esto sigue el tema del SO y en oscuro cae al #91ABCA claro,
     que con texto blanco da 2.3:1. El resto de la banda ya es fija. */
  --brand: #1c5394;
  --brand-hover: #3574bf;
  --brand-soft: rgb(53 116 191 / 0.14);
  --accent: #7fcaa6;
  --accent-soft: rgb(127 202 166 / 0.14);
  --accent-text: #abe1c7;
  --focus-ring: #91abca;
  /* Re-resolver color aca hace que h1-h4, p, li, strong, dt/dd, summary y th
     -que solo heredan- tomen el --text de la banda. Sin esto heredarian el
     valor ya computado en body. */
  color: var(--text);
}

.section--sunken {
  --bg: #e7e8ec;
  --bg-sunken: #e7e8ec;
  --surface: #ffffff;
  --surface-alt: #f4f4f6;
  --border: #d4d5da;
  --border-strong: #c2c3ca;
  --border-control: #5183bd;
  --text: #14161a;
  --text-muted: #55585f;
  --text-on-brand: #ffffff;
  --brand: #1c5394;
  --brand-hover: #0d2542;
  --brand-soft: #e4ecf4;
  --accent: #1b4732;
  --accent-soft: #e3f6ed;
  --accent-text: #1b4732;
  --focus-ring: #3574bf;
  color: var(--text);
}

/* La grilla tenue: dos gradientes de 1px sobre el negro. Solo en las bandas
   oscuras. .hero la dibuja aparte, con mask radial, mas abajo. */
.section:not(.section--sunken),
.footer {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgb(244 244 245 / 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(244 244 245 / 0.09) 1px, transparent 1px);
  background-size: 54px 54px;
  background-position: center top;
}

/* Los iconos de tarjeta sobre banda oscura: el navy #1C5394 pierde contraste
   sobre el chip translucido, asi que el trazo sube al paso 300 de la rampa. */
.section:not(.section--sunken) .card__icon,
.hero .card__icon {
  color: var(--brand-300);
}

/* Los links de cuerpo heredan color: var(--brand) (navy). Sobre negro no llega
   a AA; sobre la banda gris si. Solo se ajusta la banda oscura. El pie tiene
   su propia semantica de link (muted -> text) y no entra aca. */
.section:not(.section--sunken) a:not(.btn),
.hero a:not(.btn) {
  color: var(--brand-200);
}

.section:not(.section--sunken) a:not(.btn):hover,
.hero a:not(.btn):hover {
  color: var(--brand-100);
}

/* Los bullets de .checks llevan el glifo con un hex fijo en el data-uri (una
   custom property no se resuelve dentro de un data-uri). El check navy y la
   cruz verde oscura del original se pierden sobre la banda negra, asi que la
   banda oscura trae su propio par con trazo claro. */
.section:not(.section--sunken) .checks li::before,
.hero .checks li::before {
  background: rgb(53 116 191 / 0.2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ACC3DD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

.section:not(.section--sunken) .checks--cross li::before,
.hero .checks--cross li::before {
  background: rgb(127 202 166 / 0.2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ABE1C7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* --- Navegacion ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 68px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-right: auto;
}

.nav__brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
}

.nav__brand span small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* :not(.btn) es necesario: ".nav__links a" tiene mas especificidad que
   ".btn--primary", y sin esto el boton del menu quedaba con texto apagado
   sobre fondo de marca. */
.nav__links a:not(.btn) {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
}

.nav__links a:not(.btn):hover,
.nav__links a:not(.btn)[aria-current='page'] {
  color: var(--text);
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  /* 44px de alto: es el objetivo tactil principal en telefono. */
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav__toggle {
    display: block;
  }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) 1.25rem var(--space-5);
  }
  .nav[data-open='true'] .nav__links {
    display: flex;
  }
  .nav__links li {
    border-top: 1px solid var(--border);
  }
  .nav__links a {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--step-0);
  }
  .nav__links .btn {
    margin-top: var(--space-4);
    text-align: center;
  }
}

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--brand);
  color: var(--text-on-brand);
}

.btn--primary:hover {
  background: var(--brand-hover);
  color: var(--text-on-brand);
}

/*
  Boton "inverso": fondo claro fijo, texto de marca. Se usa DENTRO de
  cta-band, que es una franja con fondo de marca fijo (no reactivo al tema,
  ver mas abajo). --brand ahi mismo no sirve de relleno de boton porque en
  tema claro es identico al fondo de la franja; blanco + texto de marca da
  contraste alto sin inventar ningun par de color que packages/tokens no
  midio (no existe un "texto solido sobre accent" verificado en legalPairs).
*/
.btn--band {
  background: #ffffff;
  color: var(--brand-600);
}

.btn--band:hover {
  opacity: 0.92;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.btn--lg {
  padding: 1rem 1.75rem;
  font-size: var(--step-0);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- Secciones ----------------------------------------------------------- */

.section {
  padding-block: var(--space-9);
}

.section--tight {
  padding-block: var(--space-8);
}

.section--sunken {
  background: var(--bg-sunken);
  border-block: 1px solid var(--border);
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}

.section__head p {
  color: var(--text-muted);
  font-size: var(--step-1);
  margin-bottom: 0;
}

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-3);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
  /* Negro base + dos glows de marca. La grilla va en ::after, con mask radial
     que la desvanece hacia abajo (mas presente arriba, detras del h1). */
  background-color: var(--bg);
  background-image:
    radial-gradient(62rem 34rem at 80% -14%, rgb(53 116 191 / 0.22), transparent 62%),
    radial-gradient(46rem 30rem at 4% 6%, rgb(53 116 191 / 0.1), transparent 58%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(244 244 245 / 0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(244 244 245 / 0.11) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(78% 68% at 50% 0%, #000 0%, transparent 82%);
  opacity: 1;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 940px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

.hero__lede {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 34rem;
}

.hero__note {
  margin-top: var(--space-5);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.hero__art {
  display: flex;
  justify-content: center;
}

/* --- Tarjetas ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: var(--space-4);
}

.card__icon svg {
  width: 20px;
  height: 20px;
}

.card--accent .card__icon {
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* --- Pasos --------------------------------------------------------------- */

.steps {
  counter-reset: paso;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  list-style: none;
  padding: 0;
}

.steps li {
  counter-increment: paso;
  position: relative;
  padding-top: var(--space-6);
  border-top: 2px solid var(--border-strong);
}

.steps li::before {
  content: counter(paso);
  position: absolute;
  top: calc(var(--space-6) * -0.5 - 6px);
  left: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: var(--step--1);
  font-weight: 700;
}

.steps h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.steps p {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-bottom: 0;
}

/* --- Listas de checks ---------------------------------------------------- */

.checks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--step--1);
}

/*
  El check y la cruz son SVG en data-uri con el trazo en un hex fijo, no
  var(--...): un data-uri de CSS no puede leer una custom property (se
  serializa antes de que el navegador resuelva variables). Los dos hex son
  packages/tokens/src/palette.ts locador.light.brand (#1C5394) y
  locador.light.accent (#1B4732) tal cual, no un color inventado: si el
  rebrand vuelve a mover esos tokens, estos dos hex quedan desalineados y hay
  que actualizarlos a mano aca.
*/
.checks li::before {
  content: '';
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231C5394' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

.checks--cross li::before {
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231B4732' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* --- Franja de cierre ------------------------------------------------------
   Fondo de marca FIJO, no reactivo al tema (igual que el original con
   var(--c-navy-600)): es una franja de foco visual, no contenido que deba
   respetar claro/oscuro. Se usa --brand-600, el escalon de rampa, en vez de
   --brand (semantico y reactivo) a proposito.
--------------------------------------------------------------------------- */

.cta-band {
  background: var(--brand-600);
  color: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.cta-band h2 {
  color: #ffffff;
  margin-bottom: var(--space-3);
}

.cta-band p {
  color: var(--brand-100);
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band .btn--ghost {
  border-color: color-mix(in srgb, #ffffff 40%, transparent);
  color: #ffffff;
}

.cta-band .btn--ghost:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
  color: #ffffff;
}

/* --- FAQ ----------------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--space-3);
  max-width: 52rem;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
}

.faq summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-size: 1.4em;
  line-height: 1;
  color: var(--text-muted);
  flex: none;
}

.faq details[open] summary::after {
  content: '\2212';
}

.faq details > p {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  max-width: var(--measure);
}

.faq details > p:last-child {
  margin-bottom: 0;
}

/* --- Tabla de datos ------------------------------------------------------ */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.table-scroll table {
  min-width: 34rem;
  font-size: var(--step--1);
}

.table-scroll th,
.table-scroll td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.table-scroll th {
  font-weight: 650;
  white-space: nowrap;
}

.table-scroll tbody tr:last-child th,
.table-scroll tbody tr:last-child td {
  border-bottom: 0;
}

.table-scroll td {
  color: var(--text-muted);
}

/* Matriz de permisos: check verde / cruz roja en lugar de "Sí"/"No". Se lee
   de un vistazo que puede y que no cada rol. El texto queda para lectores de
   pantalla en un <span class="visually-hidden"> adentro de cada celda.
   Los hex van literales en el data-uri: una custom property no se resuelve
   ahi dentro (mismo caso que .checks li::before). */
.table-scroll td.perm,
.table-scroll thead th:not(:first-child) {
  text-align: center;
}

.perm::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  background: center / contain no-repeat;
}

.perm--si::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233FB950' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}

.perm--no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F85149' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");
}

/* --- Aviso --------------------------------------------------------------- */

.callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-size: var(--step--1);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout strong {
  color: var(--text);
}

/* --- Documentos legales -------------------------------------------------- */

.doc {
  max-width: 48rem;
}

.doc h2 {
  font-size: var(--step-2);
  margin-top: var(--space-7);
}

.doc h3 {
  font-size: var(--step-1);
  margin-top: var(--space-6);
}

.doc li {
  margin-bottom: var(--space-2);
}

.doc__meta {
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* --- Formulario de contacto ------------------------------------------------ */

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field label {
  font-weight: 650;
  font-size: var(--step--1);
}

.field input {
  font: inherit;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-control);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}

.field input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

.field__hint {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* --- Utilidades de espaciado ----------------------------------------------
   El CSP de vercel.json es style-src 'self' sin 'unsafe-inline': un
   style="margin-top: ..." en el HTML no falla el build, falla en el
   navegador, en produccion, en silencio (el mismo motivo que ya documentaba
   este archivo para <style> inline). Estas clases son la salida para los
   pocos ajustes puntuales de espaciado que el resto del sistema no cubre.
--------------------------------------------------------------------------- */

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-6);
}

.max-card {
  max-width: 44rem;
}

.note {
  margin-top: var(--space-5);
  color: var(--text-muted);
  max-width: var(--measure);
}

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

.footer {
  border-top: 1px solid var(--border);
  /* El fondo negro-cuadrille lo pone la regla de grilla de "BANDAS". Un
     `background:` aca lo pisaria (misma especificidad, mas abajo). */
  padding-block: var(--space-7) var(--space-6);
  font-size: var(--step--1);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer h4 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
}

.footer__bottom p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn--band {
    transition: none;
  }
}