/* ══════════════════════════════════════════════════════════════
   La calculadora pública de la web.

   El motor y los IDs son los mismos que la calculadora de adentro del
   panel — si mostraran cosas distintas, la de afuera estaría mintiendo
   sobre el producto. Lo que NO se comparte es la ropa.

   POR QUÉ: adentro, `.section` y `.form-field` visten un panel de
   trabajo, donde todo pesa igual porque el que mira ya sabe qué está
   haciendo. Acá entra alguien de la calle que no nos conoce, y con esa
   misma ropa la página se lee como una planilla de cálculo: cajas
   grises iguales, sin jerarquía, sin saber por dónde empezar.

   Así que acá se re-viste TODO lo heredado, acotado a `.calcpub-caja`
   para no tocar el panel. Cuatro decisiones sostienen el diseño:

     1. PASOS NUMERADOS. Un número dorado grande por sección. Es lo que
        convierte «un formulario largo» en «tres pasos y un resultado».
     2. EL RESULTADO ESTÁ SEPARADO de la carga, con su propio marco y
        su propio rótulo. Antes eran cuatro cajas más, iguales a las de
        arriba.
     3. LOS CAMPOS SE HUNDEN, las tarjetas se levantan. Profundidad en
        vez de todo plano sobre negro.
     4. EL DORADO SE USA POCO. Los números de paso, el foco, y el
        resultado. Si se usa en todo deja de señalar nada.
   ══════════════════════════════════════════════════════════════ */

.calcpub-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* Un resplandor tibio arriba, detrás del título. Saca el "negro plano"
   de encima sin agregar una sola imagen: son dos degradados radiales
   que se desvanecen antes del primer paso. */
.calcpub-body::before {
  content: '';
  position: fixed; inset: 0 0 auto; height: 620px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 380px at 50% -120px, rgba(201,169,110,.13), transparent 70%),
    radial-gradient(600px 300px at 85% 40px, rgba(255,77,77,.05), transparent 70%);
}
.calcpub-tapa, .calcpub-hero, .calcpub-caja, .calcpub-pie { position: relative; z-index: 1; }

/* ── Tapa ─────────────────────────────────────────────────────── */
.calcpub-tapa {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.calcpub-marca { display: flex; align-items: baseline; gap: 9px; }
.calcpub-marca .brand-text { font-size: 1.05rem; }
.calcpub-prod {
  font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text);
  border: 1px solid var(--border-accent); border-radius: var(--r-full);
  padding: 2px 9px;
}

/* ── Título ───────────────────────────────────────────────────── */
.calcpub-hero {
  max-width: 760px; margin: 0 auto;
  padding: clamp(40px, 7vw, 78px) clamp(16px, 4vw, 40px) 10px;
  text-align: center;
}
.calcpub-hero h1 {
  margin: 0 0 18px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.1rem, 6.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em;
  text-wrap: balance;
}
.calcpub-bajada {
  margin: 0 auto 12px; max-width: 58ch;
  font-size: 1.02rem; line-height: 1.65; color: var(--text-sub);
  text-wrap: pretty;
}
.calcpub-chico { font-size: .85rem; color: var(--text-muted); }

/* Tres sellos abajo del título: gratis / sin cuenta / no guardamos.
   Son las tres objeciones que frenan a alguien antes de cargar el
   primer número, así que van contestadas antes de la primera pregunta. */
.calcpub-sellos {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 20px;
}
.calcpub-sello {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text-sub);
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 6px 13px;
}
.calcpub-sello b { color: var(--gold-text); font-weight: 800; }

.calcpub-caja {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) clamp(12px, 4vw, 40px) 70px;
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 24px);
}

/* ══ LO HEREDADO, RE-VESTIDO ═══════════════════════════════════
   Todo lo de acá abajo va acotado a `.calcpub-caja`: el panel de
   adentro no se toca. */

/* ── Las tarjetas de paso ─────────────────────────────────────── */
.calcpub-caja .section {
  position: relative;
  background: linear-gradient(168deg,
              color-mix(in srgb, var(--bg-surface) 92%, var(--gold) 8%),
              var(--bg-surface) 55%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(0,0,0,.8);
}

/* El número del paso. Va en la esquina, grande y translúcido: se lee
   como "vas por acá" sin robarle atención al título. */
.calcpub-caja .cp-paso[data-paso]::before {
  content: attr(data-paso);
  position: absolute; top: 10px; right: 18px;
  font-family: var(--serif); font-size: 3.6rem; font-weight: 600; line-height: 1;
  color: var(--gold); opacity: .13;
  pointer-events: none;
}

.calcpub-caja .section > h3 {
  margin: 0 0 4px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.42rem); letter-spacing: -.01em;
  color: var(--text);
}
/* La rayita dorada abajo del título. Un detalle, pero es lo que
   diferencia un encabezado de un renglón más de texto. */
