/* ENLAXOS Labs — Calculadora de precios de WhatsApp Business
   Reutiliza las clases .calc-* de laboral.css y agrega lo propio. */

/* ── Panel de tarifas (arriba de todo) ────────────────────────────────────── */
.wp-rates {
  background: linear-gradient(135deg, rgba(0,229,255,.06) 0%, var(--surface) 60%);
  border: 1px solid rgba(0,229,255,.22);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 24px;
}

.wp-rates-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }

.wp-rates-title {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
}

.wp-rates-flag { font-size: 13px; color: var(--text); font-weight: 600; }
.wp-rates-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 10px 0 18px; }
.wp-rates-note a { color: var(--cyan); text-decoration: none; }
.wp-rates-note a:hover { text-decoration: underline; }

.wp-rates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .wp-rates-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .wp-rates-grid { grid-template-columns: 1fr; } }

/* ── Selector de mercado ──────────────────────────────────────────────────── */
.wp-market { margin: 14px 0 20px; }

.wp-market-label {
  display: block;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 7px;
}

.wp-market .calc-select { width: 100%; }

.wp-market-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 9px; }
.wp-market-note a { color: var(--cyan); text-decoration: none; }
.wp-market-note a:hover { text-decoration: underline; }

/* ── Aviso de tarifas faltantes ───────────────────────────────────────────── */
.wp-missing {
  padding: 18px 20px; border-radius: 12px;
  background: rgba(252,211,77,.07); border: 1px solid rgba(252,211,77,.3);
}
.wp-missing strong { display: block; font-family: var(--font-display); font-size: 15px; color: #fcd34d; margin-bottom: 8px; }
.wp-missing p { font-size: 13.5px; line-height: 1.7; color: var(--text); }
.wp-missing a { color: var(--cyan); text-decoration: none; }
.wp-missing a:hover { text-decoration: underline; }

/* La moneda local es opcional: la base es USD, que es como factura Meta. */
.wp-rates-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-hover); }

/* Ya no hay un checkbox que la muestre u oculte: cargar una cotización ES lo
   que activa la conversión, así que el campo queda siempre a la vista apenas
   se abren las tarifas. */
.wp-rates-foot-label {
  display: block;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}

/* La moneda es un <select> con país + código: necesita más lugar que un
   símbolo tipeado a mano, así que ya no se limita a 340px. */
.wp-moneda-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.wp-moneda-grid .wp-rate-hint { grid-column: 1 / -1; margin-top: 0; }
.wp-moneda-grid select#wp-moneda { width: 100%; }

@media (max-width: 480px) {
  .wp-moneda-grid { grid-template-columns: 1fr; }
}



.wp-rate-field label {
  display: block;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}

.wp-rate-field input {
  width: 100%;
  background: var(--surface-2); border: 1px solid var(--border-hover); border-radius: 10px;
  color: var(--white); font-family: var(--font-display); font-size: 16px; font-weight: 700;
  padding: 11px 13px; outline: none; transition: border-color .2s;
}

.wp-rate-field input:focus { border-color: rgba(0,229,255,.45); }
.wp-rate-hint { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.wp-rate-gs { font-family: var(--font-mono); font-size: 10.5px; color: var(--cyan); opacity: .75; margin-top: 5px; }

/* Filas cuyo importe cambia el 1 de octubre: se marcan para que se vea de dónde
   sale el aumento sin tener que comparar columna por columna. */
.wp-changed { color: #fcd34d !important; }

/* ── Plataforma que responde ─────────────────────────────────────────────── */
.wp-engine { margin-bottom: 18px; }
.wp-engine .calc-select { min-height: 50px; }
.wp-engine .calc-hint { margin-top: 8px; }

/* ── Comparación hoy vs. octubre ──────────────────────────────────────────── */
.wp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
@media (max-width: 640px) { .wp-compare { grid-template-columns: 1fr; } }

.wp-col {
  border-radius: 14px; padding: 20px;
  border: 1px solid var(--border); background: var(--surface-2);
}

.wp-col.is-future { border-color: rgba(252,211,77,.32); background: linear-gradient(135deg, rgba(252,211,77,.06) 0%, var(--surface-2) 60%); }

.wp-col-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}

.wp-col.is-future .wp-col-tag { color: #fcd34d; }

.wp-col-total {
  font-family: var(--font-display); font-size: clamp(22px, 4.5vw, 30px);
  font-weight: 800; color: var(--white); line-height: 1.15;
}

.wp-col-pyg { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 6px; }

.wp-delta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 16px 18px;
  background: rgba(251,113,133,.08); border: 1px solid rgba(251,113,133,.26); border-radius: 12px;
}

.wp-delta.is-ok { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.26); }

