/* V3 — Portada con movimiento. Todo se desactiva con "reducir movimiento" del sistema. */

/* Fondo vivo del hero: dos luces azules que se desplazan y una rejilla que avanza */
.hero{isolation:isolate}
.hero:after{content:'';position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 30% 40%,#0064fc55,transparent 38%),radial-gradient(circle at 75% 65%,#2f8bff40,transparent 34%);
  filter:blur(30px);animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(-4%,-3%) scale(1)}50%{transform:translate(5%,4%) scale(1.08)}100%{transform:translate(-2%,6%) scale(.96)}}
.hero-grid:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(#6aa8ff14 1px,transparent 1px),linear-gradient(90deg,#6aa8ff14 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 70%);animation:grid-move 12s linear infinite}
@keyframes grid-move{to{background-position:56px 56px,56px 56px}}

/* Entrada escalonada del texto */
.hero-content>*{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-content>*:nth-child(1){animation-delay:.05s}.hero-content>*:nth-child(2){animation-delay:.18s}
.hero-content>*:nth-child(3){animation-delay:.32s}.hero-content>*:nth-child(4){animation-delay:.46s}
.hero-content>*:nth-child(5){animation-delay:.6s}.hero-content>*:nth-child(6){animation-delay:.74s}
@keyframes rise{to{opacity:1;transform:none}}

/* Palabra que rota: "Cobro automático para bares / restaurantes / ..." */
.hero-rotator{font-size:20px;font-weight:700;color:#dfe8f7;margin:-6px 0 26px;display:flex;gap:.4em;align-items:baseline;flex-wrap:wrap}
.rotator-window{position:relative;display:inline-block;height:1.3em;overflow:hidden;vertical-align:bottom;min-width:9.5em}
.rotator-window span{position:absolute;left:0;top:0;white-space:nowrap;color:var(--leva-light);opacity:0;transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s}
.rotator-window span.on{opacity:1;transform:none}
.rotator-window span.off{opacity:0;transform:translateY(-100%)}

/* CashDro flotando, con sombra que respira y anillo de luz girando */
.hero-product img{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-product:after{content:'';position:absolute;bottom:14px;left:50%;width:58%;height:26px;transform:translateX(-50%);
  background:radial-gradient(ellipse,#00000080,transparent 70%);animation:shadow 6s ease-in-out infinite;z-index:0}
@keyframes shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.85}50%{transform:translateX(-50%) scale(.82);opacity:.55}}
.hero-product:before{border:0!important;box-shadow:none!important;
  background:conic-gradient(from 0deg,transparent 0 70%,#6aa8ff 82%,transparent 92%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65%,transparent 66%);mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65%,transparent 66%);
  animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@media(max-width:840px){@keyframes spin{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(1turn)}}}
.hero-medal{animation:medal 3.5s ease-in-out infinite}
@keyframes medal{0%,100%{box-shadow:0 10px 28px #0005,0 0 0 0 #c9a22700}50%{box-shadow:0 10px 28px #0005,0 0 0 8px #c9a22722}}

/* Cinta infinita de logos de clientes */
.logo-band{background:#fff;padding:26px 0 30px;border-bottom:1px solid var(--line);overflow:hidden}
.logo-band-title{text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#6a7787;margin:0 0 16px}
.logo-track{display:flex;gap:14px;width:max-content;animation:marquee 60s linear infinite}
.logo-band:hover .logo-track{animation-play-state:paused}
.logo-track img{width:150px;height:84px;object-fit:cover;border-radius:10px;border:1px solid #e6e9ef;filter:saturate(.9)}
.logo-band-mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:600px){.logo-track img{width:120px;height:68px}.logo-track{animation-duration:45s}}

/* Aparición suave al bajar por la página */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.visible{opacity:1;transform:none}

/* Tarjetas con más vida al pasar el ratón */
.product-card{transition:transform .35s,box-shadow .35s}
.product-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px #0b15271a}
.product-card .product-image-wrap img{transition:transform .5s}
.product-card:hover .product-image-wrap img{transform:scale(1.05) rotate(-1deg)}
.plan{transition:transform .35s,box-shadow .35s}.plan:hover{transform:translateY(-5px);box-shadow:0 22px 40px #0b15271c}

/* Botón principal con brillo que recorre */
.btn-gold{position:relative;overflow:hidden}
.btn-gold:after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}

@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) .hero:after,html:not(.force-motion) .hero-grid:before,html:not(.force-motion) .hero-product img,html:not(.force-motion) .hero-product:after,html:not(.force-motion) .hero-product:before,html:not(.force-motion) .hero-medal,html:not(.force-motion) .logo-track,html:not(.force-motion) .btn-gold:after{animation:none!important}
  html:not(.force-motion) .hero-content>*{animation:none;opacity:1;transform:none}
  html:not(.force-motion) .reveal{opacity:1;transform:none;transition:none}
  html:not(.force-motion) .rotator-window span{transition:none}
}

/* ---------- Así funciona: 3 pasos animados ---------- */
.how{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.how .section-heading{color:#fff}.how .section-intro{color:#b9c6da}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;margin-top:10px}
.how-line{position:absolute;top:62px;left:16%;right:16%;height:2px;background:#22385e;overflow:hidden}
.how-line:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--leva),var(--leva-light));transform:scaleX(0);transform-origin:left;transition:transform 1.6s ease .3s}
.how.visible .how-line:after{transform:scaleX(1)}
.how-step{position:relative;text-align:center;padding:0 10px}
.how-icon{width:124px;height:124px;margin:0 auto 18px;border-radius:50%;background:#0f1f3a;border:1px solid #2a4675;display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 0 0 8px #0b1527}
.how-icon svg{width:70px;height:70px;overflow:visible}
.how-num{position:absolute;top:-4px;right:-4px;width:30px;height:30px;border-radius:50%;background:var(--leva);font-weight:800;font-size:14px;display:grid;place-items:center}
.how-step h3{font-size:19px;margin:0 0 8px}.how-step p{color:#b9c6da;font-size:14px;margin:0 auto;max-width:300px}
/* Billete que entra */
.anim-note{animation:note 2.8s ease-in-out infinite}
@keyframes note{0%{transform:translateY(-26px);opacity:0}20%{opacity:1}60%{transform:translateY(8px);opacity:1}80%,100%{transform:translateY(8px);opacity:0}}
/* Monedas que caen */
.anim-coin{animation:coin 2.4s cubic-bezier(.4,0,.6,1) infinite}.anim-coin.c2{animation-delay:.35s}.anim-coin.c3{animation-delay:.7s}
@keyframes coin{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}55%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
/* Check que se dibuja */
.anim-check{stroke-dasharray:60;stroke-dashoffset:60;animation:check 2.8s ease infinite}
@keyframes check{0%,15%{stroke-dashoffset:60}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@media(max-width:840px){.how-steps{grid-template-columns:1fr;gap:34px}.how-line{display:none}}

/* ---------- CashDro en color ---------- */
.colors-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.colors-photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:.9;background:#0b1527}
.colors-photo img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.colors-photo:hover img{transform:scale(1.06)}
/* Resplandor de color ALREDEDOR de la foto: la imagen de los CashDro no se altera */
.colors-photo{overflow:visible;animation:glow 9s ease-in-out infinite}
.colors-photo img{border-radius:18px}
@keyframes glow{0%,100%{box-shadow:0 24px 70px -10px #e8262c66}33%{box-shadow:0 24px 70px -10px #3ccf3c66}66%{box-shadow:0 24px 70px -10px #35a8e866}}
.color-chips{display:flex;gap:10px;margin:22px 0 26px}
.color-chips span{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 4px #d7dde8;animation:chip 3s ease-in-out infinite}
.color-chips span:nth-child(1){background:#e8262c}.color-chips span:nth-child(2){background:#3ccf3c;animation-delay:.25s}
.color-chips span:nth-child(3){background:#35a8e8;animation-delay:.5s}.color-chips span:nth-child(4){background:#3a3d42;animation-delay:.75s}
@keyframes chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:840px){.colors-grid{grid-template-columns:1fr;gap:28px}.colors-photo{aspect-ratio:1}}

/* ---------- Vídeo del showroom ---------- */
.showroom{background:linear-gradient(120deg,#0a1220,#12284f);color:#fff;overflow:hidden}
.showroom-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.showroom .section-heading{color:#fff}.showroom p{color:#c3cfe2}
.showroom-list{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px}
.showroom-list li{display:flex;gap:10px;align-items:center}.showroom-list li:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--leva-light);box-shadow:0 0 0 4px #6aa8ff2a}
.phone{position:relative;width:min(300px,100%);margin:auto;aspect-ratio:9/16;border-radius:34px;padding:10px;background:#050a14;box-shadow:0 30px 60px #0008,0 0 0 1px #2a4675;animation:float 7s ease-in-out infinite}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:26px;display:block;background:#0b1527}
.phone:after{content:'';position:absolute;top:18px;left:50%;width:70px;height:6px;border-radius:6px;background:#0b1527;transform:translateX(-50%)}
@media(max-width:840px){.showroom-grid{grid-template-columns:1fr;gap:34px}.phone{width:240px}}

@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) :is(.anim-note,.anim-coin,.anim-check,.colors-photo,.color-chips span,.phone){animation:none!important}
  html:not(.force-motion) .anim-check{stroke-dashoffset:0}html:not(.force-motion) .how-line:after{transform:none;transition:none}
}

.how .eyebrow,.showroom .eyebrow{color:var(--leva-light)}