/* =========================================================================
   Sextante - landing (maqueta de evaluación)
   Tokens y decisiones: web/sistema-de-diseño.md
   Copy: web/specs/landing.md
   PROVISORIO: copy sin aprobar; puede cambiar por el Plan B. Ver LEEME.md
   ========================================================================= */

:root {
  font-size: 112.5%; /* 18px base, respeta el zoom */

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* identidad */
  --papel: #FAF8F4;
  --papel-hueco: #F1ECE3;
  --tinta: #1C1815;
  --tinta-suave: #4A443C;
  --linea: #D7D0C2;
  --laton: #8A6A34;

  /* semanticos */
  --critico: #9E3B2F;
  --atencion: #A65E2E;
  --solido: #3F6B57;
  --pizarra: #3E5C7E;
  --critico-tenue: #E8D4CF;
  --solido-tenue: #D4E0DA;
  --pizarra-tenue: #D4DCE6;

  /* escala tipografica (1.25 sobre 18) */
  --fs-display: clamp(1.9rem, 7vw, 3.82rem);
  --fs-h1: clamp(1.85rem, 5.5vw, 3.05rem);
  --fs-h2: clamp(1.6rem, 4.5vw, 2.44rem);
  --fs-h3: clamp(1.4rem, 3.5vw, 1.95rem);
  --fs-h4: 1.56rem;
  --fs-lead: 1.25rem;
  --fs-base: 1rem;
  --fs-small: 0.806rem;
  --fs-micro: 0.64rem;

  /* espaciado */
  --e-1: 4px;  --e-2: 8px;  --e-3: 16px; --e-4: 24px;
  --e-5: 40px; --e-6: 64px; --e-7: 104px;

  --ancho-max: 64rem;  /* 1152px */
  --medida: 36rem;     /* ~65-70 caracteres */

  --ritmo: var(--e-6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #14110D;
    --papel-hueco: #1E1A14;
    --tinta: #EBE5DA;
    --tinta-suave: #A79E8D;
    --linea: #38322A;
    --laton: #C79A5A;
    --critico: #D9705F;
    --atencion: #D08C4F;
    --solido: #6FA98C;
    --pizarra: #7FA2C4;
    --critico-tenue: #3A241F;
    --solido-tenue: #22332C;
    --pizarra-tenue: #23303D;
  }
}

:root[data-theme="dark"] {
  --papel: #14110D;
  --papel-hueco: #1E1A14;
  --tinta: #EBE5DA;
  --tinta-suave: #A79E8D;
  --linea: #38322A;
  --laton: #C79A5A;
  --critico: #D9705F;
  --atencion: #D08C4F;
  --solido: #6FA98C;
  --pizarra: #7FA2C4;
  --critico-tenue: #3A241F;
  --solido-tenue: #22332C;
  --pizarra-tenue: #23303D;
}

/* ---------- reset acotado ---------- */

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

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

body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; }
p { max-width: var(--medida); }
a { color: var(--laton); }
strong { font-weight: 600; }

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

:where(a, button):focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 2px;
}

/* ---------- estructura ---------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e-4);
}

main > section {
  padding-block: var(--ritmo);
  border-top: 1px solid var(--linea);
}

.hero { border-top: 0; }
.pesos, .precios { background: var(--papel-hueco); }

/* ---------- cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__interior {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--e-2) var(--e-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
.marca { text-decoration: none; color: var(--tinta); display: inline-flex; flex-direction: column; line-height: 1; }
.marca__nombre { font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; }
.marca__descriptor { font-family: var(--mono); font-size: var(--fs-micro); color: var(--tinta-suave); letter-spacing: 0.08em; margin-top: 3px; }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e-3); }
.cabecera__ancla {
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--laton);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.tema {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
}
/* el boton muestra el modo al que se cambia (patron estandar de toggle unico) */
.tema__etiqueta[data-destino="claro"] { display: none; }
.tema__etiqueta[data-destino="oscuro"] { display: inline; }
:root[data-theme="dark"] .tema__etiqueta[data-destino="oscuro"] { display: none; }
:root[data-theme="dark"] .tema__etiqueta[data-destino="claro"] { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema__etiqueta[data-destino="oscuro"] { display: none; }
  :root:not([data-theme="light"]) .tema__etiqueta[data-destino="claro"] { display: inline; }
}

