/* Cotizador (desvelo.mx/cotizar). Usa los tokens de estilos.css. */
.barra-volver { color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 4px; }
.barra-volver:hover { color: var(--oro-claro); }

.cotizar { padding: 112px 0 var(--e-8); min-height: 100svh;
  background: radial-gradient(60% 40% at 90% 10%, rgba(240, 162, 74, .08), transparent 70%), var(--noche); }
.cotizar-in { display: grid; gap: var(--e-6); max-width: 820px; }
.cotizar .cab-seccion { margin-bottom: 0; }

.cotizador { display: grid; gap: var(--e-5); padding: 28px 20px; border-radius: 20px; border: 1px solid var(--linea-fuerte);
  background: linear-gradient(160deg, rgba(227, 189, 111, .08), rgba(227, 189, 111, .01) 55%), var(--carbon); }
.campo { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo legend, .etq { padding: 0; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.campo:not(fieldset) .etq { margin-bottom: 0; }
.fila-campos { display: grid; gap: var(--e-5); }
@media (min-width: 560px) { .fila-campos { grid-template-columns: 1fr 1fr; } }

.cotizador input[type=date], .cotizador input[type=time], .cotizador input[type=number], .cotizador input[type=text] {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--linea-fuerte);
  background: var(--noche-2); color: var(--texto); font: 600 17px/1 var(--f-texto); color-scheme: dark; }
.cotizador input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(227, 189, 111, .2); }
.cotizador input::placeholder { color: var(--texto-3); font-weight: 500; }

.opciones-formato { display: grid; gap: 10px; }
.op-formato, .segmentos label { position: relative; cursor: pointer; }
.op-formato input, .segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.op-formato span { display: grid; align-content: start; height: 100%; gap: 4px; padding: 16px 18px 16px 52px; border-radius: 14px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .02); transition: border-color var(--t), background var(--t); }
.op-formato span::before { content: ""; position: absolute; left: 18px; top: 19px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea-fuerte); transition: border var(--t), background var(--t); }
.op-formato b { font: 800 24px/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; }
.op-formato small { color: var(--texto-2); font-size: 14px; line-height: 1.45; }
.op-formato:hover span { border-color: var(--linea-fuerte); }
.op-formato input:checked + span { border-color: var(--oro); background: rgba(227, 189, 111, .08); }
.op-formato input:checked + span::before { border: 5px solid var(--oro); background: var(--noche); }
.op-formato input:focus-visible + span, .segmentos input:focus-visible + span { outline: 2px solid var(--oro-claro); outline-offset: 3px; }

.segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmentos span { display: grid; place-items: center; min-height: 52px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linea); font-weight: 700; text-align: center; transition: border-color var(--t), background var(--t), color var(--t); }
.segmentos label:hover span { border-color: var(--linea-fuerte); }
.segmentos input:checked + span { border-color: var(--oro); background: var(--oro); color: #1b1305; }

.error-form { padding: 12px 16px; border-radius: 12px; background: rgba(240, 90, 90, .1); border: 1px solid rgba(240, 120, 120, .4); color: #ffc9c9; font-weight: 600; }
.btn-cotizar { width: 100%; }
.btn-cotizar.cargando { opacity: .7; pointer-events: none; }
.cotizador .nota { margin-top: 0; }
.cotizador .nota a, .resultado .nota a { color: var(--oro-claro); }

.resultado { padding: 32px 24px; border-radius: 20px; border: 1px solid var(--oro); scroll-margin-top: 88px;
  background: radial-gradient(70% 60% at 100% 0%, rgba(227, 189, 111, .16), transparent 70%), var(--carbon); }
.resultado:focus { outline: none; }
.precio { margin-top: var(--e-3); display: flex; align-items: baseline; gap: 10px; }
.precio-total { font: 900 clamp(64px, 18vw, 104px)/.9 var(--f-titulo); color: var(--oro-claro); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.precio-mxn { font-weight: 700; color: var(--texto-3); letter-spacing: .12em; }
.precio-detalle { margin-top: var(--e-3); color: var(--texto-2); font-weight: 600; }
.precio-detalle::first-letter { text-transform: uppercase; }
.desglose { margin-top: var(--e-5); border-top: 1px solid var(--linea); }
.desglose li { display: flex; justify-content: space-between; gap: var(--e-4); padding: 14px 0; border-bottom: 1px solid var(--linea); color: var(--texto-2); }
.desglose b { color: var(--texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aviso { margin-top: var(--e-5); padding: 16px 18px; border-radius: 14px; border-left: 4px solid; display: grid; gap: 4px; }
.aviso p { color: var(--texto-2); font-size: 15px; }
.aviso-ok { border-color: #3ecf7a; background: rgba(62, 207, 122, .08); }
.aviso-alerta { border-color: var(--farol); background: rgba(240, 162, 74, .1); }
.aviso-no { border-color: #f06a6a; background: rgba(240, 106, 106, .1); }
.titulo-res { margin-top: var(--e-3); font: 800 clamp(40px, 9vw, 64px)/.95 var(--f-titulo); text-transform: uppercase; }
.acciones-res { margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.resultado .nota { margin-top: var(--e-3); }

.pie-corto { padding: 0 0 var(--e-6); }
.pie-corto .pie-legal { margin-top: 0; }
.pie-corto a { color: var(--texto-2); }

@media (min-width: 760px) {
  .cotizador { padding: 40px; }
  .resultado { padding: 44px; }
  .opciones-formato { grid-template-columns: repeat(3, 1fr); }
  .acciones-res { grid-template-columns: auto auto; justify-content: start; }
}