/* ============================================================
   HydroForce — Agua de especialidad industrial
   Production CSS. Vanilla HTML for static hosting (GoDaddy).
   ============================================================ */

:root {
  /* Brand palette — distilled from official Instagram brand posts
     (assets/instagram/*.jpeg): deep navy + vivid blue from the logo's
     water drop, plus the leaf's green as the "energy" accent. */
  --c-primary:#0A2A5C;
  --c-heading:#0A2A5C;
  --c-accent:#0B57C4;
  --c-accent2:#63C1D8;
  --c-green:#6FA82A;      /* vivid brand green — icons, dots, dark backgrounds */
  --c-green-text:#5A8A22; /* darkened for AA contrast when used as text on white */
  --c-bg:#EEF1F4;
  --c-surface:#FFFFFF;
  --c-text:#141B23;
  --c-muted:#5A6675;
  --c-border:#D7DDE4;
  --c-onp:#FFFFFF;   /* text on primary */
  --c-ona:#FFFFFF;   /* text on accent */

  --f-head:'Space Grotesk',sans-serif;
  --f-body:'IBM Plex Sans',sans-serif;
  --f-hw:700;
  --f-tr:-0.02em;
  --f-tt:none;

  --maxw:1180px;
  --pad:32px;
}

*{box-sizing:border-box;}
.hl-green{color:var(--c-green-text);}
.hero h1 .hl-green,
.hl-green--on-dark{color:var(--c-green);}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  background:var(--c-bg);
  color:var(--c-text);
  overflow-x:hidden;
}
a{color:var(--c-accent);text-decoration:none;}
a:hover{color:var(--c-heading);}

img{display:block;max-width:100%;}

/* Animations */
@keyframes hf-flare{
  0%{transform:translateX(-130%) skewX(-18deg);}
  55%{transform:translateX(230%) skewX(-18deg);}
  100%{transform:translateX(230%) skewX(-18deg);}
}
@keyframes hf-border{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes hf-pop{
  from{opacity:0;transform:translateY(14px) scale(.98);}
  to{opacity:1;transform:none;}
}

/* Initial state for GSAP-revealed elements (prevents FOUC if JS disabled) */
[data-anim]{will-change:transform,opacity;}

/* ============================================================
   Layout helpers
   ============================================================ */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

.eyebrow{
  font-weight:600;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-accent);
}
.eyebrow--on-dark{color:color-mix(in srgb,var(--c-onp) 70%,transparent);}

