/* =========================================================
   DISI TECH — MAIN STYLESHEET
   Base → Layout → Components → Utilities → Page-specific
   ========================================================= */

/* ---------------- RESET ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body,h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul[class],ol[class]{ list-style:none; margin:0; padding:0; }
img,picture,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

body{
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
  overflow-x:hidden;
}

::selection{ background:var(--c-blue-600); color:#fff; }

:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:4px;
}

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:1rem; top:-60px; z-index:200;
  background:var(--c-blue-600); color:#fff; padding:.75rem 1.25rem;
  border-radius:var(--r-sm); transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* ---------------- TYPOGRAPHY ---------------- */
h1,h2,h3,h4,.font-display{ font-family:var(--font-display); font-weight:600; line-height:var(--lh-tight); letter-spacing:-.02em; color:var(--text-primary); }
h1{ font-size:var(--fs-h1); font-weight:700; }
h2{ font-size:var(--fs-h2); font-weight:700; }
h3{ font-size:var(--fs-h3); font-weight:600; }
h4{ font-size:var(--fs-h4); font-weight:600; }
p{ color:var(--text-secondary); }
.lead{ font-size:var(--fs-lead); color:var(--text-secondary); line-height:var(--lh-snug); }
.text-small{ font-size:var(--fs-small); }
.text-xs{ font-size:var(--fs-xs); }

.gradient-text{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2);
  padding:.4rem .9rem; border:1px solid var(--surface-glass-border);
  background:var(--surface-glass); border-radius:var(--r-pill);
  backdrop-filter:blur(8px);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--grad-brand); flex:none; }

/* ---------------- LAYOUT ---------------- */
.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.section{ padding-block:var(--sp-9); position:relative; }
.section-tight{ padding-block:var(--sp-7); }
.section-head{ max-width:680px; margin-bottom:var(--sp-7); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head > .eyebrow{ margin-bottom:var(--sp-4); }
.section-head h2{ margin-block:.75rem 1rem; }

.bg-elevated{ background:var(--bg-elevated); }
.bg-radial-glow{ position:relative; }
.bg-radial-glow::before{
  content:""; position:absolute; inset:0; background:var(--grad-radial-glow);
  pointer-events:none; z-index:0;
}
.bg-radial-glow > *{ position:relative; z-index:1; }

.grid{ display:grid; gap:var(--sp-6); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-2{ gap:.5rem; } .gap-3{ gap:.75rem; } .gap-4{ gap:1rem; } .gap-5{ gap:1.5rem; }

.divider{ height:1px; background:var(--border-subtle); border:0; margin-block:var(--sp-7); }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.9rem 1.6rem; border-radius:var(--r-pill);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
  white-space:nowrap; border:1px solid transparent;
}
.btn:active{ transform:scale(.97); }
.btn-lg{ padding:1.05rem 2rem; font-size:1rem; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.85rem; }

.btn-primary{
  background:var(--grad-brand); color:#fff; box-shadow:var(--glow-blue);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(37,99,255,.45), 0 14px 40px rgba(37,99,255,.35); }

.btn-secondary{
  background:var(--surface-glass); color:var(--text-primary); border-color:var(--surface-glass-border);
  backdrop-filter:blur(8px);
}
.btn-secondary:hover{ border-color:var(--c-blue-500); transform:translateY(-2px); background:rgba(255,255,255,.07); }

.btn-ghost{ color:var(--text-primary); padding-inline:.25rem; }
.btn-ghost::after{ content:"→"; transition:transform var(--dur-fast) var(--ease-out); }
.btn-ghost:hover::after{ transform:translateX(4px); }

.btn-whatsapp{ background:#25D366; color:#06210f; }
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,.35); }

.btn-block{ width:100%; }

/* ---------------- NAVBAR ---------------- */
.navbar{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-med), background var(--dur-med), box-shadow var(--dur-med);
}
.navbar.is-scrolled{ border-bottom-color:var(--border-subtle); box-shadow:var(--shadow-sm); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-logo img{ height:34px; width:auto; }
.nav-logo .wordmark{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.nav-logo .wordmark b{ font-weight:700; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Theme-aware logo: swap asset instead of filtering, so the gradient mark stays intact */
.logo-mark-light{ display:none; }
[data-theme="light"] .logo-mark-dark{ display:none; }
[data-theme="light"] .logo-mark-light{ display:block; }

.nav-links{ display:flex; align-items:center; gap:var(--sp-6); }
.nav-links a{
  font-size:.92rem; font-weight:500; color:var(--text-secondary);
  position:relative; padding:.4rem 0; transition:color var(--dur-fast);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--grad-brand); transition:width var(--dur-fast) var(--ease-out);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--text-primary); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:var(--sp-4); }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--surface-glass-border); background:var(--surface-glass); flex:none;
}
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{ display:none; width:40px; height:40px; flex:none; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--text-primary); margin:5px auto; transition:transform .25s var(--ease-out), opacity .2s; }

