/* Asesor IA — comparahosting.cl. UNA sola fuente en todo el bloque: DM Sans (la misma de botones/precios del sitio). Paleta: orange #d4441a · blue #004c82 · blue-dark #083554 · crema #f4f2f0 · header card #cdf7ee */ /* Blindaje contra el CSS global del sitio (box-sizing solo en , p/.boxes float:left). */ #asesor, #asesor *, #asesor *::before, #asesor *::after, .asesor-modal-overlay, .asesor-modal-overlay *{box-sizing:border-box} #asesor p, .asesor-modal p{float:none;width:auto;margin:0} #asesor ul, .asesor-modal ul{float:none;width:auto;margin:0;padding:0;list-style:none} /* Fuente única: DM Sans en todo (sobrescribe el Manrope de .title y el Rubik de p). Se excluyen los para no romper la fuente de íconos (Unicons). */ #asesor :not(i), .asesor-modal-overlay :not(i){font-family:'DM Sans',sans-serif!important} /* ------ form ----- */ #asesor .asesor-box{ width:100%;float:left; max-width:80%; margin: 0 10%;} #asesor .asesor-label, #asesor .asesor-refine-q{ font-size:1.1rem; line-height: 1.5;} #asesor .asesor-label{display:flex;align-items:center;gap:.4rem;} #asesor .asesor-label i{color:#d4441a;font-size:1.3rem} #asesor .asesor-field{display:flex;gap:.6rem;flex-wrap:wrap;background:#fff;border:1px solid #d4441a;border-radius:8px;padding:.7rem;} #asesor .asesor-field:focus-within{border-color:#b8380f} #asesor textarea#asesor-input{flex:1 1 300px;min-width:0;min-height:84px;border:0;outline:0;resize:vertical;font-size:1rem;line-height:1.45;color:#1d2a3d;padding:.7rem .8rem;background:transparent} #asesor textarea#asesor-input::placeholder{color:#9aa1ab} #asesor #asesor-btn{flex:0 0 auto;align-self:stretch;border:0;border-radius:8px;cursor:pointer;background:#d4441a;color:#fff;font-weight:600;font-size:1rem;padding:0 1.2rem; min-height:48px;transition:filter .15s} #asesor #asesor-btn:hover{filter:brightness(1.07)} #asesor #asesor-btn:disabled{opacity:.6;cursor:default} #asesor #asesor-status{display:none;font-size:1.2rem} #asesor #asesor-status i{color:#d4441a} #asesor #asesor-status .asesor-dots::after{content:'';animation:asesorDots 1.2s steps(4,end) infinite} @keyframes asesorDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}} /* ---------- resultados (sección propia, fondo blanco) ---------- */ #asesor-results{display:none;} #asesor .asesor-entendemos, #asesor .asesor-necesidades, #asesor .asesor-card-incluye li, #asesor .asesor-card-razon, #asesor .asesor-card-badge{font-family: Rubik,sans-serif;} #asesor .asesor-entendemos, #asesor .asesor-necesidades{font-weight:400; line-height:1.5;} #asesor .asesor-necesidades, #asesor .asesor-card-incluye li, #asesor .asesor-card-razon{ color: #42414D;} #asesor .asesor-entendemos{font-size:1.2rem; margin-bottom:1.1rem !important; color: #004c82;} #asesor .asesor-necesidades{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-bottom:1.8rem!important; color: #42414D;} #asesor .asesor-necesidades li{flex:1 1 280px;font-size:1rem; padding: 1rem; } #asesor .asesor-necesidades i{color:#09a789;margin-right:.3rem} /* tarjetas (cada una en una col Bootstrap) */ #asesor .asesor-card{position:relative;height:100%;background:#fff;border:1px solid #dadce0;border-radius:8px;padding:2.6rem 1.4rem 1.4rem;display:flex;flex-direction:column} #asesor .asesor-card--top{border:2px solid #d4441a;} #asesor .asesor-card-badge{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);white-space:nowrap;background:#cdf7ee;color:#083554;font-weight:400;font-size:.85rem;padding:.3rem .9rem;border-radius:999px; max-width:92%;overflow:hidden;text-overflow:ellipsis;} /*destacado plan*/ #asesor .asesor-card--top .asesor-card-badge{background:#d4441a;color:#fff} #asesor .asesor-card-head{display:flex;align-items:center;gap:.5rem; font-weight: 700;} #asesor .asesor-card-brand{color:#004c82;font-size:1.1rem;letter-spacing:.01em;} #asesor .asesor-card-plan {color:#083554;}/*nombre plan*/ #asesor .asesor-card-precio{font-weight:600;color:#d4441a;font-size:1.2rem;margin-bottom:1rem} #asesor .asesor-card-incluye {margin-bottom:.8rem!important} #asesor .asesor-card-incluye li{font-size:.9rem;line-height:1.45;display:flex;gap:.4rem;align-items:flex-start;padding:.12rem 0} #asesor .asesor-card-incluye i {color:#09a789;margin-top:.15rem} #asesor .asesor-card-razon{font-size:.85rem;line-height:1.5;flex:1 1 auto;margin-bottom:1.4rem!important;} #asesor .asesor-card-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:auto} #asesor .asesor-card .asesor-cta{text-align:center;text-decoration:none} #asesor .asesor-detalle{background:transparent;border:0;color:#004c82;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:underline;padding:.2rem} #asesor .asesor-error{color:#b3261e;background:#fdecea;border-radius:8px;padding:.9rem 1rem} /* ---------- modal ---------- */ .asesor-modal-overlay{position:fixed;inset:0;background:rgba(8,53,84,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:1rem} .asesor-modal{background:#fff;border-radius:18px;max-width:600px;width:100%;max-height:90vh;overflow:auto;padding:1.8rem 1.6rem;position:relative;box-shadow:0 20px 60px rgba(8,53,84,.3)} .asesor-modal-x{position:absolute;top:.5rem;right:.9rem;background:transparent;border:0;font-size:1.9rem;line-height:1;color:#8a93a0;cursor:pointer} .asesor-modal-head{margin-bottom:.8rem;padding-right:1.4rem} .asesor-modal-brand{font-weight:700;color:#004c82;font-size:1rem} .asesor-modal-title{font-weight:700;color:#083554;font-size:1.5rem;margin:.1rem 0 0} .asesor-modal-sello{color:#42414d;font-size:.95rem;margin-bottom:1rem!important;line-height:1.5} .asesor-modal-precio{font-weight:700;color:#d4441a;font-size:1.35rem} .asesor-modal-reno{font-size:.88rem;color:#42414d;margin:.4rem 0 1rem!important;display:flex;gap:.4rem;align-items:flex-start} .asesor-modal-reno i{color:#004c82;margin-top:.1rem} .asesor-modal-sub{font-weight:700;color:#083554;font-size:1rem;margin:.4rem 0 .5rem;padding-top:.8rem;border-top:1px solid #eee} .asesor-modal-incluye{margin:0 0 1.2rem!important} @media (min-width:560px){.asesor-modal-incluye{column-count:2;column-gap:1.6rem}} .asesor-modal-incluye li{font-size:.92rem;color:#1d2a3d;padding:.26rem 0;display:flex;gap:.45rem;align-items:flex-start;line-height:1.4;break-inside:avoid} .asesor-modal-incluye i{color:#09a789;margin-top:.15rem} .asesor-modal .asesor-modal-cta{display:block;text-align:center;text-decoration:none} /* ---------- cotizacion ---------- */ #asesor .asesor-cotizacion{margin-top:2rem;background:#f4f2f0;border-radius:8px;padding:2rem 1.6rem;text-align:center} #asesor .asesor-cotizacion-form{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;max-width:560px;margin:0 auto} #asesor .asesor-cot-nombre,#asesor .asesor-cot-email{flex:1 1 180px; border:1px solid #004c82;border-radius:8px;padding:.6rem .8rem;font-size:1rem;outline:0;} #asesor .asesor-cot-nombre:focus,#asesor .asesor-cot-email:focus{border-color:#d4441a} #asesor .asesor-cot-btn{flex:0 0 auto; margin-top: 1.5rem; } #asesor .asesor-cot-feedback{margin-top:.8rem;font-size:1rem} #asesor .asesor-cot-ok{color:#09a789;font-weight:600} #asesor .asesor-cot-err{color:#b3261e} @media screen and (max-width: 425px) { #asesor .asesor-box{ width:100%; max-width:98%; margin: 0;}} @media (max-width:575px){ #asesor .asesor-field{flex-direction:column} #asesor textarea#asesor-input{flex:0 0 auto;min-height:96px} #asesor #asesor-btn{width:100%;align-self:auto;min-height:54px;padding:.8rem 1rem} #asesor .asesor-necesidades{gap:.5rem} }