/* ============================================================
   Ketch Lab — hoja principal
   Referencias auditadas: restricción y peso ligero de una editorial de lujo,
   y escala/tracking negativo/scroll largo de una agencia de producto digital.
   No se copia ninguna: Ketch Lab queda en medio.
   ============================================================ */

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  position: relative;
}

/* Textura de grano — la diferencia entre "plano" y "impreso". Sutil a
   propósito: se nota al mirar de cerca, no compite con el contenido. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Retícula de puntos — llena el aire vacío de las secciones con poco texto
   sin volverse decoración; lee como papel milimetrado, no como fondo. */
.dot-grid {
  background-image: radial-gradient(var(--color-rule-strong) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Marcas de esquina tipo visor técnico — sobre tarjetas/imágenes que
   necesitan leerse como "instrumento", no como foto decorativa. */
.corner-marks { position: relative; }
.corner-marks::before,
.corner-marks::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 2;
}
.corner-marks::before { top: 10px; left: 10px; border-top: 1.5px solid var(--corner-color, var(--color-brass-light)); border-left: 1.5px solid var(--corner-color, var(--color-brass-light)); }
.corner-marks::after { bottom: 10px; right: 10px; border-bottom: 1.5px solid var(--corner-color, var(--color-brass-light)); border-right: 1.5px solid var(--corner-color, var(--color-brass-light)); }

.top-bar {
  background: var(--color-navy-deep);
  color: var(--color-brass-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 20px;
}

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ---- Utilidades ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-fg); color: var(--color-bg);
  padding: var(--space-xs) var(--space-sm);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

.kicker {
  font-size: var(--fs-kicker);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--color-accent-text);
  margin-bottom: var(--space-md);
}

/* Sobre bloques de navy forzado (.section--navy, .contact) el kicker de
   latón oscuro se pierde — usa el tono claro pensado para fondo oscuro. */
.kicker--brass { color: var(--color-brass-light); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-fg-secondary);
  max-width: var(--measure);
}

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.site-header__logo img {
  height: 24px; width: auto;
  /* Sin filter: var(--logo-filter) — el logo de dos colores (navy + latón) usa
     <picture> con la variante -dark.svg en vez de invert(1), que distorsionaría
     los dos tonos por separado. Ver assets/logo/lockup-horizontal-dark.svg. */
}

.site-nav {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem);
  font-size: var(--fs-small);
  font-weight: 500;
}

.site-nav a:not(.button) { position: relative; padding-block: 3px; }
.site-nav a:not(.button)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right var(--dur-base) var(--ease-out);
}
.site-nav a:not(.button):hover::after,
.site-nav a:not(.button):focus-visible::after { right: 0; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-fg-secondary);
  border: 1px solid var(--color-rule);
  padding: 5px 9px; border-radius: 2px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lang-toggle:hover { color: var(--color-fg); border-color: var(--color-rule-strong); }
.lang-toggle__on { color: var(--color-fg); }
.lang-toggle__sep, .lang-toggle__off { opacity: 0.55; }

.nav-toggle { display: none; }

/* ---- Botones ---- */
.button {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.8em 1.5em;
  border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-small);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.button--primary { background: var(--color-navy); color: var(--color-paper); box-shadow: 0 14px 34px rgba(22, 48, 78, 0.22); }
.button--primary:hover, .button--primary:focus-visible { background: var(--color-navy-deep); transform: translateY(-2px); }
/* Igual que las tarjetas: el acuse llega al presionar. */
.button:active { transform: translateY(0) scale(0.975); transition-duration: 90ms; }

/* El header y el hero son bloques navy fijos (ver tokens.css línea 93-95) —
   .button--primary en navy sobre navy queda casi invisible ahí. Estos dos
   contextos usan latón, que sí tiene contraste contra ese fondo. */
