/* ════════════════════════════════════════════════
   TúPOS — Rubros: vitrinas con toldo, marquesina, cinta y escenario del héroe.
   Cargado después de tupos-landing.css (public/, fuera de la guardia de capas).
   Idea: cada rubro es una vitrina de barrio con su propio toldo de color.
   Movimiento: transform/opacity solamente; todo se detiene con prefers-reduced-motion.
   ════════════════════════════════════════════════ */

:root{ --rb-ease:cubic-bezier(.22,1,.36,1); --tone:#1E5EF5; }

/* Color de toldo por rubro (sale de la foto de cada uno) */
[data-rubro="minimarket"]{--tone:#1E5EF5}
[data-rubro="almacen"]{--tone:#C98A3D}
[data-rubro="botilleria"]{--tone:#8E2B45}
[data-rubro="panaderia"]{--tone:#E0A030}
[data-rubro="verduleria"]{--tone:#2E9A4D}
[data-rubro="carniceria"]{--tone:#D9556B}
[data-rubro="ferreteria"]{--tone:#E8742A}
[data-rubro="kiosco"]{--tone:#1AA6B7}
[data-rubro="pet-shop"]{--tone:#7A6BFF}
[data-rubro="libreria"]{--tone:#3F51B5}

/* ── Vitrina ───────────────────────────────────── */
.rubro-card{
  position:relative;display:block;flex:none;width:220px;aspect-ratio:5/7;
  border-radius:22px;overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;
  background:linear-gradient(165deg,var(--tone),#0A1730);
  box-shadow:0 22px 44px -22px color-mix(in srgb,var(--tone) 70%,#0A1730),0 0 0 1px rgba(10,23,48,.06);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .45s var(--rb-ease),box-shadow .45s var(--rb-ease);
  cursor:pointer;
}
.rubro-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--rb-ease);
}
/* sombra suave bajo el toldo */
.rubro-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:56px;z-index:1;
  background:linear-gradient(rgba(10,23,48,.34),transparent);
}
/* velo para leer la etiqueta */
.rubro-card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:1;
  background:linear-gradient(to top,rgba(8,16,36,.9),rgba(8,16,36,.55) 48%,transparent);
}
.rubro-card--plain::after{display:none}
.rubro-card--plain{cursor:default}

/* toldo festoneado: franjas tono/blanco, un festón por franja */
.rubro-card__awning{
  position:absolute;inset:0 0 auto 0;height:24px;z-index:2;
  background:repeating-linear-gradient(90deg,var(--tone) 0 18px,#fff 18px 36px);
  -webkit-mask-image:linear-gradient(#000,#000),radial-gradient(circle at 50% 0,#000 8.8px,transparent 9.4px);
  -webkit-mask-size:100% 14px,18px 10px;
  -webkit-mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat,repeat-x;
  mask-image:linear-gradient(#000,#000),radial-gradient(circle at 50% 0,#000 8.8px,transparent 9.4px);
  mask-size:100% 14px,18px 10px;
  mask-position:top,bottom;
  mask-repeat:no-repeat,repeat-x;
  transform-origin:top;
  transition:transform .45s var(--rb-ease);
}

.rubro-card__label{
  position:absolute;inset:auto 0 0 0;z-index:3;padding:0 16px 16px;
  display:flex;flex-direction:column;gap:6px;
}
.rubro-card__label::before{
  content:"";display:block;margin-bottom:8px;border-top:1.5px dashed rgba(255,255,255,.5);
}
.rubro-card__name{font:700 17px/1.15 "Poppins",sans-serif;letter-spacing:-.01em}
.rubro-card__sum{font-size:13px;line-height:1.4;color:rgba(255,255,255,.88)}
.rubro-card__cta{
  display:inline-flex;align-items:center;gap:6px;
  font:500 10.5px/1 "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
}
.rubro-card__go{transition:transform .3s var(--rb-ease)}

.rubro-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.rubro-card:active{--lift:-2px}
.rubro-card.is-tilting{transition:transform 90ms linear,box-shadow .45s var(--rb-ease)}

@media (hover:hover){
  .rubro-card:not(.rubro-card--plain):hover{
    --lift:-8px;
    box-shadow:0 32px 56px -22px color-mix(in srgb,var(--tone) 85%,#0A1730),0 0 0 1px color-mix(in srgb,var(--tone) 45%,transparent);
  }
  .rubro-card:not(.rubro-card--plain):hover img{transform:scale(1.07)}
  .rubro-card:not(.rubro-card--plain):hover .rubro-card__awning{transform:scaleY(1.2)}
  .rubro-card:not(.rubro-card--plain):hover .rubro-card__go{transform:translateX(4px)}
}

/* ── Marquesina (landing principal) ─────────────── */
.rubro-marquee{
  position:relative;overflow-x:clip;padding:30px 0 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.rubro-marquee__track{display:flex;width:max-content;animation:rubro-drift 70s linear infinite}
.rubro-marquee__group{display:flex;gap:18px;padding-right:18px}
.rubro-marquee:hover .rubro-marquee__track,
.rubro-marquee:focus-within .rubro-marquee__track{animation-play-state:paused}
@keyframes rubro-drift{to{transform:translateX(-50%)}}

/* ── Cinta vertical del héroe del índice (decorativa) ── */
.rubro-reel{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  height:clamp(400px,66vh,580px);overflow:clip;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
}
.rubro-reel__col{display:flex;flex-direction:column;animation:rubro-rise 58s linear infinite}
.rubro-reel__col:nth-child(2){animation-name:rubro-sink;animation-duration:66s}
.rubro-reel__col:nth-child(3){animation-duration:52s;animation-delay:-14s}
.rubro-reel__group{display:flex;flex-direction:column;gap:16px;padding-bottom:16px}
.rubro-reel .rubro-card{width:100%}
@keyframes rubro-rise{to{transform:translateY(-50%)}}
@keyframes rubro-sink{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* ── Rejilla de rubros (índice y relacionados) ───── */
.rubro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rubro-grid .rubro-card{width:100%}
@media (min-width:1000px){.rubro-grid{grid-template-columns:repeat(5,1fr)}}
.rubro-grid--related{grid-template-columns:repeat(3,minmax(0,240px));justify-content:center}

/* el brillo y los chips del héroe sobresalen de la imagen: que no creen scroll horizontal */
.hero:has(.rubro-stage),.hero:has(.rubro-reel){overflow-x:clip}

/* ── Escenario del héroe de cada rubro ───────────── */
.rubro-stage{position:relative;isolation:isolate}
.rubro-stage::before{
  content:"";position:absolute;inset:-8% -24%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tone,#1E5EF5) 36%,transparent),transparent);
}
.rubro-stage .rubro-card{width:100%;cursor:default;animation:rubro-enter .9s var(--rb-ease) backwards}
.rubro-stage .rubro-card::after{display:none}
.rubro-chips{list-style:none;margin:0;padding:0}
.rubro-chip{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--border);color:var(--fg-1);
  box-shadow:0 14px 30px -12px rgba(10,23,48,.38);
  font:600 13px/1.1 "Poppins",sans-serif;
  animation:rubro-bob 6.5s ease-in-out infinite,rubro-fade .6s var(--rb-ease) backwards;
}
.rubro-chip::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--tone,#1E5EF5);flex:none;
}
.rubro-chip:nth-child(1){top:11%;left:-30px;animation-delay:0s,.55s}
.rubro-chip:nth-child(2){top:47%;right:-34px;animation-delay:-2.2s,.7s}
.rubro-chip:nth-child(3){bottom:11%;left:-22px;animation-delay:-4.1s,.85s}
@keyframes rubro-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rubro-fade{from{opacity:0}}
@keyframes rubro-enter{from{opacity:0;transform:translateY(34px) scale(.95) rotate(-1.5deg)}}

/* ── Aparición al hacer scroll ───────────────────── */
.rv [data-rv]{
  opacity:0;transform:translateY(28px) scale(.97);
  transition:opacity .6s var(--rb-ease),transform .8s var(--rb-ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.rv [data-rv].is-in{opacity:1;transform:none}

/* ── Responsive ──────────────────────────────────── */
@media (max-width:960px){
  .rubro-reel{height:420px}
  .rubro-chip:nth-child(1){left:-12px}
  .rubro-chip:nth-child(2){right:-12px}
  .rubro-chip:nth-child(3){left:-8px}
}
@media (max-width:700px){
  .rubro-card{width:170px;border-radius:18px}
  .rubro-card__name{font-size:15px}
  .rubro-grid{gap:14px}
  .rubro-grid .rubro-card__sum{display:none}
  .rubro-grid--related{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    padding:6px 24px 18px;margin:0 -24px;scrollbar-width:none;
  }
  .rubro-grid--related::-webkit-scrollbar{display:none}
  .rubro-grid--related .rubro-cell{flex:none;width:200px;scroll-snap-align:center}
  .rubro-reel{gap:10px}
  .rubro-reel__group{gap:10px;padding-bottom:10px}
  .rubro-chip{font-size:12px;padding:7px 11px}
  .rubro-chip:nth-child(1){left:6px}
  .rubro-chip:nth-child(2){right:6px}
  .rubro-chip:nth-child(3){left:6px}
}

/* ── Movimiento reducido: todo quieto y visible ──── */
@media (prefers-reduced-motion:reduce){
  .rubro-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x proximity}
  .rubro-marquee__track,.rubro-reel__col,.rubro-chip,.rubro-stage .rubro-card{animation:none}
  .rubro-marquee__group[aria-hidden="true"]{display:none}
  .rubro-card,.rubro-card img,.rubro-card__awning,.rubro-card__go{transition:none}
  .rv [data-rv]{opacity:1;transform:none;transition:none}
}

/* ── Fuera de pantalla: pausa (rubros.js agrega .is-off). Va al final para ganar por orden ── */
.is-off .rubro-marquee__track,
.is-off .rubro-reel__col,
.is-off .rubro-chip{animation-play-state:paused}