/* Hero "Nueva importación" — carretillas Jaguar Master */
@font-face{font-family:"TcxAnton";src:url(../fonts/tcx-anton.woff2) format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"TcxBarlow";src:url(../fonts/tcx-barlow-500.woff2) format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"TcxBarlow";src:url(../fonts/tcx-barlow-700.woff2) format("woff2");font-weight:700;font-display:swap;}
.tcx-hero{
  --azul:#1B2DA5; --azul-osc:#0B1564; --amarillo:#FFC416; --naranja:#F7941D; --blanco:#fff;
  --ciclo:9s;
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; aspect-ratio:1920/810; min-height:340px;
  background:radial-gradient(120% 140% at 72% 55%, var(--azul) 0%, var(--azul-osc) 78%);
  font-family:"TcxBarlow", "Arial Narrow", Arial, sans-serif; color:var(--blanco);
  box-sizing:border-box;
}
.tcx-hero *,.tcx-hero *::before,.tcx-hero *::after{box-sizing:border-box;}

/* Triángulos amarillos, mismo lenguaje que los banners actuales */
.tcx-tri{position:absolute; background:var(--amarillo); z-index:0; pointer-events:none;}
.tcx-tri--a{left:0; top:0; width:13%; aspect-ratio:1; clip-path:polygon(0 0,100% 0,0 100%);}
.tcx-tri--b{left:34%; bottom:0; width:12%; aspect-ratio:2/1; clip-path:polygon(50% 0,100% 100%,0 100%);}
.tcx-tri--c{right:0; top:0; width:8%; aspect-ratio:1; clip-path:polygon(0 0,100% 0,100% 100%); opacity:.9;}

/* Franja diagonal detrás del producto */
.tcx-band{
  position:absolute; z-index:0; right:-6%; top:50%; width:62%; height:30%;
  background:linear-gradient(90deg, rgba(60,86,230,0) 0%, rgba(60,86,230,.55) 35%, rgba(60,86,230,.75) 100%);
  transform:translateY(-10%) skewY(-8deg);
}