.wp-delta-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #fb7185;
}

.wp-delta.is-ok .wp-delta-label { color: #34d399; }
.wp-delta-value { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--white); text-align: right; }

/* ── Línea de tiempo de cambios ───────────────────────────────────────────── */
.wp-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 860px) { .wp-timeline { grid-template-columns: 1fr; } }

.wp-tl {
  padding-top: 16px; border-top: 2px solid var(--border-hover);
}

.wp-tl.is-now { border-top-color: var(--cyan); }
.wp-tl.is-next { border-top-color: #fcd34d; }

.wp-tl-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.wp-tl.is-now .wp-tl-date { color: var(--cyan); }
.wp-tl.is-next .wp-tl-date { color: #fcd34d; }
.wp-tl h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 7px; }
.wp-tl p { font-size: 13px; line-height: 1.65; color: var(--muted); }

/* ── Tabla comparativa de motores ─────────────────────────────────────────── */
.wp-table-wrap { overflow-x: auto; margin-top: 26px; }
.wp-table { width: 100%; border-collapse: collapse; min-width: 520px; }

.wp-table th, .wp-table td {
  text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}

.wp-table th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
}

.wp-table td { color: var(--text); }
.wp-table td:first-child { color: var(--white); font-weight: 600; }
.wp-table tr.is-best td { background: rgba(0,229,255,.05); }
.wp-table .wp-num { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

/* ── Secciones fuera del hero ─────────────────────────────────────────────── */
.wp-section { padding: 0 clamp(24px, 8vw, 160px) 90px; max-width: 1100px; }
.wp-section .tool-card { max-width: none; }

.wp-block-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700; color: var(--white);
  margin-bottom: 20px;
}
.tool-card .wp-block-title { font-size: 17px; margin-bottom: 16px; }
.tool-card .wp-block-title + .wp-engine { margin-top: 0; }

.wp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-bottom: 26px; }
@media (max-width: 640px) { .wp-grid-2 { grid-template-columns: 1fr; gap: 0; } }

/* El panel de tarifas es mas corto que la columna de pasos: sin esto queda un
   hueco grande antes de la calculadora. */
.tool-hero:has(.wp-rates) { padding-bottom: 56px; }

/* ── Cronología del precio, fecha por fecha ───────────────────────────────── */
.wp-chrono-intro {
  font-size: 15px; line-height: 1.75; color: var(--text);
  max-width: 760px; margin: -6px 0 30px;
}

.wp-chrono { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }

/* La linea vertical que hilvana las fechas. */
.wp-chrono::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border-hover);
}

.wp-ch { position: relative; padding: 0 0 30px; }
.wp-ch:last-child { padding-bottom: 0; }

.wp-ch::before {
  content: ''; position: absolute; left: -26px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-hover);
}

.wp-ch.is-now::before  { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,229,255,.12); }
.wp-ch.is-next::before { border-color: #fcd34d; box-shadow: 0 0 0 4px rgba(252,211,77,.12); }

.wp-ch-date {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.wp-ch.is-now .wp-ch-date  { color: var(--cyan); }
.wp-ch.is-next .wp-ch-date { color: #fcd34d; }

.wp-ch h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.wp-ch p { font-size: 14px; line-height: 1.75; color: var(--text); max-width: 760px; }
.wp-ch p strong { color: var(--white); }

/* ── Total anual ──────────────────────────────────────────────────────────── */
.wp-annual {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 10px; padding: 13px 18px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.wp-annual-v { font-family: var(--font-display); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.wp-annual-v strong { color: var(--white); font-weight: 800; }

/* Eco del volumen calculado bajo el campo de respuestas. */
.wp-echo { color: var(--cyan) !important; opacity: .8; font-family: var(--font-mono); font-size: 11px; }

/* ── Cómo sacamos este número ─────────────────────────────────────────────── */
.wp-formula { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 861px) { .wp-formula { grid-template-columns: 1fr 1fr; gap: 22px 40px; } }

.wp-formula li { counter-increment: paso; position: relative; padding-left: 40px; }

.wp-formula li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--cyan);
}

.wp-formula h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 7px; }
.wp-formula p { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.wp-formula p strong { color: var(--text); }

.wp-formula-note {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.75; color: var(--muted); max-width: 760px;
}

/* ── Compartir el resultado ───────────────────────────────────────────────── */
.wp-share {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border);
}

.wp-share-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 12px;
}

.wp-share-text {
  font-size: 13.5px; line-height: 1.7; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-hover);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
  word-break: break-word;
}
.wp-share-text a { color: var(--cyan); text-decoration: none; }
.wp-share-text a:hover { text-decoration: underline; }

