/* Panama Translator v2 — design system matching the live site */

:root{
  --blue: #2f5aa3;
  --blue-dark: #24447d;
  --blue-darker: #1b3460;
  --navy-ink: #2b2f36;
  --gray-ink: #58606b;
  --paper: #f4f6f9;
  --band: #3f5fa0;
  --footer-bg: #1a1e24;
  --white: #ffffff;
  --radius: 6px;
  --container: 1200px;
  --shadow: 0 10px 30px rgba(20,30,60,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Open Sans', Arial, sans-serif;
  color:var(--navy-ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Poppins', 'Open Sans', Arial, sans-serif;
  color:var(--navy-ink);
  font-weight:600;
  line-height:1.25;
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4vw,2.9rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
ul{margin:0; padding:0}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}

/* Header */
.site-header{
  border-bottom:1px solid #e7eaf0;
  position:sticky; top:0; background:var(--white); z-index:100;
}
.header-top{
  background:var(--white);
  border-bottom:1px solid #eef0f4;
}
.header-top .container{
  display:flex; justify-content:flex-end; align-items:center; gap:18px;
  height:40px;
}
.social-mini{display:flex; gap:12px; align-items:center}
.social-mini a{color:#9aa2ad}
.social-mini svg{width:16px; height:16px}
.lang-flags{display:flex; gap:9px; align-items:center}
.lang-flags a{display:block; line-height:0; opacity:.5; filter:grayscale(.4); transition:opacity .15s, filter .15s}
.lang-flags a img{width:22px; height:15px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(20,30,55,.12)}
.lang-flags a:hover{opacity:.8}
.lang-flags a.is-active{opacity:1; filter:none}

.header-main .container{
  display:flex; align-items:center; justify-content:space-between;
  height:96px; gap:24px;
}
.brand img{height:56px; width:auto}
.main-nav{display:flex; gap:30px; align-items:center}
.main-nav a{
  font-family:'Poppins','Open Sans',sans-serif;
  font-weight:600; font-size:.85rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--navy-ink);
}
.main-nav a:hover, .main-nav a.active{color:var(--blue); text-decoration:none}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:6px}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--navy-ink); margin:5px 0}

