/* =============================================================
   TECNET — Cotizador "Arma tu PC"
   ============================================================= */

.tt-cotizador-inner{max-width:720px}

.tt-cotizador-header{margin-bottom:var(--s-6)}
.tt-cotizador-titulo{
  font-family:var(--tt-font-display);
  font-size:clamp(2.25rem,7vw,4rem);
  text-transform:uppercase;line-height:.95;margin-top:var(--s-2);
}
.tt-cotizador-sub{margin-top:var(--s-3);color:var(--tt-texto-2);font-size:1.05rem}

.tt-cotizador-form{display:flex;flex-direction:column;gap:var(--s-5)}

.tt-paso{border:0;padding:0}
.tt-paso-titulo{
  display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
  margin-bottom:var(--s-3);padding:0;
  font-size:1.1rem;font-weight:700;
}
.tt-opcional{
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tt-texto-2);
}

/* ---------- OPCIONES ----------
   Toda la tarjeta es el área táctil, no solo el círculo del radio: en móvil
   acertarle a un control de 16px es la forma más rápida de perder a alguien. */
.tt-opciones{display:grid;gap:var(--s-2)}
@media (min-width:560px){.tt-opciones{grid-template-columns:repeat(2,1fr)}}

.tt-opcion{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:52px;padding:var(--s-3);
  background:var(--tt-superficie);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.tt-opcion:hover{border-color:var(--tt-azul)}
.tt-opcion input{width:20px;height:20px;accent-color:var(--tt-naranja);flex-shrink:0}
.tt-opcion:has(input:checked){
  border-color:var(--tt-naranja);
  background:rgba(230,105,3,.10);
}
/* Reserva para navegadores sin :has() — el foco sigue marcándose igual. */
.tt-opcion:focus-within{border-color:var(--tt-naranja)}

.tt-input{
  width:100%;min-height:52px;padding:var(--s-3);
  background:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.tt-input::placeholder{color:var(--tt-texto-2)}
.tt-input:focus{border-color:var(--tt-azul)}

.tt-campos{display:grid;gap:var(--s-3)}
@media (min-width:560px){.tt-campos{grid-template-columns:repeat(2,1fr)}}

/* ---------- CONSENTIMIENTO ---------- */
.tt-consentimiento{
  display:flex;gap:var(--s-3);align-items:flex-start;
  margin-top:var(--s-4);padding:var(--s-3);
  background:var(--tt-carbon);border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  font-size:var(--fs-small);color:var(--tt-texto-2);
}
.tt-consentimiento input{width:20px;height:20px;accent-color:var(--tt-naranja);flex-shrink:0;margin-top:2px}
.tt-consentimiento a{color:var(--tt-azul-claro);text-decoration:underline}

/* ---------- HONEYPOT ----------
   Fuera de pantalla, no display:none: algunos robots detectan y esquivan los
   campos ocultos por display. */
.tt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- ESTADOS ---------- */
.tt-cotizador-error{
  padding:var(--s-3);
  background:rgba(240,82,107,.12);
  border-left:4px solid var(--tt-error);border-radius:var(--radio-sm);
  color:var(--tt-texto);font-size:var(--fs-small);
}
.tt-cotizador-enviar:disabled{opacity:.6;cursor:wait}
.tt-cotizador-nota{
  text-align:center;color:var(--tt-texto-2);font-size:var(--fs-micro);
  max-width:none;
}

.tt-cotizador-ok{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  padding:var(--s-7) var(--s-4);text-align:center;
  border:1px solid var(--tt-naranja);border-radius:var(--radio);
  background:rgba(230,105,3,.08);
}
.tt-cotizador-ok h2{font-family:var(--tt-font-display);font-size:2.5rem;text-transform:uppercase}
.tt-cotizador-ok p{max-width:44ch}