/* APORD — Hybrid Responsive System (fluid + container queries + 2 breakpoints) */
:root{
  --bg:#101114;
  --bg2:#0b0c0f;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --stroke:rgba(255,255,255,.12);

  --blue1:#2aa8ff;
  --blue2:#1346ff;

  --max:1120px;
  --shadow:0 18px 60px rgba(0,0,0,.45);

  /* Fluid spacing scale */
  --sp-xs:  clamp(8px,  1vw,  12px);
  --sp-sm:  clamp(12px, 1.5vw, 20px);
  --sp-md:  clamp(20px, 2.5vw, 36px);
  --sp-lg:  clamp(36px, 5vw,  64px);
  --sp-xl:  clamp(52px, 7vw,  96px);
  --section-pad-v: clamp(48px, 7vw, 96px);
  --container-gutter: clamp(16px, 3vw, 44px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg2);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit}
.container{
  width:min(var(--max), calc(100% - var(--container-gutter) * 2));
  margin-inline:auto;
}
.center{display:flex; justify-content:center; margin-top:clamp(20px,3vw,36px); margin-bottom:clamp(32px,5vw,56px);}

/* ── Header ── */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:80;
  background:rgba(11,12,15,.70);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px,2vw,18px);
  padding:clamp(10px,1.5vw,14px) 0;
}
.brand img{height:32px; width:auto; display:block}

.menu{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.menu__social{display:flex; align-items:center; gap:8px; margin-left:4px}
.social-icon{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
  text-decoration:none;
  transition:background .2s, color .2s;
}
.social-icon:hover{background:rgba(255,255,255,.10); color:#fff}
.menu__link{
  text-decoration:none;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.78;
  padding:10px 0;
  border-bottom:1px solid transparent;
  background:none; border-left:none; border-right:none; border-top:none;
  color:inherit; cursor:pointer;
}
.menu__link:hover{opacity:1}
.menu__link.is-active{opacity:1; border-bottom-color:rgba(255,255,255,.42)}
.menu__dropdown{position:relative}
.dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:220px;
  background:rgba(17,18,22,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  display:none;
}
.dropdown a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  font-size:12px;
  opacity:.88;
}
.dropdown a:hover{background:rgba(255,255,255,.06); opacity:1}
.menu__dropdown.is-open .dropdown{display:block}

.burger{
  display:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
}
.burger span{display:block; width:20px; height:2px; background:rgba(255,255,255,.78); margin:4px 0}
.mobile{border-top:1px solid rgba(255,255,255,.08)}
.mobile__inner{padding:12px 0 16px; display:grid; gap:10px}
.mobile__link{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.86;
  padding:10px 0;
}
.mobile__link--btn{background:none; border:none; color:inherit; font-family:inherit; width:100%; text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
.mobile__subnav{display:grid; gap:4px; padding-left:16px; margin-top:-4px}
.mobile__sublink{text-decoration:none; font-size:12px; letter-spacing:.10em; text-transform:uppercase; opacity:.65; padding:7px 0 7px 12px; border-left:2px solid rgba(255,255,255,.18); display:block}
.mobile__sublink:hover{opacity:.9}

/* ── Hero video ── */
.hero{
  height:100vh;
  min-height:400px;
  position:relative;
  overflow:hidden;
  background:#000;
  margin-top:62px;
}
.hero__video{width:100%; height:100%; object-fit:cover; display:block}
.hero__overlay{
  position:absolute; inset:0;
  background:radial-gradient(
    clamp(320px,65vw,700px) clamp(200px,38vw,400px) at 50% 55%,
    rgba(0,0,0,.25), rgba(0,0,0,.75)
  );
  pointer-events:none;
}

/* ── About (Quiénes somos) ── */
.about{
  background:#f7f7f9;
  color:#0b0d12;
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--section-pad-v) 0;
  box-sizing:border-box;
  overflow:hidden;
}
.about__deco-left{
  position:absolute; top:0; left:0;
  height:70%; width:auto;
  pointer-events:none; z-index:0;
}
.about__deco-right{
  position:absolute; top:0; right:0;
  height:100%; width:auto;
  pointer-events:none; z-index:0;
}
.about__layout{
  display:grid;
  grid-template-columns:38% 62%;
  grid-template-rows:auto auto;
  grid-template-areas:
    "title text"
    "title stats";
  column-gap:0;
  row-gap:clamp(20px,3vw,32px);
  position:relative; z-index:1;
}
.about__title-block{
  grid-area:title;
  display:flex; align-items:center;
  padding-left:clamp(16px,3.5vw,40px);
  padding-right:clamp(12px,2vw,24px);
}
.about__text-block{ grid-area:text; padding-top:4px; }
.about__stats-block{
  grid-area:stats;
  display:flex; flex-direction:column;
}
.about__stats-block > .pill{
  align-self:flex-end;
  margin-top:12px;
}
.about__title{
  font-size:clamp(54px, 6vw, 82px);
  line-height:.92;
  letter-spacing:-.03em;
  margin:0;
}
.about__lead{
  margin:0 0 14px;
  font-size:clamp(14px,1.4vw,16px);
  font-weight:700; line-height:1.45; max-width:58ch;
}
.about__text{
  margin:0 0 20px;
  font-size:clamp(13px,1.2vw,14px);
  color:rgba(0,0,0,.68); max-width:72ch; line-height:1.65;
}

/* Stats — container query */
.stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(8px,1.2vw,14px);
  margin:0;
  container-type:inline-size;
  container-name:stats-grid;
}
.stat{
  border-radius:0;
  background:#0f1014;
  color:rgba(255,255,255,.92);
  padding:clamp(14px,1.8vw,22px) clamp(12px,1.5vw,18px);
  aspect-ratio:4/5;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 10px 35px rgba(0,0,0,.18);
}
.stat--blue{background:linear-gradient(135deg, rgba(42,168,255,.92), rgba(19,70,255,.92))}
.stat__num{
  font-size:clamp(18px,2.2vw,28px);
  font-weight:800; letter-spacing:-.02em; text-align:right;
}
.stat__icon{
  flex:1; display:flex; align-items:center; justify-content:center; padding:8px 0;
}
.stat__icon img{ width:60%; max-width:72px; height:auto; object-fit:contain; }
.stat__meta{
  font-size:clamp(9px,0.9vw,11px);
  letter-spacing:.08em; text-transform:uppercase; opacity:.88; line-height:1.2;
}

