/* ==========================================================================
   MIND MIAMI — /start · SYSTEM v1 · re-skin del brief de proyecto
   Orden de carga (ver docs/SYSTEM-STYLE.md):
     system.css → system-pages.css → motion.css → brief.css → ESTE ARCHIVO
   brief.css se conserva porque contiene la MECÁNICA del stepper (.bf-step
   absoluto/.is-active/.leaving-up, .bf-sending.on, transición de .bf-progress i).
   Aquí solo hay PRESENTACIÓN: ni una clase, id o atributo del cableado de
   js/brief.js se renombra — bf-step / bf-opt / bf-btn / bf-input / bf-textarea /
   bf-field / bf-progress / bf-review / rv-value / bf-err / data-* quedan intactos.
   El <body> ya NO lleva .brief-v2: así mueren los tokens v2 (navy #000c1f,
   cian #08cdd9, radios de 14px y la textura de papel) y las variables de
   brief.css resuelven contra los tokens del sistema.
   ========================================================================== */

/* El sprite <svg hidden> con los símbolos #ic-check / #ic-arrow.
   La regla [hidden]{display:none} del UA de Chromium vive en un html.css con
   @namespace HTML, así que su universal implícito NO alcanza a <svg>: sin la
   línea `[hidden]{display:none!important}` que traía site.css el sprite se
   reservaba su caja de reemplazo (300×150) y empujaba el shell 158px. */
svg[hidden] { display: none; }

/* Utilidad que vivía en site.css; el shell del sistema no la trae. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   1 · SHELL — el funnel vive dentro del lenguaje de .page-hero (navy plano,
   retícula + glow del sistema). Compacto: nav + riel + escena, sin scroll.
   ========================================================================== */
body { background: var(--navy); }

.brief-shell {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--navy);
  color: var(--text-on-navy);
  isolation: isolate;
  /* SOLO en X: recorta el glow del sistema sin encerrar el eje vertical. Con
     `overflow: clip` a secas, el paso del RESUMEN (9 filas) quedaba cortado
     por debajo del pliegue y su botón de envío era inalcanzable. */
  overflow-x: clip;
}

/* ==========================================================================
   2 · NAV INTERIOR — .nav-shell.inner-nav del sistema; el "Exit ✕" ocupa el
   sitio del .nav-cta (estamos EN /start: enlazarla a sí misma no aporta).
   ========================================================================== */
.brief-nav { gap: 18px; }
.brief-nav .brand-logo { height: 28px; }
/* Objetivos táctiles ≥44px (SYSTEM-STYLE §Accesibilidad) */
.brief-nav .nav-brand { display: inline-flex; align-items: center; padding-block: 8px; }
.brief-nav .nav-links a { padding-block: 12px; }
.brief-nav .lang-toggle button { min-height: 44px; }

.bf-exit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px; min-height: 44px;
  font: 600 13px/1 var(--body); letter-spacing: .04em; text-transform: none;
  color: #fff;
}
.bf-exit:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

/* ==========================================================================
   3 · RIEL — kicker editorial + progreso (filete cian) + contador de pasos
   ========================================================================== */
.bf-rail {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  padding: 0 var(--pad-x) clamp(12px, 1.8vh, 20px);
  border-bottom: 1px solid var(--line-paper);
}
.bf-progress {
  height: 2px; width: 100%; min-width: 60px;
  border-radius: 0;
  background: var(--line-paper);
  overflow: hidden;
}
.bf-progress i { border-radius: 0; background: var(--cyan); }
.bf-stepcount {
  margin: 0; white-space: nowrap;
  font: 600 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-on-navy);
}
.bf-stepcount b { color: var(--cyan); font-weight: 700; }

/* ==========================================================================
   4 · ESCENA — columna editorial centrada, texto alineado a la izquierda
   ========================================================================== */