.site-header .button--primary,
.hero .button--primary {
  background: var(--color-brass);
  color: var(--color-ink);
  box-shadow: 0 14px 34px rgba(169, 129, 47, 0.3);
}
.site-header .button--primary:hover, .site-header .button--primary:focus-visible,
.hero .button--primary:hover, .hero .button--primary:focus-visible {
  background: var(--color-brass-light);
  transform: translateY(-2px);
}

.button--ghost { border: 1px solid var(--color-rule-strong); color: var(--color-fg); }
.button--ghost:hover, .button--ghost:focus-visible { border-color: var(--color-brass); color: var(--color-accent-text); }

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 5vw, 6rem) 0;
  overflow: clip;
}

.hero__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: 0 clamp(2.5rem, 4vw, 4rem);
}

.hero__col { position: relative; }

/* ---- Mockup del asistente (hero) ---- */
.hero__mockup { position: relative; }

.mockup {
  position: relative;
  background: linear-gradient(165deg, var(--color-navy-light) 0%, var(--color-navy) 42%, var(--color-navy-deep) 100%);
  border-radius: 3px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 26px 60px rgba(13, 32, 56, 0.34);
  overflow: hidden;
}
.mockup::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/logo/isotipo.svg") no-repeat;
  background-position: 118% 128%;
  background-size: 62%;
  opacity: 0.07;
  filter: invert(72%) sepia(28%) saturate(600%) hue-rotate(360deg);
}

.mockup__head {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(226, 193, 121, 0.28);
}
.mockup__dot { width: 7px; height: 7px; border-radius: 50%; background: #7FBF9A; display: block; }
.mockup__label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-brass-light);
}

.mockup__thread { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.mockup__bubble { max-width: 82%; font-size: 14.5px; line-height: 1.5; padding: 12px 15px; border-radius: 14px; }
.mockup__bubble--in { align-self: flex-start; max-width: 78%; background: rgba(245, 237, 222, 0.1); color: var(--color-paper); border-radius: 14px 14px 14px 3px; }
.mockup__bubble--out { align-self: flex-end; background: var(--color-paper); color: var(--color-ink); border-radius: 14px 14px 3px 14px; }

/* Reproduccion de la conversacion. Solo se esconde si JS esta vivo: sin JS la
   conversacion se ve entera, igual que antes, en vez de quedar en blanco. */
.js [data-thread] .mockup__bubble,
.js [data-thread] .mockup__typing {
  opacity: 0;
  transform: translateY(7px) scale(0.985);
}
.js [data-thread] .mockup__bubble.is-said {
  opacity: 1;
  transform: none;
  /* Entra desde el valor actual y se asienta sin rebote: es un mensaje que
     llega, no un objeto que alguien lanzo. */
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.mockup__typing {
  align-self: flex-start;
  display: none;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 14px 14px 14px 3px;
  background: rgba(245, 237, 222, 0.1);
  width: max-content;
}
.js [data-thread] .mockup__typing.is-said {
  display: flex;
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.mockup__typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-brass-light);
  animation: typing-dot 1.15s var(--ease-in-out) infinite;
}
.mockup__typing span:nth-child(2) { animation-delay: 0.16s; }
.mockup__typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.mockup__foot {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(226, 193, 121, 0.28);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(245, 237, 222, 0.66);
}
.mockup__time { color: var(--color-brass-light); }

.hero__mockup figcaption {
  margin-top: var(--space-md);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ---- Franja de estadísticas — prueba concreta, no adjetivos ---- */
.hero__stats { background: var(--color-navy); color: var(--color-paper); }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.stat {
  padding: 26px 0 26px clamp(14px, 2vw, 24px);
  border-right: 1px solid rgba(245, 237, 222, 0.16);
}
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem; line-height: 1;
  color: var(--color-brass-light);
}
.stat__label {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(245, 237, 222, 0.72);
  padding-right: 18px;
}

/* Fotografía editorial de fondo, muy tenue — tinta+latón sobre papel, el mismo
   truco de --logo-filter que el resto de la marca (ver method__art y el logo). */
.hero__art {
  position: absolute;
  inset: 0;
  background: url("../assets/texture/hero-bg.webp") right center/cover no-repeat;
  opacity: 0.4;
  filter: var(--logo-filter);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 45%);
  mask-image: linear-gradient(90deg, transparent 0%, black 45%);
  pointer-events: none;
}

