/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------- tokens */
:root {
  --negro: #08090a;
  --carbon: #101113;
  --grafito: #17191c;
  --linea: #26292e;
  --linea-viva: #3a3f46;
  --humo: #8b9099;
  --tiza: #eef0f2;
  --lima: #c9f948;
  --lima-hondo: #9ad117;
  --naranja: #ff7a45;
  --hielo: #7fd8ff;

  --serif: 'Archivo', system-ui, sans-serif;
  --ui: 'Inter', system-ui, -apple-system, sans-serif;

  --sombra: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
}

/* ----------------------------------------------------------------- base */
body {
  background: var(--negro);
  color: var(--tiza);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Trama de fondo: retícula fina tipo plano técnico */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 20%, transparent 78%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% -8%, rgba(201, 249, 72, 0.09), transparent 70%);
}

.envoltura {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ----------------------------------------------------------------- nav */
.barra {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 0;
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca__logo {
  width: 30px;
  height: 30px;
}
.marca__nombre {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.02em;
}
.marca__nombre span {
  color: var(--lima);
}
.barra__dato {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--humo);
}
.pulso {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 0 rgba(201, 249, 72, 0.7);
  animation: pulso 2.4s infinite;
}
@keyframes pulso {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 249, 72, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(201, 249, 72, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 249, 72, 0);
  }
}

/* ---------------------------------------------------------------- hero */
.hero {
  padding: 68px 0 40px;
  text-align: center;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-stretch: 122%;
  font-size: clamp(42px, 8.4vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.hero h1 em {
  font-style: normal;
  color: var(--lima);
  position: relative;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.055em;
  background: var(--lima);
  opacity: 0.28;
}
.hero p {
  max-width: 540px;
  margin: 22px auto 0;
  color: var(--humo);
  font-size: 16px;
}
.hero p b {
  color: var(--tiza);
  font-weight: 500;
}

/* ------------------------------------------------------------- consola */
.consola {
  position: relative;
  margin: 40px 0 0;
  background: linear-gradient(180deg, var(--grafito), var(--carbon));
  border: 1px solid var(--linea);
  border-radius: 10px;
  box-shadow: var(--sombra);
}
.consola::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, transparent, var(--lima), transparent);
  opacity: 0.55;
}
.consola__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linea);
}
.consola__pasos {
  display: flex;
  gap: 5px;
}
.consola__pasos i {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--linea-viva);
  transition: background 0.4s;
}
.consola__pasos i.on {
  background: var(--lima);
}

.campos {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr 0.75fr 0.95fr 1fr;
}
.campo {
  position: relative;
  padding: 16px 18px 14px;
  border-right: 1px solid var(--linea);
  min-width: 0;
}
.campo:last-child {
  border-right: 0;
}
.campo > label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 7px;
}
.campo input,
.campo select {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 2px 0;
  appearance: none;
  cursor: pointer;
}
.campo input {
  cursor: text;
}
.campo input::placeholder {
  color: #4d5259;
}
.campo select option {
  background: var(--carbon);
}
.campo::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 1px;
  background: var(--linea-viva);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.campo.activo::after {
  background: var(--lima);
  transform: scaleX(1);
}
.campo--sel::before {
  content: '';
  position: absolute;
  right: 18px;
  bottom: 22px;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--humo);
  border-bottom: 1.6px solid var(--humo);
  transform: rotate(45deg);
  pointer-events: none;
}

/* combobox */
.lista {
  position: absolute;
  z-index: 20;
  top: calc(100% - 6px);
  left: 8px;
  right: 8px;
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0d0e10;
  border: 1px solid var(--linea-viva);
  border-radius: 8px;
  box-shadow: 0 22px 44px -12px rgba(0, 0, 0, 0.85);
  padding: 5px;
  display: none;
}
.lista.abierta {
  display: block;
}
.lista button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  color: var(--tiza);
}
.lista button:hover,
.lista button.marcado {
  background: rgba(201, 249, 72, 0.12);
  color: var(--lima);
}
.lista__vacio {
  padding: 10px;
  font-size: 13px;
  color: var(--humo);
}
.lista::-webkit-scrollbar {
  width: 8px;
}
.lista::-webkit-scrollbar-thumb {
  background: var(--linea-viva);
  border-radius: 8px;
}

.consola__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--linea);
}
.aviso {
  font-size: 12.5px;
  color: var(--humo);
  min-height: 19px;
}
.aviso.mal {
  color: var(--naranja);
}

