:root{
  --bg:#F4F7FA;
  --ink:#1B2733;
  --ink-soft:#5B6B7A;
  --blue:#163A5C;
  --blue-dark:#0D2740;
  --blue-mid:#1E4A73;
  --orange:#E08E2B;
  --orange-dark:#C77A1E;
  --line:#DCE4EC;
  --card:#FFFFFF;
  --radius:8px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Work Sans',sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
button{font-family:inherit; cursor:pointer;}

[data-en]{display:none;}
body.lang-en [data-es]{display:none;}
body.lang-en [data-en]{display:inline;}
body.lang-en h1[data-en], body.lang-en h2[data-en], body.lang-en h3[data-en],
body.lang-en h4[data-en], body.lang-en p[data-en], body.lang-en li[data-en],
body.lang-en div[data-en], body.lang-en label[data-en]{display:block;}

/* ============ UTILITY BAR ============ */
.utility-bar{background:var(--blue-dark); color:#9FB4C6; font-size:12.5px;}
.utility-bar .wrap{display:flex; justify-content:space-between; align-items:center; padding:7px 24px;}
.utility-left{display:flex; gap:18px; align-items:center;}
.utility-left a{color:#9FB4C6;}
.utility-left a:hover{color:var(--orange);}
.lang-toggle-sm{display:flex; gap:2px;}
.lang-toggle-sm button{background:transparent; border:none; color:#8098AC; font-size:12px; font-weight:700; padding:2px 6px;}
.lang-toggle-sm button.active{color:var(--orange);}
@media (max-width:640px){ .utility-left span:not(:first-child){display:none;} }

/* ============ HEADER ============ */
header{background:var(--blue); border-bottom:3px solid var(--orange); position:sticky; top:0; z-index:20;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:24px;}
.logo{font-size:22px; font-weight:800; color:#fff; flex-shrink:0;}
.logo span{color:var(--orange);}
nav.mainnav{display:flex; gap:22px;}
nav.mainnav a{color:#D6E3EF; font-size:14px; font-weight:500;}
nav.mainnav a:hover{color:var(--orange);}
.btn-post{background:var(--orange); color:var(--blue-dark); padding:10px 16px; border-radius:6px; font-weight:700; font-size:13.5px; white-space:nowrap; flex-shrink:0;}
@media (max-width:820px){ nav.mainnav{display:none;} }

/* ============ HERO ============ */
.hero{background:linear-gradient(180deg,var(--blue),var(--blue-mid)); color:#fff; padding:44px 0 34px; text-align:center;}
.hero h1{font-size:clamp(26px,4vw,38px); line-height:1.15;}
.hero p.lede{margin:12px auto 0; font-size:15.5px; color:#C1D2E0; max-width:52ch;}

.search-panel{
  margin:26px auto 0; background:#fff; border-radius:8px; padding:12px;
  display:flex; gap:10px; max-width:560px;
}
.search-panel input{flex:1; border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-family:inherit; font-size:14px;}
.search-panel button{background:var(--orange); border:none; color:var(--blue-dark); padding:0 18px; border-radius:6px; font-weight:700; font-size:13.5px;}
@media (max-width:560px){ .search-panel{flex-direction:column;} }

/* ============ CATEGORY RAIL ============ */
.cat-rail-section{background:var(--card); border-bottom:1px solid var(--line); padding:22px 0;}
.cat-rail{display:flex; gap:10px; overflow-x:auto; justify-content:center; flex-wrap:wrap;}
.cat-pill{display:flex; flex-direction:column; align-items:center; gap:7px; width:96px; flex-shrink:0; padding:10px 6px; border-radius:8px;}
.cat-pill:hover{background:#F4F7FA;}
.cat-pill .icon{width:44px; height:44px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center;}
.cat-pill .icon svg{width:22px; height:22px; stroke:var(--orange); fill:none; stroke-width:1.8;}
.cat-pill span{font-size:12px; font-weight:600; text-align:center; line-height:1.25;}

/* ============ CATEGORY ROWS (rendered by script.js) ============ */
.cat-row{padding:38px 0; border-bottom:1px solid var(--line);}
.cat-row:last-of-type{border-bottom:none;}
.cat-row-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px;}
.cat-row-head h2{font-size:20px;}
.cat-row-head a{font-size:13.5px; font-weight:700; color:var(--blue-mid); border-bottom:2px solid var(--orange); padding-bottom:1px; white-space:nowrap;}
.cat-row-empty{color:var(--ink-soft); font-size:14px; font-style:italic;}

.card-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:980px){ .card-row{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-row{grid-template-columns:1fr;} }
.card-row-3col{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:900px){ .card-row-3col{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-row-3col{grid-template-columns:1fr;} }

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; height:100%;}
.card-cat{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--orange-dark); margin-bottom:6px;}
.card-title{font-size:15px; font-weight:600; line-height:1.3; margin-bottom:12px;}
.card-foot{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-soft); margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}
.verified{color:var(--blue); font-weight:600;}

/* ============ AREAS ============ */
.areas-section{background:var(--blue-dark); padding:36px 0;}
.areas-head{color:#fff; margin-bottom:16px;}
.areas-head .eyebrow{color:var(--orange); text-transform:uppercase; font-size:11.5px; font-weight:700; letter-spacing:.06em; margin-bottom:4px;}
.areas-head h2{font-size:19px; color:#fff;}
.areas-chips{display:flex; gap:8px; flex-wrap:wrap;}
.areas-chips a{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#D6E3EF; padding:7px 14px; border-radius:20px; font-size:13px; font-weight:600;}
.areas-chips a:hover{border-color:var(--orange); color:var(--orange);}

/* ============ STATS ============ */
.stats-section{background:var(--card); padding:30px 0; border-bottom:1px solid var(--line);}
.stats-row{display:flex; justify-content:center; gap:56px; flex-wrap:wrap; text-align:center;}
.stats-row b{font-size:26px; display:block; color:var(--blue);}
.stats-row span{font-size:12.5px; color:var(--ink-soft);}

/* ============ HOW IT WORKS ============ */
.steps-section{background:var(--blue); color:#fff; padding:42px 0;}
.steps-section .eyebrow{color:var(--orange); text-transform:uppercase; font-size:11.5px; font-weight:700; letter-spacing:.06em; margin-bottom:4px;}
.steps-section h2{font-size:20px; color:#fff; margin-bottom:20px;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:820px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .steps{grid-template-columns:1fr;} }
.step{background:rgba(255,255,255,.06); border-radius:8px; padding:16px;}
.step .num{color:var(--orange); font-weight:700; font-size:12.5px; margin-bottom:8px;}
.step h3{font-size:15px; margin-bottom:5px; font-weight:600;}
.step p{font-size:13px; color:#AEC2D4; margin:0; line-height:1.5;}

/* ============ GENERIC SECTION ============ */
.section{padding:42px 0;}
.section-head{margin-bottom:20px;}
.section-head .eyebrow{text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:var(--orange-dark); font-weight:700; margin-bottom:4px;}
.section-head h2{font-size:20px;}
.section-head p{color:var(--ink-soft); font-size:14px; margin-top:6px;}

/* ============ CONTACT FORM ============ */
.contact-section{background:var(--card);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
@media (max-width:780px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info{background:var(--blue); color:#fff; border-radius:10px; padding:26px;}
.contact-info h3{color:#fff; font-size:18px; margin-bottom:10px;}
.contact-info p{color:#C1D2E0; font-size:14px; line-height:1.6; margin:0 0 16px;}
.contact-info .row{display:flex; gap:10px; align-items:center; margin-bottom:10px; font-size:14px;}
.contact-info .row svg{width:16px; height:16px; stroke:var(--orange); flex-shrink:0;}

form.contact-form{display:flex; flex-direction:column; gap:12px;}
form.contact-form label{font-size:13px; font-weight:600; margin-bottom:4px; display:block;}
form.contact-form label[data-en]{display:none;}
body.lang-en form.contact-form label[data-en]{display:block;}
body.lang-en form.contact-form label[data-es]{display:none;}
form.contact-form input, form.contact-form textarea{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px;
  font-family:inherit; font-size:14px; background:#fff;
}
form.contact-form textarea{resize:vertical; min-height:110px;}
form.contact-form button{
  background:var(--orange); color:var(--blue-dark); border:none; border-radius:6px;
  padding:12px; font-weight:700; font-size:14.5px; margin-top:4px;
}
.form-note{font-size:12px; color:var(--ink-soft); margin-top:6px;}
.form-success{display:none; background:#E8F5EC; border:1px solid #B7DEC2; color:#1E6B34; padding:12px 14px; border-radius:6px; font-size:14px; margin-bottom:12px;}

/* ============ PRICING ============ */
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:820px){ .pricing-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .pricing-grid{grid-template-columns:1fr;} }
.price-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 16px; display:flex; flex-direction:column;}
.price-card.featured{border-color:var(--orange); border-width:2px;}
.price-card h3{font-size:16px; margin-bottom:2px;}
.price-card .amount{font-size:26px; font-weight:800; margin:6px 0; color:var(--blue);}
.price-card .amount span{font-size:12.5px; font-weight:500; color:var(--ink-soft);}
.price-card ul{list-style:none; margin:10px 0 16px; padding:0; flex-grow:1;}
.price-card li{font-size:12.5px; padding:5px 0; color:var(--ink-soft); border-top:1px solid var(--line);}
.price-card li:first-child{border-top:none;}
.price-card button{background:var(--blue); color:#fff; border:none; border-radius:6px; padding:9px; font-weight:700; font-size:13px;}
.price-card.featured button{background:var(--orange); color:var(--blue-dark);}

/* ============ BROWSE ALL ADS PAGE ============ */
.ads-hero{background:linear-gradient(180deg,var(--blue),var(--blue-mid)); color:#fff; padding:38px 0 28px; text-align:center;}
.ads-hero h1{font-size:clamp(24px,3.6vw,32px);}
.ads-search{margin:22px auto 0; background:#fff; border-radius:8px; padding:12px; display:flex; gap:10px; max-width:520px;}
.ads-search input{flex:1; border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-family:inherit; font-size:14px;}

.ads-filter-bar{background:var(--card); border-bottom:1px solid var(--line); padding:16px 0; position:sticky; top:0; z-index:15;}
.ads-filter-pills{display:flex; gap:8px; overflow-x:auto; flex-wrap:wrap;}
.ads-filter-pills button{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:8px 16px;
  font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.ads-filter-pills button.active{background:var(--blue); border-color:var(--blue); color:#fff;}
.ads-filter-pills button:hover:not(.active){border-color:var(--orange);}

.ads-count{font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
.ads-empty{text-align:center; color:var(--ink-soft); padding:60px 0; font-size:15px;}

/* ============ FOOTER ============ */
footer{background:var(--blue-dark); color:#9FB4C6; padding:36px 0 20px; font-size:12.5px;}
.foot-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.08);}
.foot-phone{color:#fff; font-weight:700; font-size:15px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:24px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.08);}
@media (max-width:720px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-grid h4{color:#D6E3EF; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
.foot-grid ul{list-style:none; margin:0; padding:0;}
.foot-grid li{margin-bottom:7px;}
.foot-grid a:hover{color:var(--orange);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:14px;}