.wp-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.wp-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--text); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border-hover);
  border-radius: var(--radius-pill); padding: 9px 16px;
  cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}

.wp-share-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.wp-share-btn:hover { color: var(--white); border-color: var(--cyan); background: var(--cyan-dim); }
.wp-share-btn.is-ok { color: #34d399; border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.1); }

@media (max-width: 480px) {
  .wp-share-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .wp-share-btn { justify-content: center; }
  /* Son cinco botones en dos columnas: el ultimo ocupa la fila entera. */
  .wp-share-btn.is-copiar { grid-column: 1 / -1; }
}

/* ── Experiencia principal de la calculadora ────────────────────────────────
   Esta herramienta tiene una identidad propia: reduce el ruido visual de la
   suite de calculadoras y presenta configuración y resultado como un par. */
.tool-hero:has(.wp-rates) { padding-bottom: 56px; }

.tool-hero {
  max-width: 1320px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 760px) minmax(260px, 1fr);
  grid-template-areas: "left steps";
  column-gap: clamp(36px, 7vw, 104px);
  padding-bottom: 58px;
  align-items: end;
}

.tool-hero-left { position: static; }
.tool-hero-left .breadcrumb { padding-bottom: 24px; }
.tool-hero-left .page-title { max-width: 720px; font-size: clamp(38px, 4.5vw, 64px); letter-spacing: -.05em; line-height: .98; }
.tool-hero-left .page-subtitle { max-width: 650px; font-size: 17px; line-height: 1.65; }
.tool-hero-steps {
  display: grid; grid-template-columns: 1fr; gap: 13px;
  padding: 18px 0 3px 22px; border-top: 0; border-left: 1px solid var(--border-hover);
}
.tool-hero-step { gap: 11px; }
.tool-hero-step p { font-size: 12.5px; line-height: 1.5; }

