/* ============================================================================
   SEGURATIS · LA CALCULADORA POR PASOS

   El embudo clásico: una pregunta por pantalla, con su barra de progreso y su
   «Atrás». La referencia son las simulaciones de Acierto y Rastreator, que es
   lo que trajo Jorge (28-08-2026); la PIEL es la del sistema —tokens, botón
   coral, tipografía y radios del theme—, no la de ellos.

   Y es la segunda pantalla que ocupa el alto entero del navegador, después del
   comparador: cabecera pegada arriba y la pregunta centrada en lo que queda.
   Por eso lleva la misma cabecera reducida (`header-agente.php`) y no la del
   sitio; dos barras fijas seguidas dejarían la pregunta en un tercio.

   POR QUÉ NO REUTILIZA agente.css: son la misma máquina y NO la misma pantalla.
   Allí todo es un hilo de burbujas con el pie pegado abajo; aquí no hay hilo, y
   lo único que se parece es la cabecera. Compartir hoja habría sido escribir
   `.agente-cab` en una plantilla que no es el agente para heredar cuatro reglas
   y arrastrar cuarenta.

   Requiere: tokens.css -> componentes.css
   ============================================================================ */

/* La reserva de la barra fija de móvil (tokens.css) aquí sobra: esta página no
   la lleva, y ese hueco se ve como una franja blanca abajo. */
body.has-calc { padding-bottom: 0; }

.calc {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  background: var(--c-surface-2);
}

/* ---- Cabecera ------------------------------------------------------------ */
.calc-cab {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-bottom: var(--bd) solid var(--c-divider);
}
.calc-cab__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--pad-x-m);
}

/* La salida. Solo el LOGO: la flecha que llevaba delante se quitó el
   3-sep-2026 porque se leía como un logo con un pico, no como una salida. La
   vuelta atrás la hace el botón «Atrás» del guion, que ahora sale también en la
   primera pregunta. */
.calc-cab__salir {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  color: var(--c-ink-3);
  transition: var(--t-color);
  /* Sube el toque de los 26 px del logo a los 44 de mínimo sin mover nada de
     sitio: lo que se añade de relleno se descuenta de margen. */
  margin: -9px 0; padding: 9px 0;
}
.calc-cab__salir:hover,
.calc-cab__salir:focus-visible { color: var(--c-action); }
.calc-cab__logo   { flex: 0 0 auto; height: 26px; width: auto; }

/* El teléfono va con el número escrito y no solo con el icono: es la salida de
   quien se atasca en una pregunta, y un icono suelto no la ofrece. */
.calc-cab__tel {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  height: var(--h-tap); padding: 0 14px;
  border-radius: var(--r-pill); background: var(--c-surface-1); color: var(--c-ink);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: var(--t-color);
}
.calc-cab__tel:hover { background: var(--c-cta-bg); color: var(--c-action-ink); }

/* En pantallas estrechas el número no cabe con el logo: se queda el icono, que
   sigue llamando. A partir de 420 px vuelve el número, que es lo que convierte. */
@media (max-width: 419px) {
  .calc-cab__tel-txt { display: none; }
  .calc-cab__tel { width: var(--h-tap); padding: 0; justify-content: center; }
}

/* ---- Qué se está simulando ----------------------------------------------- */
.calc-rotulo {
  margin: 0; padding: 11px var(--pad-x-m);
  background: var(--c-white);
  border-bottom: var(--bd) solid var(--c-divider);
  font-size: 14.5px; color: var(--c-ink-2); text-align: center;
}

/* ---- Progreso ------------------------------------------------------------ */
/* Es real: sale de en qué pregunta va, no de un reloj. Por eso no dice
   «60 segundos para finalizar» como el ejemplo: eso es una cuenta atrás que no
   cuenta nada. */
.calc-progreso { height: 3px; background: var(--c-divider); }
.calc-progreso__relleno {
  height: 3px; width: 0; background: var(--c-action);
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}

.calc-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 42px; padding: 6px var(--pad-x-m);
  background: var(--c-white);
  border-bottom: var(--bd) solid var(--c-divider);
}
/* `display:flex` gana a `hidden` si no se dice esto. */
.calc-nav[hidden] { display: none; }