/* ---- El horizonte ----
   La franja que separa el hero del resto de la pagina. No es decoracion: es el
   simbolo de la marca a escala. Siempre oscura sin importar el tema (igual que
   .contact), porque la foto solo funciona sobre oscuro. */
.horizon {
  position: relative;
  height: clamp(240px, 32vh, 400px);
  overflow: hidden;
  background: var(--color-navy-deep);
  isolation: isolate;
}

/* Sobresale arriba y abajo para tener recorrido de parallax sin descubrir el
   borde. La posicion vertical la mueve JS con --sea-y. */
.horizon__layers {
  position: absolute;
  inset: -9% 0;
  translate: 0 var(--sea-y, 0px);
  will-change: translate;
}

.horizon__still,
.horizon__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horizon__still {
  background: url("../assets/texture/sea-dusk.webp") center 50% / cover no-repeat;
}

/* El video entra fundiendo cuando ya tiene fotogramas — nunca un salto de foto
   fija a video a media carga. */
.horizon__video {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.horizon__video.is-ready { opacity: 1; }

/* Funde los dos bordes de la franja hacia el navy de arriba y de abajo, para que
   la foto no aparezca como un rectangulo pegado encima del fondo. */
.horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--color-navy-deep) 0%,
    rgba(13, 32, 56, 0) 24%,
    rgba(13, 32, 56, 0) 68%,
    rgba(13, 32, 56, 0.85) 100%
  );
}

.ketch {
  position: absolute;
  right: clamp(7%, 13vw, 20%);
  /* El casco (y=94 de 150 en el viewBox) tiene que caer sobre la linea del
     horizonte de la foto, que queda al 50% de la franja. */
  bottom: 50%;
  height: clamp(150px, 26vh, 260px);
  width: auto;
  translate: var(--ketch-x, 0px) 37.3%;
  overflow: visible;
  z-index: 1;
  will-change: translate;
}

/* Silueta a contraluz: el casco y las velas en un navy casi negro contra la
   banda de laton del atardecer, con un filo de laton en el borde. Es lo que
   hace que se lea como fotografia y no como un logo pegado encima. */
.ketch__sail,
.ketch__hull,
.ketch__spar {
  fill: #08172a;
  stroke: var(--color-brass);
  stroke-width: 0.7;
  stroke-linejoin: round;
  paint-order: fill;
}
.ketch__spar { stroke-width: 0.4; }

.ketch__body { transform-origin: 50px 91px; rotate: var(--heel, 0deg); }

/* Las velas respiran: se llenan y se vacian de viento. Amplitud minima y ciclo
   largo a proposito — tiene que notarse solo si te quedas mirando. */
.ketch__sail--main,
.ketch__sail--mizzen {
  transform-box: view-box;
  animation: sail-breathe 13s var(--ease-in-out) infinite;
}
.ketch__sail--main { transform-origin: 24px 58px; }
.ketch__sail--mizzen { transform-origin: 66px 66px; animation-delay: -4.4s; }

@keyframes sail-breathe {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.055); }
}

.ketch__reflection { opacity: 0.3; }
.ketch__reflection .ketch__sail,
.ketch__reflection .ketch__hull { stroke: none; fill: #12253c; }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 14ch;
  margin-bottom: var(--space-md);
}

.hero__actions {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

/* ---- Secciones ---- */
.section {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}
.section--raised { background: var(--color-bg-raised); }

/* Bloque de navy fijo, igual que .contact — parte del lenguaje de marca, no
   del tema claro/oscuro (ver tokens.css sobre por qué el navy YA es el
   fondo del modo oscuro; en modo claro este bloque queda como contraste). */
.section--navy {
  background: var(--color-navy);
  color: var(--color-paper);
  border-top-color: rgba(245, 237, 222, 0.16);
}

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

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

.section__intro {
  color: var(--color-fg-secondary);
  margin-top: var(--space-sm);
  max-width: var(--measure);
}

.section__intro--on-navy { color: rgba(245, 237, 222, 0.78); }

/* ---- Hallazgos (problema) ---- */
/* Spread: carta nautica + lista de hallazgos. Asimetrico a proposito — la
   pagina venia repitiendo la misma reja de tres columnas en cada seccion. */
.problem-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: var(--space-lg);
}

