/* ====================================================================
   ECCORA v4 — Ultra-Clean White & Light Design System
   Paleta: Blanco Puro + Nieve Light + Cobre ECCORA + Grafito/Naval
   Tipografía: Space Grotesk (display) + DM Sans (body)
   Iconos: Lucide Icons
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ===================================================== DESIGN TOKENS */
:root {
  /* Paleta ECCORA Ultra Light */
  --carbon:      #0F172A; /* Slate Navy para títulos y textos oscuros de alto contraste */
  --graphite:    #1E293B;
  --concrete:    #F1F5F9;
  --warm-white:  #FFFFFF;
  --wood:        #B45309;
  --copper:      #C86D3B;
  --copper-hover:#B25B2B;
  --copper-light:#FFF7ED;
  --copper-border:#FDBA74;
  --forest:      #059669;
  --soft-black:  #0F172A;
  --white:       #FFFFFF;

  /* Semánticos para tema Claro/Blanco */
  --bg:          #FFFFFF;
  --bg-alt:      #F8FAFC;
  --fg:          #0F172A;
  --fg-soft:     #334155;
  --muted:       #64748B;
  --muted-soft:  #94A3B8;
  --line:        #E2E8F0;
  --line-soft:   #F1F5F9;
  --surface:     #FFFFFF;
  --surface-alt: #F8FAFC;
  --accent:      var(--copper);
  --accent-hover:var(--copper-hover);
  --danger:      #EF4444;
  --ok:          #10B981;

  /* Glassmorphism blanco translúcido */
  --glass:       rgba(255, 255, 255, 0.88);
  --glass-strong:rgba(255, 255, 255, 0.96);
  --glass-blur:  20px;
  --glass-saturate:1.8;
  --glass-border:rgba(226, 232, 240, 0.8);

  /* Sombras luminosas y suaves */
  --shadow-xs:   0 1px 3px rgba(15, 23, 42, 0.03);
  --shadow-sm:   0 4px 12px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
  --shadow:      0 10px 30px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.03);
  --shadow-lg:   0 20px 45px rgba(15, 23, 42, 0.09), 0 6px 16px rgba(15, 23, 42, 0.04);
  --shadow-xl:   0 32px 64px rgba(15, 23, 42, 0.12), 0 12px 24px rgba(15, 23, 42, 0.05);
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 12px 35px rgba(15, 23, 42, 0.06);
  --shadow-accent: 0 10px 30px rgba(200, 109, 59, 0.2);

  /* Espaciado */
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;--s32:8rem;

  /* Radios */
  --r-sm:10px;--r-md:18px;--r-lg:28px;--r-xl:36px;--r-full:9999px;

  /* Tipografía */
  --ff-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ff-body:   'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /* Animación */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --dur-fast:180ms; --dur:260ms; --dur-slow:500ms; --dur-glacial:800ms;

  /* Layout */
  --container: 1200px;
  --header-h:  80px;
}

/* ============================================================ RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--ff-body);font-size:16px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;letter-spacing:-.01em;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease-out)}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px;border-radius:4px}
::selection{background:rgba(200,109,59,.18);color:var(--carbon)}

/* ========================================================= TYPOGRAPHY */
h1,h2,h3{font-family:var(--ff-display);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--carbon);text-wrap:balance}
h1{font-size:clamp(2.2rem,6vw,4.2rem);margin-bottom:.35em}
h2{font-size:clamp(1.8rem,3.5vw,3rem);margin-bottom:.45em}
h3{font-size:clamp(1.15rem,2vw,1.5rem);margin-bottom:.4em}
h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--muted)}
p{margin-bottom:1em;color:var(--fg-soft)}
.text-muted{color:var(--muted)}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}

