/* ==========================================================
   FRANJA "DÓNDE TRABAJAMOS" — dos filas de fotos con rebote lento.
   Los textos (titular y exigencias) son tarjetas dentro de las filas.
   ========================================================== */
.sec{--g:16px;--tw:clamp(250px,25vw,430px);position:relative;background:var(--grafito);padding:clamp(80px,12vh,140px) 0 clamp(72px,10vh,120px);overflow:hidden;
  background-image:radial-gradient(ellipse 70% 45% at 50% 55%,rgba(0,134,255,.10),transparent 70%)}
.sec__head{max-width:1320px;margin:0 auto 6px;padding:0 clamp(24px,4vw,56px)}
.sec__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--azul-luz);margin:0}

.sec__stage{position:relative;overflow:hidden;padding:56px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%)}
.sec__stage{cursor:grab;-webkit-user-select:none;user-select:none}
.sec__stage.is-drag{cursor:grabbing}
.sec__stage.is-drag .tile{pointer-events:none}
.sec__row{position:relative;z-index:1;display:flex;align-items:stretch;gap:var(--g);width:max-content;margin:0 0 var(--g);will-change:transform}
.sec__row:last-child{margin-bottom:0}
.sec__row.has-on{z-index:4}

/* tarjetas de texto */
.sec__txt{flex:none;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,3.4vw,64px)}
.sec__txt h2,.sec__txt .h2c{margin:0;font-weight:300;font-size:clamp(32px,4.3vw,70px);line-height:1.05;letter-spacing:-.012em;color:var(--hueso);white-space:nowrap}
.sec__txt h2 span,.sec__txt .h2c span{display:block}
.sec__txt h2 em,.sec__txt .h2c em{font-style:normal;background:linear-gradient(90deg,var(--azul),#4fd0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.06em}
.sec__lead{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--azul-luz);white-space:nowrap}
.sec__list{list-style:none;margin:0;padding:0}
.sec__list li{white-space:nowrap;padding:clamp(5px,.7vw,10px) 0;
  font-weight:300;font-size:clamp(20px,2.2vw,34px);line-height:1.1;color:var(--hueso);letter-spacing:-.003em}

/* tarjetas de foto */
.tile{position:relative;flex:none;display:block;width:var(--tw);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0a0d12;
  border:1px solid rgba(255,255,255,.1);text-decoration:none;color:#0b0d10;transform-origin:50% 50%;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .35s,opacity .45s,filter .45s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.5s cubic-bezier(.2,.7,.2,1);-webkit-user-drag:none;user-select:none}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(243,248,255,.9) 0%,rgba(243,248,255,.6) 34%,rgba(243,248,255,0) 64%)}
.tile__body{position:absolute;z-index:2;left:clamp(14px,1.4vw,22px);top:clamp(14px,1.4vw,22px);max-width:54%;display:block}
.tile__t{margin:0;display:block;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(19px,1.9vw,30px);line-height:1.04;color:#0b0d10}
.tile__d{display:block;margin-top:9px;font-family:Inter,system-ui,sans-serif;font-weight:400;font-size:clamp(11px,.85vw,13.5px);line-height:1.42;color:#1c2733;
  opacity:0;transform:translateY(6px);transition:opacity .35s .05s,transform .45s .05s}

.tile.is-on{transform:scale(1.26);z-index:6;border-color:var(--azul-luz);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.85),0 0 0 1px rgba(63,164,255,.55),0 0 50px -6px var(--azul-glow)}
.tile.is-on img{transform:scale(1.06)}
.tile.is-on .tile__d,.tile.is-on .sec__stage.is-hot .tile:not(.is-on){opacity:.42;filter:saturate(.4) brightness(.8)}
.tile:focus-visible{outline:2px solid var(--azul-luz);outline-offset:3px}

/* pie */
.sec__foot{max-width:1320px;margin:clamp(30px,5vh,56px) auto 0;padding:0 clamp(24px,4vw,56px);display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}

/* móvil: una sola columna; textos arriba y fotos en carrusel lateral con "snap" */
@media(max-width:700px){
  .sec{--g:12px;--tw:min(80vw,320px);padding:34px 0 48px}
  .sec__stage{display:grid;grid-template-columns:repeat(7,var(--tw));grid-template-rows:auto auto auto;column-gap:var(--g);row-gap:14px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 24px;padding:26px 24px 6px;scrollbar-width:none;
    -webkit-mask-image:none;mask-image:none}
  .sec__stage::-webkit-scrollbar{display:none}
  .sec__stage{cursor:auto;-webkit-user-select:auto;user-select:auto}
  .sec__row{display:contents}
  .sec__txt{position:sticky;left:0;grid-column:1/-1;justify-self:start;width:calc(100vw - 48px);padding:0;order:0!important}
  .sec__txt--h2{grid-row:1}.sec__txt--p{grid-row:2}
  .sec__txt h2{font-size:clamp(32px,9.6vw,42px)}
  .sec__lead{margin-bottom:8px}
  .sec__list li{white-space:normal;font-size:19px;padding:4px 0}
  .sec .tile{order:0!important;grid-row:3;aspect-ratio:3/2;scroll-snap-align:start}
  .tile img{object-position:78% center}
  .tile::after{background:linear-gradient(90deg,rgba(243,248,255,.92) 0%,rgba(243,248,255,.66) 40%,rgba(243,248,255,0) 74%)}
  .tile__body{max-width:62%}
  .tile__t{font-size:20px}
  .tile__d{font-size:12px;opacity:1;transform:none}
    .sec__foot{margin-top:22px}
  .sec__foot .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tile,.tile img{transition:none}