/* ==========================================================================
   World Trading Partners — Design System
   ========================================================================== */

:root{
  --color-primary:      #1746d1;
  --color-primary-dark: #0f2f8f;
  --color-primary-light:#4d78ff;
  --color-accent:       #06b6d4;
  --color-ink:          #0b1730;
  --color-ink-soft:     #33415c;
  --color-body:         #4b5a76;
  --color-muted:        #7c89a3;
  --color-bg:           #ffffff;
  --color-bg-soft:      #f4f7fc;
  --color-bg-dark:      #081029;
  --color-border:       #e3e8f2;
  --color-success:      #16a34a;
  --color-error:        #dc2626;

  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(11,23,48,.06);
  --shadow-md: 0 12px 32px rgba(11,23,48,.10);
  --shadow-lg: 0 24px 60px rgba(11,23,48,.16);
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-body);
  background:var(--color-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--color-ink);
  margin:0 0 .5em;
  line-height:1.2;
  font-weight:600;
}
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
section{ padding:96px 0; }
@media (max-width:768px){ section{ padding:64px 0; } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-primary);
  background:rgba(23,70,209,.08);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--color-accent);
}
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px,4vw,38px); }
.section-head p{ font-size:17px; color:var(--color-muted); }

/* Buttons ----------------------------------------------------------------*/
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:15px;
  padding:14px 28px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-primary{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));
  color:#fff;
  box-shadow:0 10px 24px rgba(23,70,209,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(23,70,209,.36); }
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-outline{
  background:transparent;
  border-color:var(--color-border);
  color:var(--color-ink);
}
.btn-outline:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* Header -------------------------------------------------------------------*/
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; height:78px; max-width:1340px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:38px; width:auto; }
.brand-name{
  font-family:var(--font-heading); font-weight:700; font-size:15px;
  line-height:1.15; color:var(--color-ink);
}
.brand-name span{ display:block; font-weight:400; font-size:11px; color:var(--color-muted); letter-spacing:.04em; }

.nav-desktop{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; }
.nav-desktop a{
  font-family:var(--font-heading); font-weight:500; font-size:14px;
  color:var(--color-ink-soft); position:relative; padding:6px 0;
  white-space:nowrap;
}
.nav-desktop a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--color-primary); transition:width .2s ease;
}
.nav-desktop a:hover::after, .nav-desktop a.active::after{ width:100%; }
.nav-desktop a.active{ color:var(--color-primary); }
.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.header-actions .btn{ padding:11px 22px; font-size:14px; }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--color-ink); margin:5px 0; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-mobile{
  display:none; flex-direction:column; gap:2px; background:#fff;
  border-top:1px solid var(--color-border); padding:12px 24px 20px;
}
.nav-mobile a{
  padding:12px 4px; font-family:var(--font-heading); font-weight:500;
  color:var(--color-ink-soft); border-bottom:1px solid var(--color-border);
}
.nav-mobile .btn{ margin-top:14px; }

@media (max-width:1200px){
  .nav-desktop, .header-actions .btn-outline{ display:none; }
  .nav-toggle{ display:block; }
  body.nav-open .nav-mobile{ display:flex; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* Hero banner (full-width photo strip, shorter than the old site's) ------*/
.hero-banner{
  width:100%;
  height:clamp(160px, 24vw, 320px);
  overflow:hidden;
  position:relative;
  background:var(--color-bg-dark);
}
.hero-banner img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block;
}
.hero-banner::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--color-bg-dark) 0%, rgba(8,16,41,0) 42%);
}

/* Hero -----------------------------------------------------------------*/
.hero{
  position:relative;
  background:radial-gradient(1200px 520px at 15% -10%, #12266e 0%, var(--color-bg-dark) 55%), var(--color-bg-dark);
  color:#fff;
  overflow:hidden;
  padding:76px 0 72px;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(700px 420px at 75% 30%, #000 20%, transparent 75%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute; top:-120px; right:-160px; width:560px; height:560px;
  background:radial-gradient(circle, rgba(6,182,212,.35), transparent 70%);
  border-radius:50%; filter:blur(10px); pointer-events:none;
}
.hero .container{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.hero h1{
  color:#fff; font-size:clamp(34px,5vw,52px); letter-spacing:-.01em;
}
.hero h1 em{ font-style:normal; color:var(--color-accent); }
.hero p.lead{ font-size:18px; color:rgba(255,255,255,.75); max-width:520px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-heading); font-size:26px; color:#fff; }
.hero-stats div span{ font-size:13px; color:rgba(255,255,255,.6); }

.hero-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  padding:32px;
  backdrop-filter:blur(6px);
}
.hero-panel-list{ display:flex; flex-direction:column; gap:18px; }
.hero-panel-item{
  display:flex; align-items:flex-start; gap:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  padding:16px;
}
.hero-panel-item .icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent));
  display:flex; align-items:center; justify-content:center;
}
.hero-panel-item .icon svg{ width:20px; height:20px; color:#fff; }
.hero-panel-item h4{ color:#fff; font-size:15px; margin:0 0 4px; }
.hero-panel-item p{ color:rgba(255,255,255,.6); font-size:13.5px; margin:0; }

@media (max-width:920px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-panel{ order:-1; }
}

/* Logo strip --------------------------------------------------------------*/
.trust-strip{ padding:40px 0; border-bottom:1px solid var(--color-border); }
.trust-strip .container{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:space-between; }
.trust-strip .label{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--color-muted); white-space:nowrap; }
.trust-logos{ display:flex; align-items:center; gap:44px; flex-wrap:wrap; opacity:.85; }
.trust-logos img{ height:30px; width:auto; filter:grayscale(1); opacity:.7; transition:opacity .2s, filter .2s; }
.trust-logos img:hover{ filter:grayscale(0); opacity:1; }

/* Services ------------------------------------------------------------*/
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.services-grid > .service-card:last-child:nth-child(3n+1){ grid-column:2; }
@media (max-width:920px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .services-grid > .service-card:last-child:nth-child(3n+1){ grid-column:auto; }
}
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }

.service-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.service-card .icon{
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(135deg,rgba(23,70,209,.1),rgba(6,182,212,.12));
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.service-card .icon svg{ width:26px; height:26px; color:var(--color-primary); }
.service-card.featured{
  background:linear-gradient(160deg,var(--color-primary-dark),var(--color-primary) 60%,var(--color-primary-light));
  border-color:transparent; color:#fff;
}
.service-card.featured h3, .service-card.featured p{ color:#fff; }
.service-card.featured p{ color:rgba(255,255,255,.82); }
.service-card.featured .icon{ background:rgba(255,255,255,.16); }
.service-card.featured .icon svg{ color:#fff; }
.service-card.featured .card-link{ color:#fff; }
.service-card h3{ font-size:19px; margin-bottom:8px; }
.service-card p{ font-size:14.5px; color:var(--color-muted); margin-bottom:18px; }
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--color-primary);
}
.card-link svg{ width:15px; height:15px; transition:transform .18s ease; }
.service-card:hover .card-link svg{ transform:translateX(3px); }
.badge-pill{
  position:absolute; top:24px; right:24px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; background:rgba(255,255,255,.18);
  color:#fff; padding:4px 10px; border-radius:999px;
}

/* Why us / process -------------------------------------------------------*/
.why-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
@media (max-width:900px){ .why-wrap{ grid-template-columns:1fr; } }
.why-list{ display:flex; flex-direction:column; gap:22px; }
.why-item{ display:flex; gap:16px; }
.why-item .num{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-bg-soft); color:var(--color-primary);
  font-family:var(--font-heading); font-weight:700; font-size:14px;
}
.why-item h4{ font-size:16.5px; margin-bottom:4px; }
.why-item p{ font-size:14.5px; color:var(--color-muted); margin:0; }
.why-visual{
  background:var(--color-bg-dark); border-radius:var(--radius-lg);
  padding:40px; color:#fff; position:relative; overflow:hidden;
}
.why-visual::after{
  content:''; position:absolute; bottom:-80px; left:-80px; width:280px; height:280px;
  background:radial-gradient(circle, rgba(23,70,209,.5), transparent 70%);
}
.why-visual .quote{ position:relative; font-family:var(--font-heading); font-size:22px; line-height:1.5; margin-bottom:24px; }
.why-visual .who{ position:relative; display:flex; align-items:center; gap:12px; }
.why-visual .who .dot{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent)); display:flex; align-items:center; justify-content:center; font-weight:700; }
.why-visual .who strong{ display:block; font-size:14px; }
.why-visual .who span{ font-size:12.5px; color:rgba(255,255,255,.6); }

/* CTA band -----------------------------------------------------------*/
.cta-band{
  background:linear-gradient(120deg,var(--color-primary-dark),var(--color-primary));
  border-radius:var(--radius-lg);
  padding:56px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  color:#fff;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:''; position:absolute; top:-100px; right:-60px; width:320px; height:320px;
  background:radial-gradient(circle, rgba(6,182,212,.4), transparent 70%);
}
.cta-band h2{ color:#fff; font-size:28px; margin-bottom:8px; }
.cta-band p{ color:rgba(255,255,255,.78); margin:0; max-width:480px; }
.cta-band .btn-primary{ background:#fff; color:var(--color-primary-dark); box-shadow:none; }
.cta-band .btn-primary:hover{ background:#eef2ff; }
@media (max-width:760px){ .cta-band{ flex-direction:column; text-align:center; padding:40px 28px; } }

/* Footer -----------------------------------------------------------------*/
.site-footer{ background:var(--color-bg-dark); color:rgba(255,255,255,.7); padding:48px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
.footer-brand img{ height:32px; margin-bottom:14px; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:13.5px; color:rgba(255,255,255,.55); max-width:280px; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ font-size:14px; color:rgba(255,255,255,.65); transition:color .18s ease; }
.footer-links a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:10px; font-size:14px; margin-bottom:14px; color:rgba(255,255,255,.7); }
.footer-contact svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--color-accent); }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:background .18s ease;
}
.social-row a:hover{ background:var(--color-primary); }
.social-row svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:13px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:rgba(255,255,255,.6); }
.footer-bottom a:hover{ color:#fff; }

/* WhatsApp floating button -------------------------------------------*/
.float-whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .18s ease;
}
.float-whatsapp:hover{ transform:scale(1.08); }
.float-whatsapp svg{ width:28px; height:28px; color:#fff; }

/* Page hero (inner pages) ---------------------------------------------*/
.page-hero{
  background:linear-gradient(160deg,var(--color-bg-dark),var(--color-primary-dark));
  color:#fff; padding:80px 0 70px; text-align:center; position:relative; overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(600px 300px at 50% 30%, #000, transparent 75%);
}
.page-hero .container{ position:relative; }
.page-hero .eyebrow{ background:rgba(255,255,255,.1); color:#fff; }
.page-hero h1{ color:#fff; font-size:clamp(30px,4.5vw,42px); }
.page-hero p{ color:rgba(255,255,255,.72); max-width:560px; margin:0 auto; }
.breadcrumb{ display:flex; gap:8px; justify-content:center; font-size:13px; color:rgba(255,255,255,.5); margin-top:14px; }
.breadcrumb a{ color:rgba(255,255,255,.75); }

/* Contact page -----------------------------------------------------------*/
.contact-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:flex-start; }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; } }