.calc-atras {
  display: flex; align-items: center; gap: 5px;
  margin-left: -6px; padding: 6px;
  background: none; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--c-ink-3);
  transition: var(--t-color);
}
.calc-atras:hover { color: var(--c-action-ink); }
.calc-atras[hidden] { display: none; }
/* Sin «Atrás» el número se queda solo: pegado a la derecha se lee como un
   apunte de estado, que es lo que es. */
.calc-nav__paso { margin-left: auto; font-size: 12.5px; color: var(--c-ink-3); }

/* ---- El cuerpo ----------------------------------------------------------- */
.calc-cuerpo {
  flex: 1 1 auto;
  padding: 28px var(--pad-x-m) 40px;
}
/* Columna en móvil, para poder mover la nota al final con `order`: en el
   marcado va justo detrás de la pregunta —que es donde tiene sentido oírla— y
   en pantalla debajo de las respuestas. */
.calc-cuerpo__inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }

.calc-pregunta {
  margin: 0;
  font-size: 25px; font-weight: 700; line-height: 1.22;
  color: var(--c-ink); text-align: center; text-wrap: balance;
}
/* El motor le lleva el foco al cambiar de pregunta, para que el teclado no se
   quede en un botón que ya no existe. Es un foco programático, no una parada de
   tabulación: no se le pinta anillo. */
.calc-pregunta:focus { outline: none; }

/* ---- La nota, como tarjeta · 2-sep-2026 ----------------------------------
   Era una línea gris centrada debajo de la pregunta y no la leía nadie. Es
   donde se contesta la duda que frena —«ya tengo seguro», «perderé la
   antigüedad»—, así que ahora es una tarjeta con rótulo, color y un dato
   grande opcional.

   EN MÓVIL VA DEBAJO DE LAS RESPUESTAS y no encima: primero se contesta, y la
   tranquilidad se lee después o mientras se duda. Con `order`, porque en el
   marcado va donde tiene sentido leerla —justo tras la pregunta— y ese es el
   orden que oye un lector de pantalla. */
/* El pie legal se va detrás de la nota: es lo último de la pantalla, y con la
   nota en el 5 se le quedaba encima. */
.calc-legal { order: 6; }

.calc-nota {
  order: 5; display: block; margin-top: 22px;
  border-radius: var(--r); overflow: hidden;
  border: var(--bd) solid var(--c-nota-borde);
  background: var(--c-nota-fondo);
  text-align: left;
}
.calc-nota[hidden] { display: none; }

/* Los cuatro colores de `seguratis_agente_nota_colores()`. Van por
   `data-color` y no por estilo en línea: son de la paleta, no libres. */