.h2{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  letter-spacing:var(--f-tr);
  text-transform:var(--f-tt);
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.08;
  margin:14px 0 0;
}
.h2--big{font-size:clamp(30px,3.4vw,44px);}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:color-mix(in srgb,var(--c-surface) 82%,transparent);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  border-bottom:1px solid color-mix(in srgb,var(--c-border) 60%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 12%,transparent) inset;
}
.site-header__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:6px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-logo{height:100px;width:auto;margin:-6px 0;}
.site-nav{
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.site-nav a{
  color:var(--c-muted);
  font-weight:500;
  font-size:15px;
}
.site-nav a:hover{color:var(--c-heading);}
.site-nav a.cta-flare,
.site-nav a.cta-flare:hover{color:var(--c-ona);}
.cta-flare{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,var(--c-accent),color-mix(in srgb,var(--c-accent) 70%,#7fd4ff),var(--c-accent));
  background-size:220% 220%;
  animation:hf-border 5s ease infinite;
  color:var(--c-ona);
  padding:11px 20px;
  border-radius:9px;
  font-weight:600;
  font-size:14px;
  display:inline-block;
  white-space:nowrap;
  flex:none;
}
.cta-flare::before{
  content:'';
  position:absolute;
  top:0;bottom:0;left:0;
  width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  animation:hf-flare 3.2s ease-in-out infinite;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:min(94vh,900px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#04101F;
}
.hero__bg{
  position:absolute;
  inset:0;
}
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(98deg,rgba(3,12,26,.85) 0%,rgba(3,12,26,.62) 38%,rgba(3,12,26,.18) 68%,rgba(3,12,26,0) 100%),
    linear-gradient(to top,rgba(3,12,26,.72),rgba(3,12,26,0) 38%),
    linear-gradient(to bottom,rgba(3,12,26,.5),rgba(3,12,26,0) 22%);
}
.hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  padding:110px var(--pad) 130px;
  pointer-events:none;
}
.hero__inner--split{
  display:flex;
  align-items:center;
  gap:48px;
}
.hero__content{flex:1 1 auto;min-width:0;}
.hero__truck-card{
  flex:none;
  align-self:flex-start;
  margin-top:-40px;
  width:560px;
  max-width:54%;
  height:min(80vh,760px);
  display:flex;
  border-radius:24px;
  padding:14px;
  background:color-mix(in srgb,var(--c-onp) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c-onp) 22%,transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 50px -24px rgba(0,10,25,.6);
  pointer-events:auto;
}
.hero__truck-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:35% center;
  border-radius:16px;
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px;
  border-radius:100px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#BFE0FF;
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hero__badge-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--c-accent2);
  box-shadow:0 0 10px var(--c-accent2);
}
.hero h1{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  letter-spacing:var(--f-tr);
  text-transform:var(--f-tt);
  color:#FFFFFF;
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.02;
  margin:26px 0 0;
  max-width:820px;
  text-shadow:0 2px 30px rgba(0,20,45,.45);
  text-wrap:pretty;
}
.hero__lede{
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.6;
  color:rgba(226,240,252,.85);
  max-width:560px;
  margin:24px 0 0;
  text-shadow:0 1px 18px rgba(0,20,45,.5);
}
.hero__pillars{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-green);
  margin:14px 0 0;
  text-shadow:0 1px 18px rgba(0,20,45,.5);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:36px;
}
.btn{
  pointer-events:auto;
  display:inline-block;
  border-radius:12px;
  font-weight:600;
  font-size:16px;
  padding:16px 30px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn--primary{
  background:var(--c-accent);
  color:var(--c-ona);
  box-shadow:0 14px 38px -12px color-mix(in srgb,var(--c-accent) 70%,transparent);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px -12px color-mix(in srgb,var(--c-accent) 85%,transparent);
  color:var(--c-ona);
}
.btn--ghost{
  background:rgba(255,255,255,.08);
  color:#FFFFFF;
  border:1.5px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px);
  padding:16px 28px;
}
.btn--ghost:hover{
  background:rgba(255,255,255,.16);
  color:#FFFFFF;
}
.hero__stats{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin-top:52px;
  flex-wrap:wrap;
}
.stat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 22px;
  border-radius:14px;
  background:rgba(6,20,40,.5);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
}
.stat__num{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  color:#FFFFFF;
  font-size:26px;
  line-height:1;
}
.stat__lbl{font-size:13px;color:rgba(210,230,248,.75);line-height:1.3;}
.cert-row{display:flex;align-items:center;gap:12px;}
.cert{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#EAF4FE;
  font-size:14px;
}
.cert__dot{width:9px;height:9px;border-radius:50%;background:var(--c-accent2);}

.hero__scroll{
  position:absolute;
  left:50%;bottom:26px;
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(214,234,250,.75);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
}
.hero__scroll-icon{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(214,234,250,.5);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  animation:hf-pop 2.4s ease infinite alternate;
}

/* ============================================================
   Soluciones
   ============================================================ */