.problem-art {
  aspect-ratio: 4 / 5;
  /* Desplazado a la derecha del centro para no cortar la regla de laton. */
  background: url("../assets/texture/chart-dividers.webp") 64% center / cover no-repeat;
  border-radius: var(--radius);
  --corner-color: var(--color-brass);
  box-shadow: 0 30px 60px -28px rgba(8, 23, 42, 0.7);
}

.findings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}

.finding {
  border-top: 1px solid var(--color-rule-strong);
  padding-block: var(--space-md);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: baseline;
}

/* A tamano grande el numero deja de ser una etiqueta y pasa a ser el ancla
   visual de la fila — es lo que hace que la lista se lea como indice editorial. */
.finding__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.5vw, 2.9rem);
  line-height: 0.9;
  color: var(--color-accent-decorative);
  font-variant-numeric: tabular-nums;
}

.finding__text { text-wrap: pretty; }

.findings__note {
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-fg-secondary);
  font-style: italic;
}

/* ---- Precalificador ----
   Vive dentro del flujo de la página (no una ruta ni un modal aparte, ver
   Ketch Lab/Fase 2): la tarjeta de entrada muta in situ en el formulario de
   4 pasos y después en el resultado, dentro del mismo .precal__panel. */
.precal__panel { margin-top: var(--space-lg); }

.precal-entry {
  display: flex; align-items: center; gap: var(--space-lg);
  flex-wrap: wrap;
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-brass);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.precal-entry__icon {
  width: 46px; height: 46px; flex: none;
  fill: none; stroke: var(--color-navy);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
:root:not([data-theme="light"]) .precal-entry__icon { stroke: var(--color-brass-light); }
:root[data-theme="dark"] .precal-entry__icon { stroke: var(--color-brass-light); }
.precal-entry__body { flex: 1; min-width: 240px; }
.precal-entry__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.precal-entry__sub { font-size: var(--fs-small); color: var(--color-fg-secondary); }

.precal-mini-steps {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.precal-mini-step {
  display: flex; align-items: baseline; gap: 12px;
  font-size: var(--fs-small); color: var(--color-fg-secondary);
}
.precal-mini-step__num {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--color-accent-decorative);
}

/* ---- Formulario de 4 pasos ---- */
.precal-form {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  max-width: 42rem;
}

.precal-form__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.precal-form__stepof {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-text);
}
.precal-progress { display: flex; gap: 7px; }
.precal-progress__dot { width: 20px; height: 3px; background: var(--color-rule-strong); display: block; }
.precal-progress__dot.is-done { background: var(--color-navy); }
:root:not([data-theme="light"]) .precal-progress__dot.is-done { background: var(--color-brass-light); }
:root[data-theme="dark"] .precal-progress__dot.is-done { background: var(--color-brass-light); }

.precal-question + .precal-question { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.precal-question__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 1vw + 1.1rem, 1.7rem);
  line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.precal-question__title:focus-visible { outline: none; } /* recibe foco por programa, no por tabulación */
.precal-question__sub { font-size: var(--fs-small); color: var(--color-fg-secondary); margin-bottom: var(--space-sm); }

.precal-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-sm); }
.precal-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.precal-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.precal-chip:hover { border-color: var(--color-navy); }
.precal-chip[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-paper); }

.precal-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-sm); }
.precal-pill {
  font-size: 14px; font-weight: 500;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.precal-pill:hover { border-color: var(--color-navy); }
.precal-pill[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-paper); }