@container stats-grid (max-width: 420px){
  .stats{ grid-template-columns:1fr; }
  .stat{ aspect-ratio:auto; min-height:100px; }
}
@container stats-grid (min-width: 421px) and (max-width: 640px){
  .stat{ aspect-ratio:auto; min-height:150px; }
  .stat__icon img{ max-width:52px; }
}

/* Pills */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff; color:#0b0d12;
  text-decoration:none;
  font-size:15px; letter-spacing:.14em; text-transform:none;
}
.pill--dark{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}
.pill--gradient-border{
  background:black; border:none; color:#fff;
  position:relative; isolation:isolate;
}
.pill--gradient-border::before{
  content:''; position:absolute; inset:0;
  border-radius:999px; padding:1.5px;
  background:linear-gradient(to right, #1a72ff, #04008a);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.pill--light{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.95);
}
.pill--whatsapp{
  border-color:#25d366;
  background:#25d366;
  color:#fff;
}
.pill--whatsapp:hover{ background:#1ebe5d; border-color:#1ebe5d; }

/* ── Brands (slider) ── */
.brands{
  background:linear-gradient(to right, #1a72ff 0%, #04008a 100%);
  padding:clamp(14px,2vw,20px) 0 clamp(20px,3vw,28px);
  width:100%; margin:0;
}
.brands__bar{ width:100%; max-width:none; margin:0; padding:0; color:rgba(255,255,255,.92); position:relative; z-index:1; }
.brands__label{
  display:flex; align-items:center;
  gap:clamp(12px,2vw,20px);
  font-size:clamp(13px,1.6vw,18px);
  letter-spacing:.08em; text-transform:uppercase;
  margin:clamp(12px,2vw,20px) 0 8px;
  font-weight:800; color:#fff; white-space:nowrap;
  padding:0 clamp(4%,10%,10%);
}
.brands__label::before,
.brands__label::after{
  content:''; flex:1; height:2px; background:rgba(255,255,255,.35);
}
.marquee{ overflow:hidden; border-top:1px solid rgba(255,255,255,0); }
.marquee--bottom{ border-bottom:1px solid rgba(255,255,255,0); margin-top:10px; }
.marquee__track{
  display:flex; gap:18px;
  width:max-content; padding:10px 0;
  will-change:transform;
}
.logo-item{
  width:clamp(110px,13vw,160px);
  height:clamp(56px,7vw,80px);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0);
  border:1px solid rgba(255,255,255,0);
  border-radius:0; flex-shrink:0;
}
.logo-item img{ max-width:85%; max-height:85%; object-fit:contain; display:block; }

@media (prefers-reduced-motion: no-preference){
  .marquee--top .marquee__track{ animation:moveL 26s linear infinite; }
  .marquee--bottom .marquee__track{ animation:moveR 28s linear infinite; }
}
@keyframes moveL{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes moveR{ from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* ── Projects ── */
.projects{
  padding-top:var(--section-pad-v);
  padding-bottom:40px;
  position:relative; overflow:hidden;
}
.projects__deco-left{
  position:absolute; top:0; left:0;
  height:35%; width:auto;
  pointer-events:none; z-index:0;
}
.projects > .container{
  position:relative; z-index:1;
}
.projects__bg{
  position:absolute; bottom:0; left:0;
  width:99%; height:auto;
  pointer-events:none; z-index:0; opacity:.55;
}
.projects__title{
  display:flex; flex-direction:column;
  font-size:clamp(24px,3.2vw,42px);
  font-weight:800; line-height:1.1; letter-spacing:-.02em;
  margin:0 0 clamp(32px,5vw,56px);
  color:#fff;
}
.projects__title--indent{
  padding-left:clamp(14px,2.5vw,28px);
}

/* Gallery — auto-fit + container query */
.projects .gallery{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  column-gap:clamp(6px,1.5vw,20px);
  row-gap:clamp(6px,1.5vw,20px);
  width:100%;
  container-type:inline-size;
  container-name:project-gallery;
}
.projects .gallery .g{
  position:relative; display:block;
  height:clamp(180px,28vw,380px);
  min-width:0; overflow:hidden;
  text-decoration:none;
  transform:translateZ(0); isolation:isolate;
}
.projects .gallery .g img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transform-origin:center center;
  transform:scale(1) translateY(var(--py, 0px));
  transition:transform 900ms cubic-bezier(.19,1,.22,1),
             filter 600ms cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
.projects .gallery .g:hover img{
  transform:scale(1.08) translateY(var(--py, 0px));
  filter:saturate(1.08) contrast(1.05);
}
.projects .gallery .g::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,.15), rgba(0,0,0,.55));
  opacity:0; transition:opacity 600ms ease; pointer-events:none;
}
.projects .gallery .g:hover::before{ opacity:1; }
.projects .gallery .g__title{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  color:#fff; font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(10px);
  transition:all 600ms cubic-bezier(.19,1,.22,1); pointer-events:none;
}
.projects .gallery .g:hover .g__title{ opacity:1; transform:translateY(0); }

@container project-gallery (max-width: 520px){
  .projects .gallery .g__title{ font-size:10px; bottom:10px; left:10px; right:10px; }
}

/* ── Eco (Soluciones Ecológicas) ── */
.eco{
  background:#fff; color:#0b0d12;
  position:relative; overflow:hidden;
  min-height:100vh; height:100vh;
}
.eco__deco{
  position:absolute; top:0; left:0;
  height:100%; width:auto;
  pointer-events:none; z-index:1;
}
.eco__grid{
  display:grid; grid-template-columns:1fr 1fr;
  height:100%; position:relative; z-index:2;
}
.eco__photo{
  display:flex; align-items:center;
  justify-content:flex-start; overflow:hidden;
  padding-bottom:150px;
}
.eco__photo img{
  width:auto; height:70vh;
  max-width:100%; object-fit:cover; display:block;
}
.eco__content{
  padding:0
          clamp(28px,16vw,220px)
          clamp(48px,7vw,80px)
          clamp(28px,4.5vw,56px);
  display:flex; flex-direction:column; justify-content:center;
  background:#fff;
}
.eco__title{
  margin:0 0 24px;
  font-size:clamp(42px,5.5vw,72px);
  line-height:1.0; letter-spacing:-.03em; font-weight:800; color:#0b0d12;
}
.eco__text{
  margin:0 0 14px;
  font-size:clamp(14px,1.4vw,16px); line-height:1.6; color:#0b0d12;
}
.eco__text a{ color:#1a72ff; text-decoration:none; }
.eco__bold{
  margin:0 0 0;
  font-size:clamp(13px,1.3vw,15px); font-weight:700; line-height:1.55; color:#0b0d12;
}
.eco__bold a{ color:#1a72ff; text-decoration:none; }
.eco__icons{ margin:0 0 0; }
.eco__icons img{ max-width:100%; height:auto; display:block; }
.btn-blue{
  display:inline-flex; width:fit-content;
  align-items:center; justify-content:center;
  align-self:flex-end;
  padding:12px 22px; border-radius:999px;
  text-decoration:none;
  background:linear-gradient(135deg, var(--blue1), var(--blue2));
  color:#fff; font-size:12px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  box-shadow:0 8px 24px rgba(19,70,255,.30);
}

/* ── CTA ── */
.cta{
  background:transparent; padding:0;
  position:relative; z-index:10;
  margin-top:-135px; /* ~50% del alto del card en desktop */
}
.cta__wrap{ padding-top:0; z-index:10; max-width:850px; }
.cta__card{
  border-radius:0;
  padding:52px 32px;
  color:#fff;
  background:linear-gradient(to right, #1a72ff 0%, #04008a 100%);
  box-shadow:0 24px 80px rgba(19,70,255,.30);
  text-align:center;
}
.cta__title{ margin:0 0 0; font-size:clamp(22px,3.5vw,38px); font-weight:800; letter-spacing:-.02em; }
.cta__text{ margin:0 0 24px; opacity:.92; line-height:1.1; font-size:clamp(18px,2.8vw,30px); }

/* ── Offices ── */
.offices{
  background:#0b0c0f; color:rgba(255,255,255,.92);
  padding:155px 0 clamp(40px,6vw,64px);
  position:relative; z-index:1;
}
.offices__title{
  margin:0 0 24px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.65; font-weight:600;
}
.office-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(160px,20vw,260px), 1fr));
  gap:clamp(6px,1.2vw,12px);
  container-type:inline-size;
  container-name:office-grid;
}
.office{
  border-radius:0; overflow:hidden;
  background:#1a1b20; position:relative;
  height:clamp(200px,32vw,360px);
  container-type:inline-size;
  container-name:office-card;
}
.office img{ width:100%; height:100%; object-fit:cover; display:block; }
.office__name{
  position:absolute; top:16px; left:16px; right:16px;
  font-weight:800;
  font-size:clamp(28px,2.8vw,40px);
  line-height:1.1; letter-spacing:-.02em; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.office__address{
  position:absolute; bottom:10px; left:0; right:0;
  background:linear-gradient(to right, #1a72ff 0%, #04008a 100%);
  padding:10px 14px; color:#fff; font-size:12px; line-height:1.4;
}
.office__address strong{ font-weight:800; }

@container office-grid (max-width: 700px){
  .office-grid{ grid-template-columns:repeat(2, 1fr); }
}
@container office-grid (max-width: 380px){
  .office-grid{ grid-template-columns:1fr; }
}
@container office-card (max-width: 240px){
  .office__name{ font-size:clamp(16px,5cqi,24px); top:10px; left:10px; }
  .office__address{ font-size:10px; padding:8px 10px; }
}

/* ── Footer ── */
.footer{
  background:#0b0c0f;
  border-top:1px solid rgba(255,255,255,.08);
  padding:clamp(32px,5vw,48px) 0 clamp(20px,3vw,28px);
}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px,3vw,24px);
  padding-bottom:8px;
}
.footer__col h4{
  margin:0 0 14px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.55; font-weight:700;
}
.footer__col a{
  display:block; text-decoration:none;
  opacity:.65; padding:5px 0; font-size:13px; transition:opacity .2s;
}
.footer__col a:hover{ opacity:1; }
.footer__bottom{
  margin-top:clamp(16px,3vw,28px);
  padding-top:clamp(14px,2.5vw,20px);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.footer__brand img{ height:32px; filter:brightness(0) invert(1); }
.footer__meta{
  display:flex; gap:clamp(12px,2.5vw,20px); flex-wrap:wrap;
  color:rgba(255,255,255,.55); font-size:13px;
}

/* ── Project pages ── */
.proj-back{
  padding:calc(62px + clamp(16px,2vw,24px)) 0 clamp(12px,1.5vw,18px);
  background:var(--bg2);
}
.proj-back a{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  opacity:.48; text-decoration:none; transition:opacity .2s;
}
.proj-back a:hover{ opacity:1; }

.proj-hero{
  width:100%; height:clamp(280px,52vw,680px);
  overflow:hidden; background:#16171b;
}
.proj-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

.proj-header{
  padding:clamp(32px,5vw,60px) 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.proj-tags{
  display:flex; gap:clamp(16px,2.5vw,28px); flex-wrap:wrap;
  margin-bottom:clamp(14px,2vw,22px);
}
.proj-tag{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.40); }
.proj-tag span{ color:var(--blue1); }
.proj-title{
  font-size:clamp(28px,4.5vw,62px); font-weight:800;
  letter-spacing:-.03em; line-height:1;
  margin:0 0 clamp(18px,2.5vw,28px); color:#fff;
}
.proj-desc{
  font-size:clamp(14px,1.35vw,16px); line-height:1.72;
  opacity:.68; max-width:74ch; margin:0 0 12px;
}

.proj-gallery{ padding:clamp(40px,6vw,72px) 0 clamp(52px,8vw,96px); background:#fff; }
.proj-gallery__title{
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:#000; opacity:1; margin:0 0 clamp(20px,3vw,36px); font-weight:600;
}
.proj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(180px,26vw,360px),1fr));
  gap:clamp(6px,1.2vw,14px);
}
.proj-item{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; cursor:pointer; background:#fff;
}
.proj-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 700ms cubic-bezier(.19,1,.22,1);
}
.proj-item:hover img{ transform:scale(1.06); }