.calcpub-caja .section > h3::after {
  content: ''; display: block;
  width: 34px; height: 2px; margin-top: 9px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}
.calcpub-caja .section > .sub {
  margin: 12px 0 18px; max-width: 62ch;
  font-size: .88rem; line-height: 1.55; color: var(--text-sub);
}
.calcpub-caja .cp-pista {
  margin-top: 5px; font-size: .68rem !important; line-height: 1.4;
  color: var(--text-muted);
}

/* ── Los campos: hundidos, no cajas flotando ──────────────────── */
.calcpub-caja .form-field label,
.calcpub-caja .calc-campo > span {
  font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 7px;
}
.calcpub-caja input,
.calcpub-caja select {
  min-height: 46px;
  background: color-mix(in srgb, var(--bg) 70%, #000 30%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  padding: 10px 13px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.calcpub-caja input::placeholder { font-weight: 400; color: var(--text-muted); }
.calcpub-caja input:hover:not(:focus),
.calcpub-caja select:hover:not(:focus) { border-color: var(--border-accent); }
.calcpub-caja input:focus,
.calcpub-caja select:focus {
  outline: none;
  border-color: var(--gold);
  background: color-mix(in srgb, var(--bg) 55%, #000 45%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
/* Los números van tabulares: si no, al escribir bailan de ancho y la
   columna entera se mueve. */
.calcpub-caja input[type="number"] { font-variant-numeric: tabular-nums; }

/* La plata va a la derecha, como en cualquier papel donde haya que
   sumar. Es lo que ordena una columna de montos: alineados a la
   izquierda, 350000 y 60000 no se pueden comparar de un vistazo.
   No se toca el JS porque `js/calculadora-estimar.js` es el MISMO que
   usa la calculadora de adentro del panel. */
.calcpub-caja .calc-fila input[data-campo="monto"],
.calcpub-caja .calc-fila input[data-campo="costo"],
.calcpub-caja .calc-fila input[data-campo="mix"] { text-align: right; }

.calcpub-caja .form-grid { gap: 16px 14px; }

/* ── Las filas de carga (gastos y productos) ──────────────────── */
.calcpub-caja .calc-fila { gap: 10px; margin-bottom: 8px; }
/* El encabezado de la tabla de productos, con el mismo peso que las
   etiquetas de los campos: así se lee como rótulo y no como un dato. */
.calcpub-caja .calc-cab span {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.calcpub-caja .calc-quitar {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1;
  padding: 6px 8px; border-radius: var(--r-sm);
  transition: color .15s ease, background .15s ease;
}
.calcpub-caja .calc-quitar:hover { color: var(--error-text); background: color-mix(in srgb, var(--error) 14%, transparent); }

/* ── Botón de agregar fila ────────────────────────────────────── */
.calcpub-caja .btn-add {
  min-height: 40px; padding: 9px 16px;
  font-size: .82rem; font-weight: 700;
  background: var(--bg-card);
  border: 1px dashed var(--border-accent);
  border-radius: var(--r-md);
  color: var(--gold-text);
  transition: background .15s ease, border-color .15s ease;
}
.calcpub-caja .btn-add:hover {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-style: solid; border-color: var(--gold);
}

/* El total de gastos: es un número que el visitante mira mientras
   carga, así que se separa con una línea y se agranda. */
.calcpub-caja .calc-total {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: .92rem; color: var(--text-sub);
}
.calcpub-caja .calc-total b { color: var(--text); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* El selector de reparto, arriba de todo: barra ancha y baja, para que
   no compita con los pasos. */
.calcpub-caja .cp-modo {
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px clamp(16px, 3vw, 22px);
}
.calcpub-caja .cp-modo .calc-campo { display: flex; flex-direction: column; }
.calcpub-caja .cp-modo .sub { margin-top: 8px; font-size: .8rem; color: var(--text-sub); }

/* ── El resultado ─────────────────────────────────────────────── */
.cp-resultado {
  border: 1px solid var(--border-accent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 100% at 50% 0, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
    var(--bg-surface);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 14px 40px -22px rgba(0,0,0,.9);
}
.cp-resultado-tapa { text-align: center; margin-bottom: 20px; }
.cp-resultado-kicker {
  display: inline-block;
  font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-text);
  border: 1px solid var(--border-accent); border-radius: var(--r-full);
  padding: 4px 12px; margin-bottom: 12px;
}
.cp-resultado-tapa h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.75rem); letter-spacing: -.02em;
  text-wrap: balance;
}
/* Los KPI: EL NÚMERO MANDA, la etiqueta acompaña.
   Antes los tres renglones venían del mismo tamaño y la caja se leía
   como una celda de planilla: había que leerla entera para saber cuál
   era el dato. Ahora el número se ve desde lejos y lo demás lo rodea. */
.calcpub-caja .stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.cp-resultado .stat-box { border-color: var(--border-accent); }

.calcpub-caja .stat-box .stat-label {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.calcpub-caja .stat-box .stat-value {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cp-resultado .stat-box .stat-value { color: var(--gold-text); }
.calcpub-caja .stat-box .stat-sub {
  font-size: .74rem; line-height: 1.35; color: var(--text-sub);
  text-wrap: pretty;
}
.calcpub-caja .stat-box b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.cp-escenarios .stat-box { background: var(--bg-card); }
.calcpub-caja .stat-row { gap: 14px; }

/* El escenario ESPERADO es el que el visitante cargó: es su caso, no
   uno de tres iguales. El motor ya le pone `.calc-buena`; acá se
   recupera el destacado, porque la regla de arriba (`.stat-box` con
   borde neutro) se lo había pisado — y sin él los tres escenarios se
   leen como si fueran igual de probables. */
.calcpub-caja .stat-box.calc-buena {
  border-color: var(--green);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--green) 10%, transparent), transparent 70%),
    var(--bg-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent);
}
.calcpub-caja .stat-box.calc-buena .stat-value { color: var(--green-text); }

.calcpub-caja .calc-nota {
  margin-top: 18px; padding: 14px 16px;
  background: color-mix(in srgb, var(--warning) 9%, transparent);
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .86rem; line-height: 1.55; color: var(--text-sub);
}
.calcpub-caja .calc-nota b { color: var(--text); }

/* ── El pedido de mail ────────────────────────────────────────── */
.calcpub-mail {
  border: 1px solid var(--border-accent); border-radius: var(--r-xl);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--gold) 11%, transparent), transparent 60%),
    var(--bg-surface);
  padding: clamp(20px, 3vw, 30px);
}
.calcpub-mail h3 {
  margin: 0 0 10px; font-family: var(--serif); font-weight: 600;
  font-size: 1.3rem; color: var(--text);
}
.calcpub-mail p {
  margin: 0 0 18px; max-width: 62ch;
  font-size: .92rem; line-height: 1.6; color: var(--text-sub);
}
.calcpub-mail p b { color: var(--text); }