.precal-volume {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px;
  border-top: 1px solid var(--color-rule);
}
.precal-volume:first-of-type { margin-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.precal-volume--flush { border-top: none; padding-top: 0; margin-top: 0; }
.precal-volume__label { font-size: var(--fs-small); }
.precal-stepper { display: flex; align-items: center; gap: 12px; flex: none; }
.precal-stepper__btn {
  width: 30px; height: 30px;
  border: 1px solid var(--color-rule-strong);
  background: transparent; color: var(--color-fg);
  border-radius: 2px; font-size: 16px; line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.precal-stepper__btn:hover { border-color: var(--color-navy); }
.precal-stepper__value { font-family: var(--font-mono); font-size: 1rem; min-width: 30px; text-align: center; }

.precal-field { margin-top: var(--space-sm); }
.precal-field label { display: block; font-size: var(--fs-small); color: var(--color-fg-secondary); margin-bottom: 6px; }
.precal-field__money { display: flex; align-items: center; gap: 6px; }
.precal-field__money span { font-family: var(--font-mono); color: var(--color-fg-secondary); }
.precal-field input[type="number"] {
  width: 7ch;
  font-family: var(--font-mono); font-size: 1rem;
  background: transparent; color: var(--color-fg);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px; padding: 7px 10px;
}

.precal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-lg);
}
.precal-nav__back {
  font-size: var(--fs-small); color: var(--color-fg-secondary);
  background: none; border: none; padding: 4px;
}
.precal-nav__back:hover { color: var(--color-fg); }
.precal-nav__back:disabled { visibility: hidden; }
.precal-nav .button:disabled { opacity: 0.4; cursor: not-allowed; }
.precal-nav .button:disabled:hover { transform: none; background: var(--color-navy); }

/* ---- Resultado ---- */
.precal-result { max-width: 44rem; }
.precal-result__kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}
.precal-result__disclaimer { font-size: 12px; color: var(--neutral-400); margin-bottom: var(--space-md); }

.precal-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--color-navy); color: var(--color-paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.precal-stat { padding: clamp(1.25rem, 2vw, 1.9rem); border-right: 1px solid rgba(245, 237, 222, 0.16); }
.precal-stat:last-child { border-right: none; }
.precal-stat__num { display: block; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--color-brass-light); }
.precal-stat__label { display: block; margin-top: 6px; font-size: 13px; color: rgba(245, 237, 222, 0.8); }
.precal-stat__formula {
  display: block; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: rgba(245, 237, 222, 0.6);
}

.precal-maturity { margin-top: var(--space-lg); }
.precal-maturity__title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-sm);
}
.precal-row {
  display: flex; align-items: baseline; gap: 14px;
  padding-block: 11px;
  border-top: 1px solid var(--color-rule);
}
.precal-row:last-child { border-bottom: 1px solid var(--color-rule); }
.precal-row__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; }
.precal-row__dot--verde { background: var(--color-success); }
.precal-row__dot--ambar { background: var(--color-brass); }
.precal-row__dot--rojo { background: var(--color-error); }
:root:not([data-theme="light"]) .precal-row__dot--verde { background: var(--color-success-dark); }
:root:not([data-theme="light"]) .precal-row__dot--rojo { background: var(--color-error-dark); }
:root[data-theme="dark"] .precal-row__dot--verde { background: var(--color-success-dark); }
:root[data-theme="dark"] .precal-row__dot--rojo { background: var(--color-error-dark); }
.precal-row__label { font-size: var(--fs-small); font-weight: 600; min-width: 100px; }
.precal-row__desc { font-size: var(--fs-small); color: var(--color-fg-secondary); }

.precal-verdict {
  border-left: 2px solid var(--color-accent-decorative);
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
}
.precal-verdict__kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}
.precal-verdict__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
  line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.precal-verdict__body { font-size: var(--fs-small); color: var(--color-fg-secondary); line-height: 1.6; max-width: 34rem; margin-bottom: var(--space-md); }
.precal-verdict__actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.precal-restart {
  font-size: var(--fs-small); color: var(--color-fg-secondary);
  background: none; border: none; padding: 4px;
}
.precal-restart:hover { color: var(--color-fg); }