/* Only one "Get Free Consultation" CTA should ever be visible at a time:
   the compact one in nav-actions on desktop, the full-width one inside the
   mobile menu on small screens. */
.nav-cta-mobile{ display:none; }

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:var(--header-h) 0 0 0; flex-direction:column; justify-content:flex-start;
    padding:var(--sp-7) var(--container-pad); gap:var(--sp-5);
    background:var(--bg); transform:translateX(100%); transition:transform var(--dur-med) var(--ease-in-out);
    z-index:99;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.1rem; }
  .nav-cta-mobile{ display:inline-flex; margin-top:1rem; }
  .nav-cta-desktop{ display:none; }
  body.menu-open{ overflow:hidden; }
  .nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity:0; }
  .nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------------- HERO ---------------- */
.hero{
  padding-block:calc(var(--sp-9) + 1rem) var(--sp-9);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:-20%; left:50%; translate:-50% 0;
  width:1100px; height:600px; background:var(--grad-radial-glow); filter:blur(20px);
  pointer-events:none; z-index:0;
}
.hero-inner{ position:relative; z-index:1; max-width:840px; margin-inline:auto; text-align:center; }
.hero h1{ margin-block:1.25rem 1.25rem; }
.hero .lead{ max-width:620px; margin-inline:auto; }
.hero-ctas{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-6); }
.hero-trust{ margin-top:var(--sp-8); }
.hero-visual{ margin-top:var(--sp-8); position:relative; }

@media (max-width:640px){
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
}

/* ---------------- STAT STRIP ---------------- */
.stat-strip{ border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.stat{ text-align:center; padding-block:var(--sp-6); }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,1.4rem + 2vw,3rem); }
.stat .label{ color:var(--text-tertiary); font-size:var(--fs-small); margin-top:.25rem; }

/* ---------------- CARDS ---------------- */
.card{
  background:var(--surface-glass); border:1px solid var(--surface-glass-border);
  border-radius:var(--r-lg); padding:var(--sp-6);
  backdrop-filter:blur(10px);
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med), box-shadow var(--dur-med), background var(--dur-med);
}
.card:hover{ transform:translateY(-6px); border-color:var(--c-blue-500); box-shadow:var(--glow-cyan); }

.icon-badge{
  width:52px; height:52px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-brand-soft); border:1px solid var(--surface-glass-border);
  margin-bottom:var(--sp-5); flex:none;
}
.icon-badge svg{ width:24px; height:24px; stroke:var(--accent-2); }

.service-card h3{ margin-bottom:.6rem; font-size:1.2rem; }
.service-card p{ margin-bottom:1rem; }
.service-card .card-link{ font-size:.88rem; font-weight:600; color:var(--accent-2); display:inline-flex; align-items:center; gap:.4rem; }
.service-card .card-link svg{ width:14px; height:14px; transition:transform var(--dur-fast); }
.service-card:hover .card-link svg{ transform:translateX(4px); }

.tag-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.tag{
  font-size:var(--fs-xs); font-weight:600; padding:.35rem .7rem; border-radius:var(--r-pill);
  background:var(--surface-glass); border:1px solid var(--surface-glass-border); color:var(--text-secondary);
}

/* ---------------- PROCESS / TIMELINE ---------------- */
.process-row{ display:flex; gap:var(--sp-5); padding-bottom:var(--sp-7); }
.process-row:last-child{ padding-bottom:0; }
.process-col{ display:flex; flex-direction:column; align-items:center; flex:none; }
.process-col .idx{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  width:48px; height:48px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--surface-glass-border);
  color:var(--accent-2);
}
.process-col .line{ width:1px; flex:1; background:var(--border-subtle); margin-block:.5rem; }
.process-row:last-child .line{ display:none; }
.process-content{ padding-top:.6rem; }
.process-content h4{ margin-bottom:.4rem; }