.tasar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--lima);
  color: #101204;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s, box-shadow 0.24s, opacity 0.2s;
  box-shadow: 0 0 0 0 rgba(201, 249, 72, 0.4);
}
.tasar:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -8px rgba(201, 249, 72, 0.5);
}
.tasar:active:not(:disabled) {
  transform: translateY(0);
}
.tasar:disabled {
  opacity: 0.55;
  cursor: wait;
}
.tasar svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------- carga */
.carga {
  display: none;
  padding: 58px 0 20px;
  text-align: center;
}
.carga.on {
  display: block;
}
.carga__pista {
  position: relative;
  width: min(420px, 78vw);
  height: 2px;
  margin: 0 auto 20px;
  background: var(--linea);
  overflow: hidden;
  border-radius: 2px;
}
.carga__pista i {
  position: absolute;
  inset: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, var(--lima), transparent);
  animation: correr 1.15s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes correr {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(390%);
  }
}
.carga__texto {
  font-size: 13.5px;
  color: var(--humo);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ resultado */
.resultado {
  display: none;
  padding: 46px 0 40px;
}
.resultado.on {
  display: block;
}
.aparece {
  opacity: 0;
  transform: translateY(14px);
  animation: subir 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes subir {
  to {
    opacity: 1;
    transform: none;
  }
}

.ficha {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}
.ficha__lado {
  background: var(--carbon);
  padding: 30px 32px;
}
.ficha__auto {
  font-family: var(--serif);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.ficha__sub {
  font-size: 13px;
  color: var(--humo);
}

.precio {
  margin: 26px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.precio__simbolo {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--lima);
  transform: translateY(-0.35em);
}
.precio__valor {
  font-family: var(--serif);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(48px, 8.6vw, 82px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--lima);
  font-variant-numeric: tabular-nums;
}
.precio__pesos {
  font-size: 15px;
  color: var(--humo);
  font-variant-numeric: tabular-nums;
}
.precio__pesos b {
  color: var(--tiza);
  font-weight: 600;
}

.tramos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 26px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
}
.tramo {
  background: var(--grafito);
  padding: 14px 16px;
}
.tramo__t {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--humo);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tramo__t i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.tramo__v {
  font-family: var(--serif);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 25px;
  letter-spacing: -0.02em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.tramo__n {
  font-size: 11.5px;
  color: var(--humo);
  margin-top: 3px;
}

/* gráfico */
.grafico__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.enjambre {
  width: 100%;
  height: 190px;
  overflow: visible;
}
.enjambre circle {
  opacity: 0;
  animation: puntoIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes puntoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.enjambre .eje {
  stroke: var(--linea-viva);
  stroke-width: 1;
}
.enjambre .tic {
  stroke: var(--linea-viva);
  stroke-width: 1;
}
.enjambre .rotulo {
  fill: var(--humo);
  font-size: 10px;
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
}
.enjambre .aguja {
  stroke: var(--lima);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.enjambre .banderin-txt {
  fill: var(--lima);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ui);
  letter-spacing: 0.06em;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--humo);
}
.leyenda span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.leyenda i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* desglose */
.desglose {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 22px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
}
.celda {
  background: var(--carbon);
  padding: 16px 18px;
}
.celda__t {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--humo);
}
.celda__v {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.celda__v.sube {
  color: var(--lima);
}
.celda__v.baja {
  color: var(--naranja);
}
.celda__n {
  font-size: 11.5px;
  color: var(--humo);
  margin-top: 2px;
}

/* comparables */
.seccion-t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 40px 0 16px;
}
.seccion-t h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 17px;
  letter-spacing: -0.015em;
}
.seccion-t a {
  font-size: 12.5px;
  color: var(--lima);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 249, 72, 0.32);
  padding-bottom: 1px;
}
.seccion-t a:hover {
  border-color: var(--lima);
}

.comparables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
}
.comp {
  display: block;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: 9px;
  padding: 15px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.comp:hover {
  border-color: var(--linea-viva);
  background: var(--grafito);
  transform: translateY(-2px);
}
.comp__precio {
  font-family: var(--serif);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 19px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.comp__titulo {
  font-size: 13px;
  margin-top: 5px;
  color: #c3c8ce;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.comp__meta {
  font-size: 11.5px;
  color: var(--humo);
  margin-top: 9px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.comp__meta i {
  font-style: normal;
  color: var(--linea-viva);
}

/* consejos */
.consejos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.consejo {
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--lima-hondo);
  border-radius: 0 9px 9px 0;
  padding: 15px 17px;
}
.consejo h3 {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.consejo p {
  font-size: 12.5px;
  color: var(--humo);
  line-height: 1.55;
}

/* --------------------------------------------------------------- error */
.problema {
  display: none;
  margin: 40px 0;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--naranja);
  border-radius: 0 10px 10px 0;
  padding: 22px 24px;
}
.problema.on {
  display: block;
}
.problema h3 {
  font-size: 15px;
  margin-bottom: 6px;
}
.problema p {
  font-size: 13.5px;
  color: var(--humo);
}

/* ------------------------------------------------------------ como fue */
.metodo {
  margin: 70px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--linea);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 34px;
}
.metodo__pasos {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.paso {
  position: relative;
  padding-left: 28px;
}
.paso__n {
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--lima);
}
.paso h3 {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
}
.paso p {
  font-size: 12.5px;
  color: var(--humo);
  line-height: 1.55;
}

/* ----------------------------------------------------------------- pie */
.pie {
  margin-top: 64px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #5f656d;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 940px) {
  .campos {
    grid-template-columns: 1fr 1fr;
  }
  .campo {
    border-bottom: 1px solid var(--linea);
  }
  .campo:nth-child(2n) {
    border-right: 0;
  }
  .campo:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
  .ficha {
    grid-template-columns: 1fr;
  }
  .desglose {
    grid-template-columns: 1fr 1fr;
  }
  .metodo {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 560px) {
  .envoltura {
    padding: 0 16px;
  }
  .hero {
    padding: 44px 0 30px;
  }
  .campos {
    grid-template-columns: 1fr;
  }
  .campo {
    border-right: 0;
  }
  .ficha__lado {
    padding: 24px 20px;
  }
  .consola__pie {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .tasar {
    justify-content: center;
  }
  .tramos {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .aparece {
    opacity: 1;
    transform: none;
  }
  .enjambre circle {
    opacity: 1;
  }
}