/* ============================================================= ICONS */
.icon-sm{width:18px;height:18px;flex-shrink:0}
.icon-md{width:24px;height:24px;flex-shrink:0}
.icon-lg{width:32px;height:32px;flex-shrink:0}
.lucide{stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================== LAYOUT */
.container{width:min(100% - var(--s8),var(--container));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-9999px;z-index:1001;background:var(--carbon);color:var(--white);padding:var(--s3) var(--s5);border-radius:var(--r-sm);font-weight:600;font-size:.9rem}
.skip-link:focus{left:var(--s4);top:var(--s4)}

/* Grid */
.grid{display:grid;gap:var(--s6)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ========================================================== BUTTONS */
.btn{
  --btn-bg:var(--carbon);--btn-fg:var(--white);--btn-bd:transparent;--btn-sh:var(--shadow-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:.85rem 1.6rem;font-family:var(--ff-display);font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  border-radius:var(--r-full);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-sh);
  cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease-spring),background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),opacity .15s var(--ease-out);
  user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;
}
.btn::after{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 60%);
  opacity:0;transition:opacity var(--dur) var(--ease-out);pointer-events:none;
}
.btn:hover{transform:translateY(-2px);--btn-sh:var(--shadow-md)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.97)}
.btn:disabled{opacity:.45;pointer-events:none;filter:grayscale(.3)}

.btn--primary{--btn-bg:var(--carbon);--btn-fg:var(--white)}
.btn--primary:hover{--btn-bg:var(--graphite)}
.btn--accent,.btn--copper{--btn-bg:var(--copper);--btn-fg:var(--white);--btn-sh:0 4px 14px rgba(200,109,59,.25)}
.btn--accent:hover,.btn--copper:hover{--btn-bg:var(--copper-hover);--btn-sh:0 8px 24px rgba(200,109,59,.35)}
.btn--wood{--btn-bg:var(--wood);--btn-fg:var(--white)}
.btn--wood:hover{--btn-bg:#92400E}
.btn--outline{--btn-bg:var(--white);--btn-fg:var(--carbon);--btn-bd:var(--line);--btn-sh:var(--shadow-xs)}
.btn--outline:hover{--btn-bg:var(--carbon);--btn-fg:var(--white);--btn-bd:var(--carbon)}
.btn--outline-light{--btn-bg:var(--white);--btn-fg:var(--carbon);--btn-bd:var(--line);--btn-sh:var(--shadow-xs)}
.btn--outline-light:hover{--btn-bg:var(--carbon);--btn-fg:var(--white);--btn-bd:var(--carbon)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg-soft);--btn-bd:transparent;--btn-sh:none}
.btn--ghost:hover{--btn-bg:var(--line-soft);--btn-fg:var(--carbon)}
.btn--wa{--btn-bg:#F0FDF4;--btn-fg:#166534;--btn-bd:#BBF7D0}
.btn--wa:hover{--btn-bg:#DCFCE7;--btn-fg:#14532D;--btn-bd:#86EFAC}
.btn--sm{padding:.55rem 1.1rem;font-size:.8rem}
.btn--lg{padding:1rem 2.2rem;font-size:.98rem}
.btn--block{width:100%;justify-content:center}

/* =========================================================== EYEBROW */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--ff-display);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copper);
  padding:.45rem 1.1rem;border:1px solid var(--copper-border);
  border-radius:var(--r-full);background:var(--copper-light);
  margin-bottom:var(--s4);box-shadow:var(--shadow-xs);
}
.eyebrow--light{color:var(--carbon);border-color:var(--line);background:var(--white)}

/* =========================================================== HEADER */
.ecc-header{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),
             backdrop-filter var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
  background:var(--glass-strong);
  backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-xs);
}
.ecc-header.is-solid{
  background:rgba(255,255,255,.98);
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.ecc-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:var(--header-h)}
.ecc-brand{display:inline-flex;align-items:center;flex-shrink:0}
.ecc-brand__img{height:42px;width:auto;transition:filter var(--dur) var(--ease-out);filter:none!important}
.ecc-header.is-dark .ecc-brand__img{filter:none!important}
.ecc-header.is-solid .ecc-brand__img{filter:none!important}