.section--soluciones{
  position:relative;
  background:var(--c-primary);
  color:var(--c-onp);
  overflow:hidden;
}
.section--soluciones__bg{
  position:absolute;inset:0;
  background:url('../assets/water.jpg') center/cover no-repeat;
  opacity:.2;
}
.section--soluciones__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--c-primary) 92%,transparent),
    color-mix(in srgb,var(--c-primary) 62%,transparent));
}
.section--soluciones .container{position:relative;padding:72px var(--pad);}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:26px;
  margin-top:44px;
}
.card--glass{
  padding:26px;
  border-radius:16px;
  background:color-mix(in srgb,var(--c-onp) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--c-onp) 20%,transparent);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -24px rgba(0,10,25,.5);
}
.card--glass__head{
  display:flex;
  align-items:center;
  gap:12px;
}
.card--glass__icon{
  width:40px;height:40px;
  border-radius:11px;
  background:color-mix(in srgb,var(--c-accent) 22%,transparent);
  color:var(--c-accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.card--glass__title{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  font-size:20px;
}
.card--glass p{
  color:color-mix(in srgb,var(--c-onp) 78%,transparent);
  line-height:1.6;
  margin:10px 0 0;
}

/* ============================================================
   Industrias
   ============================================================ */
.section--industrias{padding:78px var(--pad);max-width:var(--maxw);margin:0 auto;}
.section--industrias__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.ind-head__intro{max-width:620px;}
.ind-head__note{color:var(--c-muted);max-width:340px;line-height:1.6;}
.ind-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:22px;
  margin-top:44px;
}
.ind-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:18px;
  padding:28px;
  transition:transform .2s ease;
}
.ind-card:hover{transform:translateY(-4px);}
.ind-card__img{
  position:relative;
  height:210px;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:20px;
}
.ind-card__img img{width:100%;height:100%;object-fit:cover;}
.ind-card__head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
}
.ind-card__icon{
  width:44px;height:44px;flex:none;
  border-radius:11px;
  background:color-mix(in srgb,var(--c-accent) 12%,transparent);
  color:var(--c-accent);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ind-card__title{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  font-size:20px;
  color:var(--c-text);
}
.ind-card p{color:var(--c-muted);line-height:1.6;margin:8px 0 0;}

/* ============================================================
   Valor
   ============================================================ */
.section--valor{
  position:relative;
  background:var(--c-surface);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  overflow:hidden;
}
.section--valor__bg{
  position:absolute;inset:0;
  background:url('../assets/water-light.jpg') center/cover no-repeat;
  opacity:.45;
}
.section--valor__scrim{
  position:absolute;inset:0;
  background:linear-gradient(105deg,
    color-mix(in srgb,var(--c-surface) 90%,transparent) 30%,
    color-mix(in srgb,var(--c-surface) 45%,transparent));
}
.section--valor .container{position:relative;padding:78px var(--pad);}
.valor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:14px 40px;
  margin-top:40px;
}
.valor-item{
  display:flex;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--c-border);
}
.valor-item__check{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--c-accent2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.valor-item__title{font-weight:700;color:var(--c-text);font-size:17px;}
.valor-item p{color:var(--c-muted);line-height:1.55;margin:6px 0 0;font-size:15px;}

/* ============================================================
   Proceso
   ============================================================ */
.section--proceso{max-width:var(--maxw);margin:0 auto;padding:78px var(--pad);}
.proc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:24px;
  margin-top:44px;
}
.proc-step__num{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  font-size:44px;
  color:color-mix(in srgb,var(--c-accent) 35%,transparent);
  line-height:1;
}
.proc-step__line{height:2px;background:var(--c-border);margin:16px 0;}
.proc-step__title{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  font-size:19px;
  color:var(--c-text);
}
.proc-step p{color:var(--c-muted);line-height:1.6;margin:8px 0 0;}
.proc-hero{
  position:relative;
  height:340px;
  border-radius:20px;
  overflow:hidden;
  margin-top:56px;
  box-shadow:0 30px 60px -35px color-mix(in srgb,var(--c-primary) 60%,transparent);
}
.proc-hero img{width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.proc-hero__tag{
  position:absolute;
  right:20px;bottom:20px;
  pointer-events:none;
  background:rgba(6,20,40,.55);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:12px 18px;
  color:#fff;
  font-weight:600;
  font-size:14px;
}

/* ============================================================
   Contacto
   ============================================================ */
.section--contacto{
  position:relative;
  background:var(--c-primary);
  color:var(--c-onp);
  overflow:hidden;
}
.section--contacto__bg{position:absolute;inset:0;}
.section--contacto__scrim{
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--c-primary) 90%,transparent),
    color-mix(in srgb,var(--c-primary) 45%,transparent));
}
.section--contacto .container{position:relative;padding:80px var(--pad);}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:56px;
  align-items:start;
}
.contact h2{
  font-family:var(--f-head);
  font-weight:var(--f-hw);
  letter-spacing:var(--f-tr);
  text-transform:var(--f-tt);
  font-size:clamp(30px,3.6vw,50px);
  line-height:1.04;
  margin:0;
}
.contact__lede{
  color:color-mix(in srgb,var(--c-onp) 80%,transparent);
  font-size:18px;
  line-height:1.6;
  margin:20px 0 32px;
  max-width:480px;
}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  background:color-mix(in srgb,var(--c-onp) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--c-onp) 20%,transparent);
  backdrop-filter:blur(14px);
  border-radius:18px;
  padding:24px;
  max-width:520px;
}
.contact-form input,
.contact-form textarea{
  background:color-mix(in srgb,var(--c-onp) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c-onp) 24%,transparent);
  border-radius:10px;
  padding:13px 14px;
  color:var(--c-onp);
  font-size:15px;
  font-family:var(--f-body);
  outline:none;
  transition:border-color .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--c-accent);}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:color-mix(in srgb,var(--c-onp) 55%,transparent);
  opacity:1;
}
.contact-form textarea{
  grid-column:span 2;
  resize:vertical;
}
.contact-form button{
  grid-column:span 2;
  background:var(--c-accent);
  color:var(--c-ona);
  padding:15px 30px;
  border-radius:12px;
  font-weight:600;
  font-size:16px;
  border:none;
  cursor:pointer;
  font-family:var(--f-body);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.contact-form button:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 14px 32px -12px color-mix(in srgb,var(--c-accent) 80%,transparent);
}
.contact-form button:disabled{opacity:.7;cursor:default;}
.form-status{
  grid-column:span 2;
  font-size:14px;
  text-align:center;
  min-height:18px;
}
.form-status--ok{color:var(--c-accent2);}
.form-status--err{color:#ff8a8a;}

.contact-card{
  position:relative;
  min-height:520px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(0,10,25,.7);
  align-self:stretch;
}
.contact-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.contact-card__panel{
  position:absolute;
  left:18px;right:18px;bottom:18px;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:rgba(4,16,31,.6);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  border-radius:14px;
  padding:20px 22px;
}
.contact-card__row{display:flex;gap:14px;align-items:center;}
.contact-card__icon{
  width:38px;height:38px;flex:none;
  border-radius:10px;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
}
.contact-card__lbl{font-size:12px;color:rgba(255,255,255,.65);}
.contact-card__val{font-weight:600;color:#fff;text-decoration:none;}
a.contact-card__val:hover{text-decoration:underline;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--c-surface);
  border-top:1px solid var(--c-border);
}
.site-footer__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.site-footer__logo{height:76px;width:auto;flex:none;}
.site-footer__copy{color:var(--c-muted);font-size:14px;white-space:nowrap;}
.site-footer__copy-tag::before{content:' · ';}

/* ============================================================
   Mobile menu
   ============================================================ */
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--c-border);
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  color:var(--c-text);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  :root{--pad:22px;}
  .site-logo{height:60px;}
  .site-nav{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--c-surface);
    border-bottom:1px solid var(--c-border);
    padding:12px var(--pad) 20px;
    box-shadow:0 18px 30px -18px rgba(0,0,0,.18);
  }
  .site-nav.is-open{display:flex;}
  .site-nav a{padding:12px 0;border-bottom:1px solid var(--c-border);}
  .site-nav a:last-child{border-bottom:none;}
  .cta-flare{margin-top:8px;text-align:center;}
  .nav-toggle{display:block;}
  .hero__inner{padding:40px var(--pad) 110px;}
  .hero__inner--split{flex-direction:column;align-items:stretch;gap:28px;}
  .hero__truck-card{width:100%;max-width:none;height:280px;margin-top:0;order:-1;}
  .hero h1{font-size:clamp(34px,8vw,56px);}
  .hero__stats{gap:10px;}
  .stat{padding:12px 16px;}
  .contact-grid{gap:36px;}
  .contact-form{grid-template-columns:1fr;}
  .contact-form textarea,
  .contact-form button,
  .form-status{grid-column:span 1;}
}