.wp-calculator-section { width: 100%; max-width: 1320px; margin-inline: auto; padding-bottom: 100px; }
.wp-calculator-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); gap: 22px; align-items: start; }
.wp-calculator-shell .tool-card { padding: clamp(24px, 3vw, 36px); }
.wp-input-card { background: linear-gradient(145deg, rgba(12,12,22,.98), rgba(7,7,13,.98)); }
.wp-result-card {
  position: sticky; top: 96px; min-height: 590px;
  color: #f8f6ff;
  background: radial-gradient(circle at 100% 0, rgba(0,229,255,.18), transparent 43%), linear-gradient(145deg, #0b202a, #061016 75%);
  border-color: rgba(0,229,255,.35) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.wp-card-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.wp-result-card .wp-card-kicker { color: var(--cyan); }
.wp-result-title { font-family: var(--font-display); font-size: clamp(23px, 2.2vw, 31px); line-height: 1.08; letter-spacing: -.035em; color: #fff; margin-bottom: 4px; }

.wp-input-card .wp-block-title { margin-bottom: 18px; }
.wp-input-card .wp-rates { margin: 0 0 27px; padding: 18px; border-radius: 14px; background: rgba(0,229,255,.035); }
.wp-rates-head { margin-bottom: 0; }
.wp-market { margin: 14px 0 10px; }
.wp-market-note { margin-top: 7px; margin-bottom: 0; }
.wp-rate-details { margin-top: 13px; border-top: 1px solid var(--border-hover); }
.wp-rate-details summary { padding-top: 13px; cursor: pointer; list-style: none; color: var(--text); font-size: 12px; font-weight: 600; }
.wp-rate-details summary::-webkit-details-marker { display: none; }
.wp-rate-details summary::after { content: '+'; float: right; color: var(--cyan); font-size: 16px; line-height: .8; }
.wp-rate-details[open] summary::after { content: '−'; }
.wp-rate-details .wp-rates-grid { margin-top: 15px; }
.wp-rates-foot { margin-top: 14px; padding-top: 14px; }
.wp-rate-field input { padding: 10px 11px; font-size: 15px; }

.wp-input-card .wp-grid-2 { gap: 0 16px; margin-bottom: 18px; }
.wp-input-card .calc-field { margin-bottom: 15px; }
.wp-input-card .calc-input { padding: 12px 14px; font-size: 17px; }
.wp-input-card .calc-hint { font-size: 11.5px; }
/* La pregunta de cada campo va en blanco: es lo que hay que responder, no
   una aclaración al pasar como el .calc-hint de abajo. */
.wp-input-card .calc-label,
.wp-rate-field label,
.wp-rates-foot-label {
  color: var(--white);
}
.wp-advanced-fields { margin: 0 0 24px; padding: 15px 16px 0; border: 1px solid var(--border-hover); border-radius: 12px; background: rgba(255,255,255,.015); }
/* Cerrado no hay ultimo campo cuyo margin-bottom separe el texto del borde:
   sin este padding, "Personalizar escenarios y excepciones" queda pegado al
   borde inferior redondeado. Abierto no hace falta: el margin-bottom del
   ultimo .calc-field ya deja el mismo aire. */
.wp-advanced-fields:not([open]) { padding-bottom: 15px; }
.wp-advanced-fields summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--text); }
.wp-advanced-fields summary::-webkit-details-marker { display: none; }
.wp-advanced-fields summary::after { content: '+'; float: right; color: var(--cyan); font-size: 17px; line-height: .7; }
.wp-advanced-fields[open] summary::after { content: '−'; }
.wp-advanced-fields > p { margin: 10px 0 16px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.wp-advanced-fields .wp-grid-2 { margin-bottom: 0; }
.wp-engine { margin-bottom: 16px; }
.wp-input-card .calc-submit { width: auto; min-width: 230px; padding: 14px 22px; }
.wp-input-card .calc-submit span { font-size: 18px; margin-left: 7px; vertical-align: -1px; }

.wp-result-card .calc-result { margin-top: 22px; }
.wp-result-card .wp-compare { margin-top: 0; gap: 10px; }
.wp-result-card .wp-col { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.14); padding: 16px; }
.wp-result-card .wp-col.is-future { background: rgba(0,229,255,.1); border-color: rgba(0,229,255,.32); }
.wp-result-card .wp-col-tag { color: #b7ecf5; }
.wp-result-card .wp-col.is-future .wp-col-tag { color: #8ff9e6; }
.wp-result-card .wp-col-total { color: #fff; font-size: clamp(22px, 3vw, 30px); }
.wp-result-card .wp-col-pyg, .wp-result-card .calc-row-label, .wp-result-card .calc-note { color: #b7d7df; }
.wp-result-card .wp-delta { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.2); }
.wp-result-card .wp-delta-label { color: #ffcf80; }
.wp-result-card .calc-result-rows, .wp-result-card .calc-row { border-color: rgba(255,255,255,.13); }
.wp-result-card .calc-row-value { color: #fff; }
.wp-result-card .wp-annual { background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.15); }
.wp-result-card .disclaimer { border-color: rgba(255,255,255,.16); color: #b7d7df; }
.wp-result-card .disclaimer a { color: #8ff9e6; }
.wp-result-card .wp-share { border-color: rgba(255,255,255,.16); }
.wp-result-card .wp-share-text, .wp-result-card .wp-share-btn { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.16); }

@media (max-width: 960px) {
  .tool-hero { grid-template-columns: 1fr; grid-template-areas: "left" "steps"; row-gap: 26px; }
  .tool-hero-steps { grid-template-columns: repeat(3, 1fr); padding: 17px 0 0; border-left: 0; border-top: 1px solid var(--border-hover); }
  .wp-calculator-shell { grid-template-columns: 1fr; }
  .wp-result-card { position: static; min-height: 0; }
}

@media (max-width: 640px) {
  .tool-hero { padding-bottom: 40px; }
  .tool-hero-left .page-title { font-size: clamp(36px, 12vw, 52px); }
  .tool-hero-left .page-subtitle { font-size: 15px; }
  .tool-hero-steps { grid-template-columns: 1fr; gap: 12px; }
  .wp-calculator-section { padding-bottom: 72px; }
  .wp-calculator-shell .tool-card { padding: 22px 18px; }
  .wp-result-card .wp-compare { grid-template-columns: 1fr 1fr; }
  .wp-input-card .calc-submit { width: 100%; }
}

/* ── WhatsApp Web / App: no hay costo, así que no hay desglose ─────────────── */
.wp-webapp {
  padding-bottom: 4px;
}

.wp-webapp-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #34d399; margin-bottom: 12px;
}

.wp-webapp-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: -.02em;
  color: #fff; margin-bottom: 14px;
}

.wp-webapp-text { font-size: 14.5px; line-height: 1.7; color: #cfeee0; margin-bottom: 20px; }

.wp-webapp-callout {
  padding: 16px 18px; margin-bottom: 22px;
  border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  font-size: 13.5px; line-height: 1.7; color: #e4e4ee;
}
.wp-webapp-callout strong { color: #8ff9e6; }

.wp-webapp-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cyan); border: 1px solid var(--cyan); color: var(--black);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 700;
  text-decoration: none; padding: 13px 22px; border-radius: var(--radius-pill);
  transition: opacity .2s;
}
.wp-webapp-cta:hover { opacity: .88; }

.wp-result-card .wp-webapp-callout { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.16); }

/* ── Campos de porcentaje: el "%" queda a la vista, no hay que adivinarlo ──── */
.calc-input-pct { position: relative; }
.calc-input-pct .calc-input { padding-right: 34px; }
.calc-input-pct-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--muted); pointer-events: none;
}

/* ── Recursos ──────────────────────────────────────────────────────────────
   La calculadora da el número; estos recursos dan el contexto. La tarjeta
   .is-main ocupa el ancho entero porque es la guía completa: el resto son
   entradas puntuales a una parte de ella o a una fuente externa. */
.wp-rec-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

.wp-rec-grid .is-main { grid-column: 1 / -1; }

.wp-rec {
  display: flex; flex-direction: column; gap: 9px;
  padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; text-decoration: none;
  transition: border-color .2s, transform .2s, background .2s;
}

.wp-rec:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.wp-rec.is-main {
  background: linear-gradient(135deg, rgba(0,229,255,.07) 0%, var(--surface) 62%);
  border-color: rgba(0,229,255,.25);
}

.wp-rec.is-main:hover { border-color: rgba(0,229,255,.45); }

.wp-rec-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
}

