:root{
--blue:#1877f2;
--blue-dark:#0f5fc7;
--blue-soft:#edf5ff;
--green:#16a34a;
--green-soft:#ecfdf3;
--orange:#f59e0b;
--orange-soft:#fff7ed;
--red:#dc2626;
--text:#172033;
--muted:#667085;
--bg:#f4f7fb;
--card:#fff;
--border:#e2e8f0;
--shadow:0 14px 38px rgba(31,50,81,.08);
}
*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
margin:0;
background:
radial-gradient(
circle at top right,
rgba(24,119,242,.08),
transparent 28%
),
var(--bg);
color:var(--text);
font-family:Tahoma,Arial,sans-serif;
line-height:1.8;
}
a{
color:inherit;
text-decoration:none;
}
.terms-page{
width:min(1160px,calc(100% - 28px));
margin:0 auto;
padding:24px 0 60px;
}
.terms-hero{
position:relative;
overflow:hidden;
padding:38px;
border-radius:28px;
color:#fff;
background:
radial-gradient(
circle at 10% 10%,
rgba(255,255,255,.20),
transparent 28%
),
linear-gradient(
135deg,
#0d5dd5,
#1877f2 58%,
#66aaff
);
box-shadow:0 24px 55px rgba(24,119,242,.20);
}
.terms-hero::after{
content:"";
position:absolute;
width:250px;
height:250px;
left:-100px;
bottom:-150px;
border-radius:50%;
background:rgba(255,255,255,.08);
}
.hero-content{
position:relative;
z-index:2;
max-width:850px;
}
.hero-tag{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:7px 12px;
border:1px solid rgba(255,255,255,.25);
border-radius:999px;
background:rgba(255,255,255,.13);
font-size:12px;
font-weight:900;
}
.terms-hero h1{
margin:0 0 12px;
font-size:clamp(28px,4vw,43px);
line-height:1.35;
font-weight:950;
}
.terms-hero p{
max-width:780px;
margin:0;
color:rgba(255,255,255,.91);
font-size:14px;
font-weight:700;
line-height:1.95;
}
.hero-meta{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:18px;
}
.hero-meta span{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 11px;
border:1px solid rgba(255,255,255,.18);
border-radius:11px;
background:rgba(255,255,255,.12);
font-size:11px;
font-weight:850;
}
.platform-note{
display:flex;
align-items:flex-start;
gap:11px;
margin-top:18px;
padding:15px 16px;
border:1px solid #cfe0f5;
border-radius:17px;
background:#f5f9ff;
color:#43546a;
font-size:12px;
font-weight:750;
line-height:1.8;
}
.platform-note > i{
margin-top:4px;
color:var(--blue);
font-size:18px;
}
.terms-layout{
display:grid;
grid-template-columns:255px minmax(0,1fr);
gap:18px;
margin-top:18px;
align-items:start;
}
.terms-nav{
position:sticky;
top:90px;
padding:16px;
border:1px solid var(--border);
border-radius:20px;
background:#fff;
box-shadow:var(--shadow);
}
.terms-nav strong{
display:block;
margin-bottom:9px;
font-size:14px;
font-weight:950;
}
.terms-nav a{
display:flex;
align-items:center;
gap:9px;
padding:9px 10px;
border-radius:10px;
color:#526174;
font-size:12px;
font-weight:800;
}
.terms-nav a:hover{
background:var(--blue-soft);
color:var(--blue);
}
.terms-nav i{
width:18px;
text-align:center;
color:var(--blue);
}
.terms-content{
overflow:hidden;
border:1px solid var(--border);
border-radius:24px;
background:#fff;
box-shadow:var(--shadow);
}
.content-head{
padding:22px;
border-bottom:1px solid var(--border);
background:linear-gradient(180deg,#fff,#fbfdff);
}
.content-head h2{
margin:0 0 6px;
font-size:20px;
font-weight:950;
}
.content-head p{
margin:0;
color:var(--muted);
font-size:13px;
font-weight:700;
}
.content-body{
padding:0 22px;
}
.term-section{
padding:25px 0;
border-bottom:1px solid #edf1f5;
scroll-margin-top:90px;
}
.term-section:last-child{
border-bottom:0;
}
.section-title{
display:flex;
align-items:center;
gap:11px;
margin:0 0 12px;
font-size:18px;
font-weight:950;
}
.section-icon{
width:40px;
height:40px;
flex:0 0 40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:var(--blue-soft);
color:var(--blue);
}
.term-section p{
margin:0 0 12px;
color:#536174;
font-size:13px;
font-weight:700;
line-height:1.95;
}
.term-list{
display:grid;
gap:9px;
margin:14px 0 0;
padding:0;
list-style:none;
}
.term-list li{
display:flex;
align-items:flex-start;
gap:9px;
padding:12px 13px;
border:1px solid #edf1f5;
border-radius:13px;
background:#fbfcfe;
color:#49586b;
font-size:12px;
font-weight:750;
line-height:1.8;
}
.term-list li > i{
margin-top:5px;
color:var(--green);
}
.service-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:14px;
}
.service-card{
padding:14px;
border:1px solid var(--border);
border-radius:15px;
background:linear-gradient(180deg,#fff,#fafcff);
}
.service-card i{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
margin-bottom:9px;
border-radius:10px;
background:var(--blue-soft);
color:var(--blue);
}
.service-card strong{
display:block;
margin-bottom:4px;
font-size:13px;
font-weight:950;
}
.service-card span{
color:var(--muted);
font-size:11px;
font-weight:700;
line-height:1.7;
}
.callout{
display:flex;
align-items:flex-start;
gap:11px;
margin-top:14px;
padding:14px;
border-radius:15px;
font-size:12px;
font-weight:750;
line-height:1.8;
}
.callout i{
margin-top:4px;
}
.callout.info{
border:1px solid #bfdbfe;
background:#eff6ff;
color:#1e4f91;
}
.callout.info i{
color:#2563eb;
}
.callout.success{
border:1px solid #bbf7d0;
background:var(--green-soft);
color:#166534;
}
.callout.success i{
color:var(--green);
}
.callout.warning{
border:1px solid #fed7aa;
background:var(--orange-soft);
color:#9a4b10;
}
.callout.warning i{
color:#ea580c;
}
.contact-box{
margin-top:14px;
padding:16px;
border:1px solid #d8e6f7;
border-radius:16px;
background:#f7fbff;
}
.contact-box strong{
display:block;
margin-bottom:6px;
font-size:14px;
}
.contact-box p{
margin-bottom:10px;
}
.contact-actions{
display:flex;
flex-wrap:wrap;
gap:9px;
}
.contact-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:43px;
padding:9px 14px;
border-radius:12px;
font-size:12px;
font-weight:950;
}
.contact-btn.whatsapp{
background:#16a34a;
color:#fff;
}
.contact-btn.contact{
border:1px solid #cad8e8;
background:#fff;
color:var(--blue);
}
.terms-footnote{
margin-top:18px;
padding:14px 16px;
border:1px solid var(--border);
border-radius:16px;
background:#fff;
color:var(--muted);
text-align:center;
font-size:11px;
font-weight:750;
line-height:1.8;
}
@media(max-width:900px){
.terms-layout{
grid-template-columns:1fr;
}
.terms-nav{
display:none;
}
}
@media(max-width:700px){
.terms-page{
width:calc(100% - 14px);
padding-top:8px;
padding-bottom:35px;
}
.terms-hero{
padding:23px 17px;
border-radius:20px;
}
.terms-hero h1{
font-size:25px;
}
.terms-hero p{
font-size:12px;
}
.platform-note{
padding:13px;
border-radius:15px;
font-size:12px;
}
.terms-content{
border-radius:19px;
}
.content-head{
padding:17px;
}
.content-head h2{
font-size:18px;
}
.content-body{
padding:0 16px;
}
.term-section{
padding:21px 0;
}
.section-title{
font-size:16px;
}
.service-grid{
grid-template-columns:1fr;
}
.contact-actions{
display:grid;
grid-template-columns:1fr;
}
.contact-btn{
width:100%;
}
}