.ecc-nav__list{display:flex;gap:var(--s6);list-style:none}
.ecc-nav a{font-family:var(--ff-display);font-weight:500;font-size:.88rem;letter-spacing:-.01em;position:relative;padding:.35rem 0;color:var(--fg);transition:color var(--dur) var(--ease-out)}
.ecc-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--copper);border-radius:2px;transition:right var(--dur) var(--ease-out)}
.ecc-nav a:hover::after,.ecc-nav a.is-active::after{right:0}
.ecc-nav a:hover,.ecc-nav a.is-active{color:var(--copper)}
.ecc-header.is-dark .ecc-nav a{color:var(--fg)}
.ecc-header.is-dark .ecc-nav a:hover{color:var(--copper)}
.ecc-header.is-solid .ecc-nav a{color:var(--fg)}
.ecc-header.is-solid .ecc-nav a:hover{color:var(--copper)}
.ecc-header__cta{display:flex;gap:var(--s2);align-items:center;flex-shrink:0}

/* Burger */
.ecc-burger{display:none;appearance:none;border:0;background:transparent;cursor:pointer;width:44px;height:44px;padding:10px;position:relative;color:var(--fg);border-radius:var(--r-sm)}
.ecc-burger:hover{background:rgba(15,23,42,.05)}
.ecc-header.is-dark .ecc-burger{color:var(--fg)}
.ecc-header.is-solid .ecc-burger{color:var(--fg)}
.ecc-burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--dur) var(--ease-out),top var(--dur) var(--ease-out),opacity .15s var(--ease-out)}
.ecc-burger span:nth-child(1){top:14px}.ecc-burger span:nth-child(2){top:21px}.ecc-burger span:nth-child(3){top:28px}
.ecc-burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.ecc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ecc-burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

@media(max-width:980px){
  .ecc-nav{position:fixed;inset:var(--header-h) 0 0 0;background:rgba(255,255,255,.98);backdrop-filter:saturate(1.2) blur(24px);-webkit-backdrop-filter:saturate(1.2) blur(24px);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);border-top:1px solid var(--line)}
  .ecc-nav.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
  .ecc-nav__list{flex-direction:column;gap:0;padding:var(--s4) 0}
  .ecc-nav__list li a{display:block;padding:var(--s4) var(--s6);border-bottom:1px solid var(--line-soft);font-size:1rem}
  .ecc-burger{display:grid;place-items:center}
  .ecc-header__cta .btn{display:none}
}

/* ============================================================= HERO */
.ecc-hero{
  position:relative;color:var(--fg);overflow:hidden;
  min-height:92vh;display:flex;align-items:center;
  padding:calc(var(--header-h) + var(--s8)) 0 var(--s20);
  isolation:isolate;background:#FFFFFF;
}
.ecc-hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 50%, #F1F5F9 100%);
}
/* Subtle ambient radial glows */
.ecc-hero__bg::before{
  content:"";position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,109,59,.07),transparent 70%);
  top:-200px;left:-100px;animation:ambient-float 12s ease-in-out infinite;
}
.ecc-hero__bg::after{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.05),transparent 70%);
  bottom:-100px;right:-50px;animation:ambient-float 16s ease-in-out infinite reverse;
}
@keyframes ambient-float{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(40px,-30px) scale(1.1)}
  50%{transform:translate(-20px,20px) scale(.95)}
  75%{transform:translate(-30px,-10px) scale(1.05)}
}

.ecc-hero__inner{max-width:820px}
.ecc-hero__eyebrow{
  display:inline-block;font-family:var(--ff-display);font-weight:600;
  letter-spacing:.2em;font-size:.74rem;text-transform:uppercase;
  color:var(--copper);padding:.55rem 1.2rem;
  border:1px solid var(--copper-border);border-radius:var(--r-full);
  margin-bottom:var(--s6);background:var(--copper-light);
  box-shadow:var(--shadow-xs);
}
.ecc-hero h1{color:var(--carbon);margin-bottom:var(--s4);letter-spacing:-.03em}
.ecc-hero p{color:var(--fg-soft);font-size:clamp(1rem,1.4vw,1.15rem);max-width:60ch}
.ecc-hero__ctas{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s8)}
.ecc-hero__meta{
  display:flex;gap:var(--s8);flex-wrap:wrap;margin-top:var(--s10);
  padding-top:var(--s6);border-top:1px solid var(--line);
  color:var(--muted);font-family:var(--ff-display);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
}

