:root { color-scheme: light; --ink: #1b1d21; --muted: #59616b; --teal: #3099a7; --mint: #57d3a9; --line: #e4e9ec; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.blog-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 12px clamp(20px, 5vw, 64px); background: #f7f8fa; border-bottom: 1px solid var(--line); }
.blog-brand img { display: block; width: 72px; height: auto; }
.blog-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.blog-header nav a:hover, .blog-header nav a[aria-current] { color: var(--teal); }
.blog-hero { padding: clamp(72px, 9vw, 130px) 20px; text-align: center; background: linear-gradient(145deg, #e9f4f5, #f7f9fa 55%, #e7f7ef); }
.blog-hero h1 { max-width: 1040px; margin: 20px auto 28px; font: 800 clamp(44px, 6vw, 78px)/1.08 Montserrat, Inter, sans-serif; letter-spacing: -0.05em; }
.blog-hero h1 span { color: var(--teal); }
.blog-hero > p { max-width: 770px; margin: auto; color: var(--muted); font-size: clamp(18px, 2vw, 21px); line-height: 1.6; }
.blog-kicker { display: block; margin: 0 0 14px; color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.blog-list { max-width: 1180px; margin: auto; padding: clamp(60px, 8vw, 100px) 20px; }
.blog-list > h2 { margin: 0 0 32px; font: 800 clamp(32px, 4vw, 48px)/1.12 Montserrat, Inter, sans-serif; letter-spacing: -0.04em; }
.blog-card { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 20px 55px rgba(35, 88, 92, 0.1); }
.blog-card-art { display: flex; min-height: 350px; flex-direction: column; justify-content: space-between; padding: 36px; background: linear-gradient(150deg, #2597a8, #5cdaad); color: #fff; }
.blog-card-art span { font: 800 clamp(100px, 12vw, 160px)/0.8 Montserrat, Inter, sans-serif; letter-spacing: -0.08em; }
.blog-card-art strong { max-width: 270px; font: 800 30px/1.08 Montserrat, Inter, sans-serif; }
.blog-card-copy { align-self: center; padding: clamp(30px, 5vw, 60px); }
.blog-card-copy h3 { margin: 0 0 22px; font: 800 clamp(30px, 4vw, 48px)/1.08 Montserrat, Inter, sans-serif; letter-spacing: -0.04em; }
.blog-card-copy h3 a:hover { color: var(--teal); }
.blog-card-copy > p:not(.blog-kicker) { color: var(--muted); font-size: 17px; line-height: 1.65; }
.blog-link, .article-back { display: inline-block; color: var(--teal); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.blog-link:hover, .article-back:hover { color: var(--ink); }
.blog-next { margin: 30px 0 0; color: var(--muted); font-weight: 600; }
.blog-footer { display: flex; justify-content: space-between; gap: 20px; padding: 32px clamp(20px, 5vw, 64px); color: var(--muted); background: #f7f8fa; border-top: 1px solid var(--line); font-size: 14px; }
.blog-footer a:hover { color: var(--teal); }
.article-page { padding: clamp(40px, 6vw, 82px) 20px 100px; }
.article-shell { max-width: 860px; margin: auto; }
.article-back { margin-bottom: 52px; }
.article-header { margin-bottom: 50px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.article-header h1 { margin: 0 0 26px; font: 800 clamp(42px, 6vw, 70px)/1.08 Montserrat, Inter, sans-serif; letter-spacing: -0.05em; }
.article-deck { margin: 0 0 24px; color: var(--muted); font-size: clamp(20px, 2.5vw, 25px); line-height: 1.5; }
.article-byline { margin: 0; color: var(--muted); font-size: 14px; }
.article-byline a { color: #238997; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article-byline a:hover { color: var(--ink); }
.article-body { font-size: 18px; line-height: 1.8; }
.article-summary { margin: 0 0 42px; padding: clamp(22px, 4vw, 32px); border-left: 5px solid #43c9a4; border-radius: 0 18px 18px 0; background: #effaf6; }
.article-body .article-summary-label { margin: 0 0 10px; color: #168477; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.article-body .article-summary p:last-child { margin-bottom: 0; }
.article-body p { margin: 0 0 1.25em; }
.article-body h2 { margin: 2.1em 0 0.7em; font: 800 clamp(29px, 4vw, 40px)/1.17 Montserrat, Inter, sans-serif; letter-spacing: -0.035em; }
.article-body h3 { margin: 1.7em 0 0.6em; font-size: 24px; line-height: 1.25; }
.article-body strong { font-weight: 800; }
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.article-body li { margin-bottom: 0.35em; }
.article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-body a:hover { color: var(--ink); }
.article-body hr { height: 1px; margin: 58px 0; border: 0; background: var(--line); }
.simulator { margin: 36px 0 44px; overflow: hidden; border: 1px solid #d5e9e7; border-radius: 26px; background: #f5faf9; box-shadow: 0 22px 60px rgba(20, 91, 95, .13); font-size: 15px; line-height: 1.5; }
.simulator-heading { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 38px); background: linear-gradient(110deg, #e6f4f5 0%, #edfaf2 100%); }
.simulator-heading::after { position: absolute; top: -82px; right: -58px; width: 245px; height: 245px; border: 1px solid rgba(43, 153, 165, .15); border-radius: 50%; box-shadow: 0 0 0 29px rgba(79, 211, 167, .09), 0 0 0 65px rgba(79, 211, 167, .06); content: ""; pointer-events: none; }
.simulator-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #218594; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.simulator-brand > span:last-child > span { margin: 0 5px; color: #60bda8; }
.simulator-brand-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #fff; color: #279e9d; box-shadow: 0 5px 15px rgba(28, 113, 117, .13); }
.simulator-brand-icon svg { width: 21px; height: 21px; }
.simulator-heading h3 { position: relative; z-index: 1; max-width: 690px; margin: 0 0 10px; font: 800 clamp(27px, 3.5vw, 36px)/1.16 Montserrat, Inter, sans-serif; letter-spacing: -.035em; }
.simulator-heading h3 span { color: #2baaa0; }
.article-body .simulator-heading p { position: relative; z-index: 1; margin: 0; color: #52686c; font-size: 15px; }
.simulator-workspace { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.simulator-input-panel { min-width: 0; padding: clamp(24px, 3vw, 34px); background: #fff; }
.simulator-output-panel { position: relative; display: flex; min-width: 0; flex-direction: column; padding: clamp(24px, 3vw, 34px); background: radial-gradient(circle at 90% 0%, #277f82, transparent 48%), #172b31; color: #fff; }
.simulator-output-panel::before { position: absolute; top: 0; right: 0; width: 112px; height: 112px; background-image: radial-gradient(rgba(103, 221, 178, .28) 1.4px, transparent 1.4px); background-size: 13px 13px; content: ""; pointer-events: none; }
.article-body .simulator-step { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin: 0 0 24px; font-size: 13px; font-weight: 800; }
.simulator-step span { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #e2f7ee; color: #137d7a; font-size: 12px; }
.simulator-output-panel .simulator-step span { background: rgba(96, 219, 173, .18); color: #8ff0c6; }
.simulator-fields, .comment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.simulator-fields { gap: 17px 14px; }
.simulator-fields .simulator-wide { grid-column: 1 / -1; }
.simulator label, .comment-form label { display: block; font-size: 14px; font-weight: 700; }
.simulator label { color: #23363b; font-size: 12px; }
.simulator input:not([type="range"]), .comment-form input:not([type="checkbox"]), .comment-form textarea { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid #bfcfd2; border-radius: 10px; background: white; color: var(--ink); font: inherit; }
.simulator input:not([type="range"]) { height: 45px; border-color: #d4e4e3; background: #f8fbfb; font-size: 14px; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.simulator input:not([type="range"]):focus { border-color: #2aa8a5; outline: 0; box-shadow: 0 0 0 3px rgba(78, 211, 169, .22); }
.simulator input[type="range"] { display: block; width: 100%; margin-top: 19px; accent-color: #4ed3a7; cursor: pointer; }
.simulator output { float: right; color: #168c8e; font-weight: 800; }
.simulator-task-bubble { position: relative; align-self: flex-start; max-width: 100%; padding: 8px 13px; border: 1px solid rgba(141, 238, 203, .3); border-radius: 12px 12px 12px 3px; background: rgba(91, 213, 166, .12); color: #a9f4d3; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.simulator-task-bubble span:first-child { margin-right: 5px; }
.article-body .simulator-output-label { margin: 30px 0 0; color: #d0e4e2; font-size: 15px; }
.simulator-main-number { display: block; margin-top: 5px; color: #72e5b6; font: 800 clamp(54px, 8vw, 75px)/1 Montserrat, Inter, sans-serif; letter-spacing: -.07em; }
.simulator-meter { height: 10px; overflow: hidden; margin: 27px 0 29px; border-radius: 20px; background: rgba(255, 255, 255, .2); }
.simulator-meter span { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2eacc0, #68e2af); transition: width .2s ease; }
.simulator-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.simulator-results > div { min-width: 0; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .22); }
.simulator-results span { display: block; min-height: 38px; color: #c0d9d9; font-size: 11px; line-height: 1.4; font-weight: 600; }
.simulator-results strong { display: block; margin-top: 6px; color: white; font: 800 clamp(17px, 2.2vw, 22px)/1.15 Montserrat, Inter, sans-serif; overflow-wrap: anywhere; }
.article-body .simulator-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; margin-top: auto; padding: 12px 15px; border-radius: 11px; background: #65dca9; color: #123237; font-size: 13px; font-weight: 800; text-align: center; text-decoration: none; transition: transform .15s, background .15s; }
.article-body .simulator-whatsapp:hover { transform: translateY(-2px); background: #8ce9bf; color: #123237; }
.simulator-whatsapp svg { width: 20px; height: 20px; flex: none; }
.article-body .simulator-note { margin: 0; padding: 17px clamp(24px, 3vw, 34px); border-top: 1px solid #e3eeec; color: #627477; background: #f6fbfa; font-size: 12px; line-height: 1.5; }
.comments { margin-top: 72px; padding-top: 54px; border-top: 1px solid var(--line); }
.comments h2 { margin: 0 0 16px; font: 800 clamp(30px, 4vw, 42px)/1.15 Montserrat, Inter, sans-serif; letter-spacing: -0.035em; }
.comments > p { margin: 0 0 28px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.comment-form { padding: clamp(22px, 4vw, 34px); border-radius: 20px; background: #f4f8f9; }
.comment-form > label { margin-top: 18px; }
.comment-form textarea { min-height: 140px; resize: vertical; }
.optional { color: var(--muted); font-weight: 400; }
.comment-form .comment-consent { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 13px; line-height: 1.55; font-weight: 400; }
.comment-consent input { margin: 3px 0 0; accent-color: var(--teal); }
.comment-form button { margin-top: 22px; padding: 15px 22px; border: 0; border-radius: 10px; background: #238997; color: white; font: 800 15px Inter, sans-serif; cursor: pointer; }
.comment-form button:hover { background: #176c78; }
.comment-form button:disabled { opacity: .6; cursor: wait; }
.comment-status { min-height: 20px; margin: 14px 0 0; font-size: 14px; }
.comment-honeypot { position: absolute; left: -10000px; height: 1px; overflow: hidden; }
.comment-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 44px 0 18px; }
.comment-list-heading h3 { margin: 0; font: 800 25px Montserrat, Inter, sans-serif; }
.comment-list-heading span, .comment-empty { color: var(--muted); font-size: 14px; }
.comment-list { display: grid; gap: 14px; }
.comment-card { padding: 24px; border: 1px solid var(--line); border-radius: 14px; }
.comment-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.comment-card-header strong { font-size: 16px; }
.comment-card-header time { color: var(--muted); font-size: 13px; }
.comment-card p { margin: 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.article-end { margin-top: 70px; padding: clamp(28px, 5vw, 48px); background: linear-gradient(135deg, #e9f4f5, #eefaf3); border-radius: 22px; }
.article-end h2 { margin: 0 0 24px; font: 800 clamp(26px, 4vw, 38px)/1.17 Montserrat, Inter, sans-serif; letter-spacing: -0.03em; }
@media (max-width: 700px) {
  .blog-header { flex-wrap: wrap; }
  .blog-header nav { gap: 18px; }
  .blog-card { grid-template-columns: 1fr; }
  .blog-card-art { min-height: 220px; }
  .blog-card-art span { font-size: 100px; }
  .article-body { font-size: 17px; }
  .simulator-workspace, .comment-form-grid { grid-template-columns: 1fr; }
  .simulator-output-panel { min-height: 360px; }
  .comment-card-header { display: block; }
  .comment-card-header time { display: block; margin-top: 4px; }
  .blog-footer { flex-direction: column; }
}
@media (max-width: 430px) {
  .simulator-fields { grid-template-columns: 1fr; }
  .simulator-heading, .simulator-input-panel, .simulator-output-panel { padding: 24px; }
  .simulator-results { gap: 10px; }
}