.wp-rec h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--white); line-height: 1.35; margin: 0;
}

.wp-rec.is-main h3 { font-size: clamp(18px, 2.2vw, 21px); }

.wp-rec p {
  font-size: 14px; line-height: 1.7; color: var(--text); margin: 0;
  max-width: 720px;
}

.wp-rec-go {
  margin-top: auto; padding-top: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 7px;
}

.wp-rec-go span { transition: transform .2s; }
.wp-rec:hover .wp-rec-go span { transform: translateX(4px); }

/* Atajos a las secciones de esta misma página. Van arriba, apenas después de
   la calculadora: un índice sirve antes del contenido, no después. Abajo
   quedaban apuntando a todo lo que el lector ya había pasado de largo. */
.wp-jump-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 0 clamp(24px, 8vw, 160px) 72px;
  max-width: 1100px;
}

.wp-jump-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px;
}

.wp-jump-nav a {
  font-size: 13px; color: var(--text); text-decoration: none;
  padding: 7px 15px; border: 1px solid var(--border-hover);
  border-radius: var(--radius-pill);
  transition: color .2s, border-color .2s;
}

.wp-jump-nav a:hover { color: var(--cyan); border-color: rgba(0,229,255,.4); }

@media (max-width: 720px) {
  .wp-rec-grid { grid-template-columns: 1fr; }
  .wp-rec { padding: 20px; }
}

/* El header del sitio es fijo y mide unos 75 px: sin esto, cada atajo deja el
   título de la sección escondido abajo del header y parece que no pasó nada. */
#calc, #cronologia, #calculo, #faq, #recursos { scroll-margin-top: 96px; }