/* ---------- hero (bloques 1-3) ---------- */

.hero { padding-block: var(--e-7) var(--ritmo); }
.hero__titular {
  font-size: var(--fs-display);
  max-width: 18ch;
  margin-bottom: var(--e-4);
}
.hero__bajada {
  font-size: var(--fs-lead);
  color: var(--tinta-suave);
  margin-bottom: var(--e-5);
}
.hero__pregunta {
  font-size: var(--fs-h4);
  line-height: 1.3;
  max-width: 24ch;
  padding-top: var(--e-4);
  border-top: 2px solid var(--laton);
}

/* ---------- bloque 4: tabla de pesos ---------- */

.pesos__entrada {
  font-size: var(--fs-lead);
  max-width: 40ch;
  margin-bottom: var(--e-5);
}
.tabla-pesos {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.tabla-pesos caption { text-align: left; }
.tabla-pesos th, .tabla-pesos td {
  text-align: left;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: baseline;
}
.tabla-pesos thead th {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--tinta-suave);
  text-transform: none;
}
.tabla-pesos tbody th { font-weight: 400; padding-right: var(--e-4); }
.tabla-pesos__peso-col { width: 42%; }

.peso { display: flex; align-items: center; gap: var(--e-3); }
.peso__num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  min-width: 2.2ch;
  text-align: right;
}
.peso__regla {
  display: block;
  height: 3px;
  width: var(--v, 0%);
  background: var(--laton);
  flex-shrink: 0;
  max-width: 220px;
}
.tabla-pesos__contexto th, .tabla-pesos__contexto td { color: var(--tinta-suave); font-style: italic; }
.tabla-pesos__contexto td { font-size: var(--fs-small); }

.es-gratis th { position: relative; padding-left: var(--e-3); }
.es-gratis th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px; height: 7px;
  background: var(--laton);
}
.marca-gratis {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--laton);
  margin-right: 6px;
  vertical-align: middle;
}
.pesos__leyenda {
  font-size: var(--fs-small);
  color: var(--tinta-suave);
  margin-top: var(--e-3);
}
.pesos__nota {
  font-size: var(--fs-small);
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-top: var(--e-4);
}

/* ---------- bloque 5: diagnosticos ---------- */

.diagnosticos__lista {
  display: grid;
  gap: 0;
}
.diagnostico {
  padding: var(--e-4) 0;
  border-top: 1px solid var(--linea);
}
.diagnostico:first-child { border-top: 0; }
.diagnostico__frase {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--e-2);
}
.diagnostico__detalle { color: var(--tinta-suave); max-width: 46ch; }
.diagnosticos__cierre {
  margin-top: var(--e-5);
  font-size: var(--fs-lead);
  max-width: 48ch;
}
.diagnosticos__remate {
  margin-top: var(--e-3);
  color: var(--tinta-suave);
  max-width: 48ch;
}

/* ---------- bloque 6: dos cifras y el cruce ---------- */

.cifras__titulo { font-size: var(--fs-h2); margin-bottom: var(--e-5); }

.cifras__muestra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  padding: var(--e-4) 0 var(--e-5);
  margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--linea);
}
.cifra { display: flex; flex-direction: column; gap: var(--e-2); min-width: 160px; }
.cifra__valor {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: 1;
  font-weight: 500;
}
.cifra__tope { font-size: 0.4em; color: var(--tinta-suave); margin-left: 2px; }
.cifra__banda {
  display: block;
  height: 4px;
  width: 180px;
  max-width: 100%;
  background: var(--linea);
}
.cifra__banda-relleno { display: block; height: 100%; width: var(--v, 0%); background: var(--solido); }
.cifra__escala { display: flex; gap: 4px; }
.cifra__paso { width: 34px; height: 4px; background: var(--linea); }
.cifra__paso[data-on] { background: var(--pizarra); }
.cifra__rotulo {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

.cifras__texto > p + p { margin-top: var(--e-3); }
.cifras__texto { margin-bottom: var(--e-5); }

.cruce__intro { font-weight: 600; margin-bottom: var(--e-3); }
.cruce__lista { list-style: none; padding: 0; max-width: 54ch; }
.cruce__lista li {
  padding: var(--e-3) 0 var(--e-3) var(--e-4);
  border-top: 1px solid var(--linea);
  position: relative;
}
.cruce__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--e-3) + 0.55em);
  width: var(--e-3); height: 2px;
  background: var(--laton);
}
.cruce__cierre { margin-top: var(--e-4); font-weight: 600; }

