/* Estilos aislados para un artículo y calculadora de Óptica Honda. */
.oh-article{--oh-ink:#102b40;--oh-ink2:#385268;--oh-teal:#076f79;--oh-turq:#09a7ad;--oh-pale:#e9f8f7;--oh-border:#d8e7e9;--oh-orange:#dc8741;color:var(--oh-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.75;max-width:1024px;margin:0 auto;padding:0 12px 56px;overflow-wrap:break-word}
.oh-article *{box-sizing:border-box}
.oh-article h1,.oh-article h2,.oh-article h3{color:var(--oh-ink);line-height:1.22;letter-spacing:-.024em;margin:0 0 18px;font-weight:760}
.oh-article h1{font-size:clamp(2rem,4.6vw,3.45rem)}
.oh-article h2{font-size:clamp(1.55rem,3vw,2.2rem);margin:36px 0 16px}
.oh-article h3{font-size:1.25rem;margin:22px 0 10px}
.oh-article p{margin:0 0 16px}
.oh-article a{color:var(--oh-teal);text-underline-offset:3px}
.oh-article ul{margin:0 0 24px;padding-left:23px}
.oh-article li{margin-bottom:7px}
.oh-article .oh-kicker{font-size:.78rem;letter-spacing:.16em;font-weight:850;text-transform:uppercase;color:#087681;margin-bottom:16px}
.oh-article .oh-intro{font-size:1.17rem;line-height:1.72;color:var(--oh-ink2);max-width:780px}
.oh-article .oh-hero{background:linear-gradient(110deg,#f4fbfb 0%,#fff 66%);border:1px solid var(--oh-border);border-radius:23px;padding:clamp(23px,5vw,52px);margin:18px 0 32px;position:relative;overflow:hidden}
.oh-article .oh-hero:after{content:"";position:absolute;right:-72px;top:-102px;width:260px;height:260px;border:55px solid rgba(0,161,166,.055);border-radius:50%;pointer-events:none}
.oh-article .oh-hero-content{position:relative;z-index:1}
.oh-article .oh-pill{display:inline-block;background:#dff6f4;color:#075866;padding:5px 12px;border-radius:99px;font-size:.78rem;font-weight:750;margin-bottom:18px}
.oh-article .oh-keyline{border-left:4px solid var(--oh-turq);padding:15px 19px;border-radius:0 10px 10px 0;background:#eef9f8;margin:20px 0;color:#214353}
.oh-article .oh-keyline strong{color:#0a5260}
.oh-article .oh-conversion{border:1px solid #cde1e3;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 14px 38px rgba(17,65,74,.07);margin:28px 0 36px}
.oh-article .oh-tool-header{background:#0d3748;padding:23px clamp(18px,4vw,34px);color:#fff}
.oh-article .oh-tool-header h2{color:#fff;font-size:1.6rem;margin:4px 0 8px}
.oh-article .oh-tool-header p{color:#d4ebed;font-size:.94rem;margin:0;max-width:720px}
.oh-article .oh-tool-number{letter-spacing:.16em;font-size:.73rem;text-transform:uppercase;font-weight:800;color:#73e6de}
.oh-article .oh-tool-body{padding:clamp(16px,3.2vw,30px)}
.oh-article .oh-fieldset{border:1px solid #dde9ec;border-radius:14px;padding:17px;margin:0 0 16px;min-width:0}
.oh-article .oh-fieldset legend{padding:0 9px;color:#123b4d;font-weight:800;font-size:1rem}
.oh-article .oh-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.oh-article .oh-field{min-width:0}
.oh-article .oh-field label,.oh-article .oh-distance label{display:block;font-weight:750;font-size:.91rem;margin:0 0 6px;color:#294459}
.oh-article .oh-field small{display:block;font-size:.77rem;color:#69808e;line-height:1.5;margin-top:5px}
.oh-article .oh-field input,.oh-article .oh-distance input{appearance:none;width:100%;max-width:100%;border:1px solid #bed2d7;border-radius:9px;background:#fff;padding:12px 12px;min-height:48px;font:inherit;color:#16384a;box-shadow:none}
.oh-article .oh-field input:focus,.oh-article .oh-distance input:focus{outline:3px solid rgba(9,167,173,.2);border-color:#079da5}
.oh-article .oh-control-bottom{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:18px 0}
.oh-article .oh-distance{flex:0 1 240px}
.oh-article .oh-distance small{display:block;font-size:.8rem;color:#69808e;margin-top:4px}
.oh-article .oh-actions{display:flex;gap:10px;flex-wrap:wrap}
.oh-article button.oh-primary,.oh-article button.oh-secondary,.oh-article button.oh-sample{cursor:pointer;font:inherit;border-radius:10px;padding:12px 19px;font-weight:760;line-height:1.3;transition:background .15s,transform .15s;min-height:47px}
.oh-article button.oh-primary{color:#fff;background:#087982;border:1px solid #087982}
.oh-article button.oh-primary:hover{background:#055d66}
.oh-article button.oh-secondary{color:#345466;background:#fff;border:1px solid #bbd1d5}
.oh-article button.oh-secondary:hover,.oh-article button.oh-sample:hover{background:#eaf6f6}
.oh-article button:focus-visible,.oh-article a:focus-visible{outline:3px solid #f6ad64;outline-offset:3px}
.oh-article .oh-examples{border-top:1px solid #e5eeee;padding-top:17px;margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.oh-article .oh-examples strong{font-size:.87rem;color:#516876;margin-right:3px}
.oh-article button.oh-sample{color:#076974;background:#f3fbfa;padding:9px 13px;border:1px solid #c4e9e7;min-height:39px;font-size:.87rem}
.oh-article .oh-error{background:#fff2ec;color:#8d3419;border:1px solid #ffcaad;border-radius:10px;padding:12px 15px;font-weight:650;margin:16px 0 0}
.oh-article .oh-results{background:#f4fbfa;border-top:1px solid #d5e8e7;padding:clamp(18px,3vw,28px)}
.oh-article .oh-result-heading{font-size:1.25rem;margin:0 0 5px}
.oh-article .oh-result-lead{font-size:.87rem;color:#526e7d;margin:0 0 15px}
.oh-article .oh-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.oh-article .oh-result-card{background:#fff;border:1px solid #d5e5e6;border-radius:13px;padding:19px;min-width:0}
.oh-article .oh-result-eye{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;font-weight:850;color:#096e76}
.oh-article .oh-result-old{font-size:.87rem;color:#66808d;margin:7px 0 10px}
.oh-article .oh-result-number{font-size:clamp(1.42rem,2.8vw,1.9rem);font-weight:850;line-height:1.25;letter-spacing:-.025em;margin:0 0 6px;color:#0c3544;overflow-wrap:anywhere}
.oh-article .oh-result-sub{font-size:.82rem;color:#617987;line-height:1.5;margin:0 0 12px}
.oh-article .oh-result-rounded{border-top:1px solid #e1ebee;padding-top:12px;color:#244b59;font-weight:700;line-height:1.55;margin:0 0 9px;font-size:.9rem}
.oh-article .oh-result-secondary{font-size:.86rem;line-height:1.55;color:#385b6a;margin:9px 0}
.oh-article .oh-result-hint{font-size:.83rem;line-height:1.55;background:#fffaec;color:#765c23;padding:10px;border-radius:8px;margin:9px 0}
.oh-article .oh-result-disclaimer{font-size:.88rem;font-weight:700;background:#fff5e7;border:1px solid #f3dcb4;color:#705226;padding:14px;border-radius:10px;margin:17px 0 0;line-height:1.6}
.oh-article .oh-tool-foot{font-size:.85rem;color:#627989;line-height:1.6;margin-top:16px}
.oh-article .oh-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:24px 0 28px}
.oh-article .oh-step{border:1px solid var(--oh-border);border-radius:14px;padding:20px;background:#fff}
.oh-article .oh-step strong{display:block;color:#037582;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.oh-article .oh-step h3{font-size:1.1rem;margin-bottom:9px}
.oh-article .oh-step p{font-size:.91rem;color:#496778;line-height:1.65;margin:0}
.oh-article .oh-table-wrap{overflow-x:auto;border:1px solid var(--oh-border);border-radius:12px;margin:18px 0 24px}
.oh-article table{width:100%;min-width:570px;border-collapse:collapse;font-size:.94rem;text-align:left;margin:0}
.oh-article th{background:#eaf6f6;color:#144b59;font-weight:800}
.oh-article th,.oh-article td{padding:14px 16px;border-bottom:1px solid #e7eeee}
.oh-article tr:last-child td{border-bottom:none}
.oh-article details{border-bottom:1px solid #dbe9ea;padding:17px 0}
.oh-article details summary{font-weight:750;cursor:pointer;color:#183b50;padding-right:14px}
.oh-article details p{font-size:.95rem;color:#4f6878;margin:13px 0 0}
.oh-article .oh-cta{background:linear-gradient(120deg,#0b3649,#075866);color:#fff;padding:clamp(25px,5vw,40px);border-radius:20px;margin:36px 0 28px}
.oh-article .oh-cta h2{color:#fff;margin:0 0 9px}
.oh-article .oh-cta p{color:#d9edef;max-width:690px}
.oh-article .oh-cta a.oh-whatsapp{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#095b66;text-decoration:none;border-radius:11px;padding:12px 18px;font-weight:820;margin:8px 0 0}
.oh-article .oh-cta a.oh-whatsapp:hover{background:#d6f8ed}
.oh-article .oh-sources{font-size:.83rem;color:#617c88;line-height:1.6;border-top:1px solid #e0ebec;padding-top:17px}
.oh-article .oh-sources ul{padding-left:19px;margin-top:6px}
@media(max-width:670px){.oh-article{padding:0 3px 42px;font-size:15px}.oh-article .oh-hero{padding:21px;border-radius:15px}.oh-article .oh-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.oh-article .oh-field:last-child{grid-column:span 2}.oh-article .oh-result-grid,.oh-article .oh-steps{grid-template-columns:1fr}.oh-article .oh-control-bottom{display:block}.oh-article .oh-actions{margin-top:16px}.oh-article .oh-actions button{flex:1}.oh-article .oh-tool-body{padding:15px}.oh-article .oh-tool-header{padding:21px}}
@media(prefers-reduced-motion:reduce){.oh-article *{scroll-behavior:auto!important;transition:none!important}}