/* ── Ancho y centrado de todo lo que va debajo de la calculadora ─────────
   Las secciones de abajo tenían max-width sin margin auto: quedaban pegadas al
   borde izquierdo con medio viewport vacío a la derecha. Ahora son una sola
   columna centrada de arriba abajo.
   1120px y no los 1320 del hero: el hero llena su mitad derecha con la columna
   de pasos, pero acá abajo es texto, y a 1320 la línea quedaba corta contra una
   caja ancha — o sea, el mismo problema movido 180px a la derecha.
   Va en este archivo y no en labs.css a propósito: el hero centrado es exclusivo
   de esta página, así que el desfase también lo era. */
.wp-section,
.wp-jump-nav,
.calc-faq,
.tool-cta-wrap {
  max-width: 1120px;
  margin-inline: auto;
}

/* Estos topes de 760px existían para que el renglón no se estirara dentro de un
   contenedor ancho. Con la columna ya acotada a ~850px de contenido sobran, y
   dejaban el texto corrido a la izquierda adentro de su propia sección. */
.wp-chrono-intro,
.wp-ch p,
.wp-formula-note { max-width: none; }

/* ── La calculadora necesita más ancho que el texto de abajo ───────────────
   .wp-calculator-section ya traía 1320px desde arriba, pero la regla de 1120px
   de acá abajo la pisaba por orden de aparición (misma especificidad) y la
   dejaba en 1120. Con el shell a 813px los campos se angostan, las etiquetas y
   las ayudas se parten en tres o cuatro renglones y la tarjeta se estira: la
   calculadora pasaba a medir 1639px de alto. Vuelve a 1320. */
.wp-calculator-section { max-width: 1320px; }

/* De 1200px para arriba, el hero y la calculadora achican el margen lateral:
   el gutter de 8vw (154px a 1920) le robaba ancho justo a lo único que lo
   necesita. Los dos juntos para que el borde izquierdo siga coincidiendo.
   El texto de abajo no entra acá a propósito: ahí el gutter ancho es lo que
   mantiene la columna de lectura angosta. */
@media (min-width: 1200px) {
  .tool-hero,
  .wp-calculator-section {
    padding-left: clamp(24px, 4vw, 72px);
    padding-right: clamp(24px, 4vw, 72px);
  }
}

/* Aire de más entre el título y la calculadora. El padding-top del hero no se
   toca: son 96px y el header fijo mide 75, así que no hay de dónde sacar. */
.tool-hero { padding-bottom: 34px; }
.tool-hero-left .breadcrumb { padding-bottom: 18px; }

/* ── Alinear los campos fila por fila ──────────────────────────────────────
   Las etiquetas ocupan uno, dos o tres renglones según el ancho ("Respuestas
   que enviás por conversación" contra "Conversaciones entrantes por mes"), y
   eso empujaba el input de una columna 13px más abajo que el de al lado.
   Un min-height fijo no sirve: a 1024px hay una etiqueta de tres renglones.
   Con subgrid las dos columnas comparten las mismas pistas —etiqueta, input,
   ayuda, eco— así que se alinean solas sin importar cuánto mida cada texto.
   Son cuatro pistas y no tres por el "= N mensajes de servicio por mes" que
   cuelga del campo de respuestas: en los demás campos esa cuarta queda vacía
   y mide cero. Abajo de 641px la grilla es de una sola columna y no hay nada
   que alinear. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .wp-grid-2 .calc-field {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
  }
}

/* La tarjeta de descarga va a ancho entero y con su propio acento: es un
   archivo, no un enlace a otra página, y conviene que se note la diferencia. */
.wp-rec-grid .is-descarga { grid-column: 1 / -1; }

.wp-rec.is-descarga {
  background: linear-gradient(135deg, rgba(74,222,128,.09) 0%, var(--surface) 62%);
  border-color: rgba(74,222,128,.3);
}

.wp-rec.is-descarga:hover { border-color: rgba(74,222,128,.5); }
.wp-rec.is-descarga .wp-rec-tag,
.wp-rec.is-descarga .wp-rec-go { color: #4ade80; }
.wp-rec.is-descarga h3 { font-size: clamp(18px, 2.2vw, 21px); }
.wp-rec.is-descarga:hover .wp-rec-go span { transform: translateY(3px); }