/* ========================================================= SECTIONS */
.ecc-section{padding:var(--s24) 0;background:var(--white)}
.ecc-section--alt{background:var(--bg-alt)}
.ecc-section--dark{background:#F8FAFC;color:var(--fg);border-block:1px solid var(--line)}
.ecc-section--dark h2,.ecc-section--dark h3{color:var(--fg)}
.ecc-section__head{max-width:720px;margin:0 auto var(--s16);text-align:center}
.ecc-section__head .eyebrow{margin-bottom:var(--s4)}
.ecc-section__head p{max-width:56ch;margin-inline:auto}

/* Section divider */
.ecc-divider{height:1px;background:linear-gradient(90deg,transparent,var(--copper),transparent);opacity:.3;margin:0 auto;max-width:200px}

/* ====================================================== TRUST STRIP */
.trust-strip{background:#FFFFFF;color:var(--fg);padding:var(--s5) 0;border-block:1px solid var(--line);box-shadow:var(--shadow-xs)}
.trust-strip ul{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s8);
  list-style:none;align-items:center;
  font-family:var(--ff-display);letter-spacing:.08em;
  text-transform:uppercase;font-size:.76rem;font-weight:600;color:var(--fg-soft);
}
.trust-strip li{display:inline-flex;align-items:center;gap:var(--s2)}
.trust-strip li::before{content:"";width:6px;height:6px;background:var(--copper);border-radius:50%}

/* ============================================================ CARDS */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),
             border-color .4s var(--ease-out);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:#CBD5E1;
}
.card__media{
  aspect-ratio:4/3;background:var(--concrete);overflow:hidden;position:relative;
}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(15,23,42,.1));
  opacity:0;transition:opacity var(--dur) var(--ease-out);
}
.card:hover .card__media::after{opacity:1}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-glacial) var(--ease-out);
}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.card__tag{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--ff-display);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
  background:var(--copper-light);padding:.3rem .75rem;border-radius:var(--r-full);
  border:1px solid rgba(253,186,116,.6);width:fit-content;
}
.card__tag .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.card h3{font-size:1.18rem;margin-bottom:0}
.card__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:.82rem;color:var(--muted)}
.card__meta span+span::before{content:"·";margin-right:var(--s2);color:var(--muted-soft)}
.card__actions{margin-top:auto;display:flex;gap:var(--s2);padding-top:var(--s4);flex-wrap:wrap}

/* Glass card */
.card--glass{
  background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.card--glass:hover{box-shadow:var(--shadow-lg)}

/* Service card */
.service-card .card__media{aspect-ratio:16/10}
.service-card ul{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s3);
  font-size:.84rem;color:var(--muted);margin-top:var(--s2);
}
.service-card li{display:inline-flex;align-items:center;gap:var(--s2)}
.service-card li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--copper);flex-shrink:0}

/* ======================================================== EDITORIAL */
.editorial{
  display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s16);align-items:center;
}
.editorial__media{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-xl);border:1px solid var(--line);
  background:var(--concrete);
}
.editorial__media img{width:100%;height:100%;object-fit:cover}
.editorial__media::after{
  content:"";position:absolute;inset:auto 0 -1.5rem 1.5rem;
  width:50%;aspect-ratio:3/4;border:2px solid var(--copper);border-radius:var(--r-lg);
  z-index:-1;opacity:.25;
}
.editorial ul{list-style:none;margin-top:var(--s8)}
.editorial li{
  display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--line);
}
.editorial li:last-child{border-bottom:1px solid var(--line)}
.editorial .num{
  font-family:var(--ff-display);font-weight:700;font-size:.9rem;
  color:var(--copper);letter-spacing:.04em;min-width:2.5ch;padding-top:.1em;
}
@media(max-width:860px){
  .editorial{grid-template-columns:1fr;gap:var(--s10)}
  .editorial__media{aspect-ratio:4/3}
  .editorial__media::after{display:none}
}

