/* /flotas/ · la idea: el mosaico que crece. Usted elige cuánto ve. */

/* Mosaico */
.fl-mo{background:#000;position:relative}
.fl-mo__v{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:center;padding:var(--fl-nav) var(--fl-g) clamp(30px,5vh,56px)}
.fl-mo h2{font-size:clamp(2.6rem,4.8vw,5.2rem)}
.fl-mo__p{list-style:none;margin:clamp(20px,3.4vh,36px) 0 0;padding:0}
.fl-mo__p li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.6vw,26px);align-items:start;padding:14px 0;border-top:1px solid var(--pm-borde)}
.fl-mo__p strong{font:800 clamp(5rem,10.4vw,11rem)/.8 "Barlow Condensed",sans-serif;color:#fff}
.fl-mo__p h3{font-size:clamp(1.9rem,3vw,3.1rem)}
.fl-mo__p p{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.38;margin-top:8px}
.fl-mo__g{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fl-mo__c{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#101010}
.fl-mo__c img{width:100%;height:100%;object-fit:cover;display:block}
.fl-mo__c figcaption{position:absolute;left:8px;bottom:8px;padding:3px 9px;background:rgba(0,0,0,.84);font:700 clamp(.9375rem,1.1vw,1.0625rem)/1.2 Barlow,sans-serif;color:#fff}
.fl-mo__c.c1{grid-column:1/-1;aspect-ratio:auto}
.fl-mo__c.c1 img{aspect-ratio:16/9}
html.fl-vivo .fl-mo__p{position:relative;min-height:clamp(170px,27vh,250px)}
html.fl-vivo .fl-mo__p li{position:absolute;inset:0 0 auto 0}
html.fl-vivo .fl-mo__p li:not(.on){transform:translateY(14px)}
/* Con movimiento: 3×3 celdas de 16:9. Cada cámara vive en su sitio y el lienzo no salta. */
html.fl-vivo .fl-mo__g{display:block;width:min(100%,calc((100svh - var(--fl-nav) - 56px)*1.6));aspect-ratio:1.6;justify-self:end}
.fl-mo__h{display:none}
html.fl-vivo .fl-mo__h{display:block;position:absolute;border:1px solid var(--pm-borde);top:66.9%;height:33.1%;width:49.8%;opacity:0;transition:opacity .5s}
html.fl-vivo .fl-mo__h.h4{left:0}
html.fl-vivo .fl-mo__h.h5{left:50.2%}
html.fl-vivo .fl-mo__h.on{opacity:1}
html.fl-vivo .fl-mo__h::before,html.fl-vivo .fl-mo__h::after{content:"";position:absolute;left:50%;top:50%;background:#6a6a6a}
html.fl-vivo .fl-mo__h::before{width:22px;height:2px;margin:-1px 0 0 -11px}
html.fl-vivo .fl-mo__h::after{width:2px;height:22px;margin:-11px 0 0 -1px}
html.fl-vivo .fl-mo__c{position:absolute;aspect-ratio:auto;transition:left .8s var(--fl-tr),top .8s var(--fl-tr),width .8s var(--fl-tr),height .8s var(--fl-tr),opacity .5s ease;box-shadow:0 0 0 3px #000}
html.fl-vivo .fl-mo__c img{aspect-ratio:auto}
html.fl-vivo .fl-mo__c[data-desde]:not(.on){opacity:0}
html.fl-vivo .fl-mo .c1{left:0;top:0;width:100%;height:100%}
html.fl-vivo .fl-mo .c2{left:33.4%;top:33.4%;width:66.6%;height:66.6%}
html.fl-vivo .fl-mo .c3{left:66.8%;top:0;width:33.2%;height:33.1%}
html.fl-vivo .fl-mo .c4{left:0;top:66.9%;width:49.8%;height:33.1%}
html.fl-vivo .fl-mo .c5{left:50.2%;top:66.9%;width:49.8%;height:33.1%}
html.fl-vivo .fl-mo[data-i="1"] .c1{width:66.6%;height:66.6%}
html.fl-vivo .fl-mo[data-i="2"] .c1,html.fl-vivo .fl-mo[data-i="3"] .c1,html.fl-vivo .fl-mo[data-i="4"] .c1{width:66.4%;height:66.5%}
html.fl-vivo .fl-mo[data-i="2"] .c2,html.fl-vivo .fl-mo[data-i="3"] .c2,html.fl-vivo .fl-mo[data-i="4"] .c2{left:66.8%;top:33.5%;width:33.2%;height:33%}

/* Puertas */
.fl-pu{display:flex;background:#000;border-top:1px solid var(--pm-borde);position:relative;overflow:hidden}
.fl-pu__a{position:relative;flex:1 1 50%;min-width:0;padding:clamp(70px,11vh,120px) var(--fl-g) clamp(40px,7vh,80px);overflow:hidden;transition:flex-grow .8s var(--fl-tr),background .5s}
.fl-pu__a+.fl-pu__a{border-left:1px solid var(--pm-borde)}
.fl-pu__nom{position:absolute;left:0;right:0;top:clamp(62px,9vh,100px);text-align:center;margin:0;font:800 clamp(5rem,12.5vw,13.5rem)/.82 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;color:#fff}
.fl-pu__img{display:block;position:relative;z-index:1;width:min(74%,calc(54svh*1));margin:clamp(70px,10.4vw,160px) auto 0}
.fl-pu__img img{display:block;width:100%;height:auto;max-height:58svh;object-fit:contain;transition:transform .9s var(--fl-tr);filter:drop-shadow(0 24px 40px rgba(0,0,0,.8))}
.fl-pu__tx{position:relative;z-index:1;margin-top:clamp(16px,3vh,30px)}
.fl-pu__tx h3{font-size:clamp(2.6rem,3.8vw,4rem)}
.fl-pu__rol{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.38;margin-top:10px!important;max-width:30em}
.fl-pu__tx ul{list-style:none;padding:0;margin:14px 0 0}
.fl-pu__tx li{position:relative;padding:5px 0 5px 18px;font-size:clamp(1.0625rem,1.2vw,1.1875rem);line-height:1.36}
.fl-pu__tx li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;background:var(--pm-rojo)}
.fl-pu__pr{font:800 clamp(2.2rem,3.4vw,3.5rem)/1 "Barlow Condensed",sans-serif;margin-top:18px!important}
.fl-pu__pr>.precio-rojo{display:block}
.fl-pu__alt{display:block;font-size:.66em;margin-top:6px}
.fl-pu__nota{font-size:1.0625rem;font-weight:600;margin-top:8px!important}
@media (hover:hover) and (min-width:981px){
  .fl-pu__a:hover{flex-grow:1.34;background:#0a0a0a}
  .fl-pu__a:hover .fl-pu__img img{transform:scale(1.04)}
}

/* Comparación: los dos equipos siguen a la vista mientras bajan las filas. */
.fl-duelo{border-top:1px solid var(--pm-borde);padding-bottom:clamp(60px,10vh,120px)}
.fl-du{margin-top:clamp(30px,6vh,68px)}
.fl-du__fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,4vw,72px)}
.fl-du__cab{position:sticky;top:68px;z-index:4;background:#000;border-bottom:2px solid var(--pm-rojo);transition:top .45s var(--fl-tr)}
body:has(.pm-nav.oculta) .fl-du__cab{top:0}
.fl-du__eq{display:flex;align-items:center;gap:clamp(12px,2vw,30px);padding:clamp(8px,1.6vh,16px) 0}
.fl-du__eq img{flex:none;width:clamp(68px,12vw,176px);height:auto;display:block}
.fl-du__eq strong{display:block;font:800 clamp(1.9rem,4.4vw,4.6rem)/.95 "Barlow Condensed",sans-serif;text-transform:uppercase;color:#fff}
.fl-du__eq span{display:block;margin-top:6px;font-size:clamp(1.0625rem,1.7vw,1.7rem);font-weight:700}
.fl .fl-du__eq .precio-rojo{font-size:clamp(1.125rem,1.7vw,1.7rem);font-weight:700}
.fl-du__fila[role=row]:not(:first-child),.fl-du [role=rowgroup]+[role=rowgroup] .fl-du__fila{border-bottom:1px solid var(--pm-borde);padding:clamp(18px,3.4vh,34px) 0}
.fl-du__et{grid-column:1/-1;margin-bottom:clamp(8px,1.4vh,14px);font-size:clamp(1.0625rem,1.25vw,1.2rem);font-weight:600;color:var(--fl-gris)}
.fl-du__v b{display:block;font:800 clamp(1.7rem,3.2vw,3.2rem)/1 "Barlow Condensed",sans-serif;text-transform:uppercase;color:#fff}
.fl-du__v p{margin-top:6px!important;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.36;color:var(--fl-gris)}
.fl-du__v p.fl-du__larga{margin-top:0!important;color:#fff;font-size:clamp(1.125rem,1.6vw,1.55rem)}
.fl-du__med{display:flex;gap:6px;margin-bottom:12px;max-width:min(100%,380px)}
.fl-du__med i{flex:1;height:clamp(10px,1.4vh,14px);background:#222}
.fl-du__med i.on{background:#fff}
html.fl-vivo .fl-du__med i.on{transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--fl-tr)}
html.fl-vivo .fl-du__med i.on:nth-child(2){transition-delay:.09s}
html.fl-vivo .fl-du__med i.on:nth-child(3){transition-delay:.18s}
html.fl-vivo .fl-du__med i.on:nth-child(4){transition-delay:.27s}
html.fl-vivo .fl-du__med i.on:nth-child(5){transition-delay:.36s}
html.fl-vivo .fl-du.encendida .fl-du__med i.on{transform:none}
.fl-tabla__n{font-size:1.0625rem;margin-top:16px}

/* Plataforma */
.fl-pl{background:#000;position:relative;border-top:1px solid var(--pm-borde)}
.fl-pl__v{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:center;padding:clamp(70px,12vh,120px) var(--fl-g)}
.fl-pl h2{font-size:clamp(2.6rem,4.8vw,5.2rem)}
.fl-pl__in{font-size:clamp(1.0625rem,1.25vw,1.2rem);line-height:1.4;margin-top:14px!important}
.fl-pl__l{list-style:none;padding:0;margin:clamp(16px,3vh,28px) 0 0}
.fl-pl__l li{padding:clamp(7px,1.2vh,12px) 0;border-top:1px solid var(--pm-borde)}
.fl-pl__l b{display:block;font:800 clamp(1.45rem,2vw,2.05rem)/1.04 "Barlow Condensed",sans-serif;text-transform:uppercase}
.fl-pl__l span{display:block;font-size:1.0625rem;line-height:1.34;margin-top:4px}
.fl-pl__p{display:grid;gap:20px}
.fl-pl__s{position:relative}
.fl-pl__s>img{display:block;width:100%;height:auto;background:#fff}
.fl-pl__s video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;clip-path:url(#fl-tiles)}
.fl-pl__s--tel .fl-tel{position:absolute;right:3%;bottom:-3%;height:88%}
html.fl-vivo .fl-pl__v{padding:var(--fl-nav) var(--fl-g) clamp(20px,4vh,40px)}
html.fl-vivo .fl-pl .fl-fijo__v,html.fl-vivo .fl-pl__v{overflow:hidden}
html.fl-vivo .fl-pl__l li[data-en]{opacity:.34;pointer-events:auto;transition:opacity .35s}
html.fl-vivo .fl-pl__l li[data-en].on{opacity:1}
html.fl-vivo .fl-pl__l li:not(.on) span{display:none}
html.fl-vivo .fl-pl__l li.on{box-shadow:inset 3px 0 0 var(--pm-rojo);padding-left:13px}
html.fl-vivo .fl-pl__p{display:block;position:relative;aspect-ratio:2400/1357}
html.fl-vivo .fl-pl__s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
html.fl-vivo .fl-pl__s:not(.on){transform:scale(.97)}
html.fl-vivo .fl-pl__s>img{max-height:100%;width:auto;max-width:100%;object-fit:contain}

/* Rubros: filas de una sola columna, salvo la que lleva explicación */
.fl-filas--solo li{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}

@media (max-width:980px){
  .fl-mo__v{grid-template-columns:1fr;align-content:start;gap:12px;padding-top:calc(var(--fl-nav) + 4px)}
  .fl-mo h2{font-size:clamp(2.3rem,10.2vw,3.6rem)}
  .fl-mo__g{grid-column:1;grid-row:2}
  .fl-mo__p{margin-top:0}
  .fl-mo__p strong{font-size:clamp(4rem,19vw,6rem)}
  .fl-mo__p h3{font-size:clamp(1.8rem,8vw,2.6rem)}
  html.fl-vivo .fl-mo__tx{display:contents}
  html.fl-vivo .fl-mo h2{grid-row:1}
  html.fl-vivo .fl-mo__p{grid-row:3;min-height:230px}
  html.fl-vivo .fl-mo__g{width:100%;aspect-ratio:1/1;justify-self:stretch;max-height:44svh}
  html.fl-vivo .fl-mo__h{top:75.6%;height:24.4%;width:49.5%}
  html.fl-vivo .fl-mo__h.h5{left:50.5%}
  html.fl-vivo .fl-mo .c1{left:0;top:0;width:100%;height:100%}
  html.fl-vivo .fl-mo .c2{left:0;top:50.5%;width:100%;height:49.5%}
  html.fl-vivo .fl-mo .c3{left:50.5%;top:50.5%;width:49.5%;height:24.4%}
  html.fl-vivo .fl-mo .c4{left:0;top:75.6%;width:49.5%;height:24.4%}
  html.fl-vivo .fl-mo .c5{left:50.5%;top:75.6%;width:49.5%;height:24.4%}
  html.fl-vivo .fl-mo[data-i="1"] .c1,html.fl-vivo .fl-mo[data-i="2"] .c1,html.fl-vivo .fl-mo[data-i="3"] .c1,html.fl-vivo .fl-mo[data-i="4"] .c1{width:100%;height:49.5%}
  html.fl-vivo .fl-mo[data-i="2"] .c2,html.fl-vivo .fl-mo[data-i="3"] .c2,html.fl-vivo .fl-mo[data-i="4"] .c2{left:0;top:50.5%;width:49.5%;height:24.4%}
  .fl-pu{flex-direction:column}
  .fl-pu__a{padding-top:clamp(70px,16vw,110px)}
  .fl-pu__a+.fl-pu__a{border-left:0;border-top:1px solid var(--pm-borde)}
  .fl-pu__nom{font-size:clamp(4.6rem,23vw,9rem);top:50px}
  .fl-pu__img{width:min(82%,380px);margin-top:44px}
  .fl-du__eq{flex-direction:column;align-items:flex-start;gap:6px}
  .fl-du__eq img{width:64px}
  .fl-du__eq strong{font-size:1.9rem}
  .fl-du__eq span{font-size:1.0625rem;margin-top:2px}
  .fl-du__v b{font-size:1.65rem}
  .fl-pl__v{grid-template-columns:1fr;gap:14px;align-content:start}
  html.fl-vivo .fl-pl__v{padding-top:calc(var(--fl-nav) + 4px);padding-bottom:70px}
  .fl-pl h2{font-size:clamp(2.3rem,10.2vw,3.6rem)}
  .fl-pl__p{grid-row:2}
  .fl-pl__tx{display:contents}
  html.fl-vivo .fl-pl__in{display:none}
  .fl-pl__l{grid-row:3;margin-top:0}
  html.fl-vivo .fl-pl__l li:not(.on){display:none}
  html.fl-vivo .fl-pl__l li{opacity:1;border-top:0}
  html.fl-vivo .fl-pl__l li.on{box-shadow:none;padding-left:0}
  .fl-pl__l b{font-size:1.75rem}
  .fl-pl__l span{font-size:1.125rem}
  .fl-filas--solo li{grid-template-columns:1fr}
}
@media (max-width:980px) and (max-height:700px){
  html.fl-vivo .fl-mo__g{max-height:34svh}
  .fl-mo__p strong{font-size:3.4rem}
  .fl-mo__p p{line-height:1.24;margin-top:4px}
}

/* Sin celdas vacías con cruz en el mosaico */
html.fl-vivo .fl-mo__h::before,html.fl-vivo .fl-mo__h::after{display:none}

/* Los huecos del mosaico dicen qué cámara falta encender. */
html.fl-vivo .fl-mo__h{display:grid;place-items:center}
html.fl-vivo .fl-mo__h::after{display:block;position:static;width:auto;height:auto;margin:0;background:none;color:#a8a8a8;font:600 clamp(.9375rem,1.1vw,1.0625rem)/1.2 Barlow,sans-serif}
html.fl-vivo .fl-mo__h.h4::after{content:"Tanques"}
html.fl-vivo .fl-mo__h.h5::after{content:"Mercadería"}

/* Los dos equipos, uno tras otro y a pantalla completa. */
html.fl-vivo .fl-pu{display:block;border:0;overflow:visible}
html.fl-vivo .fl-pu__a{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(16px,3vw,48px);padding:clamp(84px,11vh,110px) clamp(16px,3.4vw,48px) clamp(30px,6vh,60px);background:#000;border:0;overflow:hidden;flex:none;transform:translateX(5%);transition:opacity .45s ease,transform .8s var(--fl-tr)}
html.fl-vivo .fl-pu__a.on{transform:none}
html.fl-vivo .fl-pu__nom{position:absolute;left:50%;right:auto;top:10%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(6rem,16.5vw,20rem);opacity:.1;z-index:0;margin:0}
html.fl-vivo .fl-pu__img{position:relative;z-index:2;display:block;width:auto;max-width:100%;margin:0;justify-self:center}
html.fl-vivo .fl-pu__img img{display:block;width:auto;max-width:100%;max-height:calc(100svh - 190px);height:auto;transform:scale(.86);transition:transform 1.1s var(--fl-tr);filter:drop-shadow(0 30px 70px rgba(0,0,0,.8))}
html.fl-vivo .fl-pu__a.on .fl-pu__img img{transform:none}
html.fl-vivo .fl-pu__tx{position:relative;z-index:2}
@media (max-width:980px){
  /* En el celular cada equipo con todos sus datos no cabe en una pantalla: van apilados. */
  html.fl-vivo .fl-pu.fl-fijo{height:auto}
  html.fl-vivo .fl-pu .fl-fijo__v{position:static;height:auto;overflow:visible}
  html.fl-vivo .fl-pu__a,html.fl-vivo .fl-pu__a.on{position:relative;inset:auto;display:block;opacity:1;pointer-events:auto;transform:none;padding:clamp(70px,16vw,110px) 16px 40px;border-top:1px solid var(--pm-borde)}
  html.fl-vivo .fl-pu__nom{top:50px;font-size:clamp(4.6rem,23vw,9rem);opacity:1}
  html.fl-vivo .fl-pu__img{width:min(82%,380px);margin:44px auto 0}
  html.fl-vivo .fl-pu__img img{width:100%;max-height:none;transform:none}
}

/* Lo que falta encender se ve apagado, no vacío. */
html.fl-vivo .fl-mo__h{border:0;background-size:cover;background-position:center;background-blend-mode:multiply;background-color:#2a2a2a}
html.fl-vivo .fl-mo__h.h4{background-image:url(/assets/portada/vista-ce-tanques.webp?v=20261104b)}
html.fl-vivo .fl-mo__h.h5{background-image:url(/assets/portada/sl-mercaderia.webp)}
html.fl-vivo .fl-mo__h::after{color:#fff;font-weight:700;align-self:end;justify-self:start;padding:10px 12px}

/* Unidades en ruta sobre el mapa */
.fl-rec{position:relative}
.fl-rec svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fl-rec .rt{fill:none;stroke:#1f7bf2;stroke-width:9;stroke-linecap:round;opacity:.72}
.fl-rec text{font:700 26px Barlow,Arial,sans-serif;fill:#fff}
@media (prefers-reduced-motion:reduce){.fl-rec svg g{display:none}}

/* El celular pasa de la vista DMS a la lista de alertas */
.fl-tel__p>img.fl-tel__alt{opacity:0}
html.fl-vivo .fl-sl--tel .fl-tel__p>img.fl-tel__alt{animation:fl-alertas 9s ease-in-out infinite}
.fl-tel__p>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.fl-tel__p[data-tel-ciclo]>img.fl-tel__alt{animation:none!important;transition:opacity .6s ease}
.fl-tel__p[data-tel-ciclo].lista>img.fl-tel__alt{opacity:1}
@keyframes fl-alertas{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){html.fl-vivo .fl-sl--tel .fl-tel__p>img.fl-tel__alt{animation:none}}
@media (min-width:981px){.fl-sl--neg .fl-sl__p.fl-rec{width:min(54vw,calc((100svh - 150px)*1.77))}}
/* La franja de la cámara va entera. */
.fl-mo__c.c4 img{object-position:50% 0}

/* Una foto vertical se enseña en vertical. */
@media (min-width:981px){.fl-sl--alta .fl-sl__p{width:auto;height:calc(100svh - 170px);right:clamp(60px,12vw,190px)}.fl-sl--alta .fl-sl__p img{width:auto;height:100%}}
@media (max-width:980px){.fl-sl--alta .fl-sl__p img{max-height:46svh;width:auto;margin-inline:auto;object-fit:contain}}