/* ---- Automatización ----
   Fondo de jarcia: cabos en tension sosteniendo el mastil. Es lo que hace la
   seccion — sistemas trabajando en segundo plano para que nada se caiga.
   Bloque siempre oscuro, igual que .contact: la foto solo funciona sobre oscuro. */
.section--rigging {
  position: relative;
  overflow: clip;
  background: var(--color-navy-deep);
  color: var(--color-paper);
  border-top-color: rgba(245, 237, 222, 0.16);
}
.section--rigging::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/texture/rigging.webp") center / cover no-repeat;
  opacity: 0.55;
}
.section--rigging::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13, 32, 56, 0.92) 0%, rgba(13, 32, 56, 0.62) 58%, rgba(13, 32, 56, 0.88) 100%);
}
.section--rigging .wrap { position: relative; z-index: 1; }
.section--rigging .kicker { color: var(--color-brass-light); }
.section--rigging .findings__note { color: rgba(245, 237, 222, 0.72); }
.section--rigging .flow__step {
  border-color: rgba(245, 237, 222, 0.22);
  background: rgba(8, 23, 42, 0.34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.section--rigging .flow__in { color: rgba(245, 237, 222, 0.7); }
.section--rigging .flow__arrow { stroke: var(--color-brass-light); }

/* ---- Automatización (flujo) ---- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.flow__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
}

.flow__in {
  font-size: var(--fs-small);
  color: var(--color-fg-secondary);
}

.flow__arrow {
  width: 18px; height: 18px;
  fill: none; stroke: var(--color-accent-decorative);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg);
  margin-block: 2px;
}

.flow__out {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* ---- Tarjetas de servicio ---- */
/* Tarjetas siempre color papel — el contraste contra el bloque navy es lo
   que las hace leer como objetos físicos, no como celdas de una tabla. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius);
  border-top: 3px solid var(--color-brass);
  /* Sombra en dos capas: una corta y densa que la pega al fondo, y una larga y
     difusa que la separa. Una sola sombra lee como un rectangulo flotando. */
  box-shadow:
    0 1px 2px rgba(8, 23, 42, 0.16),
    0 14px 28px -18px rgba(8, 23, 42, 0.5);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Filo de luz en el canto superior: es lo que hace que la tarjeta se lea como
   un objeto con grosor y no como un relleno de color. */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
}

.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(8, 23, 42, 0.18),
    0 30px 50px -22px rgba(8, 23, 42, 0.6);
}

/* Responde al presionar, no al soltar: en el momento en que aparece el retardo
   la sensacion de manipulacion directa se cae. */
.card:active { transform: translateY(-2px) scale(0.995); transition-duration: 90ms; }

.card__icon {
  width: 30px; height: 30px;
  fill: none; stroke: var(--color-navy);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: var(--space-2xs);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card__body { color: var(--neutral-600); font-size: var(--fs-small); }

/* ---- Verticales — franja de pastillas, no una grilla de casillas ---- */
.verticals-row {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 2.5vw, 2.75rem);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(245, 237, 222, 0.2);
}

.verticals-row__label {
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-brass-light);
}

.verticals {
  display: flex; align-items: center; gap: var(--space-xs);
  flex-wrap: wrap;
}

.vertical {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px;
  padding: 8px 15px;
  border: 1px solid rgba(245, 237, 222, 0.28);
  border-radius: 100px;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.vertical:hover { border-color: var(--color-brass-light); transform: translateY(-2px); }

.vertical svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--color-brass-light);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}

.vertical--muted {
  border-color: transparent;
  color: rgba(245, 237, 222, 0.6);
  padding-inline: 4px;
}

/* ---- Cimientos ----
   Imagen a un lado y las cuatro piezas en 2x2 al otro. Las tarjetas en fila de
   cuatro se leian como una tabla; en bloque compacto junto a la foto se leen
   como un conjunto. */