/* ---------------- PORTFOLIO ---------------- */
.portfolio-card{ overflow:hidden; padding:0; }
.portfolio-media{
  aspect-ratio:16/10; width:100%; position:relative; overflow:hidden;
  background:var(--bg-elevated-2);
}
.portfolio-media img,.portfolio-media .thumb-fallback{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.portfolio-card:hover .portfolio-media img,.portfolio-card:hover .thumb-fallback{ transform:scale(1.06); }
.thumb-fallback{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  font-family:var(--font-display); font-weight:700; color:var(--text-primary);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(37,99,255,.35), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(0,224,255,.28), transparent 60%),
    var(--bg-elevated-2);
  flex-direction:column; gap:.25rem;
}
.thumb-fallback svg{ width:40px; height:40px; stroke:var(--text-primary); opacity:.7; flex:none; }
.portfolio-body{ padding:var(--sp-5) var(--sp-6) var(--sp-6); }
.portfolio-tag{ color:var(--accent-2); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-body h3{ margin-block:.4rem .5rem; font-size:1.15rem; }
.portfolio-result{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-subtle);
  display:flex; gap:1.5rem; flex-wrap:wrap;
}
.portfolio-result .metric b{ display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--text-primary); }
.portfolio-result .metric span{ font-size:var(--fs-xs); color:var(--text-tertiary); }

/* ---------------- TESTIMONIALS ---------------- */
.testimonial-card{ display:flex; flex-direction:column; height:100%; }
.stars{ color:#FFC94A; letter-spacing:.15em; margin-bottom:1rem; font-size:1rem; }
.testimonial-card blockquote{ color:var(--text-primary); font-size:1.02rem; line-height:1.6; flex:1; }
.testimonial-author{ display:flex; align-items:center; gap:.75rem; margin-top:var(--sp-5); }
.avatar-fallback{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--grad-brand); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#fff; font-size:.95rem;
}
.testimonial-author .name{ font-weight:600; color:var(--text-primary); font-size:.92rem; }
.testimonial-author .role{ font-size:var(--fs-xs); color:var(--text-tertiary); }

.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:var(--sp-9); width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--text-tertiary); white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------- PRICING ---------------- */
.pricing-card{ display:flex; flex-direction:column; position:relative; }
.pricing-card.featured{ border-color:var(--c-blue-500); box-shadow:var(--glow-blue); background:linear-gradient(180deg, rgba(37,99,255,.08), rgba(0,224,255,.02)); }
.pricing-badge{
  position:absolute; top:-14px; right:var(--sp-6); background:var(--grad-brand); color:#fff;
  font-size:var(--fs-xs); font-weight:700; padding:.35rem .8rem; border-radius:var(--r-pill);
}
.pricing-card .price{ font-family:var(--font-display); font-weight:700; font-size:2.1rem; margin-block:.5rem .25rem; }
.pricing-card .price small{ font-size:.9rem; font-weight:500; color:var(--text-tertiary); }
.pricing-card .best-for{ color:var(--text-tertiary); font-size:var(--fs-small); margin-bottom:1.25rem; }
.pricing-features{ margin-block:1.25rem 1.5rem; flex:1; }
.pricing-features li{ display:flex; gap:.6rem; align-items:flex-start; padding-block:.4rem; font-size:.92rem; color:var(--text-secondary); }
.pricing-features svg{ width:16px; height:16px; flex:none; margin-top:3px; stroke:var(--accent-2); }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom:1px solid var(--border-subtle); }
.faq-question{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-block:1.4rem; text-align:left; font-family:var(--font-display); font-weight:600; font-size:1.02rem;
}
.faq-question .plus{ flex:none; width:22px; height:22px; position:relative; }
.faq-question .plus::before,.faq-question .plus::after{ content:""; position:absolute; background:var(--accent-2); transition:transform var(--dur-fast) var(--ease-out); }
.faq-question .plus::before{ width:100%; height:2px; top:50%; left:0; translate:0 -50%; }
.faq-question .plus::after{ width:2px; height:100%; left:50%; top:0; translate:-50% 0; }
.faq-item.is-open .plus::after{ transform:rotate(90deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-in-out); }
.faq-answer p{ padding-bottom:1.4rem; padding-right:2rem; }

