/* ==========================================================================
   1-oct-2026 · CARRUSELES DE LAS FICHAS (pedido suyo: «no todo hacia abajo»)
   · .cb-vit  → la pantalla grande del encabezado pasa por las tiendas reales (fundido).
   · .cb-fx   → «Míralo de cerca»: una ventana grande con flechas, la explicación al lado
                y las miniaturas debajo, en vez de la cuadrícula de 9 capturas.
   · .cb-tiras → «Conoce nuestras tiendas» en una sola franja horizontal.
   El movimiento lo pone public/js/caribe-carrusel.js. Sin JS se ve la primera, completa.
   ========================================================================== */

/* ── 1) Vitrina giratoria en la pantalla del encabezado ── */
.cb-vit{aspect-ratio:820/564}
.cb-vit__slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.cb-vit__slide.es-activa{opacity:1;visibility:visible;transition:opacity .9s ease;z-index:1}
.cb-vit__slide > img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.cb-escena__pantalla.cb-vit .cb-vit__slide video{position:absolute;left:0;width:100%;aspect-ratio:auto;object-fit:cover}
.cb-vit__pie{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 9px 9px 16px;border-radius:16px;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -18px rgba(0,59,92,.6);font-size:14px;color:var(--cb-texto);line-height:1.3}
.cb-vit__pie b{color:var(--cb-tinta,#003B5C)}
.cb-vit__pie small{display:block;font-size:12px;color:var(--cb-gris)}
.cb .cb-vit__pie a{flex:none;font-weight:700;font-size:13.5px;color:#fff;background:var(--cb-mar);padding:9px 14px;border-radius:999px;white-space:nowrap}
.cb .cb-vit__pie a:hover{filter:brightness(1.12)}
.cb-vit__puntos{position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:3;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(0,59,92,.9);box-shadow:0 8px 20px -8px rgba(0,59,92,.7)}
.cb-vit__puntos button{appearance:none;border:0;padding:0;width:10px;height:10px;border-radius:999px;background:var(--cb-celeste,#B5DDF0);cursor:pointer;transition:width .3s,background .3s}
.cb-vit__puntos button:hover{background:#fff}
.cb-vit__puntos button.es-activa{width:28px;background:var(--cb-agua,#00A896)}
.cb-vit__sello{position:absolute;top:5px;right:14px;z-index:3;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(0,59,92,.82);color:#fff;padding:6px 11px;border-radius:999px}

/* ── 2) Cortina de funciones ── */
.cb-galeria.cb-galeria--fx{margin-top:72px;padding-top:64px;padding-bottom:64px}
.cb-fx{position:relative;max-width:1140px;margin:0 auto;outline:none}
.cb-fx__pista{display:grid;position:relative}
.cb-fx__slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:center;margin:0;
  opacity:0;visibility:hidden;transform:translateX(26px);transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s}
.cb-fx__slide.es-activa{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease}
.cb-fx__ventana{border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--cb-linea);box-shadow:0 40px 70px -38px rgba(0,59,92,.55)}
.cb-fx__barra{display:flex;gap:6px;align-items:center;height:26px;padding:0 14px;background:#EEF4F8;border-bottom:1px solid var(--cb-linea)}
.cb-fx__barra i{width:9px;height:9px;border-radius:50%;background:#F4A3A3}
.cb-fx__barra i:nth-child(2){background:#F6D27A}
.cb-fx__barra i:nth-child(3){background:#8FD9B6}
.cb-fx__ventana img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.cb-fx__texto{display:flex;flex-direction:column;gap:12px;text-align:left}
.cb-fx__num{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0077B6}
.cb-fx__num b{font-size:30px;letter-spacing:0;color:var(--cb-tinta,#003B5C);margin-right:4px}
.cb-fx__texto strong{font-size:26px;line-height:1.2;color:var(--cb-tinta,#003B5C)}
.cb-fx__texto p{margin:0;font-size:16.5px;line-height:1.55;color:var(--cb-texto)}
.cb-fx__flecha{position:absolute;top:50%;z-index:4;width:62px;height:62px;margin-top:-31px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:#fff;color:var(--cb-mar);
  box-shadow:0 16px 34px -14px rgba(0,59,92,.6);transition:transform .2s,background .2s,color .2s}
.cb-fx__flecha:hover,.cb-fx__flecha:focus-visible{background:var(--cb-mar);color:#fff;transform:scale(1.08)}
.cb-fx__flecha svg{width:26px;height:26px}
.cb-fx__flecha--ant{left:-30px}
.cb-fx__flecha--sig{right:calc(330px + 44px - 30px)}
.cb-fx__minis{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:26px 4px 6px;margin-top:6px;-webkit-overflow-scrolling:touch}
.cb-fx__mini{flex:0 0 132px;scroll-snap-align:center;appearance:none;border:0;background:none;padding:0;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:6px;opacity:.6;transition:opacity .25s,transform .25s}
.cb-fx__mini img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;border:2px solid transparent;background:#fff}
.cb-fx__mini span{font-size:12px;font-weight:600;line-height:1.3;color:var(--cb-mar);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cb-fx__mini:hover,.cb-fx__mini.es-activa{opacity:1}
.cb-fx__mini.es-activa{transform:translateY(-4px)}
.cb-fx__mini.es-activa img{border-color:#0077B6;box-shadow:0 10px 22px -12px rgba(0,119,182,.8)}

/* ── 3) Franja horizontal de tiendas ── */
.cb-tiras-sec{margin-top:0;padding-top:56px;padding-bottom:64px;background:var(--cb-suave)}
.cb-galeria--fx + .cb-tiras-sec{padding-top:8px}
.cb-tiras__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;text-align:left}
.cb-tiras__cab h2{margin:6px 0 0}
.cb-tiras__cab p{margin:0;max-width:380px;font-size:15.5px;color:var(--cb-gris)}
.cb-tiras{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
.cb .cb-tira{display:flex;flex-direction:column;gap:9px;color:inherit;text-decoration:none}
.cb-tira__foto{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 18px 34px -24px rgba(0,59,92,.5)}
.cb-tira__foto img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top;transition:transform .5s ease}
.cb-tira:hover .cb-tira__foto img{transform:scale(1.06)}
.cb-tira__foto em{position:absolute;right:8px;bottom:8px;font-style:normal;font-size:12px;font-weight:700;background:rgba(255,255,255,.94);color:var(--cb-mar);
  padding:5px 10px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.cb-tira:hover .cb-tira__foto em,.cb-tira:focus-visible .cb-tira__foto em{opacity:1;transform:none}
.cb-tira strong{font-size:15px;color:var(--cb-tinta,#003B5C);line-height:1.2}
.cb-tira small{display:block;font-size:13px;color:var(--cb-gris);font-weight:500}

/* ── El encabezado en celular: los datos flotantes en fila, no uno debajo del otro ── */
@media (max-width:980px){
  .cb-escena{display:flex;flex-wrap:wrap;gap:10px}
  .cb-escena__pantalla{flex:1 1 100%}
  .cb-escena .cb-flota{margin-top:0;flex:1 1 calc(50% - 5px);padding:13px 15px;border-radius:16px}
  .cb-escena .cb-flota strong{font-size:22px}
  .cb-escena .cb-flota span,.cb-escena .cb-flota small{font-size:12.5px}
  .cb-escena .cb-flota--3{flex-basis:100%}
  .cb-escena .cb-flota--3 strong{font-size:14px}
  .cb-fx__slide{grid-template-columns:minmax(0,1fr) 280px;gap:30px}
  .cb-fx__flecha--sig{right:calc(280px + 30px - 30px)}
  .cb-tiras{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 calc(-1 * var(--cb-lado,16px));padding:4px var(--cb-lado,16px) 10px;scroll-padding:0 var(--cb-lado,16px)}
  .cb-tiras::-webkit-scrollbar{display:none}
  .cb-tira{flex:0 0 46%;scroll-snap-align:start}
}
@media (max-width:760px){
  .cb-vit__pie{left:8px;right:8px;bottom:8px;padding:7px 7px 7px 12px;font-size:13px;border-radius:13px}
  .cb-vit__pie small{display:none}
  .cb .cb-vit__pie a{padding:7px 11px;font-size:12.5px}
  .cb-vit__puntos{bottom:56px}
  .cb-vit__sello{top:2px;right:8px;font-size:10.5px;padding:4px 9px}
  .cb-galeria.cb-galeria--fx{margin-top:48px;padding-top:44px;padding-bottom:40px}
  .cb-fx__slide{grid-template-columns:1fr;gap:16px;align-items:start;transform:translateX(16px)}
  .cb-fx__barra{height:18px;padding:0 10px}
  .cb-fx__barra i{width:7px;height:7px}
  .cb-fx__texto{gap:6px}
  .cb-fx__num b{font-size:22px}
  .cb-fx__texto strong{font-size:20px}
  .cb-fx__texto p{font-size:15px}
  /* las flechas, sobre la imagen (a media altura de la ventana) */
  .cb-fx__flecha{width:44px;height:44px;margin-top:0;top:calc((100vw - 2 * var(--cb-lado,16px)) * .3125 + 18px - 22px);background:rgba(255,255,255,.92)}
  .cb-fx__flecha svg{width:20px;height:20px}
  .cb-fx__flecha--ant{left:6px}
  .cb-fx__flecha--sig{right:6px}
  .cb-fx__minis{padding-top:18px;margin:0 calc(-1 * var(--cb-lado,16px));padding-left:var(--cb-lado,16px);padding-right:var(--cb-lado,16px);scrollbar-width:none}
  .cb-fx__minis::-webkit-scrollbar{display:none}
  .cb-fx__mini{flex-basis:96px}
  .cb-tiras__cab{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}
  .cb-tira{flex-basis:64%}
}
@media (prefers-reduced-motion:reduce){
  .cb-vit__slide,.cb-vit__slide.es-activa,.cb-fx__slide,.cb-fx__slide.es-activa,.cb-fx__mini,.cb-tira__foto img{transition:none}
  .cb-fx__slide{transform:none}
}

/* ── 1-oct-2026 · los 4 datos: una cifra larga («Coordinadora») se encoge al ancho de su tarjeta, sin salirse ── */
.cb-hechos > div{container-type:inline-size;min-width:0}
.cb-hechos strong.cb-hechos__largo{font-size:min(40px,11.5cqi);white-space:nowrap}