@media (max-width:560px){
  :root{--pad:18px;}
  .hero__badge{font-size:11px;padding:7px 13px;}
  .hero h1{font-size:clamp(28px,9vw,42px);}
  .site-footer__inner{flex-wrap:nowrap;justify-content:space-between;gap:12px;}
  .site-footer__logo{height:64px;}
  .site-footer__copy{white-space:normal;font-size:12px;line-height:1.4;text-align:right;}
  .site-footer__copy-main{display:block;white-space:nowrap;}
  .site-footer__copy-tag{display:block;}
  .site-footer__copy-tag::before{content:'';}
  .hero__lede{font-size:16px;}
  .btn{font-size:15px;padding:14px 22px;width:100%;text-align:center;}
  .hero__actions{flex-direction:column;}
  .card--glass,.ind-card{padding:22px;}
  .proc-hero{height:230px;}
  .contact-card{min-height:380px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  [data-anim]{opacity:1 !important;transform:none !important;}
}

/* ============================================================
   WhatsApp floating button
   ============================================================ */
.whatsapp-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:55;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  transition:transform .2s ease;
}
.whatsapp-fab:hover{transform:scale(1.08);}
@media (max-width:860px){
  .whatsapp-fab{right:16px;bottom:82px;width:50px;height:50px;}
}

