/* ==========================================================================
   WEBZELIA: Local city landing page styles (reusable for every city page)
   Every class starts with "lc-" so nothing clashes with web.css, blog.css
   or custom-websites.css. Load order: web.css first, then this file.
   ========================================================================== */

.lc-wrap{ max-width:1220px; margin:0 auto; padding:0 24px; }
.lc-block{ padding:92px 0; background:var(--bg); }
.lc-block--white{ background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.lc-head{ max-width:720px; margin-bottom:46px; }
.lc-tag{ display:inline-block; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--blue); margin-bottom:14px; }
.lc-h2{ font-family:var(--font-display); font-size:var(--fs-section); font-weight:600; color:var(--navy); line-height:1.15; }
.lc-sub{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); margin-top:16px; }
.lc-text p{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); margin-bottom:18px; }
.lc-text a, .lc-sub a{ color:var(--blue); font-weight:600; border-bottom:1px solid rgba(22,115,230,.3); }

.lc-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:var(--fs-sm); padding:14px 28px; border-radius:40px; border:2px solid transparent; cursor:pointer; transition:transform .25s, background .25s, color .25s; }
.lc-btn--solid{ background:#1746A2; color:#fff; }
.lc-btn--solid:hover{ background:var(--navy); transform:translateY(-3px); }
.lc-btn--line{ border-color:var(--navy); color:var(--navy); }
.lc-btn--line:hover{ background:var(--navy); color:#fff; transform:translateY(-3px); }
.lc-btn--light{ border-color:rgba(255,255,255,.5); color:#fff; }
.lc-btn--light:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); }
.lc-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Hero ---------- */
.lc-hero{ padding:68px 0 60px; background:var(--bg); }
.lc-hero .lc-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
.lc-crumbs{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-soft); margin-bottom:20px; }
.lc-crumbs a{ color:var(--blue); }
.lc-hero h1{ font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3.3rem); font-weight:600; color:var(--navy); line-height:1.1; margin-bottom:20px; }
.lc-lead{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); max-width:580px; margin-bottom:26px; }
.lc-lead strong{ color:var(--navy); }
.lc-chips{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.lc-chips span{ font-size:var(--fs-xs); color:var(--text-soft); display:flex; align-items:center; gap:8px; }
.lc-chips i{ color:var(--blue); }
.lc-hero-media{ position:relative; }
.lc-hero-media img{ width:100%; aspect-ratio:4/3; object-fit: contain; border-radius:var(--radius-md); box-shadow:0 30px 60px rgba(10,42,92,.25); }
.lc-clock{ position:absolute; left:-16px; bottom:26px; background:var(--navy); color:#fff; padding:16px 20px; border-radius:var(--radius-md); box-shadow:var(--shadow); min-width:220px; }
.lc-clock small{ display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--sky); margin-bottom:6px; }
.lc-clock div{ font-size:var(--fs-sm); line-height:1.7; color:rgba(255,255,255,.9); }
.lc-clock b{ font-family:var(--font-display); font-size:1.15rem; color:#fff; }

/* ---------- Quick answer / facts ---------- */
.lc-answer{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.lc-facts{ background:var(--navy); color:#fff; border-radius:var(--radius-md); padding:30px; }
.lc-facts h3{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600; margin-bottom:14px; }
.lc-facts dl div{ display:flex; gap:16px; padding:11px 0; border-top:1px solid rgba(255,255,255,.16); font-size:var(--fs-sm); line-height:1.5; }
.lc-facts dt{ flex:0 0 112px; color:var(--sky); font-weight:700; }
.lc-facts dd{ color:rgba(255,255,255,.88); }
.lc-facts a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.35); }

/* ---------- Cards ---------- */
.lc-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lc-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.lc-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; transition:transform .3s, box-shadow .3s; }
.lc-block--white .lc-card{ background:var(--bg); }
.lc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.lc-icon{ width:46px; height:46px; border-radius:12px; background:var(--tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:18px; }
.lc-card h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:8px; font-weight:600; }
.lc-card p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-normal); }
.lc-card a.lc-more{ display:inline-block; margin-top:12px; font-size:var(--fs-xs); font-weight:700; color:var(--blue); }