/* ── Lightbox (shared) ── */
.lightbox{
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.92);
  align-items:center; justify-content:center;
  padding:clamp(16px,3vw,40px);
}
.lightbox.is-open{ display:flex; }
.lightbox__img{
  max-width:min(92vw,960px); max-height:88vh;
  object-fit:contain; display:block;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
}
.lightbox__close{
  position:fixed;
  top:clamp(14px,2vw,22px); right:clamp(14px,2vw,22px);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.85);
  font-size:18px; line-height:1; transition:background .2s;
}
.lightbox__close:hover{ background:rgba(255,255,255,.22); }

@media(max-width:480px){
  .proj-grid{ grid-template-columns:repeat(2,1fr); gap:4px; }
}

/* ── Other projects section ── */
.other-projects{
  padding:clamp(48px,7vw,80px) 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.other-projects__title{
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  opacity:.35; margin:0 0 clamp(20px,3vw,36px); font-weight:600;
}
.other-projects__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(130px,15vw,200px),1fr));
  gap:clamp(5px,1vw,10px);
}
.other-proj-card{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; display:block;
  background:#16171b; text-decoration:none;
}
.other-proj-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 600ms cubic-bezier(.19,1,.22,1), filter 500ms ease;
  filter:brightness(.65);
}
.other-proj-card:hover img{ transform:scale(1.07); filter:brightness(.88); }
.other-proj-card__name{
  position:absolute; bottom:10px; left:12px; right:12px;
  font-size:10px; letter-spacing:.10em; text-transform:uppercase;
  color:rgba(255,255,255,.90); line-height:1.3;
}
@media(max-width:480px){
  .other-projects__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ── Back to top ── */
.back-to-top{
  position:fixed; bottom:32px; right:32px; z-index:90;
  width:44px; height:44px; border-radius:999px;
  background:linear-gradient(135deg, var(--blue1), var(--blue2));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(19,70,255,.35);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, filter .2s;
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ filter:brightness(1.12); }
.back-to-top svg{ width:18px; height:18px; display:block; }
@media(max-width:480px){
  .back-to-top{ bottom:20px; right:20px; width:40px; height:40px; }
}

/* ══════════════════════════════════════
   BREAKPOINT 1 — Tablet (768px)
   Solo cambios estructurales de layout
══════════════════════════════════════ */
@media (max-width: 768px){
  /* Header */
  .menu{ display:none; }
  .menu__social{ display:none; }
  .burger{ display:inline-block; }

  /* Hero video — full width, natural aspect ratio on mobile */
  .hero{ height:auto; min-height:unset; }
  .hero__video{ height:auto; object-fit:unset; }

  /* About */
  .about{ min-height:auto; }
  .about__layout{
    grid-template-columns:1fr;
    grid-template-areas: "title" "text" "stats";
    row-gap:24px;
  }
  .about__title-block{ padding-left:0; padding-right:0; }
  .about__deco-left{ height:50%; }
  .about__deco-right{ height:60%; }

  /* Projects */
  .projects .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .projects .gallery .g{ height:clamp(180px,45vw,380px); }

  /* CTA */
  .cta{ margin-top:0; }
  .cta .container{ width:100%; }
  .offices{ padding-top:clamp(40px,6vw,64px); }

  /* Eco */
  .eco{ height:auto; min-height:auto; }
  .eco__grid{ grid-template-columns:1fr; }
  .eco__photo{ display:none; }
  .eco__deco{ display:none; }
  .eco__content{
    padding:clamp(40px,6vw,64px) clamp(24px,5vw,48px) clamp(48px,8vw,80px);
    text-align:center;
    align-items:center;
  }
  .eco__icons img{ margin-inline:auto; }
  .btn-blue{ align-self:center; }

  /* Footer */
  .footer__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════
   BREAKPOINT 2 — Mobile (480px)
   Ajustes finales de densidad
══════════════════════════════════════ */
@media (max-width: 480px){
  /* About */
  .about__title{ font-size:clamp(38px,10vw,54px); }

  /* Center button */
  .center{ margin-top:28px; margin-bottom:40px; }

  /* Footer */
  .footer__grid{ grid-template-columns:1fr; gap:clamp(12px,3vw,16px); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
}