remote.css

*,
*::before,
*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}

:root{
  --bg:#f7fbf8;
  --ink-900:#0e2418;
  --ink-700:#365043;
  --ink-500:#6a8077;

  --brand-700:#2f6e49;
  --brand-600:#3f8f63;
  --brand-500:#55b57d;
  --brand-400:#78c99a;
  --brand-300:#a7ddbe;
  --brand-200:#d7efe3;
  --brand-100:#eef7f2;

  --accent:#f59e0b;
  --card:#ffffff;
  --line:#e6eee9;
  --radius:14px;
  --shadow:0 10px 30px rgba(16,37,27,.06);
}

body{background:var(--bg);color:var(--ink-900)}
a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700)}
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:32px 0}

.navbar{background:#fff!important;border-bottom:1px solid var(--line)}
.navbar-brand strong{color:var(--brand-700)}
.navbar .nav-link{color:var(--ink-700)}
.navbar .nav-link:hover,
.navbar .nav-link.active{color:var(--brand-700)}

.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;margin:12px auto;width:min(1120px,92%);color:var(--brand-700);font-weight:800}
.brand .logo{font-size:1.25rem}

.card,.wrap,.result{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  width:min(1120px,92%);
  margin:18px auto;
  padding:22px;
}

.subtitle{color:var(--ink-700);margin:0 0 12px}
.field-label{display:block;font-weight:700;margin:8px 0;color:var(--brand-700)}
.url,input[type="url"],input[type="text"]{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink-900);outline:none;box-shadow:0 2px 0 rgba(16,37,27,.02) inset
}
.url:focus,input[type="url"]:focus,input[type="text"]:focus{
  border-color:var(--brand-400);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-300) 60%, transparent);
}
.hint{color:var(--ink-500)}

.btn-primary.big,#btn-validar{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;border-radius:12px;border:0;cursor:pointer;
  font-weight:800;background:var(--brand-500);color:#fff;
  transition:filter .15s ease,transform .05s ease;
}
#btn-validar:hover{filter:brightness(1.06)}
#btn-validar:active{transform:translateY(1px)}
#btn-validar:disabled{opacity:.6;cursor:not-allowed}

.veredito{
  display:inline-block;padding:6px 10px;border-radius:999px;font-weight:800;margin:10px 0 6px 0;
  background:var(--brand-200);color:var(--brand-700)
}
.veredito.safe{background:#eaf6ef;color:#246b3a}
.veredito.attn{background:#fff6e6;color:#8a5a08}
.veredito.risk{background:#fdecec;color:#a11a1a}
.veredito.unkn{background:#edf2f0;color:#33423a}
.explain{color:var(--ink-700);margin-top:6px}

.checklist{
  margin-top:18px;padding:16px;border-radius:12px;
  background:var(--brand-100);border:1px dashed color-mix(in oklab, var(--brand-300) 55%, var(--line))
}
.checklist h3{margin:0 0 10px 0;color:var(--brand-700)}
.checklist ul{list-style:none;padding:0;margin:0}
.check-item{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.check-item .ico{width:24px;height:24px;border-radius:12px;display:grid;place-items:center;font-weight:800}
.check-item.ok .ico{background:#e5f6ec;color:#2e7d54}
.check-item.bad .ico{background:#fde7e7;color:#b42318}
.check-item.na .ico{background:#e8eeec;color:#52655c}
.check-item .title{font-weight:800}
.check-item .desc{color:var(--ink-700)}

.section--proteger .cards,.section--about .cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.section--proteger .card-tip,.section--about .card-tip{
  grid-column:span 6;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px
}
.section--proteger h2,.section--about h2{color:var(--brand-700);margin:0 0 8px}
.section--about .bullets{margin:10px 0 0 0;padding-left:18px;color:var(--ink-700)}
.section--about .note{color:var(--ink-500)}
.callout,.section--proteger .callout{
  grid-column:span 12;border:1px dashed var(--brand-300);background:linear-gradient(180deg,var(--brand-100),#fff);
  border-radius:14px;padding:16px
}
@media (max-width:760px){
  .section--proteger .card-tip,.section--about .card-tip{grid-column:span 12}
}

.accordion__toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--brand-700);font-weight:800
}
.accordion__panel{padding-top:10px}

.foot{width:min(1120px,92%);margin:22px auto;color:var(--ink-500);border-top:1px solid var(--line);padding:18px 0;text-align:center}