.cim-split {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
  margin-bottom: var(--space-lg);
}

.cim-art {
  background: url("../assets/texture/rope-cleat.webp") center / cover no-repeat;
  border-radius: var(--radius);
  min-height: 380px;
  --corner-color: var(--color-brass);
  box-shadow: 0 30px 60px -28px rgba(8, 23, 42, 0.7);
}

.cim-grid { grid-template-columns: repeat(2, 1fr); align-content: start; }

/* ---- Método ---- */
.method {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: start;
}

.steps { counter-reset: step; margin-top: var(--space-lg); }

.step {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: var(--space-md);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-accent-decorative);
}
.step__title { font-size: 1.05rem; font-weight: 600; }
.step__body { color: var(--color-fg-secondary); font-size: var(--fs-small); margin-top: 2px; }

.quote {
  border-left: 2px solid var(--color-accent-decorative);
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  margin-top: var(--space-2xl);
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.4vw + 1rem, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Fotografía editorial (bloque texto+imagen, ver referencia Patek en Fase 3).
   Generada con Kie AI — tinta y latón, mismo lenguaje que la marca. El filtro
   reutiliza --logo-filter: la imagen es tinta-sobre-papel, igual que el SVG
   del logo, así que el mismo invert(1) de modo oscuro le sirve. */
/* El sextante: el instrumento con el que se mide antes de afirmar nada. Es
   exactamente lo que dice la seccion ("auditamos antes de prometer"), asi que
   la imagen argumenta en vez de decorar.
   Sin --logo-filter, al reves que la imagen anterior: aquella era tinta sobre
   papel y el invert de modo oscuro le servia; esta es una fotografia oscura y
   invertirla la volveria un negativo lechoso. */
.quote__art {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: var(--space-lg);
  background: url("../assets/texture/sextant.webp") center/cover no-repeat;
  border-radius: var(--radius);
  --corner-color: var(--color-brass);
  box-shadow: 0 30px 60px -28px rgba(8, 23, 42, 0.75);
}

/* ---- Trabajo ---- */
.work {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.work-item:first-child { grid-column: 1 / -1; }

.work-item__frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg-raised);
  --corner-color: var(--color-accent-decorative);
}
.work-item__frame img {
  width: 100%; height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-item__frame:hover img { transform: scale(1.02); }

.work-item__frame--placeholder {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9.5;
  border-style: dashed;
  border-color: var(--color-rule-strong);
  text-align: center;
  padding: var(--space-lg);
}
.work-item__frame--placeholder span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-fg-secondary);
}

.work-item__meta {
  display: flex; align-items: baseline; gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.work-item__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }

.work-item__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
  border: 1px solid var(--color-rule-strong);
  padding: 3px 7px;
  border-radius: 2px;
}
.work-item__note {
  width: 100%;
  font-size: var(--fs-small);
  color: var(--color-fg-secondary);
}

/* ---- Contacto ---- */
/* Cierre visual de la página: siempre oscura (foto de Kie AI, tinta+latón)
   sin importar el tema, porque la foto solo funciona sobre negro — fondo
   casi negro continuo en el momento de más peso visual de la página. */
.contact {
  position: relative;
  overflow: clip;
  background: var(--color-ink);
  color: var(--color-paper);
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/texture/contact-bg.webp") center/cover no-repeat;
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(13, 32, 56, 0.72) 0%, rgba(13, 32, 56, 0.4) 55%, rgba(13, 32, 56, 0.8) 100%);
}
.contact .wrap { position: relative; z-index: 1; }

.contact__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.contact__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h1);
  max-width: 16ch;
  color: var(--color-paper);
}

.contact__lead {
  margin-top: var(--space-sm);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(245, 237, 222, 0.78);
  max-width: 30rem;
}

.contact__links {
  border-top: 1px solid rgba(245, 237, 222, 0.2);
}

.contact__links li { border-bottom: 1px solid rgba(245, 237, 222, 0.2); }

.contact__links a,
.contact__mail {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-sm);
  color: var(--color-paper);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact__links a:hover, .contact__links a:focus-visible { color: var(--color-brass-light); }

