/* ==========================================================================
   PISTON QUARKS — SISTEMA "ELECTRIC PRECISION, ELEVATED"
   --------------------------------------------------------------------------
   Hub corporativo. Extiende los tokens de piston-design.css sin depender de
   el: este sitio se sirve por separado, asi que es autonomo.

   CINCO REGLAS que separan esto de una plantilla generada:

     1. Cero emoji en la interfaz. Se usan numeros romanos (01, 02, 03).
     2. Cero sombras difusas. Las tarjetas se separan con un borde de 1px.
        La unica sombra del sistema es la del header al hacer scroll.
     3. Cero animaciones rebotadas. Entrada = opacidad + 8px, 420ms,
        ease-out, escalonado 60ms. Nada de pulsos ni de "pop".
     4. Aire agresivo. Seccion de 120 a 160px de padding vertical.
        El espacio es el lujo; la densidad lo roba.
     5. Cero gradientes decorativos. El color aparece en un elemento por
        pantalla, nunca en diez.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Color ---------------------------------------------------------------- */
  --pq-ink:          #0A0A0F;   /* fondo profundo, casi negro */
  --pq-ink-2:        #121218;   /* superficie elevada sobre ink */
  --pq-ink-3:        #1A1A22;   /* borde sobre ink */
  --pq-paper:        #FAFAFC;   /* cuerpo de pagina */
  --pq-paper-2:      #F4F4F7;   /* superficie alterna */
  --pq-white:        #FFFFFF;

  --pq-primary:      #1307E4;   /* indigo electrico de marca */
  --pq-primary-hi:   #3B31F0;
  --pq-primary-lo:   #0D04A8;
  --pq-primary-wash: #EEEDFF;

  --pq-text:         #14151A;
  --pq-text-2:       #4A4D5C;
  --pq-text-3:       #7A7E8C;
  --pq-text-inv:     #FFFFFF;

  --pq-hair:         rgba(10, 10, 15, 0.09);   /* divisor sobre claro */
  --pq-hair-2:       rgba(10, 10, 15, 0.16);   /* divisor marcado */
  --pq-hair-inv:     rgba(255, 255, 255, 0.12);
  --pq-hair-inv-2:   rgba(255, 255, 255, 0.22);

  /* Estados — sin color. El color no es informacion aqui. */
  --pq-ok:    #0F7B4F;
  --pq-ok-bg: rgba(15, 123, 79, 0.08);

  /* Tipografia ----------------------------------------------------------- */
  /* Cambio deliberado respecto a piston-design.css: ahi Open Sans era
     display y Anybody body. Anybody es la cara con caracter (ancho
     variable, casi una display); Open Sans es la cara neutra. Se
     intercambian para que la voz de marca quede arriba. */
  --pq-font-display: 'Anybody', 'Open Sans', sans-serif;
  --pq-font-body:    'Inter', 'Open Sans', sans-serif;
  --pq-font-label:   'Bebas Neue', 'Inter', sans-serif;
  --pq-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Escala fluida -------------------------------------------------------- */
  --pq-t-hero:  clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);
  --pq-t-1:     clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem);
  --pq-t-2:     clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);
  --pq-t-3:     clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --pq-t-body:  1.0625rem;
  --pq-t-sm:    0.9375rem;
  --pq-t-xs:    0.8125rem;
  --pq-t-label: 0.75rem;

  /* Ritmo ---------------------------------------------------------------- */
  --pq-s1: 4px;   --pq-s2: 8px;   --pq-s3: 12px;  --pq-s4: 16px;
  --pq-s5: 24px;  --pq-s6: 32px;  --pq-s7: 48px;  --pq-s8: 64px;
  --pq-s9: 96px;  --pq-s10: 128px; --pq-s11: 160px;

  --pq-section: clamp(72px, 9vw, 152px);   /* padding vertical de seccion */

  --pq-radius: 8px;
  --pq-radius-lg: 14px;
  --pq-radius-full: 999px;

  --pq-container: 1280px;
  --pq-nav-h: 68px;

  /* Movimiento — una sola curva, sin rebote */
  --pq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pq-dur: 420ms;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pq-nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--pq-paper);
  color: var(--pq-text);
  font-family: var(--pq-font-body);
  font-size: var(--pq-t-body);
  line-height: 1.62;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--pq-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

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

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--pq-font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.t-hero  { font-size: var(--pq-t-hero); letter-spacing: -0.038em; }
.t-1     { font-size: var(--pq-t-1); }
.t-2     { font-size: var(--pq-t-2); letter-spacing: -0.022em; }
.t-3     { font-size: var(--pq-t-3); line-height: 1.28; letter-spacing: -0.014em; }

