/* =============================================================
   PET SUPPLIES EXPORTERS INC — styles.css
   Brand palette (hex directo, sin variables, para portar a Elementor):
     Azul Profundo   #003985   |  Verde Energía  #00af53
     Azul Eléctrico  #0079d9   |  Naranja Energía #fe6200
     Gris Claro      #ebeced   |  Gris Oscuro     #242e36
   Tipografías: Poppins (headings) · Inter (body)
   ============================================================= */

/* ---------- Reset & base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#242e36;background:#ffffff;line-height:1.7;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:'Poppins',system-ui,sans-serif;color:#242e36;line-height:1.18;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.25rem;font-weight:600}
p{max-width:66ch}
a{color:#0079d9;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{list-style:none}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section--gray{background:#ebeced}
.section-head{max-width:720px;margin:0 auto 3rem;text-align:center}
.eyebrow{display:inline-block;font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:#0079d9;margin-bottom:.9rem}
.section-head p{margin:0 auto;color:#5b6670}
.lead{font-size:1.12rem;color:#5b6670}

/* ---------- Accessibility ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:#fe6200;color:#fff;padding:.7rem 1.2rem;z-index:2000;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #fe6200;outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.96rem;line-height:1;white-space:nowrap;
  padding:.9rem 1.7rem;border-radius:10px;border:2px solid transparent;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.btn--orange{background:#fe6200;color:#fff;box-shadow:0 8px 18px -8px rgba(254,98,0,.6)}
.btn--orange:hover{background:#e85800;transform:scale(1.05)}
.btn--green{background:#00af53;color:#fff;box-shadow:0 8px 18px -8px rgba(0,175,83,.55)}
.btn--green:hover{background:#009647;transform:scale(1.05)}
.btn--blue{background:#0079d9;color:#fff}
.btn--blue:hover{background:#0063b3;transform:scale(1.05)}
.btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn--outline-white:hover{background:#fff;color:#003985;transform:scale(1.05)}
.btn--outline-blue{background:transparent;color:#003985;border-color:#003985}
.btn--outline-blue:hover{background:#003985;color:#fff}
.btn--lg{padding:1rem 2rem;font-size:1rem}

/* =============================================================
   HEADER  (Elementor: Header Builder / Nav Menu + Image + Button)
   ============================================================= */
.header{position:sticky;top:0;z-index:1000;background:#003985;border-bottom:1px solid rgba(255,255,255,.12);
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease}
.header.scrolled{background:#003070;box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:78px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:50px;width:auto;filter:brightness(0) invert(1)} /* logo en blanco sobre azul */
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{font-family:'Poppins',sans-serif;font-weight:500;font-size:.95rem;color:#ffffff;white-space:nowrap;
  position:relative;padding-block:.4rem}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#00af53;
  transform:scaleX(0);transition:transform .25s ease}
.nav-links a:hover{color:#9fd4ff}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:.8rem;flex:none}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer;font-size:1.6rem;padding:.3rem}

/* ── Language toggle EN/ES ── */
.lang-toggle{display:inline-flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:3px;gap:2px}
.lang-toggle button{background:transparent;border:none;color:#ffffff;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:.78rem;letter-spacing:.04em;padding:.35rem .75rem;border-radius:999px;
  cursor:pointer;transition:background .2s ease,color .2s ease;min-width:36px}
.lang-toggle button:hover{background:rgba(255,255,255,.12)}
.lang-toggle button.active{background:#fe6200;color:#fff;box-shadow:0 4px 12px -4px rgba(254,98,0,.5)}

/* =============================================================
   HERO  (Elementor: Section bg image + overlay + Heading + Text + 2 Buttons)
   ============================================================= */
.hero{position:relative;color:#fff;isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2;
  background:url('assets/pets-collage.webp') center/cover no-repeat}
.hero__overlay{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,rgba(0,57,133,.88) 0%,rgba(0,57,133,.72) 55%,rgba(0,121,217,.55) 100%)}
.hero__inner{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center;
  padding-block:clamp(4rem,9vw,7rem)}
.hero h1{color:#fff;margin-bottom:1.2rem;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.hero h1 .hero__h1-accent{color:#00d265}
.hero__sub{font-size:1.18rem;color:rgba(255,255,255,.92);margin-bottom:2rem;max-width:54ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem}

/* ── Hero card: Mr. Jorge ── */
.hero__jorge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:20px;
  padding:2rem 1.8rem 1.6rem;backdrop-filter:blur(10px);text-align:center;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.4)}