/* Page header band */
.page-band{
  background:linear-gradient(120deg,var(--band),var(--blue-dark));
  color:#fff; padding:44px 0;
}
.page-band h1{color:#fff; margin:0; font-size:1.9rem}

/* Hero (home) */
.hero{position:relative; color:#fff; overflow:hidden; padding:0}
.hero-slide{position:relative; min-height:70vh; display:flex; align-items:center}
.hero-slide::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,30,55,.72) 0%, rgba(20,30,55,.35) 55%, rgba(20,30,55,.15) 100%);
  z-index:1;
}
.hero-slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-inner{position:relative; z-index:2; padding-top:70px; padding-bottom:70px; max-width:640px}
.hero h1{color:#fff; font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:.35em}
.hero .lead{font-size:1.15rem; color:rgba(255,255,255,.92); max-width:520px}
.btn{
  display:inline-block; padding:14px 30px; border-radius:3px; font-weight:700;
  font-family:'Poppins','Open Sans',sans-serif; font-size:.85rem; letter-spacing:.04em;
  text-transform:uppercase; border:2px solid transparent; cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-dark); color:#fff}
.btn-outline-white{border-color:#fff; color:#fff}
.btn-outline-white:hover{background:#fff; color:var(--blue-dark)}
.hero-cta{margin-top:8px}

/* Members band */
.members-band{background:var(--band); color:#fff; padding:36px 0}
.members-band .container{display:flex; align-items:center; gap:40px; flex-wrap:wrap}
.members-label{font-size:1.15rem; font-weight:600; max-width:150px; flex-shrink:0}
.members-logos{display:flex; align-items:center; justify-content:space-evenly; gap:44px; flex-wrap:wrap; flex:1}
.members-logos img{max-height:84px; width:auto; filter:brightness(0) invert(1); opacity:.95}
.members-logos img.keep-color{filter:none; opacity:1}

/* Sections */
section{padding:70px 0}
.section-head{max-width:680px; margin:0 auto 40px}
.section-head.center{text-align:center}
.eyebrow{
  font-family:'Poppins','Open Sans',sans-serif; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.78rem; color:var(--blue); margin-bottom:.6em;
}

/* Service cards on home */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.svc-card{border:1px solid #e7eaf0; border-radius:var(--radius); overflow:hidden; background:#fff}
.svc-card img{height:200px; width:100%; object-fit:cover}
.svc-card-body{padding:24px}
.svc-card h3{margin-bottom:.4em}
.split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.split img{border-radius:var(--radius)}

/* Check list (services pages) */
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 40px}
.check-item{display:flex; gap:14px; align-items:flex-start}
.check-circle{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
}
.check-circle svg{width:16px; height:16px}
.check-item strong{display:block; font-size:1.02rem}
.check-item p{margin:.15em 0 0; color:var(--gray-ink); font-size:.95rem}
.svc-block{padding-bottom:10px}
.svc-block + .svc-block{border-top:1px solid #eef0f4; padding-top:60px}
.svc-lang-list{text-align:center; font-size:1.05rem; color:var(--gray-ink); margin-bottom:44px}
.svc-media-row{display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:start; margin-bottom:10px}
.svc-media-row img{border-radius:var(--radius); width:100%; object-fit:cover; height:100%}
.svc-intro{font-weight:600; margin-bottom:26px}

/* Delivery band */
.delivery-band{background:var(--paper); padding:70px 0}
.delivery-band .container{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.delivery-band .truck-icon{width:100%; max-width:420px}
.delivery-band h2{margin-bottom:.4em}

/* Testimonials */
.testi-wrap{text-align:center; max-width:760px; margin:0 auto}
.testi-quote{font-size:1.15rem; font-style:italic; color:var(--navy-ink)}
.testi-name{font-family:'Poppins','Open Sans',sans-serif; font-weight:700; color:var(--blue); letter-spacing:.03em; margin-top:14px}
.testi-role{color:var(--gray-ink); font-size:.9rem}
.testi-dots{display:flex; gap:8px; justify-content:center; margin-top:26px}
.testi-dots button{width:9px; height:9px; border-radius:50%; border:0; background:#d6dbe4; padding:0; cursor:pointer}
.testi-dots button.is-active{background:var(--blue)}
.testi-link{margin-top:22px}

/* Logo wall (clients page) */
.logo-wall{
  background:var(--band); padding:40px; border-radius:var(--radius);
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
}
.logo-wall .logo-cell{
  background:#fff; border-radius:4px; display:flex; align-items:center; justify-content:center;
  padding:16px; height:100px;
}
.logo-wall .logo-cell.on-dark{background:var(--blue-darker)}
.logo-wall .logo-cell img{max-height:64px; max-width:100%; object-fit:contain}

/* Case studies */
.case-study{padding:56px 0}
.case-study:nth-child(even){background:var(--paper)}
.case-study img{max-width:280px; margin:0 auto}
.case-quote-mark{font-size:2.6rem; color:var(--blue); line-height:1; font-family:Georgia,serif}
.case-cite{color:var(--gray-ink); margin-top:14px; font-size:.95rem}

/* Case study carousel (combined, bigger, full-width, no logos) */
.case-carousel{margin:0 auto; text-align:center}
.case-carousel .case-card{display:none}
.case-carousel .case-card.is-active{display:block}
.case-carousel h3{font-size:1.7rem; margin-bottom:.3em}
.case-carousel .case-quote-mark{font-size:3.2rem}
.case-carousel p{font-size:1.15rem; max-width:900px; margin:0 auto}
.case-carousel .case-cite{font-size:1rem; margin-top:14px}

/* Google reviews teaser */
.google-reviews{padding:56px 0; text-align:center}
.google-reviews-badge{
  display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e7eaf0;
  border-radius:40px; padding:10px 22px; margin-bottom:18px; font-weight:700;
}
.google-reviews-stars{color:#f5b400; letter-spacing:2px}
.google-reviews p{max-width:600px; margin:0 auto 22px; color:var(--gray-ink)}

/* Phone CTA */
.phone-cta{background:var(--paper); padding:70px 0}
.phone-cta .container{display:grid; grid-template-columns:.8fr 1fr auto; gap:40px; align-items:center}
.phone-cta img{max-width:260px; margin:0 auto}
.contact-methods{display:flex; flex-direction:column; gap:20px}
.contact-method{display:flex; gap:14px; align-items:flex-start}
.contact-method .ico{
  width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-method .ico svg{width:20px; height:20px}
.contact-method strong{display:block}
.contact-method span{color:var(--gray-ink); font-size:.92rem}

/* Team */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:760px; margin:0 auto}
.team-card{background:#fff; border:1px solid #e7eaf0; border-radius:var(--radius); overflow:hidden; text-align:center}
.team-card img{width:100%; height:280px; object-fit:cover; object-position:center top}
.team-card-body{padding:22px}
.team-card h3{margin-bottom:.1em}
.team-role{color:var(--blue); font-weight:600; font-size:.92rem; margin-bottom:.5em}
.team-desc{color:var(--gray-ink); font-size:.92rem}
.team-more{
  background:none; border:0; color:var(--navy-ink); font-weight:700; cursor:pointer;
  padding:14px 0; font-family:'Poppins','Open Sans',sans-serif; font-size:.85rem;
}

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,25,35,.65); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.is-open{display:flex}
.modal-box{
  background:#fff; border-radius:var(--radius); max-width:760px; width:100%;
  max-height:82vh; overflow-y:auto; padding:44px; position:relative;
}
.modal-close{
  position:absolute; top:18px; right:18px; background:none; border:0; cursor:pointer;
  font-size:1.4rem; color:var(--gray-ink); line-height:1;
}
.modal-box h3{color:var(--gray-ink); font-weight:600}
.modal-box p{color:var(--navy-ink)}

/* Forms */
.contact-layout{display:grid; grid-template-columns:1.5fr 1fr; gap:50px}
.form-field{margin-bottom:18px}
.form-field input, .form-field textarea{
  width:100%; padding:14px 16px; border:1px solid #d7dce4; border-radius:4px;
  font-family:inherit; font-size:.95rem; background:#fbfcfd;
}
.form-field textarea{min-height:130px; resize:vertical}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--blue); background:#fff}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.recaptcha-fake{
  border:1px solid #d7dce4; border-radius:4px; padding:14px 18px; display:flex;
  align-items:center; gap:12px; max-width:320px; margin-bottom:22px; color:var(--gray-ink); font-size:.9rem;
}
.form-status{font-size:.92rem; margin-bottom:16px; display:none}
.form-status.is-success{display:block; color:#1a7f4a}
.form-status.is-error{display:block; color:#c0392b}
button[type="submit"][disabled]{opacity:.6; cursor:not-allowed}
.contact-side .contact-method{margin-bottom:26px}

/* FAQ */
.faq-list{max-width:820px; margin:0 auto}
.faq-category{
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.04em; color:var(--blue);
  margin:44px 0 16px;
}
.faq-category:first-child{margin-top:0}
.faq-item{border:1px solid #e7eaf0; border-radius:var(--radius); margin-bottom:12px; overflow:hidden}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font-family:'Poppins','Open Sans',sans-serif; font-weight:600; background:#fff;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .icon-plus{position:absolute; right:20px; top:50%; width:16px; height:16px; margin-top:-8px}
.faq-item .icon-plus::before, .faq-item .icon-plus::after{
  content:''; position:absolute; background:var(--blue); transition:transform .2s ease, opacity .2s ease;
}
.faq-item .icon-plus::before{left:0; top:7px; width:100%; height:2px}
.faq-item .icon-plus::after{top:0; left:7px; width:2px; height:100%}
.faq-item[open] .icon-plus::after{opacity:0; transform:rotate(90deg)}
.faq-item[open] summary{border-bottom:1px solid #e7eaf0}
.faq-body{padding:16px 20px 20px; color:var(--gray-ink)}
.faq-body p{margin-bottom:10px}
.faq-body p:last-child{margin-bottom:0}
.faq-body ul{padding-left:22px; list-style:disc; margin:8px 0}
.faq-body li{margin-bottom:6px}
.faq-cta{background:var(--paper); padding:60px 0; text-align:center}
.faq-cta h2{margin-bottom:.3em}
.faq-cta p{color:var(--gray-ink); margin-bottom:22px}

/* Blog */
.blog-list{display:flex; flex-direction:column; gap:0}
.blog-item{display:grid; grid-template-columns:340px 1fr; gap:34px; padding:34px 0; border-bottom:1px solid #eef0f4}
.blog-item img{border-radius:var(--radius); height:200px; width:100%; object-fit:cover}
.blog-date{color:var(--blue); font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:.4em}
.blog-post h1{font-size:1.9rem}
.blog-post-media{border-radius:var(--radius); overflow:hidden; margin-bottom:30px}
.blog-post-body{max-width:760px; margin:0 auto}
.blog-post-body h2{font-size:1.3rem; margin-top:1.6em}
.blog-stretch-card{max-width:340px; margin:18px 0}
.blog-nav{display:flex; justify-content:space-between; margin-top:40px}

/* Footer */
.site-footer{background:var(--footer-bg); color:rgba(255,255,255,.75); padding-top:64px}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1.4fr; gap:40px; padding-bottom:40px}
.footer-brand img{height:48px; margin-bottom:16px}
.footer-brand p{color:rgba(255,255,255,.55); font-size:.92rem}
.footer-contact-item{display:flex; gap:10px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.footer-contact-item svg{width:18px; height:18px; flex-shrink:0; margin-top:2px; color:rgba(255,255,255,.55)}
.footer-contact-item a, .footer-contact-item span{color:rgba(255,255,255,.85)}
.footer-social{display:flex; gap:16px; margin-top:16px}
.footer-social a{color:rgba(255,255,255,.6)}
.footer-social svg{width:18px; height:18px}
.footer-members{text-align:center}
.footer-members-label{font-size:.95rem; margin-bottom:18px; color:rgba(255,255,255,.85)}
.footer-members-logos{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:center}
.footer-members-logos img{max-height:68px; width:auto; margin:0 auto; filter:brightness(0) invert(1); opacity:.9}
.footer-members-logos img.on-dark-native{filter:none; opacity:1}
.footer-credit{
  border-top:1px solid rgba(255,255,255,.1); padding:22px 0; text-align:center; font-size:.85rem; color:rgba(255,255,255,.4);
}

/* WhatsApp float */
.wa-float{
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); z-index:200;
}
.wa-float svg{width:28px; height:28px}

/* Responsive */
@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:136px 0 0 0; background:#fff; flex-direction:column;
    align-items:flex-start; padding:24px; gap:6px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
  }
  .main-nav.is-open{transform:translateX(0)}
  .main-nav a{padding:12px 0; width:100%; border-bottom:1px solid #f0f1f4}
  .nav-toggle{display:block}
  .grid-3, .split, .check-grid, .svc-media-row, .case-study, .contact-layout, .footer-grid, .delivery-band .container{
    grid-template-columns:1fr;
  }
  .split img{order:-1}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .blog-item{grid-template-columns:1fr}
  .phone-cta .container{grid-template-columns:1fr; text-align:center}
  .members-band .container{flex-direction:column; text-align:center}
  .footer-members-logos{grid-template-columns:repeat(3,1fr); gap:16px}
  .footer-members-logos img{max-height:44px}
  .team-grid{grid-template-columns:1fr; gap:24px}
}
@media (max-width: 640px){
  .logo-wall{grid-template-columns:repeat(2,1fr); padding:20px}
  .header-top .container{justify-content:center}
  .hero-slide{min-height:480px}
}

/* Links page (linktree-style landing) */
body.links-page{
  margin:0; min-height:100vh; box-sizing:border-box;
  background:linear-gradient(180deg, #0060e6 0%, #00a0f4 55%, #6fdcff 100%);
  display:flex; align-items:flex-start; justify-content:center; padding:24px 20px 40px;
}
.links-wrap{max-width:420px; width:100%; text-align:center}
.links-langs{display:flex; justify-content:center; gap:10px; margin-bottom:16px}
.links-langs a{display:block; line-height:0}
.links-langs a img{width:26px; height:18px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.5); opacity:.8}
.links-langs a.is-active img{opacity:1; box-shadow:0 0 0 2px #fff}
.links-logo{width:100px; height:auto; margin:0 auto 10px; display:block}
.links-title{color:#fff; font-size:1.5rem; font-weight:600; margin-bottom:22px; font-family:'Poppins','Open Sans',sans-serif}
.links-btn-list{display:flex; flex-direction:column; gap:12px; margin-bottom:26px; padding:0; list-style:none}
.links-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:2px solid rgba(255,255,255,.9); border-radius:12px; padding:14px 20px;
  color:#fff; font-weight:700; font-size:1.1rem; font-family:'Poppins','Open Sans',sans-serif;
  background:rgba(255,255,255,.08);
}
.links-btn:hover{background:rgba(255,255,255,.2); text-decoration:none}
.links-btn svg{width:20px; height:20px; flex-shrink:0}
.links-social-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 0; justify-items:center}
.links-social-grid a{color:#fff}
.links-social-grid svg{width:32px; height:32px}
@media (max-width:420px){
  .links-logo{width:84px}
  .links-title{font-size:1.3rem; margin-bottom:18px}
}