/* ======================================================== PROCESS */
.process-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s6);
  counter-reset:step;
}
.step{
  position:relative;padding:var(--s8) var(--s6) var(--s6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);
  overflow:hidden;
}
.step::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--copper),var(--copper-hover));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#CBD5E1}
.step:hover::after{transform:scaleX(1)}
.step::before{
  counter-increment:step;content:"0"counter(step);
  font-family:var(--ff-display);font-weight:800;font-size:2.8rem;
  color:var(--copper);line-height:1;display:block;margin-bottom:var(--s4);
  opacity:.9;
}
.step h3{margin:0 0 var(--s2);font-size:1.08rem}
.step p{margin:0;color:var(--muted);font-size:.9rem}

/* ============================================================= CTA */
.ecc-cta{
  padding:var(--s24) 0;
  background:linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 50%, #F8FAFC 100%);
  color:var(--fg);position:relative;overflow:hidden;
  border-top:3px solid var(--copper);
  border-bottom:1px solid var(--line);
}
.ecc-cta::before{
  content:"";position:absolute;width:700px;height:350px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,109,59,.08),transparent 70%);
  top:-100px;left:10%;animation:ambient-float 15s ease-in-out infinite;pointer-events:none;
}
.ecc-cta__inner{text-align:center;max-width:680px;margin:0 auto;position:relative}
.ecc-cta h2{color:var(--carbon);margin-bottom:var(--s3)}
.ecc-cta p{color:var(--fg-soft);font-size:1.05rem}
.ecc-cta__actions{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s8)}

/* =========================================================== FORMS */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5)}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:var(--s1)}
.field label{font-family:var(--ff-display);font-weight:600;font-size:.84rem;letter-spacing:.02em;color:var(--fg)}
.field input,.field select,.field textarea{
  font-family:var(--ff-body);font-size:.95rem;font-weight:400;
  padding:.85rem 1rem;background:var(--surface);color:var(--fg);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .15s var(--ease-out);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--copper);
  box-shadow:0 0 0 4px rgba(200,109,59,.12);transform:translateY(-1px);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-soft)}
.field textarea{resize:vertical;min-height:130px}
.field--full{grid-column:1/-1}
.field .help{font-size:.76rem;color:var(--muted);margin-top:var(--s1)}
.field--check{flex-direction:row;align-items:flex-start;gap:var(--s2)}
.field--check input[type=checkbox]{margin-top:.2rem;width:18px;height:18px;accent-color:var(--copper);flex-shrink:0}
.field--check label{font-weight:400;font-size:.9rem;letter-spacing:0}

.alert{padding:var(--s4) var(--s5);border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface);margin-bottom:var(--s5);font-size:.92rem;animation:fadeInUp .4s var(--ease-out)}
.alert--error{border-color:rgba(239,68,68,.35);background:#FEF2F2;color:#991B1B}
.alert--ok{border-color:rgba(16,185,129,.3);background:#F0FDF4;color:#166534}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ======================================================== FILTER */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  padding:var(--s3) var(--s4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s10);
  box-shadow:var(--shadow-sm);
}
.filter-bar select,.filter-bar .search-input{
  padding:.6rem 1rem;border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--bg-alt);font-family:var(--ff-body);font-size:.88rem;color:var(--fg);
  transition:border-color .2s var(--ease-out);
}
.filter-bar select:focus,.filter-bar .search-input:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(200,109,59,.1)}
.search-input{flex:1;min-width:180px}
.chip{display:inline-flex;align-items:center;gap:var(--s1);padding:.45rem 1rem;font-family:var(--ff-display);font-size:.82rem;font-weight:500;border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);cursor:pointer;transition:all .2s var(--ease-out)}
.chip:hover{border-color:var(--carbon)}
.chip.is-active,.chip--active{background:var(--carbon);color:var(--white);border-color:var(--carbon)}

