/* ═══════════════════════════════════════════════════════════════════
   COTIZADOR ONLINE — estilos compartidos
   30/07/2026. Antes vivian dentro del <style> del home y por eso el
   cotizador solo se podia usar ahi. Ahora los cargan el home y
   /cotizar/, que muestran EL MISMO cotizador (mismo HTML, mismo JS).
   Las variables (--brand, --card, --line, --radius…) las define la
   hoja principal de cada pagina: el <style> del home y zona.css en
   /cotizar/. Los dos juegos son identicos, asi que no se repiten aca.
   ═══════════════════════════════════════════════════════════════════ */

/* === CALCULADORA === */
.calculator{max-width:720px;margin:32px auto 0}
.calc-step{margin-bottom:28px}
.calc-step h3{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:var(--ink)}
.calc-options{display:grid;grid-template-columns:1fr;gap:12px}
.calc-option{display:block;cursor:pointer;position:relative}
/* El radio se oculta A LA VISTA, no al navegador. Con display:none quedaba fuera del
   recorrido del teclado y del arbol de accesibilidad: con Tab se llegaba hasta los botones
   de metros y ahi se acababa, o sea que sin mouse no se podia elegir material — y sin
   material no hay precio (30/07/2026). Asi sigue invisible pero es enfocable, las flechas
   mueven la seleccion como en cualquier grupo de radios, y el lector de pantalla lo anuncia. */
.calc-option input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0}
/* El anillo de foco solo cuando se llego por teclado: con :focus a secas quedaba dibujado
   despues de cada clic de mouse. */
.calc-option input:focus-visible+.calc-option-content{border-color:var(--brand);outline:3px solid var(--brand);outline-offset:2px}
.calc-option-content{display:flex;flex-direction:column;padding:16px 20px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);transition:var(--transition)}
.calc-option input:checked+.calc-option-content{border-color:var(--brand);background:rgba(46,125,50,.06)}
.calc-option-content:hover{border-color:var(--brand)}
.calc-option-content strong{font-size:1.02rem;color:var(--ink);margin-bottom:3px;line-height:1.35}
.calc-option-content small{font-size:.9rem;color:var(--ink-2);margin-bottom:5px;line-height:1.4}
.calc-option-content em{font-size:.95rem;color:var(--brand);font-style:normal;font-weight:700}
#meters-slider{width:100%;accent-color:var(--brand);height:8px}
.calc-slider-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-2);margin-top:6px}
.calc-meters-input{display:flex;align-items:center;gap:12px;justify-content:center}
.calc-meters-input input{width:120px;padding:12px 16px;font-size:1.5rem;font-weight:700;text-align:center;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);color:var(--ink);font-family:inherit}
.calc-meters-input input:focus{border-color:var(--brand);outline:none}
.calc-quick-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.calc-quick-btn{padding:9px 18px;background:var(--card);border:1px solid var(--line);border-radius:20px;color:var(--ink-2);cursor:pointer;font-size:.92rem;transition:var(--transition);font-family:inherit}
.calc-quick-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.calc-select{width:100%;padding:14px 16px;font-size:.95rem;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);color:var(--ink);cursor:pointer;font-family:inherit;appearance:none;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%236b7a72'><path d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.calc-select:focus{border-color:var(--brand);outline:none}
/* Combobox de comuna con autocompletado */
.calc-combo{position:relative}
.calc-combo .calc-select{cursor:text;background-image:none;padding-right:16px}
.combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;margin:0;padding:6px;list-style:none;max-height:260px;overflow-y:auto;background:var(--card);border:2px solid var(--brand);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.combo-list li{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:.92rem;color:var(--ink);display:flex;justify-content:space-between;gap:12px;align-items:center}
.combo-list li small{color:var(--ink-3);font-size:.75rem;white-space:nowrap}
.combo-list li.active,.combo-list li:hover{background:var(--brand);color:#fff}
.combo-list li.active small,.combo-list li:hover small{color:rgba(255,255,255,.85)}
.combo-list li.combo-empty{cursor:default;color:var(--ink-3);justify-content:flex-start}
.combo-list li.combo-empty:hover{background:transparent;color:var(--ink-3)}
.combo-hint{margin-top:8px;font-size:.8rem;color:var(--ink-3);line-height:1.5}
.combo-hint.ok{color:var(--brand);font-weight:600}
.calc-results{margin-top:32px;padding:32px;background:var(--card);border-radius:var(--radius);border:2px solid var(--brand);text-align:center;box-shadow:var(--shadow-lg)}
.calc-results h3{color:var(--brand);margin-bottom:8px}
.calc-price-display{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.calc-price-label{display:block;font-size:.85rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.calc-price-value{font-size:2rem;font-weight:800;color:var(--ink)}
.calc-disclaimer{margin-top:4px;font-size:.85rem;color:var(--ink-2);line-height:1.65}

/* === FORMULARIO COTIZACIÓN FORMAL === */
.lead-form-wrap{margin-top:28px;padding-top:28px;border-top:1px dashed var(--line);text-align:left}
.lead-form-wrap h4{font-size:1.15rem;font-weight:700;color:var(--ink);text-align:center;margin-bottom:4px}
.lead-form-wrap .lead-sub{text-align:center;color:var(--ink-2);font-size:.92rem;margin-bottom:12px}
.lead-instant{display:flex;justify-content:center;margin-bottom:20px}
.lead-instant span{display:inline-flex;align-items:center;gap:6px;background:rgba(46,125,50,.08);border:1px solid rgba(46,125,50,.25);color:var(--brand-dark);border-radius:50px;padding:7px 16px;font-size:.88rem;font-weight:700}
.lead-instant svg{width:14px;height:14px;flex-shrink:0}
.lead-resumen{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 16px;font-size:.92rem;color:var(--ink-2);text-align:center;margin-bottom:20px}
.lead-grid{display:grid;grid-template-columns:1fr;gap:14px}
.lead-field label{display:block;font-size:.9rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.lead-field label em{color:var(--brand);font-style:normal}
.lead-field input,.lead-field select,.lead-field textarea{width:100%;padding:12px 14px;font-size:.95rem;background:var(--card);border:2px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-family:inherit}
.lead-field input:focus,.lead-field select:focus,.lead-field textarea:focus{border-color:var(--brand);outline:none}
.lead-field textarea{resize:vertical;min-height:70px}
.lead-actions{margin-top:20px;text-align:center}
.lead-actions .btn{width:100%;justify-content:center;font-size:1.05rem;padding:16px 32px}
.lead-privacidad{font-size:.72rem;color:var(--ink-3);text-align:center;margin-top:12px}
.lead-error{display:none;background:#fdecea;border:1px solid #f5c6c0;color:#8a2318;border-radius:var(--radius-sm);padding:12px 16px;font-size:.85rem;margin-top:14px}
.lead-success{display:none;text-align:center;padding:24px 8px}
.lead-success svg{width:56px;height:56px;color:var(--brand);margin:0 auto 12px}
.lead-success h4{font-size:1.2rem;color:var(--ink);margin-bottom:8px}
.lead-success p{color:var(--ink-3);font-size:.9rem;max-width:420px;margin:0 auto 16px}

@media(min-width:600px){
  .calc-options{grid-template-columns:repeat(2,1fr)}
  .lead-grid{grid-template-columns:1fr 1fr}
  .lead-grid .lead-field-full{grid-column:1/-1}
  .lead-actions .btn{width:auto}
}