.contact-info-card{
  background:var(--color-bg-soft); border-radius:var(--radius-lg); padding:36px;
  display:flex; flex-direction:column; gap:22px;
}
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-item .icon{
  width:44px; height:44px; border-radius:12px; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.contact-info-item .icon svg{ width:20px; height:20px; color:var(--color-primary); }
.contact-info-item h4{ font-size:14.5px; margin-bottom:2px; }
.contact-info-item p, .contact-info-item a{ font-size:14px; color:var(--color-muted); margin:0; }
.contact-info-item a:hover{ color:var(--color-primary); }
.hours-box{ background:#fff; border-radius:var(--radius-md); padding:18px 20px; font-size:13.5px; color:var(--color-muted); }
.hours-box strong{ color:var(--color-ink); }

.form-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:40px; box-shadow:var(--shadow-sm);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--color-ink-soft); margin-bottom:7px; }
.field .req{ color:var(--color-error); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1.5px solid var(--color-border);
  font-family:var(--font-body); font-size:14.5px; color:var(--color-ink); background:#fbfcfe;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 4px rgba(23,70,209,.1); background:#fff;
}
.field textarea{ resize:vertical; min-height:120px; }
.field small.hint{ display:block; margin-top:6px; font-size:12.5px; color:var(--color-muted); }
.field small.error-msg{ display:none; margin-top:6px; font-size:12.5px; color:var(--color-error); }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--color-error); }
.field.invalid small.error-msg{ display:block; }

.captcha-row{ display:flex; align-items:center; gap:16px; background:var(--color-bg-soft); border-radius:var(--radius-sm); padding:14px 16px; }
.captcha-row .captcha-question{ font-family:var(--font-heading); font-weight:700; font-size:16px; color:var(--color-ink); white-space:nowrap; }
.captcha-row input{ max-width:110px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; }

.form-status{ display:none; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:20px; }
.form-status.show{ display:flex; }
.form-status.ok{ background:rgba(22,163,74,.1); color:#15803d; }
.form-status.fail{ background:rgba(220,38,38,.1); color:#b91c1c; }
.form-status svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }

.security-note{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--color-muted); margin-top:18px; }
.security-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--color-accent); }

/* Simple page (gracias / error) -------------------------------------------*/
.status-page{ min-height:60vh; display:flex; align-items:center; justify-content:center; padding:80px 24px; text-align:center; }
.status-card{ max-width:460px; }
.status-card .icon-lg{
  width:76px; height:76px; border-radius:50%; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center;
}
.status-card.ok .icon-lg{ background:rgba(22,163,74,.1); color:#16a34a; }
.status-card.fail .icon-lg{ background:rgba(220,38,38,.1); color:#dc2626; }
.status-card .icon-lg svg{ width:36px; height:36px; }
.status-card h1{ font-size:26px; }
.status-card p{ color:var(--color-muted); }

/* Hero photo frame ---------------------------------------------------*/
.hero-photo-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-lg);
  max-width:380px;
  margin:0 auto 20px;
}
.hero-photo-frame img{ width:100%; display:block; }
.hero-photo-caption{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:14px;
}
.hero-photo-caption .icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent));
  display:flex; align-items:center; justify-content:center;
}
.hero-photo-caption .icon svg{ width:17px; height:17px; color:#fff; }
.hero-photo-caption p{ margin:0; color:rgba(255,255,255,.75); font-size:13px; }
.hero-photo-caption strong{ color:#fff; font-size:13.5px; display:block; }

/* Clients / logo wall -------------------------------------------------*/
.clients-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--color-border); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden;
}
@media (max-width:820px){ .clients-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .clients-grid{ grid-template-columns:repeat(2,1fr); } }
.client-tile{
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:28px 22px; min-height:110px;
}
.client-tile img{
  max-height:52px; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:opacity .2s ease, filter .2s ease;
}
.client-tile:hover img{ filter:grayscale(0); opacity:1; }