/* ---------------- FORMS ---------------- */
.field{ margin-bottom:var(--sp-5); }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.5rem; color:var(--text-primary); }
.field .req{ color:var(--accent-2); }
.field input,.field textarea,.field select{
  width:100%; padding:.9rem 1rem; border-radius:var(--r-sm);
  background:var(--surface-glass); border:1px solid var(--surface-glass-border); color:var(--text-primary);
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
/* Native <option> popups don't inherit glass/blur backgrounds, so style them
   explicitly for readable contrast in both themes. */
.field select{ background-color:var(--bg-elevated); }
.field select option{
  background-color:var(--bg-elevated);
  color:var(--text-primary);
  padding:.5rem;
}
.field select option:checked,.field select option:hover{
  background-color:var(--c-blue-600);
  color:#fff;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-tertiary); }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--c-blue-500); background:var(--surface-glass); outline:none; }
.field textarea{ resize:vertical; min-height:130px; }
.field-error{ color:#FF6B6B; font-size:var(--fs-xs); margin-top:.4rem; display:none; }
.field.has-error input,.field.has-error textarea{ border-color:#FF6B6B; }
.field.has-error .field-error{ display:block; }
.checkbox-row{ display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--text-secondary); }
.checkbox-row input{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--c-blue-600); }
.form-note{ font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:var(--sp-3); }
.form-success{
  display:none; text-align:center; padding:var(--sp-8) var(--sp-5);
}
.form-success.is-visible{ display:block; }
.form-success .icon-badge{ margin-inline:auto; width:64px; height:64px; }
.form-success .icon-badge svg{ width:30px; height:30px; }

/* ---------------- CTA BAND ---------------- */
.cta-band{
  border-radius:var(--r-xl); padding:var(--sp-8) var(--sp-6); text-align:center; position:relative; overflow:hidden;
  background:var(--bg-elevated); border:1px solid var(--surface-glass-border);
}
.cta-band::before{ content:""; position:absolute; inset:0; background:var(--grad-radial-glow); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ max-width:600px; margin-inline:auto; }
.cta-band .lead{ margin-top:.75rem; }
.cta-band .hero-ctas{ margin-top:var(--sp-6); }

/* ---------------- FOOTER ---------------- */
.footer{ border-top:1px solid var(--border-subtle); padding-block:var(--sp-8) var(--sp-6); background:var(--bg-elevated); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-7); }
.footer-brand .nav-logo{ margin-bottom:var(--sp-4); }
.footer-brand p{ max-width:280px; font-size:.92rem; }
.footer-social{ display:flex; gap:.6rem; margin-top:var(--sp-5); }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-glass); border:1px solid var(--surface-glass-border); transition:border-color var(--dur-fast), transform var(--dur-fast);
}
.footer-social a:hover{ border-color:var(--c-blue-500); transform:translateY(-2px); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--sp-4); color:var(--text-tertiary); }
.footer-col ul li{ margin-bottom:.7rem; }
.footer-col a{ font-size:.92rem; color:var(--text-secondary); transition:color var(--dur-fast); }
.footer-col a:hover{ color:var(--accent-2); }
.footer-bottom{
  margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--border-subtle);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-bottom p{ font-size:var(--fs-xs); }
.footer-legal{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-legal a{ font-size:var(--fs-xs); color:var(--text-tertiary); }
.footer-legal a:hover{ color:var(--text-primary); }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------------- FLOATING WHATSAPP ---------------- */
.wa-float{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:150;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform var(--dur-fast) var(--ease-out);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }
.wa-float .ping{
  position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.6;
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.55;} 100%{ transform:scale(1.9); opacity:0;} }

.back-to-top{
  position:fixed; right:1.5rem; bottom:5.75rem; z-index:150;
  width:44px; height:44px; border-radius:50%; background:var(--bg-elevated);
  border:1px solid var(--surface-glass-border); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity var(--dur-fast), transform var(--dur-fast);
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top svg{ width:18px; height:18px; }

/* ---------------- COOKIE CONSENT ---------------- */
.cookie-bar{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200;
  max-width:520px; margin-inline:auto;
  background:var(--bg-elevated); border:1px solid var(--surface-glass-border);
  border-radius:var(--r-lg); padding:1.25rem 1.4rem; box-shadow:var(--shadow-lg);
  display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;
  transform:translateY(140%); transition:transform var(--dur-med) var(--ease-out);
}
.cookie-bar.is-visible{ transform:translateY(0); }
.cookie-bar p{ font-size:.85rem; flex:1 1 240px; }
.cookie-bar .cookie-actions{ display:flex; gap:.6rem; flex:none; }

/* ---------------- BREADCRUMB / PAGE HEADER ---------------- */
.page-header{ padding-block:var(--sp-8) var(--sp-6); text-align:center; }
.breadcrumb{ display:flex; gap:.5rem; justify-content:center; font-size:var(--fs-xs); color:var(--text-tertiary); margin-bottom:var(--sp-4); }
.breadcrumb a:hover{ color:var(--text-primary); }

/* ---------------- REVEAL ANIMATION ---------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------------- MISC UTILITIES ---------------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{ text-align:center; }
.max-w-sm{ max-width:480px; } .max-w-md{ max-width:640px; } .max-w-lg{ max-width:820px; }
.mx-auto{ margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pill-check{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--text-secondary); }
.pill-check svg{ width:16px; height:16px; stroke:var(--accent-2); flex:none; }

@media (max-width:900px){
  .grid-2.split-hero{ grid-template-columns:1fr; }
}