/* ================================================== PROJECT DETAIL */
.project-hero{
  padding:calc(var(--header-h) + var(--s12)) 0 var(--s10);
  background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
  color:var(--fg);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.project-hero::before{content:"";position:absolute;width:500px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(200,109,59,.08),transparent 70%);top:-50px;right:-100px;animation:ambient-float 18s ease-in-out infinite}
.project-hero h1{color:var(--carbon)}
.project-hero__meta{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6);font-family:var(--ff-display);font-size:.88rem;color:var(--muted)}
.project-hero__media{margin-top:var(--s10);aspect-ratio:21/9;border-radius:var(--r-lg);overflow:hidden;background:var(--concrete);box-shadow:var(--shadow-xl);border:1px solid var(--line)}
.project-hero__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.project-body{display:grid;grid-template-columns:2fr 1fr;gap:var(--s16);padding:var(--s16) 0}
@media(max-width:860px){.project-body{grid-template-columns:1fr;gap:var(--s10)}}
.project-body h2{font-size:1.35rem;margin-top:var(--s10);letter-spacing:-.01em}
.project-body h2:first-child{margin-top:0}
.project-side{background:var(--surface-alt);padding:var(--s8);border-radius:var(--r-md);border:1px solid var(--line);align-self:start;position:sticky;top:calc(var(--header-h) + var(--s6));box-shadow:var(--shadow-sm)}
.project-side dt{font-family:var(--ff-display);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:var(--s4)}
.project-side dt:first-child{margin-top:0}
.project-side dd{margin:.2rem 0 0;font-weight:500;font-size:.95rem}
.project-side .btn{margin-top:var(--s6);width:100%}
.project-side .btn+.btn{margin-top:var(--s2)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.gallery a{display:block;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--concrete);cursor:zoom-in;position:relative;border:1px solid var(--line)}
.gallery a::after{content:"";position:absolute;inset:0;background:rgba(15,23,42,0);transition:background var(--dur) var(--ease-out)}
.gallery a:hover::after{background:rgba(15,23,42,.04)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.gallery a:hover img{transform:scale(1.08)}
.gallery figcaption{font-size:.8rem;color:var(--muted);margin-top:var(--s1)}

/* Before/after */
.ba{position:relative;overflow:hidden;border-radius:var(--r-md);aspect-ratio:4/3;background:var(--concrete);user-select:none;touch-action:none;cursor:ew-resize;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.ba__layer{position:absolute;inset:0;background-size:cover;background-position:center}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--white);transform:translateX(-50%);cursor:ew-resize;z-index:2;box-shadow:0 0 16px rgba(0,0,0,.25)}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--white);box-shadow:0 6px 20px rgba(15,23,42,.2)}
.ba__label{position:absolute;top:var(--s4);padding:var(--s1) var(--s3);background:rgba(255,255,255,.92);color:var(--carbon);border:1px solid var(--line);border-radius:var(--r-full);font-family:var(--ff-display);font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1;box-shadow:var(--shadow-xs)}
.ba__label--before{left:var(--s4)}.ba__label--after{right:var(--s4)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.92);display:none;align-items:center;justify-content:center;padding:var(--s8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lb.is-open{display:flex;animation:fadeIn .25s var(--ease-out)}
.lb__img{max-width:min(1200px,92vw);max-height:85vh;object-fit:contain;border-radius:var(--r-sm);box-shadow:var(--shadow-xl)}
.lb__close,.lb__nav{position:absolute;background:rgba(255,255,255,.15);border:0;color:var(--white);width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.4rem;font-family:var(--ff-display);transition:all .2s var(--ease-out);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}
.lb__close{top:var(--s6);right:var(--s6)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav--prev{left:var(--s6)}.lb__nav--next{right:var(--s6)}
.lb__nav:hover{transform:translateY(-50%) scale(1.1)}
.lb__caption{position:absolute;bottom:var(--s6);left:0;right:0;text-align:center;color:rgba(255,255,255,.9);font-size:.88rem}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===================================================== TESTIMONIALS */
.testimonial{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s8);display:flex;flex-direction:column;gap:var(--s5);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);position:relative}
.testimonial:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.testimonial::before{content:"\201C";font-family:var(--ff-display);font-size:4rem;line-height:1;color:var(--copper);opacity:.4;margin-bottom:-.8rem}
.testimonial blockquote{margin:0;font-size:1rem;line-height:1.65;color:var(--fg-soft);font-style:italic;position:relative;z-index:1}
.testimonial__author{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--line-soft)}
.testimonial__avatar{width:44px;height:44px;border-radius:50%;background:var(--concrete);background-size:cover;flex-shrink:0}
.testimonial__name{font-family:var(--ff-display);font-weight:600;font-size:.9rem;color:var(--carbon)}
.testimonial__meta{font-size:.8rem;color:var(--muted)}