/* Projects grid -------------------------------------------------------*/
.projects-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .projects-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .projects-grid{ grid-template-columns:1fr; } }
.project-card{
  border-radius:var(--radius-lg); overflow:hidden; background:#fff;
  border:1px solid var(--color-border); display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.project-card .thumb{
  height:150px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(23,70,209,.08),rgba(6,182,212,.1));
}
.project-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.project-card .thumb svg{ width:34px; height:34px; color:var(--color-primary); }
.project-card .body{ padding:20px; flex:1; display:flex; flex-direction:column; }
.project-card .tag{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-primary); margin-bottom:8px;
}
.project-card h4{ font-size:15.5px; margin-bottom:8px; }
.project-card p{ font-size:13.5px; color:var(--color-muted); margin:0; flex:1; }

/* Contact CTA box (replaces raw email link) ---------------------------*/
.contact-cta-box{
  background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));
  border-radius:var(--radius-md); padding:20px; color:#fff;
}
.contact-cta-box h4{ color:#fff; font-size:14.5px; margin-bottom:6px; }
.contact-cta-box p{ color:rgba(255,255,255,.78); font-size:13px; margin-bottom:14px; }
.contact-cta-box .btn{ background:#fff; color:var(--color-primary-dark); font-size:13.5px; padding:10px 18px; }
.contact-cta-box .btn:hover{ background:#eef2ff; }

/* Process pipeline (SIG) — deliberately not a card grid ------------------*/
.pipeline{
  display:flex; align-items:flex-start; gap:0; max-width:980px; margin:0 auto;
  position:relative;
}
.pipeline-step{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 12px; position:relative;
}
.pipeline-step .dot{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:15px;
  box-shadow:0 8px 18px rgba(23,70,209,.28);
  position:relative; z-index:2; margin-bottom:16px;
}
.pipeline-step .dot svg{ width:24px; height:24px; }
.pipeline-step h4{ font-size:14.5px; margin-bottom:6px; }
.pipeline-step p{ font-size:12.5px; color:var(--color-muted); margin:0; }
.pipeline-line{
  position:absolute; top:28px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(to right, var(--color-border) 0 8px, transparent 8px 14px);
  z-index:1;
}
@media (max-width:820px){
  .pipeline{ flex-direction:column; gap:28px; }
  .pipeline-line{ display:none; }
  .pipeline-step{ flex-direction:row; text-align:left; padding:0; gap:16px; }
  .pipeline-step .dot{ margin-bottom:0; flex-shrink:0; }
}

/* Split media band (image/quote + checklist) — used instead of card grids */
.split-band{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; }
@media (max-width:820px){ .split-band{ grid-template-columns:1fr; } }
.split-band .panel-dark{
  background:var(--color-bg-dark); color:#fff; padding:44px; position:relative; overflow:hidden;
}
.split-band .panel-dark::after{
  content:''; position:absolute; bottom:-100px; left:-60px; width:280px; height:280px;
  background:radial-gradient(circle, rgba(6,182,212,.35), transparent 70%);
}
.split-band .panel-light{ background:var(--color-bg-soft); padding:44px; }
.check-list{ display:flex; flex-direction:column; gap:20px; }
.check-list li{ display:flex; gap:14px; align-items:flex-start; }
.check-list .tick{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(23,70,209,.12); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
}
.check-list .tick svg{ width:14px; height:14px; }
.check-list h4{ font-size:15px; margin-bottom:3px; }
.check-list p{ font-size:13.5px; color:var(--color-muted); margin:0; }

/* PTAR simulator ----------------------------------------------------------*/
.sim-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:32px; align-items:flex-start; }
@media (max-width:900px){ .sim-wrap{ grid-template-columns:1fr; } }
.sim-results{
  background:var(--color-bg-dark); border-radius:var(--radius-lg); padding:36px;
  color:#fff; position:sticky; top:96px;
}
.sim-results h3{ color:#fff; font-size:16px; margin-bottom:20px; }
.sim-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.sim-stat{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md); padding:16px;
}
.sim-stat span{ display:block; font-size:11.5px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.sim-stat strong{ font-family:var(--font-heading); font-size:22px; color:#fff; font-variant-numeric:tabular-nums; }
.sim-stat strong small{ font-size:13px; font-weight:500; color:rgba(255,255,255,.6); }
.sim-treatment{
  background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.25);
  border-radius:var(--radius-md); padding:18px; margin-bottom:18px;
}
.sim-treatment h4{ color:#fff; font-size:14px; margin-bottom:10px; }
.sim-treatment ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.sim-treatment li{ font-size:13.5px; color:rgba(255,255,255,.8); }
.sim-note{
  display:flex; gap:10px; align-items:flex-start; font-size:12px; color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.1); padding-top:16px;
}
.sim-note svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; color:var(--color-accent); }
.sim-placeholder{ text-align:center; padding:30px 10px; color:rgba(255,255,255,.5); font-size:14px; }
.radio-group{ display:flex; flex-wrap:wrap; gap:10px; }
.radio-chip{ position:relative; }
.radio-chip input{ position:absolute; opacity:0; }
.radio-chip label{
  display:block; padding:10px 16px; border-radius:999px; border:1.5px solid var(--color-border);
  font-size:13.5px; font-weight:500; color:var(--color-ink-soft); cursor:pointer; transition:.15s ease;
}
.radio-chip input:checked + label{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* PTAR treatment-train diagram (mini animation) -----------------------*/
.ptar-diagram{
  background:var(--color-bg-dark); border-radius:var(--radius-lg);
  padding:28px 20px 20px; margin-bottom:24px; overflow-x:auto;
}
.ptar-diagram-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.ptar-diagram-head h4{ color:#fff; font-size:13.5px; margin:0; }
.ptar-diagram-head .tag-live{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-accent); display:inline-flex; align-items:center; gap:5px;
}
.ptar-diagram-head .tag-live::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--color-accent);
  animation:pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.ptar-diagram > svg{ display:block; min-width:560px; width:100%; height:auto; }
.pd-tank .pd-shell{ fill:#12224d; stroke:var(--color-primary-light); stroke-width:1.5; transition:width .3s ease, height .3s ease; }
.pd-tank.stage-polish .pd-shell{ stroke:var(--color-accent); }
.pd-tank text{ fill:rgba(255,255,255,.85); font-family:'Inter',sans-serif; font-size:9.5px; text-anchor:middle; }
.pd-tank .stage-num{
  fill:var(--color-primary-light); font-family:'Poppins',sans-serif; font-weight:700; font-size:11px;
}
.pd-tank.stage-polish .stage-num{ fill:var(--color-accent); }
.pd-pipe{ stroke:rgba(255,255,255,.18); stroke-width:2; fill:none; }

/* Arrows = pumps pushing water from one tank to the next.
   Todo el movimiento se activa SOLO con la clase .is-running, para que cada
   corrida del botón "Simular" empiece desde cero. */
.pd-arrow{ fill:var(--color-accent); opacity:0; }
.ptar-diagram.is-running .pd-arrow{
  animation:arrow-move 1.6s linear infinite;
}
@keyframes arrow-move{
  0%{ transform:translateX(0); opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateX(58px); opacity:0; }
}

/* Water filling each tank: entra café (agua cruda) y sale limpia. */
.pd-water{ transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); }
.ptar-diagram.is-running .pd-water{
  animation:tank-fill 12s ease-out forwards;
}
@keyframes tank-fill{
  0%{ transform:scaleY(0); }
  12%{ transform:scaleY(.88); }
  100%{ transform:scaleY(.88); }
}
/* Agua cruda (café) -> se va aclarando etapa por etapa -> agua limpia */
/* Agua cruda (café) -> se va aclarando etapa por etapa -> agua limpia */
.pd-water.w1{ fill:#6d4c28; opacity:.85; }
.pd-water.w2{ fill:#8a6a35; opacity:.8; }
.pd-water.w3{ fill:#5f7a52; opacity:.75; }
.pd-water.w4{ fill:#2f86ad; opacity:.68; }
.pd-water.w5{ fill:#22d3ee; opacity:.5; }

/* Pumps: small pulsing pump icons at each pipe midpoint */
.pd-pump circle{ fill:var(--color-primary-light); }
.pd-pump-arrow{ fill:var(--color-bg-dark); }
.pd-pump{ transform-box:fill-box; transform-origin:center; }
.ptar-diagram.is-running .pd-pump{ animation:pump-pulse .9s ease-in-out infinite; }
@keyframes pump-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.4); } }

/* Bubbles inside the biological-treatment tank */
.pd-bubble{ fill:rgba(6,182,212,.85); opacity:0; transform-box:fill-box; }
.ptar-diagram.is-running .pd-bubble{ animation:bubble-rise 1.8s ease-in infinite; }
.pd-bubble.b2{ animation-delay:.5s; }
.pd-bubble.b3{ animation-delay:1s; }
@keyframes bubble-rise{
  0%{ opacity:0; transform:translateY(0); }
  15%{ opacity:.9; }
  90%{ opacity:.2; }
  100%{ opacity:0; transform:translateY(-45px); }
}

/* Electroflocculator: electrode plates with a flicker + gas bubbles from electrolysis */
.pd-electrode line{ stroke:var(--color-accent); stroke-width:2; opacity:.55; }
.ptar-diagram.is-running .pd-electrode line{ animation:spark-flicker .5s ease-in-out infinite alternate; }
.pd-electrode line:nth-child(2){ animation-delay:.12s !important; }
.pd-electrode line:nth-child(3){ animation-delay:.24s !important; }
@keyframes spark-flicker{ 0%{ opacity:.3; } 100%{ opacity:1; } }

/* Sequential tank glow while running */
.pd-tank .pd-shell{ transition:width .3s ease, height .3s ease; }
.ptar-diagram.is-running .pd-tank#stage1 .pd-shell{ animation:tank-glow 2.2s ease-in-out infinite; }
.ptar-diagram.is-running .pd-tank#stage2 .pd-shell{ animation:tank-glow 2.2s ease-in-out infinite; animation-delay:.5s; }
.ptar-diagram.is-running .pd-tank#stage3 .pd-shell{ animation:tank-glow 2.2s ease-in-out infinite; animation-delay:1s; }
.ptar-diagram.is-running .pd-tank#stage4 .pd-shell{ animation:tank-glow 2.2s ease-in-out infinite; animation-delay:1.5s; }
.ptar-diagram.is-running .pd-tank#stage5 .pd-shell{ animation:tank-glow 2.2s ease-in-out infinite; animation-delay:2s; }
@keyframes tank-glow{
  0%,100%{ filter:none; }
  50%{ filter:drop-shadow(0 0 6px var(--color-accent)); }
}

.pd-stage{ transition:opacity .3s ease; }
.pd-stage[hidden]{ display:none; }
.ptar-diagram-caption{ font-size:12px; color:rgba(255,255,255,.5); margin:0; text-align:center; }
.ptar-diagram-controls{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:16px; }
.btn-sim{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading); font-weight:600; font-size:13.5px;
  padding:11px 22px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light)); color:#fff;
  transition:transform .18s ease, opacity .18s ease;
}
.btn-sim:hover{ transform:translateY(-1px); }
.btn-sim:disabled{ opacity:.65; cursor:not-allowed; transform:none; }
.btn-sim svg{ width:16px; height:16px; }

/* Advanced parameters toggle ------------------------------------------*/
.adv-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:var(--color-bg-soft); border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  padding:13px 16px; font-family:var(--font-heading); font-weight:600; font-size:13.5px;
  color:var(--color-ink-soft); cursor:pointer; margin-bottom:18px;
}
.adv-toggle svg{ width:17px; height:17px; transition:transform .2s ease; flex-shrink:0; }
.adv-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.adv-panel{ margin-bottom:6px; }
.field-checkbox{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--color-ink-soft); font-weight:500; cursor:pointer; }
.field-checkbox input{ width:17px; height:17px; accent-color:var(--color-primary); flex-shrink:0; }

