/* ==========================================================================
   Transred · Flota
   Fichas editoriales visibles. Se eligió comparando tres variantes construidas con
   datos reales (ver informe de la sesión):

   · Catálogo en tarjetas oscuras: cinco tarjetas en tres columnas dejaban el
     mismo hueco de grilla, y sumaba una cuarta sección oscura seguida.
   · Comparador en tabla: dejaba tres de seis filas vacías, porque todavía no
     tenemos las fichas técnicas. Sirve recién cuando Transred las entregue.
   · Fichas expandidas: se ven las cinco de una vez y se pueden comparar
     directamente, sin interacción adicional.
   ========================================================================== */

/* --------------------------------------------------------- infraestructura */
.pag-flota .hpag h1{font-size:clamp(2.2rem,4.35vw,3.55rem);max-width:18ch}
.pag-flota .hpag>.wrap>p{max-width:50ch}

.infra-flota{padding:clamp(42px,4.6vw,58px) 0 clamp(38px,4vw,50px);background:var(--paper-2)}
.infra-flota .sec-head{max-width:none;margin-bottom:0}
.infra-flota .sec-head h2{max-width:15ch;font-size:clamp(2.25rem,3.5vw,3.25rem);line-height:1.03;text-wrap:balance}
.infra-flota .sec-head p{max-width:39ch;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.58}
@media(min-width:821px){
  .pag-infra-flota #infra-flota-t{max-width:24ch}
}
.infra-flota-sede{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:380px;overflow:hidden;border:1px solid var(--paper-line);border-radius:var(--r-l);background:var(--paper);margin-top:clamp(22px,2.6vw,32px)}
.infra-flota-sede-media,.infra-flota-card-media{position:relative;min-width:0;margin:0;overflow:hidden;background:var(--ink)}
.infra-flota-sede-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.infra-flota-sede-tx,.infra-flota-card-tx{display:flex;flex:1;flex-direction:column;padding:clamp(22px,2.6vw,32px)}
.infra-flota-sede-tx{justify-content:center}
.infra-flota-sede h3{font-family:var(--display);font-size:clamp(1.3rem,1.8vw,1.65rem);font-weight:700;line-height:1.14;letter-spacing:-.02em;color:var(--ink-tx);margin:0;text-wrap:balance}
.infra-flota-sede p{margin-top:11px;color:var(--ink-mut);font-size:.97rem;line-height:1.58}
.infra-flota-recorrido{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:16px;margin-top:16px}
.infra-flota-card{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);min-height:240px;height:100%;overflow:hidden;border:1px solid var(--paper-line);border-radius:var(--r-m);background:var(--paper)}
.infra-flota-card-media{height:100%}
.infra-flota-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.infra-flota-card--taller .infra-flota-card-media img{object-position:38% 56%}
.infra-flota-card--frontera .infra-flota-card-media img{object-position:50% 50%}
.infra-flota-card--deposito .infra-flota-card-media img{object-position:55% 56%}
.infra-flota-card--agro .infra-flota-card-media img{object-position:50% 46%}
.infra-flota-card-tx{justify-content:center;padding:clamp(20px,2vw,27px)}
.infra-flota-kicker{position:absolute;top:12px;left:12px;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--blue-100);color:var(--blue);box-shadow:0 2px 8px rgba(6,31,52,.12)}
.infra-flota-sede-tx .infra-flota-kicker{position:static;flex:0 0 auto;margin:0 0 16px}
.infra-flota-card-tx .infra-flota-kicker{position:static;flex:0 0 auto;margin:0 0 14px}
.infra-flota-kicker svg{width:16px;height:16px}
.infra-flota-card h3{font-family:var(--display);font-size:clamp(1.18rem,1.5vw,1.45rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink-tx);margin:0;text-wrap:balance}
.infra-flota-card p{margin-top:10px;color:var(--ink-mut);font-size:.92rem;line-height:1.52}

.pag-flota #flota{padding:clamp(38px,4vw,52px) 0 clamp(42px,4.4vw,58px);scroll-margin-top:84px}
.pag-flota #flota > .wrap > .sec-head{display:block;max-width:66ch;margin:0 0 clamp(20px,2.4vw,28px)}
.pag-flota #flota > .wrap > .sec-head h2{font-size:clamp(2rem,3.4vw,3rem);margin-top:13px;color:var(--ink-tx)}
.pag-flota #flota > .wrap > .sec-head p{max-width:62ch;margin-top:12px;color:var(--ink-mut);font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.58}
.acor{border-top:1px solid var(--paper-line);margin-top:0}
.acor-item{border-bottom:1px solid var(--paper-line);scroll-margin-top:86px}
.acor-item+.acor-item{padding-top:clamp(10px,1.3vw,15px)}