/* ======================================================= BREADCRUMBS */
.crumbs{display:flex;gap:var(--s2);flex-wrap:wrap;padding:var(--s5) 0;font-size:.84rem;color:var(--muted);font-family:var(--ff-display)}
.crumbs a{color:var(--muted);font-weight:500}.crumbs a:hover{color:var(--copper)}
.crumbs span::before{content:"/";margin-right:var(--s2);color:var(--muted-soft)}
.crumbs span:first-child::before{display:none}

/* ======================================================== PAGE HERO */
.ecc-page-hero{
  padding:calc(var(--header-h) + var(--s10)) 0 var(--s10);
  background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
  color:var(--fg);text-align:center;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.ecc-page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 250px at 50% 0%,rgba(200,109,59,.06),transparent 70%);pointer-events:none}
.ecc-page-hero h1{color:var(--carbon)}
.ecc-page-hero p{color:var(--fg-soft);max-width:56ch;margin:var(--s4) auto 0}

/* ============================================================= 404 */
.ecc-error{min-height:70vh;display:grid;place-items:center;text-align:center;padding:var(--s8)}
.ecc-error h1{font-size:clamp(5rem,16vw,11rem);line-height:1;color:var(--copper);margin-bottom:var(--s2);text-shadow:0 4px 30px rgba(200,109,59,.12)}
.ecc-error p{color:var(--muted);max-width:48ch;margin:0 auto var(--s8)}

/* ======================================================== CONTACT */
.contact-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s10)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s8);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease-out)}
.contact-card:hover{box-shadow:var(--shadow-lg)}
.contact-card h3{margin-bottom:var(--s6)}
.contact-card dl{margin:0}
.contact-card dt{font-family:var(--ff-display);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:var(--s4)}
.contact-card dt:first-child{margin-top:0}
.contact-card dd{margin:.2rem 0 0;font-size:.95rem}
.contact-card dd a{color:var(--copper);font-weight:500}

/* =========================================================== FOOTER */
.ecc-footer{background:#F8FAFC;color:var(--fg);padding:var(--s20) 0 0;border-top:1px solid var(--line)}
.ecc-footer h4{color:var(--carbon);margin-bottom:var(--s4);font-size:.78rem;letter-spacing:.12em}
.ecc-footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.ecc-footer a{color:var(--muted);font-size:.9rem;transition:color .2s var(--ease-out)}
.ecc-footer a:hover{color:var(--copper)}
.ecc-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s10);padding-bottom:var(--s16);border-bottom:1px solid var(--line)}
@media(max-width:860px){.ecc-footer__grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.ecc-footer__grid{grid-template-columns:1fr}}
.ecc-footer__logo{height:44px;width:auto;margin-bottom:var(--s4);filter:none!important}
.ecc-footer__about p{color:var(--muted);font-size:.9rem;max-width:34ch;margin-bottom:var(--s4)}
.ecc-socials{display:flex;gap:var(--s2);margin-top:var(--s4)}
.ecc-socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);font-family:var(--ff-display);font-weight:600;font-size:.7rem;color:var(--fg);background:var(--white);transition:all .2s var(--ease-out)}
.ecc-socials a:hover{background:var(--copper);color:var(--white);border-color:var(--copper);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ecc-footer__bar{padding:var(--s4) 0}
.ecc-footer__bar-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);font-size:.8rem;color:var(--muted)}
.ecc-footer__bar a{color:var(--muted);font-size:.8rem}