.t-body  { font-size: var(--pq-t-body); color: var(--pq-text-2); }
.t-sm    { font-size: var(--pq-t-sm); }
.t-xs    { font-size: var(--pq-t-xs); }

/* Eyebrow: la unica vez que entra Bebas Neue. Mayusculas, espaciada. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pq-s3);
  font-family: var(--pq-font-label);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pq-primary);
  margin: 0 0 var(--pq-s4);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--pq-primary);
  flex: none;
}
.eyebrow--inv { color: rgba(255,255,255,0.62); }
.eyebrow--inv::before { background: rgba(255,255,255,0.42); }

/* Numeral romano para numerar secciones. Sustituye a los emoji. */
.numeral {
  font-family: var(--pq-font-mono);
  font-size: var(--pq-t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--pq-text-3);
  display: block;
  margin-bottom: var(--pq-s3);
}
.eyebrow--inv + .numeral,
.on-ink .numeral { color: rgba(255,255,255,0.4); }

.mono {
  font-family: var(--pq-font-mono);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--pq-text-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.on-ink .lead { color: rgba(255,255,255,0.68); }

.link {
  color: var(--pq-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 200ms var(--pq-ease);
}
.link:hover { opacity: 0.62; }
.on-ink .link { color: rgba(255,255,255,0.9); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--pq-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--pq-section); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--paper { background: var(--pq-paper-2); }
.section--ink  { background: var(--pq-ink); color: var(--pq-text-inv); }

.section-head { max-width: 66ch; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .lead { margin-top: var(--pq-s4); }

.rule { height: 1px; background: var(--pq-hair); border: 0; margin: 0; }

.grid { display: grid; gap: var(--pq-s5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. NAV
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--pq-nav-h);
  display: flex;
  align-items: center;
  background: rgba(250, 250, 252, 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--pq-ease);
}
/* Unica sombra del sistema. */
.nav.is-stuck { border-bottom-color: var(--pq-hair); }

.nav__inner {
  width: 100%;
  max-width: var(--pq-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  display: flex;
  align-items: center;
  gap: var(--pq-s6);
}

.brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.brand__mark {
  font-family: var(--pq-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: var(--pq-text);
}
.brand__dot { color: var(--pq-primary); }
.brand__suffix {
  font-family: var(--pq-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pq-text-3);
}

.nav__links { display: flex; align-items: center; gap: var(--pq-s5); }
.nav__links a {
  font-size: var(--pq-t-sm);
  color: var(--pq-text-2);
  transition: color 200ms var(--pq-ease);
}
.nav__links a:hover,
.nav__links a[aria-current='page'] { color: var(--pq-text); }
.nav__links a[aria-current='page'] {
  box-shadow: inset 0 -1px 0 var(--pq-primary);
  padding-bottom: 2px;
}

.nav__toggle { display: none; }

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pq-s4);
    position: absolute;
    top: var(--pq-nav-h);
    left: 0; right: 0;
    padding: var(--pq-s5) clamp(20px, 5vw, 56px);
    background: var(--pq-paper);
    border-bottom: 1px solid var(--pq-hair);
  }
}

/* --------------------------------------------------------------------------
   6. BOTONES — sin sombras, sin rebote
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--pq-radius);
  border: 1px solid transparent;
  font-size: var(--pq-t-sm);
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 220ms var(--pq-ease),
              border-color 220ms var(--pq-ease),
              color 220ms var(--pq-ease);
}

.btn--primary { background: var(--pq-primary); color: #fff; }
.btn--primary:hover { background: var(--pq-primary-hi); }

.btn--dark { background: var(--pq-ink); color: #fff; }
.btn--dark:hover { background: #1E1E26; }

.btn--outline { border-color: var(--pq-hair-2); color: var(--pq-text); }
.btn--outline:hover { border-color: var(--pq-text); background: var(--pq-white); }

.btn--ghost-inv { border-color: var(--pq-hair-inv-2); color: #fff; }
.btn--ghost-inv:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }

.btn--block { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: var(--pq-t-body); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn__arrow { transition: transform 220ms var(--pq-ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--pq-s3); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.hero {
  background: var(--pq-ink);
  color: #fff;
  padding-top: calc(var(--pq-nav-h) + clamp(64px, 9vw, 132px));
  padding-bottom: clamp(64px, 9vw, 132px);
  position: relative;
  overflow: hidden;
}
/* Un unico elemento de color en la pantalla. */
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--pq-primary);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; align-items: start; } }