/* ------------------------------------------------------------- cabecera */
.acor-cab{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(145px,.62fr);align-items:center;
  gap:clamp(14px,1.7vw,24px);
  min-height:70px;padding:clamp(15px,1.7vw,20px) 0;
}

.acor-nombre{
  margin:0;display:block;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.7vw,2.15rem);
  font-variation-settings:'wdth' 110;
  color:var(--ink-tx);letter-spacing:-.022em;line-height:1.05;
}
.acor-cat{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mut);text-align:right;
}

/* el más que gira a menos */
.acor-mas{
  position:relative;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--paper-line);flex:0 0 auto;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.acor-mas::before,.acor-mas::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--ink-mut);
  transform:translate(-50%,-50%);transition:transform .35s var(--ease),background-color .35s;
}
.acor-mas::before{width:11px;height:1.6px}
.acor-mas::after{width:1.6px;height:11px}
.acor-mas{display:none}

/* --------------------------------------------------------------- cuerpo */
.acor-cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;gap:40px;
  padding:0 0 clamp(24px,2.6vw,32px);
  animation:acorAbre .45s var(--ease);
}
@keyframes acorAbre{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:none}
}

.acor-foto{
  position:relative;width:100%;min-width:0;border-radius:var(--r-m);overflow:hidden;aspect-ratio:8/5;
  background:var(--paper-line);
  box-shadow:0 26px 56px -38px rgba(11,32,51,.6);
}
.acor-foto picture{display:block;width:100%;height:100%}
.acor-foto img{display:block;width:100%;height:100%;object-fit:cover}

/* Galería por configuración: se hidrata recién cuando se abre su <details>,
   para que cinco carpetas de fotos no pesen al cargar la página. */
.flota-galeria{position:absolute;inset:0}
.fg-viewport{width:100%;height:100%;overflow:hidden}
.flota-galeria .fg-viewport{touch-action:pan-y}
.flota-galeria .fg-viewport:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
@media(pointer:fine){.flota-galeria .fg-viewport{cursor:grab}.flota-galeria .fg-viewport.is-dragging{cursor:grabbing;user-select:none}.flota-galeria .fg-viewport.is-dragging *{user-select:none;-webkit-user-drag:none}}
.fg-track{display:flex;width:100%;height:100%;will-change:transform;transition:transform .36s var(--ease)}
.fg-slide{flex:0 0 100%;width:100%;height:100%;margin:0}
.fg-slide img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:var(--fg-pos-desktop,50% 50%)}
/* Eco usa la misma ventana fija que el resto del catálogo. Las posiciones
   específicas se mantienen por foto, sin dejar que su orientación altere la cuadrícula. */
#u-ecologistica .acor-foto{background:var(--paper-line);box-shadow:0 26px 56px -38px rgba(11,32,51,.6)}
#u-ecologistica .fg-slide{display:block;background:transparent}
/* Solo la toma interior conserva el encuadre completo: el fondo es la misma
   foto, difuminada, y no modifica la ventana ni los controles de la galería. */
#u-ecologistica .fg-slide.eco-slide--vertical{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1d2933;isolation:isolate}
#u-ecologistica .fg-slide.eco-slide--vertical::before{content:'';position:absolute;inset:-18px;z-index:-1;background-image:linear-gradient(rgba(7,18,28,.38),rgba(7,18,28,.38)),var(--fg-blur);background-size:cover;background-position:center;filter:blur(14px);transform:scale(1.08)}
#u-ecologistica .fg-slide.eco-slide--vertical img{position:relative;z-index:1;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
#u-ecologistica .fg-slide.eco-slide--con-fondo::before{content:none}
#u-ecologistica .fg-slide.eco-slide--con-fondo img{position:static;z-index:auto}
.fg-controles{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:6px}
.fg-nav{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(6,21,36,.72);color:#fff;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.fg-nav:hover,.fg-nav:focus-visible{background:var(--blue);transform:scale(1.06)}
.fg-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fg-contador{min-width:48px;padding:7px 8px;border-radius:100px;background:rgba(6,21,36,.72);color:#fff;text-align:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em}
.fg-puntos{display:none}

.acor-info{display:flex;min-width:0;padding-top:2px;flex-direction:column}
.acor-info>p{margin:0;color:var(--ink-mut);font-size:1.02rem;line-height:1.58;max-width:52ch}

.acor-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 26px;margin:20px 0 22px;
  padding-top:18px;border-top:1px solid var(--paper-line);
}
.acor-datos>div{min-width:0}
.acor-datos dt{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mut);
}
.acor-datos dd{
  font-family:var(--display);font-weight:700;font-size:1.04rem;
  font-variation-settings:'wdth' 106;color:var(--ink-tx);
  margin-top:5px;line-height:1.32;
}