/* La columna la define el TRACK, no el ancho del paso: con `place-items:center`
   + `width:min(760px,100%)` el porcentaje se resolvía contra el propio tamaño
   intrínseco del item (track auto + alineación no-stretch), así que los pasos
   cortos —el de éxito— encogían y se desalineaban 82px del resto. */
.bf-stage {
  position: relative; flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: min(760px, 100%);
  justify-content: center; align-content: center;
  place-items: center stretch;   /* anula el place-items:center de brief.css */
  padding: clamp(30px, 5.2vh, 64px) var(--pad-x) clamp(88px, 11vh, 124px);
  overflow-x: clip;
}
/* width:auto + inset + margin:auto → el paso dormido mide su hueco real
   (con width:min(760px,100%) el 100% se resolvía contra el padding-box del
   stage y el bloque absoluto se salía del carril, aunque el clip lo tapara). */
.bf-step {
  position: absolute;
  inset: clamp(30px, 5.2vh, 64px) var(--pad-x) clamp(88px, 11vh, 124px);
  margin: auto;
  width: auto;
  max-width: 760px;
}
.bf-step.is-active { position: relative; inset: auto; width: auto; }
/* Un paso dormido es más alto que su hueco (los 8 chips, el resumen) y su
   desbordamiento sumaba scroll fantasma bajo el paso visible en móvil. Como
   son invisibles (opacity 0 / pointer-events none), se recortan. */
.bf-step:not(.is-active) { overflow: clip; }
/* Bienvenida y éxito también editoriales: nada centrado a la fuerza. */
.bf-center { text-align: left; align-items: flex-start; }
.bf-center .bf-actions { justify-content: flex-start; }

/* ==========================================================================
   5 · TIPOGRAFÍA DEL PASO — Sora 800 titulares, Inter texto
   ========================================================================== */
.bf-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  font: 600 12px/1 var(--body); letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted-on-navy);
}
.bf-kicker .n {
  background: none; border-radius: 0; padding: 0;
  font: 700 13px/1 var(--display); letter-spacing: .08em;
  color: var(--cyan);
  display: inline-flex; align-items: center;
}
.bf-kicker .n svg { display: block; }
.bf-kicker::after { content: ""; width: 44px; height: 1px; background: var(--line-paper); }

.bf-step h1.bf-page-title,
.bf-step h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  text-wrap: balance;
}
.bf-step h1.bf-page-title { font-size: clamp(42px, 5.8vw, 84px); line-height: .99; }
.bf-step .accent { color: var(--cyan); }
/* Firma del sistema: la palabra acentuada del H1 en trazo hueco (.outline-line) */
.bf-step h1.bf-page-title .accent {
  color: transparent;
  -webkit-text-stroke: 2px rgba(246, 244, 241, .92);
  text-stroke: 2px rgba(246, 244, 241, .92);
}
.bf-step .hint {
  max-width: 560px;
  margin: 0 0 clamp(24px, 3.4vh, 36px);
  color: var(--muted-on-navy);
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6;
}

/* ==========================================================================
   6 · CAMPOS — filete inferior; cian solo como acento de foco
   ========================================================================== */
