/* ════════════════════════════════════════════════
   CIMA DIGITAL · Calculadora → WhatsApp
   ──────────────────────────────────────────────
   El botón que abre WhatsApp con el escenario escrito, debajo de los cuatro
   resultados de la calculadora (el home y las nueve landings), y el aviso que
   aparece al tocarlo. La lógica está en calc-wsp.js.

   La tarjeta de la calculadora es blanca en los dos modos (una isla), así que
   acá los colores van fijos, tinta y olivo sobre blanco, y no con las
   variables del modo: dentro de la tarjeta del home esas variables valen papel.
   ════════════════════════════════════════════════ */

.calc-card .cw { margin-top: 18px; }
/* `.btn{display:inline-flex}` y compañía le ganan al [hidden] del navegador. */
.calc-card .cw [hidden] { display: none; }

/* El botón: a lo ancho de la tarjeta, olivo con el globo de WhatsApp, como el
   de la barra del celu (cta-movil.css). Papel sobre olivo: 5,05:1.
   En bloque y no en flex, a propósito: en el celu el texto va en dos renglones,
   y con flex el globo quedaba solo contra el borde izquierdo; así va pegado a
   la primera palabra y los dos renglones quedan centrados y parejos. */
.calc-card .cw-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.calc-card .cw-btn svg {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: 0 8px 0 0;
  vertical-align: -4px;
  fill: currentColor;
}
/* El foco, en tinta: en el home la sección es .bg-tinta y su regla general
   (styles.css) lo pintaría salvia claro, que sobre la tarjeta blanca casi no se ve. */
.calc-card .cw-btn:focus-visible { outline: 2px solid var(--tinta, #1A1F1A); outline-offset: 3px; }

/* La promesa de debajo: qué recibe a cambio. Tinta al 72 % sobre blanco: 6,7:1. */
.calc-card .cw-nota {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(26, 31, 26, .72);
}

/* ── Después de tocarlo ──
   Llega vacío en el HTML y lo escribe calc-wsp.js. Vacío no mide nada, pero no
   va con display:none: es un role="status", y el lector de pantalla solo
   anuncia lo que entra en una región que ya estaba en su árbol. La caja se
   dibuja recién con .cw-ok-on, que pone el script al escribirla.
   Va a la izquierda aunque las landings centren todo en el celu: son tres
   renglones de lectura dentro de una caja con el filete a la izquierda. */
.calc-card .cw-ok { margin: 0; }
.calc-card .cw-ok.cw-ok-on {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--olivo, #5C6B3F);
  border-radius: 0 var(--r-sm, 8px) var(--r-sm, 8px) 0;
  background: rgba(92, 107, 63, .09);
  text-align: left;
}
.calc-card .cw-ok-tit {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta, #1A1F1A);
}
.calc-card .cw-ok-txt {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(26, 31, 26, .72);
}
/* Olivo sobre el fondo de la caja: 5,2:1. Seis px arriba y abajo dejan cada
   control en 32 px de alto, por encima de los 24 que pide WCAG 2.2. */
/* Sin separador entre los dos: en el celu el segundo baja de renglón y un «·»
   quedaba colgando al final del primero. */
.calc-card .cw-ok-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 20px;
}
.calc-card .cw-ok-links a,
.calc-card .cw-ok-links button {
  padding: 6px 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--olivo, #5C6B3F);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.calc-card .cw-ok-links a:hover,
.calc-card .cw-ok-links button:hover { color: var(--tinta, #1A1F1A); }
.calc-card .cw-ok-links a:focus-visible,
.calc-card .cw-ok-links button:focus-visible { outline: 2px solid var(--olivo, #5C6B3F); outline-offset: 2px; }

/* ── Landings en el celu ──
   Hasta 700 px la columna de texto se deshace (display:contents) y sus piezas
   se ordenan alrededor de la tarjeta (landing-v4.css). La nota «Estimación
   orientativa» iba después porque seguía al formulario del email; sin él, la
   clase calc-nota la deja en su lugar: debajo de la calculadora. Sin su
   margen de arriba (viene en el style="" de la página, por eso el !important)
   queda a los 36 px que ya deja la tarjeta, y no a 60, separada de ella. */
@media (max-width: 700px) {
  .calc-layout .calc-nota { order: 4; margin-top: 0 !important; }
}