.acor-usos{margin-bottom:22px}
.acor-usos h4{
  font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-mut);margin-bottom:11px;
}
.acor-usos ul{display:flex;flex-wrap:wrap;gap:8px}
.acor-usos li{
  font-size:.84rem;color:var(--ink-mut);background:#fff;
  border:1px solid var(--paper-line);border-radius:100px;padding:7px 14px;
}

.acor-ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:auto}
.acor-ctas .btn{min-height:48px}

/* aviso legal del brief, al pie y discreto */
.conf-aviso{
  font-family:var(--mono);font-size:.66rem;line-height:1.6;
  color:var(--ink-mut);opacity:.7;margin-top:26px;
}

/* ---------------------------------------------------------- responsive */
@media(max-width:900px){
  .acor-cuerpo{grid-template-columns:1fr;gap:20px}
  .acor-info{padding-top:0}
}
@media(max-width:767px){
  .infra-flota{padding:40px 0 36px}
  .infra-flota .sec-head h2{font-size:clamp(2rem,9vw,2.55rem);max-width:14ch}
  .infra-flota-sede{grid-template-columns:1fr;min-height:0;height:auto;border-radius:var(--r-m)}
  .infra-flota-sede-media{aspect-ratio:16/10}
  .infra-flota-sede-tx{padding:23px 20px}
  .infra-flota-sede-tx .infra-flota-kicker{margin-bottom:14px}
.infra-flota-sede h3{font-size:1.45rem}
  .infra-flota-sede p{font-size:.96rem;margin-top:10px}
  .infra-flota-recorrido{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px;margin-top:12px}
  .infra-flota-card{grid-template-columns:1fr;min-height:0}
  .infra-flota-card-media{height:auto;aspect-ratio:16/10}
  .infra-flota-card-tx{padding:23px 20px}
  .infra-flota-card h3{font-size:1.42rem}
  .infra-flota-card p{font-size:.96rem;margin-top:10px}
  .pag-flota #flota{padding-block:38px 44px}
  .pag-flota #flota > .wrap > .sec-head{margin-bottom:18px}
  .acor-cab{grid-template-columns:minmax(0,1fr);gap:10px;min-height:0;padding:16px 0 14px}
  .acor-cat{display:none}
  .acor-ctas{width:100%}
  .acor-ctas .btn{flex:1 1 100%;min-width:0}
  .acor-cuerpo{gap:18px;padding-bottom:28px}
  .acor-foto{aspect-ratio:4/3;overflow:hidden;box-shadow:none}
  .acor-info>p{font-size:1rem;line-height:1.55}
  .acor-datos{gap:16px;margin:18px 0 20px;padding-top:16px}
  .acor-usos{margin-bottom:20px}
  .fg-viewport{overflow:hidden;scroll-snap-type:none;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}
  .fg-viewport::-webkit-scrollbar{display:none}
  .fg-track{gap:0;width:100%;transition:none;padding-right:0}
  .fg-slide{flex:0 0 100%;width:100%;min-width:0;max-width:none;scroll-snap-align:none;border-radius:0;overflow:hidden}
  .fg-controles{right:12px;bottom:12px;gap:6px;max-width:calc(100% - 24px)}
  .fg-nav{width:36px;height:36px;flex:0 0 36px}
  .fg-contador{min-width:42px;padding:6px;font-size:.59rem}
  .fg-puntos{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:5px}
  .fg-puntos i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.58);transition:transform .2s var(--ease),background .2s var(--ease)}
  .fg-puntos i.activo{background:#fff;transform:scale(1.35)}
  #u-ecologistica .fg-slide img{object-position:var(--fg-pos-movil,50% 50%)}
}
@media(prefers-reduced-motion:reduce){
  .acor-cuerpo{animation:none}
}

@media(prefers-reduced-motion:reduce){.acor-cuerpo{animation:none}}