.lc-split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.lc-split--top{ align-items:start; }
.lc-split-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--border); box-shadow:var(--shadow); }

.lc-list li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); color:var(--text); line-height:1.6; }
.lc-list i{ color:var(--blue); margin-top:4px; }
.lc-list strong{ color:var(--navy); }

.lc-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.lc-tags span{ font-size:var(--fs-sm); color:var(--navy); background:var(--paper); border:1px solid var(--border); padding:9px 16px; border-radius:30px; font-weight:600; }
.lc-block--white .lc-tags span{ background:var(--tint); }

/* ---------- Tables ---------- */
.lc-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--paper); }
.lc-table{ width:100%; border-collapse:collapse; min-width:660px; }
.lc-table th, .lc-table td{ padding:16px 20px; text-align:left; font-size:var(--fs-sm); border-bottom:1px solid var(--border); vertical-align:top; line-height:1.55; }
.lc-table thead th{ background:var(--tint); color:var(--navy); font-family:var(--font-display); font-size:var(--fs-md); }
.lc-table thead th.lc-us{ background:var(--navy); color:#fff; }
.lc-table tbody th{ color:var(--navy); font-weight:700; width:22%; }
.lc-table td{ color:var(--text-soft); }
.lc-table td.lc-us{ color:var(--navy); font-weight:600; background:#f4f8ff; }
.lc-table tr:last-child th, .lc-table tr:last-child td{ border-bottom:none; }

/* ---------- Packages ---------- */
.lc-pack{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:30px; display:flex; flex-direction:column; }
.lc-pack--hot{ border:2px solid var(--blue); box-shadow:var(--shadow); position:relative; }
.lc-pack--hot::before{ content:'Most popular'; position:absolute; top:-13px; left:24px; background:var(--blue); color:#fff; font-size:.72rem; font-weight:700; padding:4px 14px; border-radius:20px; }
.lc-pack h3{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--navy); margin-bottom:6px; font-weight:600; }
.lc-pack > p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:1.6; margin-bottom:16px; }
.lc-pack ul{ flex:1; margin-bottom:22px; }
.lc-pack li{ display:flex; gap:10px; padding:8px 0; font-size:var(--fs-sm); color:var(--text); line-height:1.5; }
.lc-pack li i{ color:var(--blue); margin-top:4px; }
.lc-pack .lc-btn{ justify-content:center; }

/* ---------- Process ---------- */
.lc-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:lcstep; }
.lc-step{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; counter-increment:lcstep; }
.lc-step::before{ content:counter(lcstep); display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--sky); font-family:var(--font-display); font-weight:600; margin-bottom:16px; }
.lc-step h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:8px; font-weight:600; }
.lc-step p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-normal); }

/* ---------- Work ---------- */
.lc-work{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.lc-work:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.lc-work img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.lc-work div{ padding:18px 20px 22px; }
.lc-work small{ display:block; font-family:var(--font-mono); font-size:.7rem; color:var(--blue); margin-bottom:6px; }
.lc-work h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:6px; font-weight:600; }
.lc-work p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:1.6; }

/* ---------- FAQ ---------- */
.lc-faq{ display:flex; flex-direction:column; gap:10px; max-width:900px; }
.lc-faq details{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper); overflow:hidden; }
.lc-block--white .lc-faq details{ background:var(--bg); }
.lc-faq summary{ list-style:none; cursor:pointer; padding:19px 54px 19px 22px; position:relative; font-family:var(--font-display); font-size:var(--fs-md); font-weight:600; color:var(--navy); }
.lc-faq summary::-webkit-details-marker{ display:none; }
.lc-faq summary::after{ content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:1.1rem; line-height:1; color:var(--navy); }
.lc-faq details[open] summary::after{ content:'\2212'; background:var(--blue); border-color:var(--blue); color:#fff; }
.lc-faq details p{ padding:0 22px 22px; font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-loose); }