/* ---------- bloque 7: los tres actos ---------- */

.actos__lista { list-style: none; padding: 0; }
.acto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  border-top: 1px solid var(--linea);
}
.acto:first-child { border-top: 0; padding-top: 0; }
.acto__num {
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--laton);
  line-height: 1;
  padding-top: 2px;
}
.acto__nombre { font-size: var(--fs-h3); margin-bottom: var(--e-2); }
.acto__lema { font-style: italic; color: var(--tinta-suave); margin-bottom: var(--e-3); }
.acto__detalle { max-width: 52ch; }

/* ---------- bloque 8: precios ---------- */

.precios__titulo { font-size: var(--fs-h2); margin-bottom: var(--e-5); }
.precios__lista { display: grid; gap: 0; }
.precio {
  padding: var(--e-4) 0;
  border-top: 1px solid var(--linea);
}
.precio:first-child { border-top: 0; }
.precio dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-2);
}
.precio__nombre { font-weight: 600; font-size: 1.1rem; }
.precio__valor {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--laton);
  font-size: 1rem;
}
.precio dd { color: var(--tinta-suave); max-width: 54ch; }
.precios__nota {
  font-size: var(--fs-small);
  color: var(--tinta-suave);
  max-width: 56ch;
  margin-top: var(--e-4);
}

/* ---------- bloque 9: CTA ---------- */

.cta__titulo { font-size: var(--fs-h2); margin-bottom: var(--e-4); }
.cta__subtexto { font-size: var(--fs-lead); color: var(--tinta-suave); max-width: 50ch; margin-bottom: var(--e-5); }
.cta__botones { display: flex; flex-direction: column; gap: var(--e-3); }

.boton {
  --corr: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--e-3) var(--e-5);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid var(--tinta);
  position: relative;
  transition: background-color 120ms ease, transform 120ms ease;
}
.boton::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--laton);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms ease;
}
.boton--primario { background: var(--tinta); color: var(--papel); }
.boton--secundario { background: transparent; color: var(--tinta); }

.boton--primario:hover { background: color-mix(in srgb, var(--tinta) 92%, var(--laton)); }
.boton--secundario:hover { background: var(--papel-hueco); }
.boton:hover::after { transform: scaleX(1); }
.boton:active { transform: translateY(1px); }

/* ---------- pie ---------- */

.pie { padding-block: var(--ritmo); border-top: 1px solid var(--linea); }
.pie__par { font-weight: 600; }
.pie__unidad { color: var(--tinta-suave); margin-top: var(--e-2); }
.pie__contacto { margin-top: var(--e-3); font-size: var(--fs-small); }
.pie__contacto a { color: var(--laton); }
.pie__precios-nota { margin-top: var(--e-3); font-size: var(--fs-micro); color: var(--tinta-suave); }

/* ---------- desktop ---------- */

@media (min-width: 768px) {
  :root { --ritmo: var(--e-7); }

  .hero { padding-block: calc(var(--e-7) + var(--e-5)) var(--e-7); }
  .hero__titular { margin-bottom: var(--e-5); }

  .diagnosticos__lista { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); }
  .diagnostico {
    border-top: 0;
    border-left: 1px solid var(--linea);
    padding: 0 0 0 var(--e-4);
  }
  .diagnostico:first-child { border-left: 0; padding-left: 0; }

  .cifras__muestra { gap: var(--e-7); }

  .cta__botones { flex-direction: row; }
  .boton { padding-inline: var(--e-6); }
}

/* ---------- movimiento reducido ---------- */

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

html { scroll-behavior: smooth; }