/* =========================================================
   ANDAMIO CODE · BANNER DE INICIO (PC)
   Andamio que se arma nivel por nivel + frase + ticker de servicios.
   Fondo con el rojo de la paleta; "obra" y "tinta" fijos porque
   siempre van sobre rojo.
   ========================================================= */
.ab {
  --ab-obra: #f3f2f2;
  --ab-tinta: #201e1d;
  --ab-rule: 2px;
  --ab-pad: clamp(20px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  max-width: none;
  padding: 0;
  /* queda justo debajo del navbar fijo (misma altura que .navbar en PC) */
  margin-top: clamp(104px, 8vw, 132px);
  min-height: min(calc(100vh - clamp(104px, 8vw, 132px)), 760px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* mismo fondo que el banner "¿Tenés un proyecto?" */
  background-color: var(--color-accent);
  background-image: url('/assets/img/reticula-rojo.svg');
  background-size: 48px 48px;
  background-repeat: repeat;
  color: var(--ab-obra);
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }
.ab :where(a) { color: inherit; }

.ab__top, .ab__bottom {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px var(--ab-pad);
  font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.ab__top::after, .ab__bottom::before {
  content: ""; position: absolute; left: 0; right: 0; height: var(--ab-rule); background: var(--ab-obra);
  transform: scaleX(0); transform-origin: left;
  animation: abDrawX .9s cubic-bezier(.7,0,.2,1) .1s forwards;
}
.ab__top::after { bottom: 0; }
.ab__bottom::before { top: 0; }

.ab__main {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 380px);
  gap: var(--ab-pad); padding: 0 var(--ab-pad); min-height: 0;
}
.ab__copy { display: flex; flex-direction: column; justify-content: flex-end; gap: 32px; padding: clamp(28px, 5vw, 64px) 0; }

.ab__title { margin: 0; font-weight: 800; font-size: clamp(44px, 7vw, 116px); line-height: .95; letter-spacing: -.035em; color: var(--ab-obra); }
.ab__line { display: block; overflow: hidden; padding-bottom: .06em; }
.ab__line > span { display: inline-block; transform: translateY(105%); animation: abRise .9s cubic-bezier(.2,.8,.2,1) forwards; }

.ab__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px; opacity: 0; animation: abFade .8s ease 1.3s forwards; }
.ab__lead { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; font-weight: 500; max-width: 36ch; color: var(--ab-obra); }
.ab__cta {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; min-width: 240px;
  padding: 16px 18px; background: var(--ab-obra); color: var(--ab-tinta); text-decoration: none;
  font-weight: 800; font-size: 16px; border: var(--ab-rule) solid var(--ab-obra);
  transition: background .2s, color .2s, border-color .2s;
}
.ab__cta:hover { background: var(--ab-tinta); color: var(--ab-obra); border-color: var(--ab-tinta); }
.ab__cta:active { background: #000; border-color: #000; }
.ab__cta:focus-visible { outline: 2px solid var(--ab-obra); outline-offset: 3px; }
.ab__cta svg { transition: transform .2s; }
.ab__cta:hover svg { transform: translateX(4px); }

/* Andamio: se arma nivel por nivel */
.ab__scaffold {
  position: relative; overflow: hidden; border-left: var(--ab-rule) solid var(--ab-obra);
  transform: scaleY(0); transform-origin: bottom;
  animation: abGrowY .8s cubic-bezier(.7,0,.2,1) .2s forwards;
}
.ab__stack { position: absolute; left: clamp(16px, 2.5vw, 32px); right: 0; bottom: 0; display: flex; flex-direction: column-reverse; }
.ab__stack.shift { transition: transform .9s cubic-bezier(.7,0,.2,1); }
.ab__lv { display: block; width: 100%; height: auto; overflow: visible; }
.ab__lv .up, .ab__lv .ld, .ab__lv .br { transform-box: fill-box; }
.ab__lv .up { transform-origin: bottom; transform: scaleY(0); animation: abGrowY .55s cubic-bezier(.7,0,.2,1) forwards; }
.ab__lv .ld { transform-origin: left; transform: scaleX(0); animation: abDrawX .5s cubic-bezier(.7,0,.2,1) forwards; }
.ab__lv .br { transform-origin: left bottom; transform: scale(0); animation: abSnap .45s cubic-bezier(.2,.9,.3,1.25) forwards; }
.ab__lv.static * { animation: none !important; transform: none !important; }

.ab__ticker { display: flex; align-items: center; gap: 10px; }
.ab__word { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.ab__word b { display: block; font-weight: 800; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.ab__level { font-variant-numeric: tabular-nums; }

@keyframes abDrawX { to { transform: scaleX(1); } }
@keyframes abGrowY { to { transform: scaleY(1); } }
@keyframes abSnap { to { transform: scale(1); } }
@keyframes abRise { to { transform: translateY(0); } }
@keyframes abFade { to { opacity: 1; } }

@media (max-width: 820px) {
  .ab__main { grid-template-columns: 1fr; grid-template-rows: auto 200px; }
  .ab__scaffold { border-left: 0; border-top: var(--ab-rule) solid var(--ab-obra); margin: 0 calc(var(--ab-pad) * -1); }
  .ab__stack { left: var(--ab-pad); right: auto; width: 150px; }
  .ab__hide-sm { display: none; }
}

/* El hero ya no necesita dejar lugar para el navbar: lo deja el banner */
.ab + .sec-hero { padding-top: clamp(64px, 6vw, 110px); }

@media (prefers-reduced-motion: reduce) {
  .ab *, .ab *::before, .ab *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
}