/* ---------- Contact ---------- */
.lc-contact{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.lc-detail{ display:flex; gap:14px; margin-top:20px; align-items:flex-start; }
.lc-detail i{ color:var(--blue); width:18px; margin-top:4px; }
.lc-detail h4{ font-size:var(--fs-sm); font-weight:700; color:var(--navy); margin-bottom:2px; }
.lc-detail span, .lc-detail a{ font-size:var(--fs-sm); color:var(--text-soft); line-height:1.6; }
.lc-detail a:hover{ color:var(--blue); }
.lc-form{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:34px; box-shadow:var(--shadow); }
.lc-form h3{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--navy); margin-bottom:6px; font-weight:600; }
.lc-form-note{ display:block; font-size:var(--fs-sm); color:var(--text-soft); margin-bottom:22px; }
.lc-form form{ display:flex; flex-direction:column; gap:16px; }
.lc-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lc-form label{ display:block; font-size:var(--fs-xs); font-weight:700; color:var(--navy); margin-bottom:6px; }
.lc-form input, .lc-form select, .lc-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); font-family:var(--font-body); font-size:var(--fs-sm); transition:border-color .25s, box-shadow .25s; }
.lc-form input:focus, .lc-form select:focus, .lc-form textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,115,230,.15); }
.lc-form button{ padding:14px; background:var(--blue); color:#fff; border:2px solid var(--blue); border-radius:var(--radius-sm); font-weight:700; font-size:var(--fs-sm); cursor:pointer; transition:all .25s; }
.lc-form button:hover{ background:var(--navy); border-color:var(--navy); }
.lc-form button:disabled{ opacity:.7; cursor:wait; }

/* ---------- Closing CTA ---------- */
.lc-cta{ background:var(--navy); padding:84px 0; text-align:center; }
.lc-cta .lc-wrap{ max-width:780px; }
.lc-cta h2{ font-family:var(--font-display); font-size:var(--fs-section); font-weight:600; color:#fff; line-height:1.15; margin-bottom:18px; }
.lc-cta p{ font-size:var(--fs-md); color:rgba(255,255,255,.78); line-height:var(--lh-loose); max-width:560px; margin:0 auto 30px; }
.lc-cta .lc-actions{ justify-content:center; }

/* ---------- Mobile quick action bar ---------- */
.lc-bar{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width:1020px){
    .lc-hero .lc-wrap, .lc-answer, .lc-split, .lc-contact{ grid-template-columns:1fr; gap:36px; }
    .lc-grid3{ grid-template-columns:1fr 1fr; }
    .lc-grid4, .lc-steps{ grid-template-columns:1fr 1fr; }
    .lc-clock{ left:14px; }
}
@media (max-width:640px){
    .lc-block{ padding:60px 0; }
    .lc-hero{ padding:40px 0; }
    .lc-grid3, .lc-grid4, .lc-steps, .lc-row{ grid-template-columns:1fr; }
    .lc-actions .lc-btn{ width:100%; justify-content:center; }
    .lc-form{ padding:24px; }
    .lc-facts dl div{ flex-direction:column; gap:2px; }
    .lc-bar{ display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:880; background:var(--navy); box-shadow:0 -6px 20px rgba(0,0,0,.25); padding-bottom:env(safe-area-inset-bottom,0); }
    .lc-bar a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 4px; color:#fff; font-size:.7rem; font-weight:700; }
    .lc-bar a i{ font-size:1.05rem; color:var(--sky); }
    .float-whatsapp{ bottom:78px !important; }
    body{ padding-bottom:62px; }
}