/* ============================================================
   Mobile floating CTA
   ============================================================ */
.mobile-cta{
  display:none;
}
@media (max-width:860px){
  .mobile-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    left:16px;right:16px;
    bottom:16px;
    z-index:50;
    padding:15px 20px;
    border-radius:12px;
    background:linear-gradient(120deg,var(--c-accent),color-mix(in srgb,var(--c-accent) 70%,#7fd4ff),var(--c-accent));
    background-size:220% 220%;
    animation:hf-border 5s ease infinite;
    color:var(--c-ona);
    font-weight:600;
    font-size:15px;
    text-align:center;
    text-decoration:none;
    box-shadow:0 14px 34px -12px rgba(0,20,45,.45);
    transition:transform .3s ease,opacity .3s ease;
  }
  .mobile-cta.is-hidden{
    transform:translateY(140%);
    opacity:0;
    pointer-events:none;
  }
}

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie-banner{
  position:fixed;
  left:50%;bottom:18px;
  transform:translateX(-50%) translateY(140%);
  z-index:60;
  width:min(560px,calc(100vw - 36px));
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:16px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.22);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:16px;
  opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease;
}
.cookie-banner.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
.cookie-banner__text{
  font-size:14px;
  line-height:1.55;
  color:var(--c-text);
}
.cookie-banner__text a{color:var(--c-accent);text-decoration:underline;}
.cookie-banner__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.cookie-banner__btn{
  border:none;
  cursor:pointer;
  font-family:var(--f-body);
  font-weight:600;
  font-size:14px;
  padding:11px 20px;
  border-radius:10px;
  transition:background .2s ease,transform .2s ease;
}
.cookie-banner__btn--primary{
  background:var(--c-accent);
  color:var(--c-ona);
}
.cookie-banner__btn--primary:hover{
  background:color-mix(in srgb,var(--c-accent) 85%,#000);
}
.cookie-banner__btn--ghost{
  background:transparent;
  color:var(--c-muted);
  border:1px solid var(--c-border);
}
.cookie-banner__btn--ghost:hover{
  background:var(--c-bg);
  color:var(--c-text);
}

@media (max-width:560px){
  .cookie-banner{
    bottom:12px;
    width:calc(100vw - 24px);
    padding:18px;
  }
  .cookie-banner__actions{justify-content:stretch;}
  .cookie-banner__btn{flex:1;text-align:center;}
}