/* ============================================================
   EDUKA · 02 · el campo
   Desktop: la sección se pinea 400vh y las 4 fotos pasan de
   costado (el transform lo calcula js/campo.js).
   Mobile: se convierte en un carrusel con swipe y snap.
   ============================================================ */

.campo{background:var(--verde-hondo);color:var(--crema);position:relative}

.campo-head{padding:clamp(70px,10vw,130px) var(--pad) clamp(28px,4vw,50px);max-width:1100px}
.campo-title{font-size:clamp(34px,4.6vw,66px);color:var(--crema-alta)}
.campo-title em{color:var(--fuego)}
.campo-bar{margin-top:clamp(26px,4vw,44px);height:1px;background:rgba(237,227,210,.18)}
.campo-bar i{display:block;height:1px;width:25%;background:var(--fuego);transition:width .25s ease}

.campo-pin{height:400vh;position:relative}
.campo-stick{position:sticky;top:0;height:100svh;overflow:hidden}
.campo-track{display:flex;height:100%;will-change:transform}

.espacio{position:relative;width:100vw;height:100%;flex:0 0 100vw;overflow:hidden}
.espacio figure{margin:0;height:100%}
.espacio img{width:100%;height:100%;object-fit:cover}
.espacio::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(44,53,39,.35) 0%,rgba(44,53,39,0) 30%,rgba(44,53,39,.72) 100%);
}
.espacio-txt{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(46px,8vh,96px);z-index:2;max-width:32ch}
.espacio-txt .num{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:rgba(237,227,210,.65);margin-bottom:14px}
.espacio-txt h3{font-size:clamp(38px,6vw,86px);color:var(--crema-alta);margin-bottom:14px}
.espacio-txt p{font-size:clamp(15px,1.3vw,19px);line-height:1.6;color:rgba(237,227,210,.86)}

.campo-hint{display:none}

@media (max-width:900px){
  /* sin pin: swipe horizontal con snap */
  .campo-pin{height:auto}
  .campo-stick{position:static;height:auto;overflow:visible}
  .campo-track{
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:0 var(--pad) 6px;gap:14px;transform:none!important;
    scrollbar-width:none;
  }
  .campo-track::-webkit-scrollbar{display:none}
  .espacio{width:82vw;flex:0 0 82vw;height:70svh;scroll-snap-align:center}
  .espacio-txt{left:22px;right:22px;bottom:26px}
  .campo-hint{
    display:block;padding:14px var(--pad) clamp(60px,9vw,90px);
    font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(237,227,210,.5);
  }
  .campo-head{padding-bottom:26px}
}