.hero__jorge img{width:190px;height:230px;border-radius:18px;object-fit:cover;object-position:center 20%;
  margin:0 auto 1.4rem;border:4px solid #ffffff;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.hero__jorge .yrs{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.55rem;line-height:1.2;
  color:#fff;letter-spacing:-.01em;padding:0 .3rem;min-height:3.6em;display:flex;align-items:center;justify-content:center}
.hero__jorge-divider{height:1px;background:rgba(255,255,255,.28);margin:1.3rem auto 1rem;width:80%}
.hero__jorge .nm{font-family:'Poppins',sans-serif;font-weight:600;color:#fff;font-size:1rem;line-height:1.4}
.hero__jorge .nm .role{font-weight:400;color:rgba(255,255,255,.85)}

/* =============================================================
   TRUST BAR  (Elementor: Section 4 columns + Counter widget x4)
   ============================================================= */
.trustbar{background:#242e36}
.trustbar .container{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:2.6rem}
.stat{text-align:center;color:#fff}
.stat__num{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,2.8rem);color:#00d265;line-height:1}
.stat__num .suffix{color:#fff}
.stat__label{font-size:.95rem;color:rgba(255,255,255,.8);margin-top:.5rem}

/* =============================================================
   ABOUT  (Elementor: Section 2 cols Image + Text; Testimonial widget)
   ============================================================= */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about__img{border-radius:16px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(36,46,54,.4);aspect-ratio:1/1}
.about__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.about h2{margin-bottom:1.2rem}
.about p{color:#5b6670;margin-bottom:1.1rem}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.6rem}
.value{display:flex;align-items:center;gap:.7rem;font-family:'Poppins',sans-serif;font-weight:500;color:#003985}
.value i{color:#00af53;font-size:1.15rem;width:24px;text-align:center}
.quote{margin-top:3rem;background:#fff;border-left:5px solid #fe6200;border-radius:12px;
  box-shadow:0 16px 40px -22px rgba(36,46,54,.35);padding:2rem;display:flex;gap:1.5rem;align-items:center}
.quote__icon{width:70px;height:70px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#003985 0%,#0079d9 100%);color:#fff;font-size:1.6rem;
  box-shadow:0 8px 20px -8px rgba(0,57,133,.5)}
.quote blockquote{font-family:'Poppins',sans-serif;font-size:1.12rem;font-style:italic;color:#242e36;font-weight:500}
.quote .who{margin-top:.7rem;font-size:.92rem;color:#5b6670;font-style:normal}
.quote .who strong{color:#003985}

/* =============================================================
   SERVICES  (Elementor: Inner Section + Icon Box widget x5)
   ============================================================= */
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.service{background:#fff;border:1px solid #e3e5e7;border-radius:16px;padding:2rem 1.7rem;
  box-shadow:0 4px 14px -8px rgba(36,46,54,.18);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.service:hover{transform:translateY(-6px);border-color:#fe6200;box-shadow:0 22px 40px -20px rgba(36,46,54,.3)}
.service__icon{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:#e9f2fb;color:#0079d9;font-size:1.5rem;margin-bottom:1.2rem}
.service:hover .service__icon{background:#fff1e8;color:#fe6200}
.service h3{margin-bottom:.5rem;color:#003985}
.service p{font-size:.96rem;color:#5b6670;max-width:none}

/* =============================================================
   AREAS WE SERVE  (4 audience cards: distributors, retail, LATAM, chains)
   ============================================================= */
.areas-section{position:relative;isolation:isolate;overflow:hidden;color:#fff}
.areas-section__bg{position:absolute;inset:0;z-index:-2;
  background:url('assets/areas-we-serve.webp') center/cover no-repeat}
.areas-section__overlay{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(36,46,54,.92) 0%,rgba(36,46,54,.85) 55%,rgba(254,98,0,.78) 100%)}
.areas-section .eyebrow--on-dark{color:#ffc59a}
.areas-section .h2--on-dark{color:#fff}
.areas-section .lead--on-dark{color:rgba(255,255,255,.9)}

.areas__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative;z-index:1}
.area{background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:1.8rem 1.5rem;
  text-align:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.25);backdrop-filter:blur(6px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.area:hover{transform:translateY(-6px);border-color:#00af53;box-shadow:0 22px 40px -16px rgba(0,0,0,.35)}
.area__icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#e6f7ee;color:#00af53;font-size:1.7rem;margin:0 auto 1.1rem}
.area:hover .area__icon{background:#00af53;color:#fff}
.area h3{margin-bottom:.55rem;color:#003985;font-size:1.12rem}
.area p{font-size:.93rem;color:#5b6670;max-width:none}

/* =============================================================
   BRANDS  (Elementor: HTML widget / filterable gallery plugin)
   ============================================================= */
.brands__controls{display:flex;flex-direction:column;gap:1.3rem;margin-bottom:2.4rem}
.brands__search{position:relative;max-width:440px;margin-inline:auto;width:100%}
.brands__search i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#8a929b}
.brands__search input{width:100%;font-family:inherit;font-size:1rem;padding:.85rem 1rem .85rem 2.6rem;
  border:2px solid #d7dade;border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s}
.brands__search input:focus{outline:none;border-color:#0079d9;box-shadow:0 0 0 3px rgba(0,121,217,.15)}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.filter{font-family:'Poppins',sans-serif;font-weight:500;font-size:.9rem;cursor:pointer;
  padding:.55rem 1.15rem;border-radius:999px;border:2px solid #d7dade;background:#fff;color:#5b6670;
  transition:all .2s ease}
.filter:hover{border-color:#0079d9;color:#0079d9}
.filter.active{background:#003985;border-color:#003985;color:#fff}
.brands__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.brand-card{position:relative;background:#fff;border:1px solid #e3e5e7;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:1.5rem;
  box-shadow:0 4px 14px -8px rgba(36,46,54,.18);transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease;
  display:flex;flex-direction:column}
.brand-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -20px rgba(36,46,54,.3)}
.brand-card.hide{display:none}
.brand-card.filtering{opacity:0;transform:scale(.95)}
.brand-card__logo{width:130px;height:130px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  padding:1.4rem;background:#ffffff;border:2px solid #ebeced;
  box-shadow:0 4px 14px -6px rgba(36,46,54,.18);overflow:hidden;flex:none}
.brand-card:hover .brand-card__logo{border-color:#0079d9;box-shadow:0 12px 24px -10px rgba(0,121,217,.3)}
.brand-card__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.brand-card__fallback{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.5rem;color:#003985;
  text-align:center;width:100%;height:100%;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.brand-card__body{padding:1.1rem 1.2rem 1.3rem;text-align:center;margin-top:auto;width:100%}
.brand-card__name{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.02rem;color:#242e36;margin-bottom:.6rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.brand-card__badges{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center}
.badge{display:inline-block;font-size:.68rem;font-weight:700;font-family:'Poppins',sans-serif;
  padding:.22rem .6rem;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.badge--Dog{background:#e9f2fb;color:#0063b3}
.badge--Cat{background:#fdeede;color:#b34700}
.badge--Bird{background:#e6f7ee;color:#00803c}
.badge--Aquarium{background:#e4f3fb;color:#0079d9}
.badge--Small{background:#f0ebfa;color:#5b3fb3}
.badge--Reptile{background:#eaf6e6;color:#3f8016}
.badge--Horses{background:#fbe9d6;color:#8a5a16}
.badge--Fish{background:#e4f3fb;color:#0079d9}
.badge--Grooming{background:#fbe9f1;color:#b3145e}
.badge--Nutrition{background:#fff1e8;color:#fe6200}
.badge--Water{background:#dff1f7;color:#0087a8}
.badge--Salt{background:#e6f0f7;color:#004a80}
.badge--Gravel{background:#efe9df;color:#7a5a2b}
.badge--Pond{background:#dff3e6;color:#0f7a3a}
.brand-card__overlay{position:absolute;inset:0;background:rgba(0,57,133,.92);color:#fff;display:flex;
  align-items:center;justify-content:center;gap:.5rem;font-family:'Poppins',sans-serif;font-weight:600;
  opacity:0;transition:opacity .3s ease}
.brand-card:hover .brand-card__overlay{opacity:1}
.brand-card__overlay i{transition:transform .3s ease}
.brand-card:hover .brand-card__overlay i{transform:translateX(4px)}
.brands__empty{text-align:center;color:#5b6670;padding:2rem;display:none}
.brands__empty.show{display:block}
.brands__note{text-align:center;color:#8a929b;font-size:.85rem;margin-top:1.8rem}

/* =============================================================
   CONTACT  (Elementor: WPForms + Maps + Icon List + Button)
   ============================================================= */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact__info .lead{margin-bottom:1.8rem}
.cinfo{display:grid;gap:1.3rem;margin-bottom:1.8rem}
.cinfo__row{display:flex;gap:1rem;align-items:flex-start}
.cinfo__ic{width:46px;height:46px;border-radius:12px;background:#e9f2fb;color:#0079d9;display:flex;
  align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.cinfo__row strong{display:block;color:#242e36;font-family:'Poppins',sans-serif;font-size:.95rem}
.cinfo__row span,.cinfo__row a{color:#5b6670;font-size:.95rem}
.cinfo__row a:hover{color:#0079d9}
.email-highlight{display:inline-flex;align-items:center;gap:.6rem;background:#003985;color:#fff;
  font-family:'Poppins',sans-serif;font-weight:600;padding:.85rem 1.4rem;border-radius:12px;margin-bottom:1.5rem}
.email-highlight a{color:#fff}
.map{border-radius:16px;overflow:hidden;box-shadow:0 16px 40px -22px rgba(36,46,54,.4);margin-top:1.6rem}
.map iframe{display:block;width:100%;height:260px;border:0}
.form-card{background:#fff;border:1px solid #e3e5e7;border-radius:16px;padding:2.2rem;
  box-shadow:0 20px 48px -26px rgba(36,46,54,.4)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-family:'Poppins',sans-serif;font-size:.85rem;font-weight:500;color:#242e36}
.field label .req{color:#fe6200}
.field input,.field textarea{font-family:inherit;font-size:.95rem;color:#242e36;background:#fff;
  border:2px solid #d7dade;border-radius:10px;padding:.7rem .85rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:#0079d9;box-shadow:0 0 0 3px rgba(0,121,217,.13)}
.field textarea{resize:vertical;min-height:110px}
.field .err{font-size:.78rem;color:#c62828;display:none}
.field.invalid input,.field.invalid textarea{border-color:#c62828}
.field.invalid .err{display:block}
.form-success{display:none;background:#e6f7ee;border:1px solid #00af53;color:#00803c;border-radius:12px;
  padding:1.3rem 1.4rem;margin-top:1.2rem;font-weight:500}
.form-success.show{display:block}

/* =============================================================
   WHATSAPP FLOAT
   ============================================================= */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:1500;width:60px;height:60px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.7);transition:transform .25s ease}
.wa-float:hover{transform:scale(1.1)}

/* =============================================================
   FOOTER  (Elementor: Footer Builder — Text + Icon List + Image)
   ============================================================= */
.footer{background:#242e36;color:rgba(255,255,255,.72);padding-block:3.5rem 1.8rem}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.4rem;padding-bottom:2.2rem;
  border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand img{height:48px;margin-bottom:1rem;filter:brightness(0) invert(1)}
.footer__brand p{font-size:.92rem;max-width:32ch}
.footer h4{color:#fff;font-family:'Poppins',sans-serif;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:1.1rem;font-weight:600}
.footer__links{display:grid;gap:.6rem}
.footer__links a{font-size:.93rem;color:rgba(255,255,255,.72)}
.footer__links a:hover{color:#00d265}
.footer__contact{display:grid;gap:.7rem;font-size:.92rem}
.footer__contact div{display:flex;gap:.6rem;align-items:flex-start}
.footer__contact i{color:#00af53;width:18px;margin-top:.25rem;flex:none}
.footer__contact a{color:rgba(255,255,255,.72)}
.footer__contact a:hover{color:#00d265}
.footer__bottom{padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.footer__bottom p{font-size:.82rem;color:rgba(255,255,255,.55)}
.footer__social{display:flex;gap:.7rem}
.footer__social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.footer__social a:hover{background:#00af53}

/* =============================================================
   SCROLL REVEAL (Intersection Observer)
   ============================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:1024px){
  /* Hero centrado en mobile/tablet: texto, CTAs y tarjeta Jorge */
  .hero__inner{grid-template-columns:1fr;gap:2.2rem;text-align:center;justify-items:center}
  .hero h1{margin-inline:auto}
  .hero__sub{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__jorge{max-width:320px;margin-inline:auto}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .areas__grid{grid-template-columns:repeat(2,1fr)}
  .brands__grid{grid-template-columns:repeat(3,1fr)}
  .trustbar .container{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .footer__top{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:760px){
  .nav-links{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;align-items:flex-start;
    background:#003070;padding:1.2rem 1.5rem;gap:1.1rem;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
  .nav-links.open{display:flex}
  .nav-actions .desk{display:none}
  .burger{display:inline-flex}
  .about__grid,.contact__grid{grid-template-columns:1fr;gap:2rem}
  .services__grid,.brands__grid,.areas__grid{grid-template-columns:1fr 1fr}
  /* values queda en 2 columnas en mobile (no 1) - se ve mejor 2x2 */
  .values{grid-template-columns:1fr 1fr;gap:.8rem}
  .form-grid{grid-template-columns:1fr}
  .quote{flex-direction:column;text-align:center}
  .footer__top{grid-template-columns:1fr;gap:1.8rem}
  /* WhatsApp más chico para no tapar contenido */
  .wa-float{width:52px;height:52px;font-size:1.45rem;right:16px;bottom:16px}
  /* Hero Jorge card más compacta */
  .hero__jorge{padding:1.6rem 1.4rem 1.4rem;max-width:300px}
  .hero__jorge img{width:160px;height:195px;margin-bottom:1rem;border-width:3px}
  .hero__jorge .yrs{font-size:1.4rem;line-height:1.2}
  .hero__jorge-divider{margin:1rem auto .9rem}
  /* About image más bajo (no aspect 1:1 cuadrado gigante) */
  .about__img{aspect-ratio:4/3}
  /* Sections con menos padding lateral */
  .container{padding-inline:18px}
  /* Espacio inferior en cards para que el WA float no las tape */
  .areas__grid,.services__grid{padding-bottom:1rem}
}
@media(max-width:480px){
  /* Brands en 2 columnas (no 1) — cards más compactas */
  .brands__grid{grid-template-columns:1fr 1fr;gap:1rem}
  .brand-card{padding-top:1.2rem}
  .brand-card__logo{width:88px;height:88px;padding:.85rem}
  .brand-card__name{font-size:.88rem;margin-bottom:.45rem;min-height:2.4em}
  .brand-card__body{padding:.8rem .7rem 1rem}
  .badge{font-size:.6rem;padding:.18rem .5rem}
  .brand-card__badges{gap:.3rem}
  .trustbar .container{grid-template-columns:1fr 1fr;padding-block:2rem;gap:1.4rem .8rem}
  /* WhatsApp aún más chico */
  .wa-float{width:46px;height:46px;font-size:1.3rem;right:14px;bottom:14px}
  /* Hero más compacto */
  .hero__inner{padding-block:clamp(2rem,6vw,3.5rem);gap:1.6rem}
  .hero h1{font-size:1.95rem;line-height:1.2;margin-bottom:.9rem}
  .hero__sub{font-size:1rem;margin-bottom:1.4rem}
  .hero__cta .btn{padding:.85rem 1.4rem;font-size:.92rem}
  .hero__jorge{max-width:260px}
  .hero__jorge img{width:145px;height:175px}
  .hero__jorge .yrs{font-size:1.25rem}
  .hero__jorge .nm{font-size:.95rem}
  /* Stats más controlados */
  .stat__num{font-size:1.85rem}
  /* H2 sections más chicos */
  .section{padding-block:3rem}
  .section-head h2,.section h2{font-size:1.75rem;line-height:1.2}
  .section-head p,.section-head .lead{font-size:.96rem}
  /* Areas cards más compactas */
  .area{padding:1.4rem 1.1rem}
  .area h3{font-size:1rem}
  .area p{font-size:.88rem}
  /* Service cards más compactas */
  .service{padding:1.5rem 1.2rem}
  .service h3{font-size:1.05rem}
  .service p{font-size:.92rem}
}
/* =============================================================
   COUNTRIES WE SERVE (interactive Leaflet world map + PSE pins)
   ============================================================= */
.countries-section{background:linear-gradient(180deg,#eaf1fa 0%,#f4f7fb 100%)}
.worldmap{margin-top:2.2rem;position:relative;border-radius:16px;overflow:hidden;
  box-shadow:0 12px 44px rgba(0,57,133,.18);border:1px solid #cdd9e8;background:#f0f4f8}
.worldmap__canvas{width:100%;height:540px;background:#eef3f8}
.worldmap__legend{display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;
  background:#fff;border-top:1px solid #e6ebef;font-family:'Poppins',sans-serif;
  font-weight:500;font-size:.88rem;color:#5b6670}
.worldmap__legend img{border-radius:4px}
.countries__more{text-align:center;color:#5b6670;font-style:italic;margin-top:1.8rem;font-size:.95rem}

/* Custom PSE pin (divIcon) — orange accent border + orange glow */
.pse-pin{background:transparent!important;border:none!important}
.pse-pin__inner{width:40px;height:40px;background:#fff;border:3px solid #fe6200;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(254,98,0,.45),0 2px 6px rgba(0,0,0,.15);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.pse-pin__inner img{transform:rotate(45deg)}
.pse-pin:hover .pse-pin__inner{transform:rotate(-45deg) scale(1.18);
  background:#fff5ee;box-shadow:0 6px 20px rgba(254,98,0,.6),0 3px 8px rgba(0,0,0,.2)}

/* Leaflet popup override to match brand */
.leaflet-popup-content-wrapper{border-radius:10px!important;box-shadow:0 6px 22px rgba(0,57,133,.22)!important}
.leaflet-popup-content{margin:.6rem .95rem!important;font-family:'Inter',sans-serif!important;
  font-size:.9rem!important;color:#003985!important}
.leaflet-popup-tip{background:#fff!important}
.leaflet-container a.leaflet-popup-close-button{color:#8a929b}

@media(max-width:760px){
  .worldmap__canvas{height:420px}
}
@media(max-width:480px){
  .worldmap__canvas{height:340px}
  .worldmap__legend{font-size:.8rem;padding:.55rem .8rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}