.calc-nota                    { --c-nota-fondo: #F2F8F4; --c-nota-borde: #DCEBE1; --c-nota-viva: #1E7A4F; }
.calc-nota[data-color="azul"] { --c-nota-fondo: #F1F6FA; --c-nota-borde: #DBE7F0; --c-nota-viva: #044268; }
.calc-nota[data-color="coral"]{ --c-nota-fondo: #FDF1EA; --c-nota-borde: #F6DCCC; --c-nota-viva: #B04A28; }
.calc-nota[data-color="crema"]{ --c-nota-fondo: #FBF6F2; --c-nota-borde: #EDE6E0; --c-nota-viva: #69737E; }

/* La franja viva de la izquierda es lo que hace que se lea como una nota y no
   como otra respuesta más. */
.calc-nota__caja { padding: 16px 18px; border-left: 3px solid var(--c-nota-viva); }

.calc-nota__rotulo {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-nota-viva);
}
.calc-nota__rotulo[hidden] { display: none; }
.calc-nota__ico {
  flex: 0 0 24px; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--c-nota-viva);
}
.calc-nota__ico svg { display: block; }

.calc-nota__txt {
  margin: 0; font-size: 14.5px; line-height: 1.55;
  color: var(--c-ink-2); text-wrap: pretty;
}

/* El dato grande, en su propia caja blanca: es el argumento, no la explicación,
   y separado se lee de un vistazo aunque no se lea el párrafo de arriba. */
.calc-nota__dato {
  padding: 14px 18px; background: var(--c-white);
  border-top: var(--bd) solid var(--c-nota-borde);
}
.calc-nota__dato[hidden] { display: none; }
.calc-nota__cifra {
  display: block; font-size: 24px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1; color: var(--c-primary);
}
.calc-nota__pie {
  display: block; margin-top: 4px;
  font-size: 13.5px; line-height: 1.45; color: var(--c-ink-3);
}

/* ---- 1 · Respuestas en filas --------------------------------------------- */
.calc-opciones { display: grid; gap: 10px; margin-top: 26px; }
.calc-opciones[hidden] { display: none; }

.calc-opcion {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 14px 16px;
  background: var(--c-white);
  border: var(--bd) solid var(--c-border); border-radius: var(--r);
  box-shadow: 0 1px 2px -1px rgba(16,24,32,.06);
  font-size: 16.5px; font-weight: 600; color: var(--c-ink); text-align: left;
  cursor: pointer;
  transition: var(--t-color), box-shadow .18s ease-out;
}
.calc-opcion:hover {
  background: var(--c-row-alt);
  border-color: var(--c-cta-border);
  box-shadow: 0 2px 4px -2px rgba(16,24,32,.10);
}
.calc-opcion__ico {
  flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%; background: var(--c-cta-bg); color: var(--c-action-ink);
}
.calc-opcion__txt { flex: 1 1 auto; min-width: 0; }
/* El chevrón es la promesa de que la fila lleva a algún sitio; sin él, seis
   cajas grises no se leen como pulsables. */
.calc-opcion__chevron {
  flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--c-ink-4);
  transition: var(--t-color);
}
.calc-opcion:hover .calc-opcion__chevron { color: var(--c-action); }

/* ---- 2 · Respuesta escrita ----------------------------------------------- */
.calc-campo { display: grid; gap: 14px; margin-top: 26px; }
.calc-campo[hidden] { display: none; }

.calc-campo__input {
  width: 100%; height: 58px; padding: 0 16px;
  border: 1.5px solid var(--c-field-border); border-radius: var(--r);
  background: var(--c-white);
  /* 16 px no es capricho: por debajo, Safari de iOS hace zoom al enfocar y
     descoloca la pantalla entera. */
  font-size: 17px; font-weight: 600; color: var(--c-ink);
  box-shadow: var(--sh-inset);
}
.calc-campo__input::placeholder { font-weight: 500; color: var(--c-ink-4); }
.calc-campo__input:focus-visible { outline: 2px solid var(--c-action); outline-offset: 1px; }
.calc-campo--error .calc-campo__input { border-color: var(--c-negative); }
/* El paso de contacto: nombre, correo y teléfono en la misma pantalla (9-nov-2026). */
.calc-contacto { display: grid; gap: 14px; }
.calc-contacto[hidden] { display: none; }
.calc-contacto__fila { display: grid; gap: 6px; }
.calc-contacto__label { font-size: 14px; font-weight: 700; color: var(--c-ink); }
.calc-contacto .calc-campo__input.is-error { border-color: var(--c-negative); }
.calc-campo__input[hidden] { display: none; }

/* ---- 3 · Las fechas de nacimiento ---------------------------------------- */
.calc-personas { display: grid; gap: 16px; margin-top: 26px; }
.calc-personas[hidden] { display: none; }

/* ---- El botón de continuar ----------------------------------------------- */
/* Ancho completo y no en pastilla estrecha: es la única acción de la pantalla
   y en móvil tiene que caer bajo el pulgar sin buscarla. */
.calc-cta { width: 100%; }
.calc.is-enviando .calc-cta { opacity: .7; pointer-events: none; }

/* ---- La espera del precio ------------------------------------------------
   El panel es el de `parts/formularios/carga.php` y su hoja es `carga.css`, que
   se carga en todo el sitio. Aquí solo se le hace sitio: mientras dura, la
   pregunta y el pie legal se van —el panel trae su propio titular y su propio
   aviso, y dejar los dos es contar dos veces lo mismo—. */
/* El panel se escribió para ir DENTRO de la tarjeta blanca de un formulario
   —no trae fondo ni borde—, así que la tarjeta se la pone aquí, igual que hace
   el comparador. El relleno de arriba es 4 y no 18 porque su primer bloque ya
   trae 20 px de margen propio. */
.calc-carga {
  margin-top: 26px;
  padding: 4px 18px 20px;
  background: var(--c-white);
  border: var(--bd) solid var(--c-border); border-radius: var(--r);
  box-shadow: 0 1px 2px -1px rgba(16,24,32,.06);
}
.calc-carga[hidden] { display: none; }

.calc.is-esperando .calc-pregunta,
.calc.is-esperando .calc-nota,
.calc.is-esperando .calc-legal { display: none; }
.calc.is-esperando .calc-carga { margin-top: 0; }
/* La espera «B» (9-nov-2026) es una pantalla entera, no una tarjeta: fuera el
   rótulo «Simula tu seguro de…», el marco y el fondo crema. Arriba quedan el logo,
   el teléfono y la raya naranja del progreso. */
.calc.is-esperando .calc-rotulo { display: none; }
.calc.is-esperando .calc-carga {
  padding: 0 0 24px; background: transparent; border: 0; box-shadow: none;
}

/* ---- Aviso y pie legal --------------------------------------------------- */
.calc-aviso {
  margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.45; color: var(--c-negative); text-align: center;
}
.calc-aviso[hidden] { display: none; }

.calc-legal {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 22px;
  font-size: 12.5px; line-height: 1.4; color: var(--c-ink-3); text-align: center;
}
.calc-legal a { color: var(--c-action-ink); text-decoration: underline; }

.calc-nojs { max-width: 560px; margin: 0 auto; padding: 24px var(--pad-x-m) 40px; }

/* ---- Escritorio ----------------------------------------------------------
   No hay maqueta de escritorio del embudo, así que arriba de 768 no se inventa
   un layout de dos columnas: se mantiene la columna de lectura centrada y lo
   único que crece es el aire y el tamaño de la pregunta. */
@media (min-width: 768px) {
  .calc-cab__inner,
  .calc-rotulo,
  .calc-nav      { padding-left: var(--pad-x-d); padding-right: var(--pad-x-d); }
  .calc-cuerpo   { padding: 44px var(--pad-x-d) 56px; }
  .calc-pregunta { font-size: 31px; }
  .calc-nota__txt { font-size: 15.5px; }
  .calc-opcion   { min-height: 62px; padding: 15px 18px; font-size: 17px; }
}

/* ---- Escritorio ancho · la nota se va a la derecha ------------------------
   A partir de aquí hay sitio para dos columnas: a la izquierda la pregunta y
   las respuestas, y a la derecha la nota, a la altura de la pregunta. Es lo
   que pidió Jorge (2-sep-2026) y tiene su razón: en una columna estrecha la
   nota va detrás y se lee después de contestar; con ancho, se lee A LA VEZ que
   se decide, que es cuando sirve.

   1024 y no 768: en tablet la columna de la derecha se quedaría en 250 px y la
   nota saldría partida en ocho líneas. */
@media (min-width: 1024px) {
  .calc-cuerpo__inner {
    max-width: 980px;
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: 44px; align-items: start;
  }
  /* Todo a la izquierda salvo la nota, que se coloca a mano en la fila 1 de la
     segunda columna. Sin esto, la rejilla iría repartiendo las respuestas entre
     las dos columnas. */
  .calc-cuerpo__inner > *  { grid-column: 1; }
  .calc-pregunta           { text-align: left; }
  /* Ocupa TODAS las filas de su columna, no solo la primera. Puesta en la fila
     1 a secas, esa fila se estiraba hasta la altura de la tarjeta y entre la
     pregunta y las respuestas quedaba un hueco de trescientos píxeles. */
  .calc-nota {
    grid-column: 2; grid-row: 1 / span 99; order: 0; margin-top: 0;
    align-self: start; position: sticky; top: 24px;
  }
  /* Mientras se espera, la espera ocupa las dos columnas: carga.css la ensancha
     a toda la ventana partiendo del ancho de SU columna, y en la de la izquierda
     (606 px) se iba 190 px por la izquierda y cortaba el texto (9-nov-2026). */
  .calc.is-esperando .calc-carga { grid-column: 1 / -1; }
}

/* ============================================================================
   DOS DISEÑOS (Jorge, 10-nov-2026: «usamos la B y me dejas la D como otra opción
   de diseño para poder seleccionarla»). `calc--panel` (de fábrica, la «B») y
   `calc--limpio` (la «D», con `?diseno=limpio`). Ver page-calculadora.php.
   ============================================================================ */

/* ---- «B» · el panel del recorrido ------------------------------------------ */
.calc-guia {
  display: grid; gap: 4px; padding: 14px var(--pad-x-m) 16px;
  background: #044268; color: #ffffff;
}
.calc-guia__eti {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9CC7E3;
}
.calc-guia__titulo { display: none; }
.calc-guia__actual { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.calc-guia__pasos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 8px; }
.calc-guia__paso { display: flex; align-items: center; gap: 12px; }
.calc-guia__nom { display: none; }
.calc-guia__num {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.calc-guia__paso.is-actual .calc-guia__num { background: #E9714A; border-color: #E9714A; }
.calc-guia__paso.is-hecho  .calc-guia__num { background: #1E7A4F; border-color: #1E7A4F; }
.calc-guia__confianza { display: none; }
.calc-guia__tp { background: #00B67A; color: #ffffff; padding: 0 4px; font-size: 11px; letter-spacing: 1px; }
.calc--panel.calc--con-guia .calc-rotulo { display: none; }
.calc.is-esperando .calc-guia { display: none; }
/* La nota, en una caja azul clara bajo las respuestas. */
.calc--panel .calc-nota { --c-nota-fondo: #EEF4F9; --c-nota-borde: #DCE7F0; --c-nota-viva: #044268; }

/* ---- «D» · limpia y grande ------------------------------------------------- */
.calc--limpio .calc-rotulo { display: none; }
.calc-eti {
  order: -1; display: block; margin: 0 0 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #B04A28;
}
.calc-eti:empty { display: none; }
.calc--limpio .calc-pregunta { font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.calc--limpio .calc-nota { background: transparent; border: 0; border-radius: 0; }
.calc--limpio .calc-nota__caja { padding: 0 0 0 12px; border-left: 3px solid #1E7A4F; background: transparent; }
.calc--limpio .calc-nota__txt::before { content: "¿Por qué lo preguntamos? "; font-weight: 800; color: #101820; }
.calc.is-esperando .calc-eti { display: none; }

@media (min-width: 1024px) {
  /* «B» en escritorio: la columna azul a la izquierda, la pregunta a la derecha. */
  .calc--panel.calc--con-guia:not(.is-esperando) {
    display: grid; grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; align-content: stretch;
  }
  .calc--panel.calc--con-guia:not(.is-esperando) > .calc-cab { grid-column: 1 / -1; }
  .calc--panel.calc--con-guia:not(.is-esperando) > .calc-guia { grid-column: 1; grid-row: 2 / span 3; }
  .calc--panel.calc--con-guia:not(.is-esperando) > :not(.calc-cab):not(.calc-guia) { grid-column: 2; }
  .calc-guia { align-content: start; gap: 14px; padding: 40px 34px; }
  .calc-guia__titulo { display: block; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
  .calc-guia__actual { display: none; }
  .calc-guia__pasos { flex-direction: column; gap: 2px; margin-top: 8px; }
  .calc-guia__paso { padding: 8px 0; color: rgba(255,255,255,.65); font-size: 15.5px; font-weight: 700; }
  .calc-guia__paso.is-actual, .calc-guia__paso.is-hecho { color: #ffffff; }
  .calc-guia__nom { display: inline; }
  .calc-guia__confianza {
    display: block; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
    font-size: 13.5px; font-weight: 700; line-height: 1.8;
  }
  /* Las dos: una sola columna, la nota debajo de las respuestas (no al lado). */
  .calc--panel.calc--con-guia .calc-cuerpo__inner,
  .calc--limpio .calc-cuerpo__inner { display: flex; flex-direction: column; max-width: 620px; }
  .calc--panel.calc--con-guia .calc-cuerpo__inner { margin: 0 0 0 60px; }
  .calc--panel.calc--con-guia .calc-nota,
  .calc--limpio .calc-nota { grid-column: auto; grid-row: auto; order: 5; margin-top: 18px; position: static; }
  .calc--panel.calc--con-guia .calc-nav { padding-left: calc(60px + var(--pad-x-d)); }
  .calc--limpio .calc-pregunta { font-size: 40px; }
}
/* Las respuestas, a todo el ancho de la columna (en la columna única salían estrechas). */
.calc--panel.calc--con-guia .calc-cuerpo__inner,
.calc--limpio .calc-cuerpo__inner { align-items: stretch; }
.calc--limpio .calc-pregunta { text-align: left; }
@media (min-width: 1024px) {
  .calc--panel.calc--con-guia .calc-cuerpo__inner > *,
  .calc--limpio .calc-cuerpo__inner > * { width: 100%; max-width: none; }
}

/* EL PASO DE LOS DATOS, QUE ANIME A DEJARLOS (Jorge, 10-nov-2026). Bajo el teléfono y el correo,
   una línea pequeña con su icono que dice para qué los queremos; bajo el botón, Trustpilot y
   para qué son los datos. */
.calc-contacto__ayuda {
  display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0;
  font-size: 13px; line-height: 1.4; color: var(--c-ink-2, #5A6570);
}
.calc-contacto__ayuda::before {
  content: ""; flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px;
  background: #E9714A; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.calc-contacto__ayuda--tel {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}
.calc-contacto__ayuda--mail {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}
.calc-confianza { display: grid; justify-items: center; gap: 6px; margin-top: 14px; text-align: center; }
.calc-confianza[hidden] { display: none; }
.calc-confianza p { margin: 0; }
.calc-confianza__tp { font-size: 14px; font-weight: 700; color: var(--c-ink, #1B2733); }
.calc-confianza__estrellas {
  display: inline-block; padding: 1px 5px; margin-right: 4px; border-radius: 3px;
  background: #00B67A; color: #ffffff; font-size: 12px; letter-spacing: 2px;
}
.calc-confianza__datos { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-ink-2, #5A6570); }
.calc-confianza__datos::before {
  content: ""; flex: 0 0 13px; width: 13px; height: 13px; background: #1E7A4F;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Campos con icono, «+34» y la casilla (Jorge, 10-nov-2026: «usa más ese formato»). */
.calc-contacto__caja { position: relative; display: flex; align-items: stretch; }
.calc-contacto__caja .calc-campo__input { padding-left: 44px; }
.calc-contacto__caja::before {
  content: ""; position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: #8A949E; pointer-events: none;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.calc-contacto__caja--nombre {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.calc-contacto__caja--mail {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
/* El teléfono: sin icono, con «+34» en su cajita a la izquierda. */
.calc-contacto__caja--tel::before { display: none; }
.calc-contacto__pre {
  display: flex; align-items: center; padding: 0 14px; flex: 0 0 auto;
  border: 1.5px solid var(--c-field-border); border-right: 0; border-radius: var(--r) 0 0 var(--r);
  background: #F6F1EC; font-size: 16px; font-weight: 700; color: var(--c-ink);
}
.calc-contacto__caja--tel .calc-campo__input { padding-left: 14px; border-radius: 0 var(--r) var(--r) 0; }
.calc-contacto__acepto {
  display: flex; align-items: center; gap: 10px; margin-top: 2px; cursor: pointer;
  font-size: 14.5px; color: var(--c-ink-2, #5A6570);
}
.calc-contacto__acepto input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #E9714A; }
.calc-contacto__acepto a { color: var(--c-navy, #044268); text-decoration: underline; }
.calc-contacto__acepto.is-error { color: var(--c-negative); }
.calc-contacto__acepto.is-error input { outline: 2px solid var(--c-negative); outline-offset: 1px; }

/* LA NOTA DE LA «B» COMO EN LA PROPUESTA (Jorge, 10-nov-2026: «me sigue saliendo el formato
   antiguo»). Sin la franja azul de la izquierda ni el borde: una caja azul muy clara,
   redondeada, con la bombilla delante del texto. */
.calc--panel .calc-nota { border: 0; border-radius: 12px; background: #EEF4F9; }
.calc--panel .calc-nota__caja { padding: 12px 16px; border-left: 0; }
.calc--panel .calc-nota__txt { font-size: 14.5px; line-height: 1.5; color: #2B3A47; }
.calc--panel .calc-nota__txt::before { content: "💡"; margin-right: 6px; }