.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--pq-primary-container); }
.hero .lead { margin-top: var(--pq-s5); }

.hero__actions { margin-top: var(--pq-s6); }

/* Panel de cifras: aire y lineas finas. */
.stats { display: grid; gap: 0; border-top: 1px solid var(--pq-hair-inv); }
.stat { padding: var(--pq-s5) 0; border-bottom: 1px solid var(--pq-hair-inv); }
.stat__value {
  font-family: var(--pq-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__label {
  margin-top: var(--pq-s2);
  font-size: var(--pq-t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}

/* --------------------------------------------------------------------------
   8. TARJETAS — borde de 1px, cero sombra
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--pq-s6);
  border: 1px solid var(--pq-hair);
  border-radius: var(--pq-radius-lg);
  background: var(--pq-white);
  transition: border-color 220ms var(--pq-ease), background-color 220ms var(--pq-ease);
}
a.card:hover, button.card:hover { border-color: var(--pq-hair-2); }
a.card:hover .card__title, button.card:hover .card__title { color: var(--pq-primary); }

.card__title {
  font-family: var(--pq-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color 220ms var(--pq-ease);
}
.card__text {
  margin-top: var(--pq-s3);
  font-size: var(--pq-t-sm);
  color: var(--pq-text-2);
  flex: 1;
}
.card__foot {
  margin-top: var(--pq-s5);
  padding-top: var(--pq-s4);
  border-top: 1px solid var(--pq-hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pq-s3);
}

.card__price {
  font-family: var(--pq-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--pq-text);
  font-variant-numeric: tabular-nums;
}

/* Pastilla de estado. Sin color, solo borde. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--pq-hair-2);
  border-radius: var(--pq-radius-full);
  font-family: var(--pq-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--pq-text-2);
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pq-text-3);
  flex: none;
}
.pill--ok::before { background: var(--pq-ok); }
.pill--inv { border-color: var(--pq-hair-inv-2); color: rgba(255,255,255,0.7); }
.pill--inv::before { background: rgba(255,255,255,0.5); }

/* --------------------------------------------------------------------------
   9. EN EL TALLER
   -------------------------------------------------------------------------- */

.workshop { background: var(--pq-ink); color: #fff; }

.workshop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--pq-hair-inv);
  border: 1px solid var(--pq-hair-inv);
  border-radius: var(--pq-radius-lg);
  overflow: hidden;
}
.workshop__cell {
  background: var(--pq-ink);
  padding: var(--pq-s5);
  display: flex;
  flex-direction: column;
  transition: background-color 240ms var(--pq-ease);
}
.workshop__cell:hover { background: var(--pq-ink-2); }

.workshop__name {
  font-family: var(--pq-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
}
.workshop__text {
  margin-top: var(--pq-s3);
  font-size: var(--pq-t-sm);
  color: rgba(255,255,255,0.6);
  flex: 1;
}

/* Sin tarjeta: solo texto con subrayado al pasar. */
.workshop__link {
  margin-top: var(--pq-s5);
  font-size: var(--pq-t-xs);
  color: var(--pq-primary-container);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: opacity 200ms var(--pq-ease);
}
.workshop__link:hover { opacity: 0.68; }

.workshop__note {
  margin-top: var(--pq-s5);
  font-size: var(--pq-t-xs);
  color: rgba(255,255,255,0.42);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   10. FILA DE HITOS — para estado.html
   -------------------------------------------------------------------------- */

.timeline { border-top: 1px solid var(--pq-hair); }

.tl {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: var(--pq-s5);
  align-items: baseline;
  padding: var(--pq-s5) 0;
  border-bottom: 1px solid var(--pq-hair);
}
/* FAQ: sin fecha ni pastilla, solo la pregunta y la respuesta. */
.timeline--faq .tl { grid-template-columns: 1fr; gap: var(--pq-s2); }
.timeline--faq .tl__name { font-size: var(--pq-t-3); }

@media (max-width: 720px) {
  .tl { grid-template-columns: 1fr; gap: var(--pq-s2); }
}

.tl__date { font-family: var(--pq-font-mono); font-size: var(--pq-t-xs); color: var(--pq-text-3); }
.tl__name { font-family: var(--pq-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; }
.tl__text { font-size: var(--pq-t-sm); color: var(--pq-text-2); margin-top: 4px; }
.tl__pill { justify-self: end; }
@media (max-width: 720px) { .tl__pill { justify-self: start; } }

/* --------------------------------------------------------------------------
   11. TABLA DE COMISIONES
   -------------------------------------------------------------------------- */

.table-wrap {
  border: 1px solid var(--pq-hair);
  border-radius: var(--pq-radius-lg);
  overflow: hidden;
  background: var(--pq-white);
}

.rates { width: 100%; border-collapse: collapse; font-size: var(--pq-t-sm); }
.rates th, .rates td {
  text-align: left;
  padding: var(--pq-s4) var(--pq-s5);
  border-bottom: 1px solid var(--pq-hair);
  vertical-align: baseline;
}
.rates thead th {
  font-family: var(--pq-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pq-text-3);
  font-weight: 500;
  background: var(--pq-paper-2);
}
.rates tbody tr:last-child td { border-bottom: 0; }
.rates tbody tr:hover { background: var(--pq-paper-2); }
.rates td:first-child { font-weight: 550; }
.rates .rate-num {
  font-family: var(--pq-font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--pq-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .rates, .rates tbody, .rates tr, .rates td { display: block; width: 100%; }
  .rates thead { display: none; }
  .rates tr { border-bottom: 1px solid var(--pq-hair); padding: var(--pq-s4) 0; }
  .rates td { border: 0; padding: 3px var(--pq-s5); }
  .rates td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--pq-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pq-text-3);
  }
}

/* --------------------------------------------------------------------------
   12. FORMULARIOS
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--pq-s5); max-width: 680px; }

.field { display: grid; gap: var(--pq-s2); }

.field__label {
  font-size: var(--pq-t-sm);
  font-weight: 550;
  letter-spacing: -0.005em;
}
.field__hint { font-size: var(--pq-t-xs); color: var(--pq-text-3); }

.field__label .req { color: var(--pq-primary); margin-left: 3px; }

.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--pq-hair-2);
  border-radius: var(--pq-radius);
  background: var(--pq-white);
  font-size: var(--pq-t-sm);
  color: var(--pq-text);
  transition: border-color 200ms var(--pq-ease);
  -webkit-appearance: none;
  appearance: none;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--pq-text-3); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--pq-primary);
  outline: none;
}
.textarea { min-height: 108px; resize: vertical; line-height: 1.55; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237A7E8C' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.input.is-error, .textarea.is-error, .select.is-error { border-color: #C4342C; }

.field__error {
  font-size: var(--pq-t-xs);
  color: #C4342C;
  display: none;
}
.field.has-error .field__error { display: block; }

/* Opciones tipo pastilla, sin checkbox visible. */
.choices { display: flex; flex-wrap: wrap; gap: var(--pq-s2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: block;
  padding: 8px 14px;
  border: 1px solid var(--pq-hair-2);
  border-radius: var(--pq-radius-full);
  font-size: var(--pq-t-xs);
  color: var(--pq-text-2);
  cursor: pointer;
  transition: border-color 200ms var(--pq-ease), background-color 200ms var(--pq-ease), color 200ms var(--pq-ease);
}
.choice input:hover + span { border-color: var(--pq-text-3); }
.choice input:checked + span {
  border-color: var(--pq-primary);
  background: var(--pq-primary-wash);
  color: var(--pq-primary-lo);
}
.choice input:focus-visible + span { outline: 2px solid var(--pq-primary); outline-offset: 2px; }

.form__note {
  font-size: var(--pq-t-xs);
  color: var(--pq-text-3);
  padding-top: var(--pq-s4);
  border-top: 1px solid var(--pq-hair);
}

.form__ok {
  display: none;
  padding: var(--pq-s5);
  border: 1px solid var(--pq-hair-2);
  border-left: 2px solid var(--pq-ok);
  border-radius: var(--pq-radius);
  background: var(--pq-ok-bg);
  font-size: var(--pq-t-sm);
}
.form__ok.is-on { display: block; }

/* --------------------------------------------------------------------------
   13. CALL TO ACTION
   -------------------------------------------------------------------------- */

.cta {
  background: var(--pq-ink);
  color: #fff;
  text-align: center;
  padding-block: clamp(80px, 10vw, 156px);
}
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta .lead { margin: var(--pq-s5) auto 0; }
.cta .btn-row { justify-content: center; margin-top: var(--pq-s6); }

/* --------------------------------------------------------------------------
   14. PIE
   -------------------------------------------------------------------------- */

.foot {
  background: var(--pq-ink);
  color: rgba(255,255,255,0.56);
  border-top: 1px solid var(--pq-hair-inv);
  padding-block: var(--pq-s8) var(--pq-s6);
  font-size: var(--pq-t-sm);
}
.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pq-s6);
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--pq-s7);
}
.foot__brand .brand__mark { color: #fff; }
.foot__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 72px); }
.foot__col h4 {
  font-family: var(--pq-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--pq-s3);
}
.foot__col li { margin-bottom: 7px; }
.foot__col a { transition: color 200ms var(--pq-ease); }
.foot__col a:hover { color: #fff; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pq-s3) var(--pq-s5);
  justify-content: space-between;
  padding-top: var(--pq-s5);
  border-top: 1px solid var(--pq-hair-inv);
  font-size: var(--pq-t-xs);
  color: rgba(255,255,255,0.36);
}
.foot__bottom a { transition: color 200ms var(--pq-ease); }
.foot__bottom a:hover { color: rgba(255,255,255,0.7); }

/* --------------------------------------------------------------------------
   15. MOVIMIENTO — una sola direccion, sin rebote
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--pq-dur) var(--pq-ease),
              transform var(--pq-dur) var(--pq-ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Escalonado optimo por posicion, no por JS. */
[data-reveal][style*='--i:1'] { transition-delay: 60ms; }
[data-reveal][style*='--i:2'] { transition-delay: 120ms; }
[data-reveal][style*='--i:3'] { transition-delay: 180ms; }
[data-reveal][style*='--i:4'] { transition-delay: 240ms; }
[data-reveal][style*='--i:5'] { transition-delay: 300ms; }

/* Sin JS: nada se queda invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. UTILIDADES
   -------------------------------------------------------------------------- */

.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;
}
.on-ink { color: #fff; }
.mt-4 { margin-top: var(--pq-s4); }
.mt-5 { margin-top: var(--pq-s5); }
.mt-6 { margin-top: var(--pq-s6); }
.mt-7 { margin-top: var(--pq-s7); }
.mb-4 { margin-bottom: var(--pq-s4); }
.mb-5 { margin-bottom: var(--pq-s5); }
.mb-6 { margin-bottom: var(--pq-s6); }
.text-c { text-align: center; }
.muted { color: var(--pq-text-3); }
.stack-2 > * + * { margin-top: var(--pq-s2); }
.stack-3 > * + * { margin-top: var(--pq-s3); }
.stack-4 > * + * { margin-top: var(--pq-s4); }
.stack-5 > * + * { margin-top: var(--pq-s5); }
.stack-6 > * + * { margin-top: var(--pq-s6); }
.stack-7 > * + * { margin-top: var(--pq-s7); }