.calcpub-form {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;
}
@media (max-width: 700px) {
  .calcpub-form { grid-template-columns: 1fr; }
}
.calcpub-opt { color: var(--text-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* El .btn-add de la app es el botoncito de "agregar fila": medido, daba
   21px de alto. Acá es la acción principal de la página y se toca con
   el pulgar, así que va con alto de dedo y relleno propio. */
.calcpub-enviar {
  white-space: nowrap;
  min-height: 48px; padding: 13px 26px;
  font-size: .94rem; font-weight: 800; letter-spacing: .01em;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark)) !important;
  color: var(--on-gold) !important;
  border: 1px solid var(--gold-dark) !important;
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--gold) 70%, transparent);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.calcpub-enviar:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--gold) 80%, transparent);
}
.calcpub-enviar:active:not(:disabled) { transform: translateY(0); }
.calcpub-enviar:disabled { opacity: .55; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .calcpub-enviar { transition: none; }
  .calcpub-enviar:hover:not(:disabled) { transform: none; }
}

.calcpub-legal {
  margin: 14px 0 0 !important;
  font-size: .72rem !important; color: var(--text-muted) !important;
}

.calcpub-pie {
  border-top: 1px solid var(--border);
  padding: 30px clamp(16px, 4vw, 40px) 46px;
  text-align: center; color: var(--text-sub);
  font-size: .82rem;
}
.calcpub-pie .brand-text { font-size: .9rem; }
.calcpub-pie .sub { margin-top: 8px; font-size: .74rem; color: var(--text-muted); }

/* El porcentaje de cada escenario, al lado del título. Si un número
   mueve el resultado, tiene que estar a la vista: antes el 30% menos y
   el 35% más vivían escondidos adentro del código. */
.calc-var {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-text); opacity: .85;
}

/* En celular las dos primeras tarjetas van una abajo de la otra, y el
   número del paso se achica para no pisar el título. */
@media (max-width: 860px) {
  .calcpub-caja .secciones-par { display: flex; flex-direction: column; gap: 16px; }
  .calcpub-caja .cp-paso[data-paso]::before { font-size: 2.6rem; top: 8px; right: 14px; }
}