.bf-input, .bf-textarea {
  font-family: var(--body); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  color: #fff; background: transparent;
  border: 0; border-bottom: 1px solid var(--line-paper); border-radius: 0;
  padding: 12px 2px;
  transition: border-color .25s ease;
}
.bf-input::placeholder, .bf-textarea::placeholder { color: #7f92a4; opacity: 1; }
.bf-input:focus, .bf-textarea:focus { outline: none; border-bottom-color: var(--cyan); }
.bf-textarea {
  min-height: 132px; resize: none;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5;
}

/* ==========================================================================
   7 · OPCIONES COMO CHIPS — filete fino, radio 0, sin relleno de cortesía
   ========================================================================== */
.bf-options { display: grid; gap: 10px; }
.bf-options.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bf-opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 52px;
  padding: 13px 16px;
  text-align: left; cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-paper); border-radius: 0;
  font: 500 14px/1.35 var(--body); letter-spacing: .02em;
  color: var(--text-on-navy);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.bf-opt:hover { border-color: var(--cyan); background: rgba(6, 214, 221, .08); color: #fff; }
.bf-opt:active { transform: none; }
.bf-opt .key {
  flex: none; width: 26px; height: 26px; border-radius: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-paper);
  font: 700 11px/1 var(--display); letter-spacing: .02em;
  color: var(--muted-on-navy);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bf-opt.selected { border-color: var(--cyan); background: rgba(6, 214, 221, .14); color: #fff; }
.bf-opt.selected .key { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.bf-opt .check { flex: none; margin-left: auto; opacity: 0; color: var(--cyan); transition: opacity .2s ease; }
.bf-opt.selected .check { opacity: 1; }

/* ==========================================================================
   8 · BOTONES — mismo peso tipográfico que .nav-cta del sistema
   ========================================================================== */
.bf-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: clamp(26px, 3.6vh, 38px);
}
.bf-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 22px; min-height: 48px;
  background: var(--cyan); color: var(--navy);
  border: 1px solid var(--cyan); border-radius: 0;
  font: 600 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bf-btn:hover { background: #fff; border-color: #fff; color: var(--navy); transform: none; box-shadow: none; }
.bf-btn svg { width: 14px; height: 14px; }
.bf-enter-hint { font: 500 12px/1.4 var(--body); letter-spacing: .06em; color: var(--muted-on-navy); }
.bf-enter-hint b { color: var(--text-on-navy); font-weight: 600; }
/* "Back to home" del paso de éxito usa esta clase siendo un enlace real */
a.bf-enter-hint { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-on-navy); }
a.bf-enter-hint:hover { color: var(--cyan); }

.bf-back {
  position: fixed; left: var(--pad-x); bottom: clamp(20px, 3.4vh, 30px); z-index: 20;
  width: 46px; height: 46px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  /* Relleno sólido, no fantasma: flota sobre los pasos que hacen scroll
     (opciones y resumen) y tiene que leerse como control, no como calco. */
  background: var(--navy); color: var(--text-on-navy);
  border: 1px solid var(--line-paper); border-radius: 0;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.bf-back:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

/* ==========================================================================
   9 · ERRORES
   ========================================================================== */
.bf-err {
  margin-top: 12px; min-height: 18px;
  font: 600 13px/1.5 var(--body); letter-spacing: .01em;
  color: #ff9e90;
}
[data-review] .bf-err:not(:empty) {
  border: 1px solid #ff9e90; border-radius: 0;
  background: rgba(255, 158, 144, .10);
  color: #ffd3cc;
  padding: 12px 14px; font-size: 13.5px;
}

/* ==========================================================================
   10 · RESUMEN — ficha editorial: un solo bloque, filas separadas por filete
   (las filas las escribe brief.js: .bf-review-row > .rv-label/.rv-value/.rv-edit)
   ========================================================================== */
.bf-review {
  display: block;
  margin: 6px 0 4px;
  border: 1px solid var(--line-paper);
}
.bf-review-row {
  display: grid; grid-template-columns: minmax(120px, 170px) 1fr auto;
  align-items: baseline; gap: 8px 18px;
  width: 100%; min-height: 52px;
  padding: 13px clamp(14px, 2vw, 22px);
  text-align: left; cursor: pointer;
  background: transparent; color: var(--text-on-navy);
  border: 0; border-top: 1px solid var(--line-paper); border-radius: 0;
  font-family: var(--body); font-size: 15px;
  transition: background .2s ease, box-shadow .2s ease;
}
.bf-review-row:first-child { border-top: 0; }
.bf-review-row:hover,
.bf-review-row:focus-visible { background: var(--navy-2); box-shadow: inset 3px 0 var(--cyan); }
.bf-review-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.bf-review-row .rv-label {
  font: 600 10.5px/1.4 var(--body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-on-navy);
}
.bf-review-row .rv-value {
  font-weight: 500; line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bf-review-row .rv-value.rv-empty { color: #8296a8; font-weight: 400; }
.bf-review-row .rv-edit {
  font: 600 10px/1 var(--body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan); opacity: 0;
  transition: opacity .2s ease;
}
.bf-review-row:hover .rv-edit,
.bf-review-row:focus-visible .rv-edit { opacity: 1; }
@media (pointer: coarse) { .bf-review-row .rv-edit { opacity: 1; } }

/* ==========================================================================
   11 · ÉXITO + OVERLAY DE ENVÍO
   ========================================================================== */
.bf-success-ic {
  width: 64px; height: 64px; margin: 0 0 clamp(20px, 3vh, 28px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cyan); color: var(--navy);
}
.bf-success-ic svg { width: 34px; height: 34px; }
.bf-meta {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 12px 28px; margin-top: clamp(24px, 3.4vh, 32px);
  font-size: 13px; color: var(--muted-on-navy);
}
.bf-meta b { color: var(--cyan); font-weight: 700; }

.bf-sending { background: rgba(7, 21, 40, .93); }
.bf-sending-box { gap: 20px; }
.bf-sending-txt {
  font: 600 12px/1 var(--body); letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-on-navy);
}
.bf-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--line-paper); border-top-color: var(--cyan);
}

/* ==========================================================================
   12 · RESPONSIVE (cortes del sistema: 1080 / 860 / 640 / 560)
   ========================================================================== */
@media (max-width: 860px) {
  .brief-nav { gap: 14px; }
  .bf-stage { padding: clamp(24px, 4vh, 44px) var(--pad-x) clamp(84px, 10vh, 108px); }
  .bf-step { inset: clamp(24px, 4vh, 44px) var(--pad-x) clamp(84px, 10vh, 108px); }
}

@media (max-width: 640px) {
  .bf-options.cols-2 { grid-template-columns: 1fr; }
  .bf-rail { grid-template-columns: 1fr auto; row-gap: 11px; }
  .bf-rail .section-kicker { grid-column: 1; grid-row: 1; gap: 10px; }
  .bf-rail .section-kicker::after { display: none; }
  .bf-rail .section-kicker span + span { font-size: 11px; letter-spacing: .18em; }
  .bf-stepcount { grid-column: 2; grid-row: 1; font-size: 10px; letter-spacing: .16em; }
  .bf-progress { grid-column: 1 / -1; grid-row: 2; }
  .bf-step.is-active { min-height: 0; justify-content: center; }
  .bf-actions { gap: 12px 16px; }
  .bf-btn { flex: 1 1 auto; justify-content: center; }
  .bf-review-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px; }
  .bf-review-row .rv-label { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .brief-nav { gap: 10px; padding-inline: 20px; }
  .brief-nav .brand-logo { height: 22px; }
  .bf-exit { padding: 11px 13px; font-size: 12px; }
  .bf-step h1.bf-page-title { font-size: clamp(38px, 11.2vw, 52px); }
  .bf-step h1.bf-page-title .accent { -webkit-text-stroke-width: 1.5px; text-stroke-width: 1.5px; }
  .bf-step h2 { font-size: clamp(28px, 8.4vw, 40px); }
  .bf-kicker { gap: 10px; letter-spacing: .22em; }
}

/* ==========================================================================
   13 · MOVIMIENTO REDUCIDO — todo estático y visible
   (brief.css ya apaga .bf-step, .bf-progress i y .bf-spinner)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bf-input, .bf-textarea,
  .bf-opt, .bf-opt .key, .bf-opt .check,
  .bf-btn, .bf-back, .bf-exit,
  .bf-review-row, .bf-review-row .rv-edit { transition: none; }
}