/* La simulación es una animación que el visitante pide explícitamente con un botón,
   así que sí se ejecuta aunque el sistema tenga "reducir movimiento": es el contenido,
   no decoración. Solo desactivamos el movimiento ambiental/decorativo. */
@media (prefers-reduced-motion: reduce){
  .tag-live::before{ animation:none !important; }
  .reveal{ transition:none !important; }
}

/* Industrial cabinet simulator ---------------------------------------*/
.gab-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:900px){ .gab-wrap{ grid-template-columns:1fr; } }
.gab-diagram{
  background:var(--color-bg-dark); border-radius:var(--radius-lg); padding:24px;
}
.gab-diagram-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.gab-diagram-head h4{ color:#fff; font-size:13.5px; margin:0; }
.gab-diagram > svg{ display:block; width:100%; height:auto; }

.gc-shell{ fill:#0f1c3d; stroke:var(--color-primary-light); stroke-width:2; }
.gc-plate{ fill:#12224d; stroke:rgba(255,255,255,.12); stroke-width:1; }
.gc-rail{ fill:rgba(255,255,255,.16); }
.gc-part{ fill:#1c3168; stroke:rgba(77,120,255,.5); stroke-width:1; }
.gc-part-label{ fill:rgba(255,255,255,.7); font-family:'Inter',sans-serif; font-size:8px; text-anchor:middle; }
.gc-wire{ stroke:rgba(6,182,212,.35); stroke-width:1.5; fill:none; }
.gc-led{ fill:#324a80; }
.gc-hmi{ fill:#0b2a3d; stroke:var(--color-accent); stroke-width:1.2; }

/* Al energizar: los componentes se encienden por filas y los LEDs parpadean */
.gab-diagram.is-running .gc-part{ animation:part-power 2.4s ease-in-out infinite; }
.gab-diagram.is-running .gc-row-1 .gc-part{ animation-delay:0s; }
.gab-diagram.is-running .gc-row-2 .gc-part{ animation-delay:.5s; }
.gab-diagram.is-running .gc-row-3 .gc-part{ animation-delay:1s; }
.gab-diagram.is-running .gc-row-4 .gc-part{ animation-delay:1.5s; }
@keyframes part-power{
  0%, 100%{ fill:#1c3168; }
  40%, 70%{ fill:#2a5bb8; }
}
.gab-diagram.is-running .gc-led{ animation:led-blink 1.1s steps(1,end) infinite; }
.gc-led.l2{ animation-delay:.36s !important; }
.gc-led.l3{ animation-delay:.72s !important; }
@keyframes led-blink{ 0%,49%{ fill:#22d3ee; } 50%,100%{ fill:#324a80; } }
.gab-diagram.is-running .gc-wire{ animation:wire-glow 1.8s ease-in-out infinite; }
@keyframes wire-glow{ 0%,100%{ stroke:rgba(6,182,212,.25); } 50%{ stroke:rgba(6,182,212,.9); } }
.gab-diagram.is-running .gc-hmi{ animation:hmi-on 2.4s ease-in-out infinite; }
@keyframes hmi-on{ 0%,100%{ fill:#0b2a3d; } 45%,75%{ fill:#0e4f6b; } }

.gab-spec{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
@media (max-width:520px){ .gab-spec{ grid-template-columns:1fr; } }
.gab-spec-item{ background:var(--color-bg-soft); border-radius:var(--radius-md); padding:14px 16px; }
.gab-spec-item span{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); margin-bottom:4px; }
.gab-spec-item strong{ font-family:var(--font-heading); font-size:15.5px; color:var(--color-ink); }
.gab-list{ display:flex; flex-direction:column; gap:9px; }
.gab-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--color-body); }
.gab-list li::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--color-primary);
  flex-shrink:0; margin-top:7px;
}

@media (prefers-reduced-motion: reduce){
  /* La simulación se ejecuta porque el visitante la pide con un botón. */
  .gab-diagram:not(.is-running) *{ animation:none !important; }
}

/* Página de servicios --------------------------------------------------*/
.serv-index{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:20px; background:var(--color-bg-soft); border-radius:var(--radius-lg);
}
.serv-index a{
  font-family:var(--font-heading); font-weight:600; font-size:13.5px;
  color:var(--color-primary); background:#fff; border:1px solid var(--color-border);
  padding:9px 16px; border-radius:999px; transition:.15s ease;
}
.serv-index a:hover{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

.serv-block{ display:grid; grid-template-columns:1.25fr .75fr; gap:52px; align-items:center; }
@media (max-width:900px){ .serv-block{ grid-template-columns:1fr; gap:32px; } }
.serv-block.invertido .serv-texto{ order:2; }
.serv-block.invertido .serv-visual{ order:1; }
@media (max-width:900px){
  .serv-block.invertido .serv-texto{ order:1; }
  .serv-block.invertido .serv-visual{ order:2; }
}
.serv-texto h2{ font-size:clamp(24px,3.2vw,32px); }
.serv-texto > p{ font-size:16px; color:var(--color-muted); margin-bottom:24px; }
.serv-texto .check-list{ margin-bottom:26px; }
.serv-visual{ display:flex; flex-direction:column; gap:14px; }
.serv-dato{
  background:var(--color-bg-dark); color:#fff; border-radius:var(--radius-md); padding:20px 22px;
}
.serv-dato strong{ display:block; font-family:var(--font-heading); font-size:19px; margin-bottom:4px; }
.serv-dato span{ font-size:13px; color:rgba(255,255,255,.65); }

/* Preguntas frecuentes -------------------------------------------------*/
.faq-lista{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:2px 20px; transition:border-color .18s ease;
}
.faq[open]{ border-color:var(--color-primary); }
.faq summary{
  font-family:var(--font-heading); font-weight:600; font-size:15.5px; color:var(--color-ink);
  padding:16px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; font-size:20px; color:var(--color-primary); line-height:1; flex-shrink:0;
}
.faq[open] summary::after{ content:'−'; }
.faq p{ margin:0 0 16px; font-size:14.5px; color:var(--color-body); }
.faq a{ color:var(--color-primary); text-decoration:underline; }

/* Simulator hub (tarjetas hacia cada simulador) ------------------------*/
.sim-hub-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:760px){ .sim-hub-grid{ grid-template-columns:1fr; } }
.sim-hub-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:32px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sim-hub-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.sim-hub-card .icon{
  width:56px; height:56px; border-radius:14px; margin-bottom:18px;
  background:linear-gradient(135deg,rgba(23,70,209,.1),rgba(6,182,212,.12));
  display:flex; align-items:center; justify-content:center;
}
.sim-hub-card .icon svg{ width:28px; height:28px; color:var(--color-primary); }
.sim-hub-card h3{ font-size:20px; margin-bottom:8px; }
.sim-hub-card p{ font-size:14.5px; color:var(--color-muted); margin-bottom:22px; flex:1; }
.sim-hub-card .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.sim-hub-card .tags span{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--color-bg-soft); color:var(--color-ink-soft); padding:4px 10px; border-radius:999px;
}

/* GPS fleet diagram -----------------------------------------------------*/
.gps-diagram{ background:var(--color-bg-dark); border-radius:var(--radius-lg); padding:24px; margin-bottom:28px; }
.gps-diagram-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.gps-diagram-head h4{ color:#fff; font-size:13.5px; margin:0; }
.gps-diagram > svg{ display:block; width:100%; height:auto; min-width:560px; }

.gps-platform-shell{ fill:#0f1c3d; stroke:var(--color-primary-light); stroke-width:1.5; }
.gps-platform-label{ fill:#fff; font-family:'Poppins',sans-serif; font-weight:600; font-size:12px; text-anchor:middle; }
.gps-platform-sub{ fill:rgba(255,255,255,.55); font-family:'Inter',sans-serif; font-size:9px; text-anchor:middle; }
.gps-dish{ fill:none; stroke:var(--color-accent); stroke-width:2; }
.gps-diagram.is-running .gps-platform-shell{ animation:tank-glow 2s ease-in-out infinite; }

.gps-vehicle-body{ fill:#12224d; stroke:var(--color-primary-light); stroke-width:1.4; }
.gps-vehicle-cab{ fill:#1c3168; stroke:rgba(77,120,255,.5); stroke-width:1; }
.gps-wheel{ fill:#0b1730; stroke:rgba(255,255,255,.25); stroke-width:1; }
.gps-label{ fill:rgba(255,255,255,.7); font-family:'Inter',sans-serif; font-size:9.5px; text-anchor:middle; }
.gps-fleet-truck[hidden]{ display:none; }
.gps-fleet-car[hidden]{ display:none; }

.gps-dot{ fill:var(--color-accent); }
.gps-caja{ fill:none; stroke:var(--color-accent); stroke-width:1.2; stroke-dasharray:2 2; }
.gps-caja[hidden]{ display:none; }
.gps-camera-body{ fill:#0f1c3d; stroke:var(--color-primary-light); stroke-width:1.2; }
.gps-camera-lens{ fill:var(--color-accent); }
#camaraGroup[hidden]{ display:none; }
.gps-diagram.is-running .gps-camera-lens{ animation:led-blink 1.4s steps(1,end) infinite; }
.gps-ping{ fill:none; stroke:var(--color-accent); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.gps-diagram.is-running .gps-ping{ animation:gps-ping 1.8s ease-out infinite; }
.gps-ping.p2{ animation-delay:.45s !important; }
.gps-ping.p3{ animation-delay:.9s !important; }
.gps-ping.p4{ animation-delay:1.35s !important; }
@keyframes gps-ping{
  0%{ transform:scale(.4); opacity:.9; }
  100%{ transform:scale(2.6); opacity:0; }
}

.gps-line{ stroke:rgba(255,255,255,.16); stroke-width:1.5; fill:none; stroke-dasharray:3 3; }
.gps-signal{ fill:var(--color-accent); opacity:0; }
.gps-diagram.is-running .gps-signal{ animation:gps-signal-move 2.2s ease-in infinite; }
@keyframes gps-signal-move{
  0%{ transform:translate(0,0); opacity:0; }
  10%{ opacity:1; }
  92%{ opacity:1; }
  100%{ transform:translate(var(--tx),var(--ty)); opacity:0; }
}

/* Cloud platform (PC -> servidor -> nube) diagram -----------------------*/
.cloud-diagram{ background:var(--color-bg-dark); border-radius:var(--radius-lg); padding:24px; margin-bottom:28px; }
.cloud-diagram-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.cloud-diagram-head h4{ color:#fff; font-size:13.5px; margin:0; }
.cloud-diagram > svg{ display:block; width:100%; height:auto; min-width:560px; }

.cd-pc-shell{ fill:#12224d; stroke:var(--color-primary-light); stroke-width:1.6; }
.cd-pc-stand{ fill:#0f1c3d; stroke:rgba(255,255,255,.15); stroke-width:1; }
.cd-pc-bar-track{ fill:rgba(255,255,255,.1); }
.cd-pc-bar-fill{ fill:var(--color-accent); transform-box:fill-box; transform-origin:left; transform:scaleX(0); }
.cloud-diagram.is-running .cd-pc-bar-fill{ animation:cd-bar-fill 2.6s ease-in-out infinite; }
@keyframes cd-bar-fill{
  0%{ transform:scaleX(0); }
  55%{ transform:scaleX(1); }
  100%{ transform:scaleX(1); }
}
.cd-label{ fill:rgba(255,255,255,.7); font-family:'Inter',sans-serif; font-size:10px; text-anchor:middle; }
.cd-label-strong{ fill:#fff; font-family:'Poppins',sans-serif; font-weight:600; font-size:11.5px; text-anchor:middle; }

.cd-pipe{ stroke:rgba(255,255,255,.16); stroke-width:2; fill:none; stroke-dasharray:4 4; }
.cd-packet{ fill:var(--color-accent); opacity:0; }
.cloud-diagram.is-running .cd-packet{ animation:cd-packet-move 1.4s linear infinite; }
.cd-packet.k2{ animation-delay:.35s !important; }
.cd-packet.k3{ animation-delay:.7s !important; }
.cd-packet.k4{ animation-delay:1.05s !important; }
@keyframes cd-packet-move{
  0%{ transform:translateX(0); opacity:0; }
  12%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateX(var(--tx)); opacity:0; }
}

.cd-server-shell{ fill:#0f1c3d; stroke:var(--color-primary-light); stroke-width:1.6; }
.cd-server-blade{ fill:#1c3168; stroke:rgba(77,120,255,.4); stroke-width:1; }
.cd-server-led{ fill:#324a80; }
.cloud-diagram.is-running .cd-server-led{ animation:led-blink 1.1s steps(1,end) infinite; }
.cd-server-led.l2{ animation-delay:.28s !important; }
.cd-server-led.l3{ animation-delay:.56s !important; }
.cd-server-led.l4{ animation-delay:.84s !important; }

.cd-cloud{ fill:none; stroke:rgba(255,255,255,.3); stroke-width:1.8; }
.cloud-diagram.is-running .cd-cloud{ animation:cd-cloud-on 2.6s ease-in-out infinite; }
@keyframes cd-cloud-on{
  0%,50%{ stroke:rgba(255,255,255,.3); filter:none; }
  75%,90%{ stroke:var(--color-accent); filter:drop-shadow(0 0 5px var(--color-accent)); }
  100%{ stroke:rgba(255,255,255,.3); filter:none; }
}

@media (prefers-reduced-motion: reduce){
  .gps-diagram:not(.is-running) *, .cloud-diagram:not(.is-running) *{ animation:none !important; }
}

/* Reveal-on-scroll ---------------------------------------------------*/
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }