@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&family=DM+Sans:wght@400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F7F5F0;--card:#fff;--border:#E2DDD6;
  --text:#1A1916;--muted:#6B6860;
  --accent:#1B6B45;--al:#E1F5EE;--am:#1D9E75;
  --warn-bg:#FAEEDA;--warn-text:#854F0B;
  --danger:#A32D2D;--info-bg:#EFF6FF;
  --info-border:#85B7EB;--info-text:#185FA5;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;min-width:320px}
img{max-width:100%;height:auto}
a{color:var(--accent)}

/* ADBLOCK OVERLAY */
#adblock-overlay{display:none;position:fixed;inset:0;background:rgba(26,25,22,0.82);z-index:9999;align-items:center;justify-content:center;padding:1rem}
#adblock-overlay.show{display:flex}
.adblock-box{background:#fff;border-radius:16px;padding:2rem;max-width:420px;width:100%;text-align:center}
.adblock-box h2{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:.75rem}
.adblock-box p{font-size:14px;color:#6B6860;line-height:1.6;margin-bottom:1.5rem}
.ab-btn{display:block;width:100%;background:#1B6B45;color:#fff;border:none;border-radius:8px;padding:.875rem;font-size:15px;font-weight:500;cursor:pointer;margin-bottom:.75rem;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent}
.ab-skip{font-size:13px;color:#6B6860;cursor:pointer;text-decoration:underline;background:none;border:none}

/* HEADER */
header{background:#fff;border-bottom:1px solid var(--border);padding:.875rem 1.25rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:.75rem}
.logo{font-family:'Sora',sans-serif;font-weight:600;font-size:.9rem;color:var(--accent);display:flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0}
.logo-dot{width:8px;height:8px;background:var(--am);border-radius:50%;flex-shrink:0}

/* Hamburger */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:.375rem;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;margin:5px 0;transition:all .25s}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.header-nav{display:flex;gap:.875rem;align-items:center}
.header-nav a{font-size:13px;color:var(--muted);text-decoration:none;transition:color .15s;white-space:nowrap}
.header-nav a:hover{color:var(--accent)}
.header-nav a.active{color:var(--accent);font-weight:500}

@media(max-width:600px){
  .menu-toggle{display:block}
  .header-nav{display:none;position:fixed;top:53px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;padding:1rem 1.25rem;gap:0;z-index:99;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
  .header-nav.open{display:flex}
  .header-nav a{padding:.625rem 0;width:100%;border-bottom:1px solid var(--border);font-size:15px}
  .header-nav a:last-child{border-bottom:none}
}

/* AD BANNERS */
.ad-banner{background:#fff;border:1px dashed #C8C3BB;border-radius:8px;padding:.75rem 1.25rem;text-align:center;font-size:12px;color:#9B9790;margin:1rem auto;max-width:960px}
.ad-side{background:#fff;border:1px dashed #C8C3BB;border-radius:8px;padding:1rem;text-align:center;font-size:12px;color:#9B9790;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.25rem}

/* MAIN LAYOUT */
main{padding:1.25rem 1.25rem 3rem;max-width:960px;margin:0 auto;width:100%}
.two-col{display:grid;grid-template-columns:1fr 270px;gap:1.25rem;align-items:start}
@media(max-width:720px){.two-col{grid-template-columns:1fr}.ad-side{display:none}}

/* TABS */
.tabs-wrap{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:1.25rem}
.tab{background:#fff;border:1px solid var(--border);border-radius:8px;padding:.45rem .75rem;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:'DM Sans',sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent}
.tab:hover{border-color:var(--am);background:var(--al)}
.tab.active{border-color:var(--accent);background:var(--al);color:var(--accent)}
@media(max-width:480px){.tab{font-size:12px;padding:.4rem .625rem}}

/* CALC CARD */
.calc-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.25rem;margin-bottom:1.25rem}
.calc-title{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:.25rem}
.calc-subtitle{font-size:13px;color:var(--muted);margin-bottom:1.25rem}

/* PAGE HERO */
.page-hero{margin-bottom:1.75rem;padding-top:.5rem}
.page-hero h1{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:600;line-height:1.3;margin-bottom:.625rem}
.page-hero p{font-size:15px;color:var(--muted);line-height:1.7;max-width:600px}
@media(max-width:480px){.page-hero h1{font-size:1.3rem}.page-hero p{font-size:14px}}

/* BREADCRUMB */
.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:1.25rem}
.breadcrumb a{color:var(--accent);text-decoration:none}
.breadcrumb span{margin:0 .375rem}

/* FORM FIELDS */
.field{margin-bottom:.875rem}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:.375rem}
.field input,.field select{width:100%;border:1px solid var(--border);border-radius:8px;padding:.625rem .875rem;font-size:16px;font-family:'DM Sans',sans-serif;background:#fff;color:var(--text);outline:none;transition:border-color .15s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6860' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem}
.field input:focus,.field select:focus{border-color:var(--am)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}

/* RESULT BOXES */
.rbox{background:var(--al);border:1px solid #9FE1CB;border-radius:10px;padding:1rem 1.125rem;margin-top:.875rem}
.rbox-blue{background:var(--info-bg);border:1px solid var(--info-border);border-radius:10px;padding:1rem 1.125rem;margin-top:.75rem}
.rbox-warn{background:var(--warn-bg);border:1px solid #FAC775;border-radius:10px;padding:1rem 1.125rem;margin-top:.75rem;font-size:13px;color:var(--warn-text);line-height:1.6}
.rrow{display:flex;justify-content:space-between;align-items:baseline;padding:.4rem 0;border-bottom:1px solid #C0E8D8;font-size:14px;gap:.5rem}
.rrow:last-child{border-bottom:none}
.rrow.total .rl{font-weight:500;font-size:15px}
.rrow.total .rv{font-size:1.2rem;font-weight:600;color:var(--accent)}
.rrow.sub .rv{color:var(--danger)}
.rl{color:var(--muted);flex-shrink:0}
.rv{font-weight:500;text-align:right;word-break:break-all}
@media(max-width:360px){.rrow{flex-direction:column;gap:.2rem}.rv{text-align:left}.rrow.total .rv{font-size:1.05rem}}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:.375rem;font-size:12px;padding:4px 10px;border-radius:20px;margin-bottom:1rem}
.bw{background:var(--warn-bg);color:var(--warn-text)}
.bi{background:var(--al);color:var(--accent)}

/* SECTION LABEL */
.section-label{font-size:13px;font-weight:500;color:var(--text);margin:1.25rem 0 .5rem;padding-bottom:.375rem;border-bottom:1px solid var(--border)}

/* TRAMOS TABLE */
.tramos-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:.5rem}
.tramos-table th{text-align:left;color:var(--muted);font-weight:500;padding:.5rem .625rem;border-bottom:1px solid var(--border)}
.tramos-table td{padding:.5rem .625rem;border-bottom:1px solid var(--border)}
.tramos-table tr.hl td{background:var(--al);font-weight:500;color:var(--accent)}
@media(max-width:400px){.tramos-table{font-size:12px}.tramos-table th,.tramos-table td{padding:.375rem .4rem}}

/* INFO / ALERT BOXES */
.alert-box{background:var(--warn-bg);border:1px solid #FAC775;border-radius:10px;padding:1rem 1.125rem;margin-bottom:1.25rem;font-size:14px;color:var(--warn-text);line-height:1.6}
.info-box{background:var(--al);border:1px solid #9FE1CB;border-radius:10px;padding:1rem 1.125rem;margin-bottom:1.25rem;font-size:14px;color:#0F6E56;line-height:1.6}

/* CONTENT SECTIONS */
.content-section{margin-bottom:2rem}
.content-section h2{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.content-section h3{font-size:.95rem;font-weight:500;margin-bottom:.5rem;margin-top:1rem}
.content-section p{font-size:15px;line-height:1.75;margin-bottom:.875rem}
.content-section ul{padding-left:1.25rem;margin-bottom:.875rem}
.content-section li{font-size:15px;line-height:1.75;margin-bottom:.25rem}
.content-section a{color:var(--accent)}

/* TOOL GRID */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1.5rem}
.tool-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem}
.tool-card-icon{font-size:20px;margin-bottom:.5rem}
.tool-card-name{font-size:14px;font-weight:500;margin-bottom:.25rem}
.tool-card-desc{font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:380px){.tool-grid{grid-template-columns:1fr 1fr}}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:.875rem 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-size:15px;font-weight:500;margin-bottom:.375rem}
.faq-a{font-size:14px;color:var(--muted);line-height:1.7}

/* LEGAL */
.legal-updated{font-size:12px;color:var(--muted);margin-bottom:1.5rem;padding:.5rem .875rem;background:#F7F5F0;border-radius:6px;display:inline-block}

/* FOOTER */
footer{background:#fff;border-top:1px solid var(--border);padding:1.5rem 1.25rem;text-align:center;font-size:12px;color:var(--muted);margin-top:3rem}
footer a{color:var(--muted);text-decoration:none;margin:0 .375rem}
footer a:hover{color:var(--accent)}
footer div+div{margin-top:.5rem}

/* TOUCH */
@media(hover:none){
  .tab:hover{background:#fff;border-color:var(--border)}
  .tab.active{background:var(--al);border-color:var(--accent)}
  button,a,[onclick]{-webkit-tap-highlight-color:transparent}
}

/* PRINT */
@media print{
  header,footer,.ad-banner,.ad-side,#adblock-overlay{display:none!important}
  .two-col{grid-template-columns:1fr!important}
  .rbox{break-inside:avoid}
}