/* Estilos comunes de los formularios Kalli (/cotiza, /soporte) */
:root{--tinta:#0F172A;--fondo:#F8FAFC;--blanco:#FFF;--azul:#2563EB;--azul-o:#1D4ED8;--naranja:#F97316;--naranja-o:#C2410C;--gris:#475569;--linea:#E2E8F0}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 17px/1.5 Inter,system-ui,sans-serif}
header{padding:20px 16px;text-align:center}
header img{height:52px}
main{max-width:680px;margin:0 auto;padding:0 16px 64px}
h1{font-weight:800;font-size:1.7rem;margin:.2em 0}
.intro{color:var(--gris);margin-bottom:24px}
fieldset{border:1px solid var(--linea);background:var(--blanco);border-radius:16px;padding:20px 18px;margin:0 0 20px}
legend{font-weight:800;font-size:1.15rem;padding:0 6px}
.preg{margin:16px 0}
.preg>label,.preg>.t{display:block;font-weight:600;margin-bottom:6px}
.ob{color:var(--naranja-o)}
input[type=text],input[type=tel],input[type=email],input[type=url],input[type=number],textarea,select{width:100%;padding:11px 12px;border:1px solid var(--linea);border-radius:10px;font:inherit;background:var(--fondo);color:var(--tinta)}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--azul);outline-offset:1px}
.ops label{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-weight:400;cursor:pointer}
.ops input{margin-top:5px;accent-color:var(--azul);width:18px;height:18px;flex:none}
.nota{font-size:.9rem;color:var(--gris);background:var(--fondo);border-radius:10px;padding:10px 12px}
.err{outline:2px solid var(--naranja-o);border-radius:10px;padding:6px 8px}
.msgerr{color:var(--naranja-o);font-size:.9rem;margin-top:4px}
button{background:var(--azul);color:var(--blanco);border:0;border-radius:999px;padding:14px 28px;font:800 1.05rem Inter,system-ui,sans-serif;cursor:pointer;width:100%}
button:hover{background:var(--azul-o)}
button:disabled{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#estado{margin-top:14px;font-weight:600}
.ok{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:28px 20px;text-align:center}
footer{text-align:center;color:var(--gris);font-size:.9rem;padding:24px 16px}
.acepta label{display:flex;gap:10px;align-items:flex-start;font-weight:400;cursor:pointer}
.acepta input{margin-top:5px;accent-color:var(--azul);width:18px;height:18px;flex:none}
a{color:var(--azul-o)}
.legal h1{font-size:1.6rem}.legal h2{font-size:1.15rem;margin-top:1.6em}.legal li{margin:.3em 0}
/* 13-oct: inicio con tarjetas, 2 caminos en /cotiza, botón de dictado */
.ancho{max-width:1040px}
.hero{text-align:center;padding:12px 0 36px}
.hero h1{font-size:2.1rem}
h2{font-weight:800;font-size:1.45rem;margin:1.2em 0 .6em}
.boton{display:inline-block;background:var(--azul);color:var(--blanco);text-decoration:none;font-weight:800;padding:14px 28px;border-radius:999px}
.boton:hover{background:var(--azul-o)}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tarjetas article{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:18px}
.tarjetas span{font-size:1.8rem}
.tarjetas h3{margin:.3em 0;font-size:1.1rem}
.tarjetas p{margin:0;color:var(--gris);font-size:.95rem}
.tarjetas .destacada{border:2px solid var(--naranja)}
.tarjetas .mas{background:var(--fondo);border-style:dashed}
.tarjetas .mas a{display:inline-block;margin-top:8px;font-weight:700}
.cierre{text-align:center;margin-top:40px}
.cierre p{color:var(--gris)}
.caminos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px}
@media (max-width:560px){.caminos{grid-template-columns:1fr}}
.camino{display:block;background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:16px;color:var(--tinta);text-decoration:none}
.camino b{display:block;margin-bottom:4px}
.camino span{color:var(--gris);font-size:.95rem}
a.camino:hover{border-color:var(--azul)}
.mini{display:inline-block;margin:6px 6px 0 0;padding:6px 12px;border:1px solid var(--linea);border-radius:999px;text-decoration:none;font-weight:600}
button.mic{width:auto;margin-top:8px;padding:8px 16px;font-size:.9rem;background:var(--blanco);color:var(--azul-o);border:1px solid var(--azul)}
button.mic:hover{background:var(--fondo)}
button.mic.on{background:var(--naranja);border-color:var(--naranja);color:var(--blanco)}
/* 14-oct: ceja, teléfono y pasos del inicio */
.ceja{color:var(--naranja-o,#C2410C);font-weight:700;margin:0 0 .4em}
.tel{margin-top:12px;color:var(--gris)}
.tel a{font-weight:700}
.pasos{max-width:720px;padding-left:1.4em}
.pasos li{margin:.6em 0;color:var(--gris)}
.pasos b{color:var(--tinta,#0F172A)}