.contact__link-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(245, 237, 222, 0.6);
}
.contact__link-value { display: block; margin-top: 5px; font-size: 1.1rem; }

.contact__links svg,
.contact__mail svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: var(--color-brass-light);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}
.contact__links a:hover svg { transform: translateX(4px); }

/* ---- Footer ---- */
.site-footer {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-small);
  color: var(--color-fg-secondary);
}
.site-footer__inner { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.site-footer img { height: 15px; width: auto; opacity: 0.65; } /* usa <picture>, ver header */
.site-footer__tag { margin-left: auto; }

/* ---- Movimiento ----
   El estado inicial solo se aplica cuando JS está vivo (.js en <html>), para que
   sin JS el contenido quede visible en vez de invisible para siempre. */
.js [data-reveal],
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
}
.js .is-in[data-reveal],
.js [data-stagger] > .is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* [data-reveal-lines]: el titular se parte en palabras por JS (splitWords en
   main.js, se re-ejecuta en cada cambio de idioma) y cada una entra por
   separado — mismo patrón "Stagger List" que las tarjetas, pero a nivel de
   palabra en vez de tarjeta completa. */
.js [data-reveal-lines] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
}
.js [data-reveal-lines].is-in .word {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-lines] .word,
  .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }

  /* El velero se queda quieto: sin viento en las velas, sin escora y sin
     parallax. La silueta y el reflejo se mantienen — quitar movimiento no
     significa quitar la imagen. */
  .ketch__sail--main,
  .ketch__sail--mizzen { animation: none !important; }
  .ketch__body { rotate: 0deg !important; }
  .ketch { translate: 0 37.3% !important; }
  .horizon__sea { translate: none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .method { grid-template-columns: 1fr; gap: var(--space-lg); }
  .quote { margin-top: 0; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  /* La foto deja de competir con el texto antes que el texto se estreche. */
  .problem-grid { grid-template-columns: 1fr; }
  .problem-art { aspect-ratio: 21 / 9; }
  .cim-split { grid-template-columns: 1fr; }
  /* La foto es vertical y el cabo vive en su tercio inferior: recortada a 21:9
     por el centro solo se veria la pared. Se ancla abajo. */
  .cim-art { min-height: 0; aspect-ratio: 21 / 9; background-position: center 88%; }
  .precal-stats { grid-template-columns: 1fr; }
  .precal-stat { border-right: none; border-bottom: 1px solid rgba(245, 237, 222, 0.16); }
  .precal-stat:last-child { border-bottom: none; }
}

@media (max-width: 820px) {
  .site-nav {
    position: fixed; inset: 0 0 auto 0; top: 57px;
    flex-direction: column; align-items: flex-start;
    gap: var(--space-md);
    background: var(--color-bg);
    padding: var(--space-lg) clamp(1.25rem, 4vw, 3rem) var(--space-xl);
    border-bottom: 1px solid var(--color-rule);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }

  .nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px 4px; }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    content: ""; display: block; width: 22px; height: 1.5px; background: var(--color-fg);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .nav-toggle__bar::before { transform: translateY(-6.5px); }
  .nav-toggle__bar::after { transform: translateY(5px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: rotate(-45deg); }

  .hero__art { display: none; }
  /* En movil el velero se centra y baja de escala: a 375px la escora y el
     parallax no aportan, pero la silueta sobre el horizonte si. */
  .ketch { right: auto; left: 50%; translate: -50% 37.3% !important; height: clamp(120px, 22vh, 170px); }
  .hero__title { max-width: none; }
  .findings, .cards, .flow, .cim-grid { grid-template-columns: 1fr; }
  .work { grid-template-columns: 1fr; }
  .stat { border-right: none; padding-left: 0; }
  .precal-entry { flex-direction: column; align-items: flex-start; }
  .precal-nav { flex-wrap: wrap; gap: var(--space-sm); }
  .precal-volume { flex-wrap: wrap; }
}