/* ---------- Texto ---------- */
.tcx-copy{
  position:absolute; z-index:3; left:5%; top:50%; transform:translateY(-50%);
  width:44%;
}
.tcx-tag{
  display:inline-block; background:var(--amarillo); color:var(--azul-osc);
  font-family:"TcxAnton", Impact, "Arial Narrow", sans-serif; font-weight:400;
  font-size:clamp(1.1rem, 3.6vw, 4.2rem); line-height:1; letter-spacing:.01em;
  padding:.12em .3em .1em; transform:skewX(-10deg); transform-origin:left bottom;
  animation:tcx-tag var(--ciclo) cubic-bezier(.2,.8,.2,1) infinite;
}
.tcx-tag span{display:inline-block; transform:skewX(10deg);}
.tcx-title{
  margin:0; padding-top:.14em; font-family:"TcxAnton", Impact, "Arial Narrow", sans-serif; font-weight:400;
  font-size:clamp(2rem, 8vw, 9.4rem); line-height:.92; letter-spacing:-.005em;
  text-transform:uppercase; font-style:normal;
  /* brillo que recorre el texto en cada ciclo */
  background:linear-gradient(100deg,#fff 0%,#fff 42%,#FFE7A1 50%,#fff 58%,#fff 100%);
  background-size:300% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:tcx-shine var(--ciclo) linear infinite;
}
.tcx-rule{display:block; width:38%; height:.35vw; min-height:3px; background:var(--amarillo); margin:1.6vw 0 1.3vw;}
.tcx-sub{margin:0; font-weight:500; font-size:clamp(.85rem, 1.75vw, 2rem); line-height:1.25; max-width:22em;}
.tcx-sub strong{font-weight:700;}

.tcx-colors{display:flex; align-items:center; gap:.7em; margin-top:1.4vw; font-size:clamp(.72rem,1.05vw,1.15rem); font-weight:500;}
.tcx-sw{width:1.25em; height:1.25em; border-radius:50%; border:2px solid rgba(255,255,255,.55); animation:tcx-sw var(--ciclo) infinite;}
.tcx-sw--1{background:#FFC20E;}
.tcx-sw--2{background:#161616; animation-delay:calc(var(--ciclo) / -1.5);}
.tcx-sw--3{background:#F57A1F; animation-delay:calc(var(--ciclo) / -3);}
.tcx-colors-name{position:relative; display:inline-block; min-width:5.5em; height:1.3em; margin-left:.2em;}
.tcx-colors-name b{position:absolute; left:0; top:0; font-weight:700; opacity:0; animation:tcx-name var(--ciclo) infinite;}
.tcx-colors-name b:nth-child(2){animation-delay:calc(var(--ciclo) / -1.5);}
.tcx-colors-name b:nth-child(3){animation-delay:calc(var(--ciclo) / -3);}

.tcx-cta{
  display:inline-block; margin-top:1.8vw; padding:.75em 1.6em; border-radius:999px;
  background:var(--naranja); color:#fff; text-decoration:none; font-weight:700;
  font-size:clamp(.8rem,1.2vw,1.3rem); transition:transform .2s ease, background-color .2s ease;
}
.tcx-cta:hover{background:#ff8a00; transform:translateY(-2px);}
.tcx-cta:focus-visible{outline:3px solid #fff; outline-offset:3px;}

/* ---------- Escenario del producto ---------- */
.tcx-stage{position:absolute; z-index:2; left:44%; right:0; top:0; bottom:0; overflow:hidden;}
.tcx-floor{
  position:absolute; left:14%; right:6%; bottom:11%; height:6%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
  animation:tcx-floor calc(var(--ciclo) / 3) ease-in-out infinite;
}
.tcx-item{
  position:absolute; left:5%; bottom:14%; width:90%;
  transform:translate3d(-130%,0,0); opacity:0;
  will-change:transform,opacity;
  animation:tcx-roll var(--ciclo) infinite;
}
.tcx-item:nth-child(3){animation-delay:calc(var(--ciclo) / -1.5);}
.tcx-item:nth-child(4){animation-delay:calc(var(--ciclo) / -3);}
.tcx-item img{
  display:block; width:100%; height:auto; aspect-ratio:960/482; object-fit:contain; object-position:center bottom;
  transform-origin:88% 88%; /* pivota sobre la rueda */
  animation:inherit; animation-name:tcx-tilt;
}

/* Líneas de velocidad */
.tcx-speed{position:absolute; left:0; bottom:22%; width:40%; height:34%; pointer-events:none;}
.tcx-speed i{
  position:absolute; left:0; height:3px; border-radius:3px; width:70%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7));
  opacity:0; transform:translate3d(-100%,0,0);
  animation:tcx-streak calc(var(--ciclo) / 3) ease-out infinite;
}
.tcx-speed i:nth-child(1){top:10%;}
.tcx-speed i:nth-child(2){top:48%; width:50%; animation-delay:.08s;}
.tcx-speed i:nth-child(3){top:84%; width:60%; animation-delay:.16s;}

/* ---------- Keyframes (ciclo de 9 s, 3 s por carretilla) ---------- */
@keyframes tcx-roll{
  0%    {transform:translate3d(-130%,0,0); opacity:0; animation-timing-function:cubic-bezier(.15,.7,.25,1);}
  2%    {opacity:1;}
  9%    {transform:translate3d(0,0,0);}
  29%   {transform:translate3d(0,0,0); opacity:1; animation-timing-function:cubic-bezier(.55,0,.85,.35);}
  36%   {transform:translate3d(135%,0,0); opacity:1;}
  36.5%,100%{transform:translate3d(135%,0,0); opacity:0;}
}
@keyframes tcx-tilt{
  0%    {transform:rotate(6deg);}
  7%    {transform:rotate(3deg);}
  10%   {transform:rotate(-1.2deg);}
  12.5% {transform:rotate(0);}
  29%   {transform:rotate(0);}
  32%   {transform:rotate(6deg);}
  100%  {transform:rotate(6deg);}
}
@keyframes tcx-floor{
  0%,4%  {opacity:0; transform:scaleX(.6);}
  28%,85%{opacity:1; transform:scaleX(1);}
  100%   {opacity:0; transform:scaleX(.6);}
}
@keyframes tcx-streak{
  0%   {opacity:0; transform:translate3d(-100%,0,0);}
  6%   {opacity:1;}
  24%  {opacity:0; transform:translate3d(60%,0,0);}
  100% {opacity:0; transform:translate3d(60%,0,0);}
}
@keyframes tcx-sw{
  0%,33%  {transform:scale(1.25); border-color:#fff;}
  34%,100%{transform:scale(1); border-color:rgba(255,255,255,.45);}
}
@keyframes tcx-name{
  0%     {opacity:0; transform:translateY(40%);}
  3%,30% {opacity:1; transform:translateY(0);}
  33%,100%{opacity:0; transform:translateY(-40%);}
}
@keyframes tcx-shine{
  0%,55% {background-position:100% 0;}
  75%,100%{background-position:0 0;}
}
@keyframes tcx-tag{
  0%,100%{transform:skewX(-10deg) scale(1);}
  4%     {transform:skewX(-10deg) scale(1.06);}
  8%     {transform:skewX(-10deg) scale(1);}
}

/* ---------- Móvil: texto arriba, carretilla abajo ---------- */
@media (max-width:767px){
  .tcx-hero{aspect-ratio:auto; min-height:0; height:clamp(520px, 150vw, 680px);}
  .tcx-copy{left:6%; right:6%; top:7%; width:auto; transform:none;}
  .tcx-tag{font-size:clamp(1.3rem,7vw,2.2rem);}
  .tcx-title{font-size:clamp(2.6rem,13.5vw,4.6rem);}
  .tcx-rule{height:3px; margin:12px 0 10px;}
  .tcx-sub{font-size:clamp(.95rem,4.2vw,1.2rem);}
  .tcx-colors{margin-top:12px; font-size:.9rem;}
  .tcx-cta{margin-top:14px; font-size:.95rem;}
  .tcx-stage{left:0; top:auto; height:44%;}
  .tcx-band{top:auto; bottom:6%; width:100%; right:0; height:22%;}
  .tcx-tri--a{width:22%;} .tcx-tri--b{left:auto; right:6%; width:24%;} .tcx-tri--c{display:none;}
  .tcx-item{left:6%; width:88%; bottom:12%;}
  .tcx-floor{bottom:9%;}
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  .tcx-hero *,.tcx-hero *::before{animation:none !important;}
  .tcx-item{transform:none; opacity:0;}
  .tcx-item:nth-child(2){opacity:1;}
  .tcx-title{background:none; color:#fff;}
  .tcx-colors-name b:first-child{opacity:1;}
  .tcx-floor{opacity:1;}
}

/* Integración con el carrusel del home */
.hero-slide--html{display:none; min-height:0; width:100%;}
.hero-slide--html.active{display:block;}