/* ======================================================== WA FAB */
.ecc-wa-fab{
  position:fixed;right:var(--s6);bottom:var(--s6);z-index:60;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);color:var(--white);
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.35);
  transition:transform .35s var(--ease-spring),box-shadow .3s var(--ease-out);
  animation:pulse-wa 2s ease-in-out infinite;
}
@keyframes pulse-wa{0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.35)}50%{box-shadow:0 8px 32px rgba(37,211,102,.5)}}
.ecc-wa-fab:hover{transform:scale(1.12);animation:none}
.ecc-wa-fab:active{transform:scale(.92)}

/* ===================================================== EMPTY STATE */
.empty{padding:var(--s20) var(--s8);text-align:center;background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--r-md)}
.empty h3{margin-bottom:var(--s2)}.empty p{color:var(--muted);max-width:40ch;margin:0 auto var(--s6)}

/* ====================================================== PAGINATION */
.pager{display:flex;gap:var(--s1);justify-content:center;margin-top:var(--s16);flex-wrap:wrap}
.pager a,.pager span{padding:.55rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--ff-display);font-size:.88rem;font-weight:500;transition:all .2s var(--ease-out);background:var(--white)}
.pager a:hover{border-color:var(--carbon);transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.pager .is-current{background:var(--carbon);color:var(--white);border-color:var(--carbon)}

/* ==================================================== REVEAL / GSAP */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}

@media(prefers-reduced-motion:no-preference){
  .grid--3 [data-reveal].is-visible:nth-child(1){transition-delay:.05s}
  .grid--3 [data-reveal].is-visible:nth-child(2){transition-delay:.12s}
  .grid--3 [data-reveal].is-visible:nth-child(3){transition-delay:.19s}
  .grid--3 [data-reveal].is-visible:nth-child(4){transition-delay:.26s}
  .grid--3 [data-reveal].is-visible:nth-child(5){transition-delay:.33s}
  .grid--3 [data-reveal].is-visible:nth-child(6){transition-delay:.4s}
}

/* ================================================= SKELETON LOADING */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,var(--concrete) 25%,var(--line-soft) 37%,var(--concrete) 63%);background-size:800px 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:var(--r-sm)}
.skeleton--text{height:1em;margin-bottom:.6em}.skeleton--text-sm{height:.75em;width:60%}
.skeleton--title{height:1.6em;width:70%;margin-bottom:1em}
.skeleton--image{aspect-ratio:4/3;border-radius:var(--r-md)}
.skeleton--btn{height:2.6em;width:140px;border-radius:var(--r-full)}

/* ================================================= RESPONSIVE FIXES */
@media(max-width:640px){
  :root{--s24:4rem;--s20:3.5rem;--s16:3rem}
  .ecc-hero{min-height:85vh}
  .ecc-hero__meta{gap:var(--s4);font-size:.7rem}
  .trust-strip ul{gap:var(--s4);font-size:.68rem}
  .process-steps{grid-template-columns:1fr}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar .search-input{min-width:0}.filter-bar select{width:100%}
  .contact-grid{grid-template-columns:1fr}
}

@media(min-width:1440px){:root{--container:1280px}}

/* ===================================================== PRINT STYLES */
@media print{
  .ecc-header,.ecc-wa-fab,.ecc-cta,.trust-strip,footer{display:none!important}
  body{font-size:12pt;color:#000;background:#fff}
  a{color:#000;text-decoration:underline}
}