:root{
  --b:#1467ff;
  --bd:#0a43ba;
  --n:#071a3b;
  --i:#142849;
  --t:#596b86;
  --l:#e4ebf4;
  --s:#f5f8fd;
  --y:#ffcb27;
  --g:#18b77b
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  font-family:'DM Sans',sans-serif;
  color:var(--i);
  overflow-x:hidden
}
h1,h2,h3{
  font-family:'Plus Jakarta Sans',sans-serif
}
h1,h2{
  font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif
}
a{
  text-decoration:none
}
.landing-nav{
  padding:14px 0;
  background:#ffffffeb;
  backdrop-filter:blur(15px);
  border-bottom:1px solid #e4ebf4
}
.th-brand{
  display:flex;
  align-items:center;
  gap:5px;
  font-family:'Plus Jakarta Sans';
  font-size:1.15rem;
  font-weight:800;
  color:var(--n)
}
.th-brand img{
  width:97px
}
.th-brand span{
  font-size:.82rem;
  letter-spacing:.08em;
  color:var(--b)
}
.landing-nav .nav-link{
  font-size:.91rem;
  font-weight:600;
  color:#445774;
  padding:.65rem .82rem!important
}
.landing-nav .nav-link:hover{
  color:var(--b)
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:8px
}
.nav-actions .btn-link{
  color:var(--i);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none
}
.navbar-toggler{
  border:0;
  color:var(--n);
  font-size:1.6rem
}
.th-btn{
  border-radius:10px;
  border:1px solid transparent;
  font-weight:700;
  font-size:.9rem;
  padding:.75rem 1.1rem;
  transition:.2s
}
.th-btn:hover{
  transform:translateY(-2px)
}
.th-btn-primary{
  background:var(--b);
  color:#fff;
  box-shadow:0 10px 22px #1467ff40
}
.th-btn-primary:hover{
  background:var(--bd);
  color:#fff
}
.th-btn-light{
  background:#fff;
  border-color:#d8e2ef;
  color:var(--i)
}
.th-btn-yellow{
  background:var(--y);
  color:#332300;
  box-shadow:0 10px 22px #ffcb2733
}
.th-btn-yellow:hover{
  background:#ecad00;
  color:#332300
}
.th-btn-outline{
  border-color:#bfceed;
  color:var(--b);
  background:#fff
}
.th-btn-outline:hover{
  border-color:var(--b);
  background:#f3f7ff;
  color:var(--b)
}
.th-btn-large{
  padding:1rem 1.35rem;
  font-size:.96rem
}
.th-btn i{
  margin-left:.45rem
}
.hero-section{
  position:relative;
  overflow:hidden;
  padding:155px 0 95px;
  background:radial-gradient(circle at 88% 20%,rgba(92,157,255,.38),transparent 34%),linear-gradient(155deg,#061a45 0%,#0a3479 53%,#08265c 100%);
  color:#fff
}
.hero-grid:after{
  content:"";
  position:absolute;
  width:58%;
  height:82%;
  top:10%;
  right:0;
  pointer-events:none;
  background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)
}
.hero-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none
}
.hero-orb-one{
  width:590px;
  height:590px;
  right:-230px;
  top:-230px;
  background:radial-gradient(circle,#1467ff66,#1467ff00 70%)
}
.hero-orb-two{
  width:440px;
  height:440px;
  left:-260px;
  bottom:-280px;
  background:radial-gradient(circle,#ffcb272e,#ffcb2700 70%)
}
.hero-proof{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:24px;
  padding:7px 13px 7px 8px;
  background:#ffffff12;
  border:1px solid #ffffff24;
  border-radius:999px;
  font-size:.78rem;
  color:#c9d6ea;
  font-weight:600
}
.proof-avatars{
  display:flex
}
.proof-avatars b{
  width:25px;
  height:25px;
  margin-left:-5px;
  border:2px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dce9ff;
  color:var(--b);
  font-size:.57rem
}
.proof-avatars b:first-child{
  margin:0;
  background:#ffe487;
  color:#855f00
}
.proof-avatars b:last-child{
  background:var(--b);
  color:#fff
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 13px;
  color:var(--b);
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em
}
.hero-section h1{
  font-size:clamp(2.75rem,5vw,4.8rem);
  line-height:1.05;
  letter-spacing:-.055em;
  margin:0 0 22px;
  font-weight:800;
  color:#fff
}
.hero-section h1 span{
  position:relative;
  color:var(--y)
}
.hero-section h1 span:after{
  content:"";
  position:absolute;
  left:4%;
  right:6%;
  bottom:-13px;
  height:7px;
  border-radius:999px;
  background:var(--b);
  transform:rotate(-3deg)
}
.hero-section .eyebrow{
  color:var(--y)
}
.hero-copy{
  max-width:560px;
  margin:0 0 28px;
  color:#b8c6dc;
  font-size:1.1rem;
  line-height:1.72
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px
}
.hero-notes{
  display:flex;
  flex-wrap:wrap;
  gap:13px 19px;
  margin-top:24px;
  color:#b8c6dc;
  font-size:.78rem;
  font-weight:600
}
.hero-notes i{
  color:var(--g);
  margin-right:5px
}
.dashboard-wrap{
  position:relative;
  padding:14px;
  background:#fff;
  border:1px solid #cfdff4;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(13,35,71,.2);
  transform:perspective(1200px) rotateY(-2deg) rotateX(1deg)
}
.dashboard-bar{
  height:24px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 3px 10px
}
.dashboard-bar span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff6d6d
}
.dashboard-bar span:nth-child(2){
  background:#ffcf44
}
.dashboard-bar span:nth-child(3){
  background:#3bc78a
}
.dashboard-bar small{
  margin:auto;
  color:#97a7bd;
  font-size:.62rem
}
.dashboard-image{
  display:block;
  width:100%;
  border-radius:10px
}
.dashboard-showcase {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-showcase .dashboard-bar,
.dashboard-showcase .mini-stat {
    display: none;
}

.dashboard-showcase .dashboard-image {
    transform: scale(1.2) translateX(8%);
    transform-origin: right center;
    border-radius: 0;
}

.mini-stat{
  position:absolute;
  display:flex;
  gap:9px;
  align-items:center;
  padding:10px 13px;
  background:#fffffff8;
  border:1px solid #d9e5f4;
  border-radius:12px;
  box-shadow:0 13px 30px #1e396329
}
.mini-stat>i{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#e8f0ff;
  color:var(--b)
}
.mini-stat small,.mini-stat strong{
  display:block
}
.mini-stat small{
  font-size:.62rem;
  color:#71819a
}
.mini-stat strong{
  font-size:.74rem;
  color:var(--n)
}
.mini-stat-sales{
  left:-35px;
  bottom:36px
}
.mini-stat-stock{
  right:-32px;
  top:50px
}
.trust-section{
  padding:28px 0;
  background:#f1f6fe;
  border-top:1px solid #e2ebf8;
  border-bottom:1px solid #e2ebf8
}
.trust-section p{
  text-align:center;
  margin:0 0 17px;
  color:#8494aa;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.14em
}
.trust-items{
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:#526a8c;
  font-weight:700;
  font-size:.92rem
}
.trust-items i{
  color:var(--b);
  margin-right:7px
}
.section-space{
  padding:100px 0
}
.section-heading{
  max-width:690px;
  margin:0 auto 45px
}
.section-heading.narrow{
  margin-left:0
}
.section-heading h2,.solution-section h2{
  font-size:clamp(2rem,3.8vw,3.25rem);
  letter-spacing:-.045em;
  line-height:1.18;
  font-weight:800;
  margin:0 0 14px
}
.section-heading>p:last-child,.solution-section p{
  color:var(--t);
  line-height:1.7;
  margin:0
}
.problem-section .row {
    counter-reset: problema;
}

.problem-card {
    position: relative;
    height: 100%;
    padding: 18px 4px 0 0;
    border-top: 2px solid var(--n);
    counter-increment: problema;
    transition: border-color .22s ease;
}

.problem-card:hover {
    border-top-color: var(--y);
}

.problem-card::before {
    content: counter(problema, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    color: var(--n);
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
}

.problem-card > i {
    position: absolute;
    top: 20px;
    right: 4px;
    color: #c98b00;
    font-size: 1.35rem;
}

.problem-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.problem-card p {
    margin: 0;
    color: var(--t);
    font-size: .9rem;
    line-height: 1.65;
}
.solution-section{
  position:relative;
  background:linear-gradient(155deg,#061a45 0%,#0a3479 53%,#08265c 100%);
  overflow:hidden
}
.solution-section:before{
  content:"";
  position:absolute;
  width:630px;
  height:630px;
  right:-220px;
  top:-260px;
  border:1px solid #ffffff14;
  border-radius:50%;
  box-shadow:0 0 0 60px #ffffff06,0 0 0 120px #ffffff05
}
.solution-section h2{
  color:#fff
}
.solution-section p{
  color:#a8b8d1;
  margin-bottom:27px
}
.eyebrow-light{
  color:#83abff
}
.module-list{
  display:grid;
  gap:11px
}
.module-list article{
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 18px;
  background:#ffffff0e;
  border:1px solid #ffffff24;
  border-radius:15px;
  transition:.2s
}
.module-list article:hover{
  background:#ffffff1a;
  transform:translateX(5px)
}
.module-list article>i{
  margin-left:auto;
  color:#8badff
}
.module-icon{
  width:43px;
  height:43px;
  flex:0 0 43px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:1.1rem
}
.blue{
  background:#dce9ff;
  color:var(--b)
}
.yellow{
  background:#fff1bd;
  color:#aa7700
}
.green{
  background:#d9f6ea;
  color:#12965f
}
.purple{
  background:#e9e3ff;
  color:#7653ef
}
.module-list small{
  color:#90a8d1;
  font-size:.67rem;
  font-weight:700
}
.module-list h3{
  color:#fff;
  font-size:.98rem;
  margin:3px 0
}
.module-list p{
  font-size:.78rem!important;
  margin:0!important;
  color:#afbed5!important
}
.business-section{
  background:var(--s)
}
.business-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--l);
    border-radius: 20px;
    background: var(--l);
}

.business-grid article {
    padding: 28px 22px;
    background: #fff;
}

.business-grid article:hover {
    background: #fffaf0;
}

.business-grid i{
  font-size:1.4rem;
  color:var(--b)
}
.business-grid h3{
  font-size:.92rem;
  font-weight:800;
  margin:18px 0 8px
}
.business-grid p{
  font-size:.79rem;
  line-height:1.5;
  color:var(--t);
  margin:0
}
.plan-card{
  position:relative;
  height:100%;
  padding:31px 29px;
  border:1px solid var(--l);
  border-radius:19px;
  background:#fff
}
.plan-card h3{
  font-size:1.2rem;
  font-weight:800
}
.plan-card>p{
  min-height:40px;
  color:var(--t);
  font-size:.88rem
}
.price{
  font-family:'Plus Jakarta Sans';
  font-weight:800;
  font-size:2.5rem;
  letter-spacing:-.06em;
  color:var(--n);
  margin:22px 0
}
.price small{
  font-family:'DM Sans';
  font-size:.83rem;
  font-weight:600;
  letter-spacing:0;
  color:#8292a8
}
.plan-card ul{
  padding:0;
  margin:0 0 26px;
  list-style:none
}
.plan-card li{
  padding:7px 0;
  color:#53667f;
  font-size:.86rem
}
.plan-card li i{
  color:var(--g);
  margin-right:7px
}
.plan-featured{
  border:2px solid var(--b);
  box-shadow:0 20px 46px #1467ff24;
  transform:translateY(-10px)
}
.plan-badge{
  position:absolute;
  top:-13px;
  left:28px;
  padding:6px 11px;
  border-radius:999px;
  background:var(--b);
  color:#fff;
  font-size:.69rem;
  font-weight:800
}
.final-cta{
  padding:30px 0 75px
}
.final-cta-card{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:26px;
  padding:48px 52px;
  border-radius:22px;
  background:linear-gradient(130deg,#0e56dc,#1467ff);
  color:#fff
}
.final-cta-card:after{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  right:12%;
  top:-190px;
  border:1px solid #ffffff3d;
  border-radius:50%;
  box-shadow:0 0 0 42px #ffffff0d
}
.final-cta-card>*{
  position:relative;
  z-index:1
}
.final-cta-card .eyebrow{
  color:#bcd3ff
}
.final-cta-card h2{
  max-width:690px;
  margin:0 0 11px;
  font-size:clamp(1.75rem,3vw,2.6rem);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.045em
}
.final-cta-card p:not(.eyebrow){
  margin:0;
  color:#d9e5ff
}
.landing-footer{
  padding:38px 0 96px;
  background:#07182f;
  color:#aab9cd
}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-bottom:30px;
  border-bottom:1px solid #ffffff1f
}
.landing-footer .th-brand{
  color:#fff
}
.landing-footer p{
  margin:0;
  font-size:.86rem
}
.landing-footer a:not(.th-brand){
  color:#d6e3f8;
  font-size:.86rem;
  font-weight:700
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding-top:20px;
  font-size:.75rem
}

/* Movimiento y profundidad de la landing pública */
.dashboard-wrap{
  animation:dashboard-float 7s ease-in-out infinite;
  transform-origin:center center;
}

.mini-stat-sales{
  animation:stat-float 5s ease-in-out infinite;
}

.mini-stat-stock{
  animation:stat-float 5s ease-in-out -2.5s infinite;
}

.trust-marquee{
  overflow:hidden;
}

.trust-items-moving{
  width:max-content;
  animation:trust-scroll 24s linear infinite;
}

.trust-marquee:hover .trust-items-moving{
  animation-play-state:paused;
}

.plan-card{
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.plan-card:hover{
  border-color:#bfd4f4;
  box-shadow:0 16px 34px rgba(20, 103, 255, .12);
  transform:translateY(-5px);
}

.plan-featured:hover{
  transform:translateY(-14px);
}

.landing-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .55s ease, transform .55s ease;
}

.landing-revealed{
  opacity:1;
  transform:translateY(0);
}

@keyframes dashboard-float{
  0%, 100%{
    transform:perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(0);
  }

  50%{
    transform:perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-10px);
  }
}

@keyframes stat-float{
  0%, 100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-7px);
  }
}

@keyframes trust-scroll{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (min-width:1200px){
    .hero-section .container-xl {
        min-height: 560px;
    }

    .hero-section .dashboard-showcase {
        position: absolute;
        top: 60px;
        right: -17%;
        width: min(60vw, 960px);
    }

    .hero-section .dashboard-showcase .dashboard-image {
        transform: none;
    }
}

@media (min-width:1200px) and (max-width:1399.98px){
    .hero-section .dashboard-showcase {
        right: 0;
        width: 48vw;
    }
}

@media(max-width:991.98px){
  .landing-nav .navbar-collapse{
    margin-top:12px;
    padding:14px;
    border:1px solid var(--l);
    border-radius:14px;
    background:#fff;
    box-shadow:0 16px 35px #1535611a
  }
  .nav-actions{
    margin-top:8px
  }
  .hero-section{
    padding-top:125px
  }
  .dashboard-wrap{
    max-width:660px
  }
  .business-grid{
    grid-template-columns:repeat(3,1fr)
  }
  .plan-featured{
    transform:none
  }
    .dashboard-showcase .dashboard-image {
        transform: none;
    }

  .plan-featured:hover{
    transform:translateY(-5px);
  }
  .final-cta-card{
    align-items:flex-start;
    flex-direction:column
  }
}
@media(max-width:767.98px){
  .landing-nav{
    padding:10px 0
  }
  .th-brand img{
    width:82px
  }
  .hero-section{
    padding:108px 0 65px
  }
  .hero-proof{
    font-size:.7rem
  }
  .hero-section h1{
    font-size:2.7rem
  }
  .hero-copy{
    font-size:1rem
  }
  .hero-actions .btn{
    width:100%
  }
  .hero-notes{
    display:grid;
    gap:9px
  }
  .dashboard-wrap{
    margin-top:7px;
    padding:9px;
    border-radius:14px;
    transform:none
  }
  .mini-stat{
    display:none
  }
  .trust-items{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    justify-content:start;
    gap:14px;
    font-size:.82rem
  }
  .trust-items-moving{
    width:auto;
    animation:none;
  }
  .trust-section p{
    text-align:left
  }
  .section-space{
    padding:70px 0
  }
  .section-heading{
    margin-bottom:30px
  }
  .section-heading h2,.solution-section h2{
    font-size:2rem
  }
  .business-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .business-grid article:last-child{
    grid-column:span 2
  }
  .module-list article{
    padding:14px
  }
  .module-list h3{
    font-size:.88rem
  }
  .module-list p{
    font-size:.73rem!important
  }
  .final-cta{
    padding:16px 0 55px
  }
  .final-cta-card{
    padding:31px 25px
  }
  .final-cta-card .th-btn{
    width:100%
  }
  .footer-top,.footer-bottom{
    align-items:flex-start;
    flex-direction:column
  }
  .footer-top{
    gap:15px
  }
  .footer-bottom{
    padding-top:17px;
    gap:7px
  }
  .nav-actions .btn-link{
    padding-left:0
  }
}

/* Mejoras landing: mercado Venezuela, planes y preguntas frecuentes */
.proof-flag {
    display: grid;
    place-items: center;
    height: 25px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--y);
    color: #332300;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.local-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.ve-title {
    margin: 0 0 18px;
    color: var(--n);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.ve-title span {
    display: block;
    color: var(--b);
}

.ve-copy {
    max-width: 520px;
    margin: 0 0 30px;
    color: var(--t);
    font-size: 1.02rem;
    line-height: 1.7;
}

.ve-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-features li {
    display: flex;
    gap: 13px;
    padding-top: 16px;
    border-top: 2px solid var(--n);
}

.ve-features i {
    flex-shrink: 0;
    color: var(--b);
    font-size: 1.3rem;
    line-height: 1.2;
}

.ve-features strong {
    display: block;
    margin-bottom: 4px;
    color: var(--n);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .98rem;
    font-weight: 800;
}

.ve-features span {
    display: block;
    color: var(--t);
    font-size: .86rem;
    line-height: 1.6;
}

.ve-ticket-wrap {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    padding: 34px 0 10px;
}

.ve-ticket-wrap::before {
    content: "";
    position: absolute;
    inset: 0 -34px 40px 46px;
    border-radius: 28px;
    background: var(--y);
    transform: rotate(4deg);
}

.ve-sticker {
    position: absolute;
    top: 8px;
    right: -14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--n);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .85rem;
    font-weight: 800;
    transform: rotate(6deg);
    box-shadow: 0 12px 24px rgba(7, 26, 59, .25);
}

.ve-sticker i {
    color: var(--y);
}

.ve-ticket {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 26px 26px 34px;
    background: #fff;
    color: var(--i);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 26px 50px rgba(7, 26, 59, .18);
    transform: rotate(-2deg);
    -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100%;
    mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100%;
}

.ve-ticket-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 2px dashed var(--l);
}

.ve-ticket-head strong {
    color: var(--n);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
}

.ve-ticket-head small {
    color: var(--t);
    font-size: .76rem;
}

.ve-rate {
    display: flex;
    justify-content: space-between;
    margin: 14px 0 6px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fff4cd;
    color: #7a5600;
    font-size: .84rem;
}

.ve-items,
.ve-payments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-items li,
.ve-total {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    align-items: baseline;
}

.ve-items li {
    padding: 11px 0;
    border-bottom: 1px solid #eef2f8;
    font-size: .88rem;
}

.ve-items strong,
.ve-total strong {
    text-align: right;
}

.ve-items small,
.ve-total small {
    grid-column: 2;
    color: var(--g);
    font-weight: 700;
    text-align: right;
}

.ve-total {
    margin: 14px 0 16px;
    padding-bottom: 16px;
    border-bottom: 2px dashed var(--l);
    color: var(--n);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
}

.ve-total strong {
    font-size: 1.35rem;
    letter-spacing: -.03em;
}

.ve-total small {
    font-size: 1rem;
}

.ve-payments li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: .86rem;
}

.ve-payments i {
    margin-right: 6px;
    color: var(--b);
}

.ve-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #e3f7ee;
    color: #0e7a50;
    font-size: .84rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .ve-ticket-wrap::before {
        inset: 0 -10px 40px 30px;
    }

    .ve-sticker {
        right: 0;
    }
}

@media (max-width: 575.98px) {
    .ve-features {
        grid-template-columns: 1fr;
    }

    .ve-ticket-wrap {
        padding: 34px 18px 10px 6px;
    }

    .ve-ticket-wrap::before {
        inset: 0 0 40px 30px;
    }

    .ve-ticket {
        padding: 22px 18px 30px;
    }
}

.plans-section {
    background: var(--s);
}

.plan-includes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 860px;
    margin: -15px auto 40px;
    font-size: .84rem;
}

.plan-includes strong {
    color: var(--n);
    margin-right: 4px;
}

.plan-includes span {
    padding: 6px 12px;
    border: 1px solid #cfe0f7;
    border-radius: 999px;
    background: #fff;
    color: #3d5475;
    font-weight: 600;
}

.plan-note {
    margin: 26px 0 0;
    text-align: center;
    color: #8292a8;
    font-size: .8rem;
}

.faq-list {
    max-width: 780px;
    margin: 0 auto;
}

.faq-list .accordion-item {
    margin-bottom: 10px;
    border: 1px solid var(--l);
    border-radius: 14px !important;
    overflow: hidden;
}

.faq-list .accordion-button {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .98rem;
    font-weight: 700;
    color: var(--n);
    padding: 18px 22px;
}

.faq-list .accordion-button:not(.collapsed) {
    background: #f3f7ff;
    color: var(--b);
    box-shadow: none;
}

.faq-list .accordion-button:focus {
    box-shadow: 0 0 0 3px #1467ff26;
}

.faq-list .accordion-body {
    padding: 4px 22px 20px;
    color: var(--t);
    font-size: .9rem;
    line-height: 1.7;
}

.faq-list .accordion-button:not(.collapsed) + .accordion-collapse .accordion-body,
.faq-list .accordion-collapse.show .accordion-body {
    background: #f3f7ff;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

@media (max-width: 767.98px) {
    .plan-includes {
        justify-content: flex-start;
        margin-top: -5px;
    }

    .faq-list .accordion-button {
        padding: 16px 18px;
    }
}

.demo-section {
    background: linear-gradient(180deg, #fff 0%, #f5f8fd 100%);
}

.demo-frame {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px;
    background: #fff;
    border: 1px solid #cfdff4;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(13, 35, 71, .18);
}

.demo-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 608;
    border-radius: 10px;
    background: #f5f8fd;
}

@media (max-width: 767.98px) {
    .demo-frame {
        padding: 7px;
        border-radius: 14px;
    }
}

.price {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.price small {
    font-family: 'DM Sans', sans-serif;
}

.th-brand {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.faq-contact {
    margin: 26px 0 0;
    text-align: center;
    color: var(--t);
    font-size: .92rem;
}

.faq-contact a {
    margin-left: 6px;
    color: #128c4a;
    font-weight: 700;
}

.faq-contact a i {
    margin-right: 4px;
}

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    box-shadow: 0 12px 28px rgba(18, 140, 74, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float i {
    font-size: 1.45rem;
    line-height: 1;
}

.whatsapp-float:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(18, 140, 74, .45);
}

@media (max-width: 767.98px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        padding: 14px;
    }

    .whatsapp-float span {
        display: none;
    }
}

.testimonial-section {
    background: #fff;
}

.testimonial-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 44px 48px 36px;
    border: 1px solid var(--l);
    border-radius: 22px;
    background: linear-gradient(135deg, #f7faff, #fff);
    text-align: center;
}

.testimonial-mark {
    display: block;
    color: var(--y);
    font-size: 3.2rem;
    line-height: 1;
}

.testimonial-card blockquote {
    margin: 10px 0 26px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--n);
}

.testimonial-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    text-align: left;
}

.testimonial-author strong,
.testimonial-author small {
    display: block;
}

.testimonial-author strong {
    color: var(--n);
}

.testimonial-author small {
    color: var(--t);
}

.testimonial-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--b);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
}

.client-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 28px;
    margin-top: 34px;
    color: #8494aa;
}

.client-strip span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.client-strip strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    color: #526a8c;
}

.testimonial-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 30px 28px 26px;
    border-top: 3px solid var(--y);
    border-radius: 4px 4px 18px 18px;
    background: var(--s);
}

.testimonial-quote > i {
    color: var(--y);
    font-size: 2.4rem;
    line-height: 1;
}

.testimonial-quote blockquote {
    flex-grow: 1;
    margin: 8px 0 24px;
    color: var(--n);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.5;
}

.testimonial-draft {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ffe3e3;
    color: #b42323;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.clients-band {
    padding: 38px 0;
    border-top: 1px solid var(--l);
    border-bottom: 1px solid var(--l);
}

.clients-band .client-strip {
    margin-top: 0;
}

.client-strip ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.client-strip li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    border: 1px solid var(--l);
    border-radius: 999px;
    background: var(--s);
    color: var(--n);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .95rem;
    font-weight: 700;
}

.client-strip li b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--n);
    color: var(--y);
    font-size: .7rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .testimonial-card {
        padding: 32px 22px 28px;
    }
}

/* ¿Por qué TresH? */
.why-section {
    background: var(--s);
}

.why-card {
    height: 100%;
    padding: 26px 24px;
    border: 1px solid var(--l);
    border-radius: 17px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.why-card:hover {
    border-color: #bfd4f4;
    box-shadow: 0 16px 34px rgba(20, 103, 255, .12);
    transform: translateY(-5px);
}

.why-card > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0b2148, #1467ff);
    color: var(--y);
    font-size: 1.2rem;
}

.why-card h3 {
    font-size: 1.02rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.why-card p {
    margin: 0;
    color: var(--t);
    font-size: .88rem;
    line-height: 1.65;
}

/* Así se ve por dentro */
.showcase-section {
    background: linear-gradient(180deg, #fff 0%, #f1f6fe 100%);
}

.showcase-row + .showcase-row {
    margin-top: 72px;
}

.showcase-row-reverse {
    flex-direction: row-reverse;
}

.showcase-row h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.2;
    color: var(--n);
    margin-bottom: 12px;
}

.showcase-row > div > p:not(.eyebrow) {
    color: var(--t);
    line-height: 1.7;
    margin-bottom: 18px;
}

.showcase-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.showcase-list li {
    padding: 5px 0;
    color: #3d5475;
    font-size: .92rem;
    font-weight: 600;
}

.showcase-list i {
    margin-right: 8px;
    color: var(--g);
}

.showcase-shot {
    margin: 0;
    padding: 10px;
    border: 1px solid #cfdff4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 26px 60px rgba(13, 35, 71, .16);
    transition: transform .35s ease, box-shadow .35s ease;
}

.showcase-shot:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 70px rgba(13, 35, 71, .2);
}

.showcase-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Planes: cuándo elegir cada uno */
.plan-card > p.plan-when {
    min-height: 0;
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 10px;
    background: #f3f7ff;
    color: #3d5475;
    font-size: .78rem;
    line-height: 1.45;
}

.plan-when i {
    margin-right: 5px;
    color: var(--b);
}

@media (max-width: 991.98px) {
    .showcase-row-reverse {
        flex-direction: row;
    }

    .showcase-row + .showcase-row {
        margin-top: 56px;
    }
}

@media (max-width: 767.98px) {
    .showcase-shot {
        padding: 6px;
        border-radius: 13px;
    }

    .why-card {
        padding: 22px 20px;
    }
}

/* Demo interactiva del POS */
.demo-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: -12px 0 22px;
}

.demo-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #d8e2ef;
    border-radius: 999px;
    background: #fff;
    color: #445774;
    font-size: .88rem;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.demo-tab:hover {
    border-color: var(--b);
    color: var(--b);
}

.demo-tab.active {
    border-color: var(--n);
    background: var(--n);
    color: #fff;
}

.tour-stage {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1280 / 608;
    background: #f5f8fd;
}

.tour-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s ease;
}

.tour-img.active {
    opacity: 1;
}

.tour-zoom {
    position: absolute;
    inset: 0;
    transition: transform-origin .35s ease;
}

.tour-hotspot {
    position: absolute;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: left .35s ease, top .35s ease;
    cursor: pointer;
}

.tour-hotspot span,
.tour-hotspot::before {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.tour-hotspot span {
    inset: 8px;
    background: var(--y);
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(7, 26, 59, .35);
}

.tour-hotspot::before {
    content: "";
    background: rgba(255, 203, 39, .55);
    animation: tour-pulse 1.4s ease-out infinite;
}

.tour-hotspot:focus-visible {
    outline: 3px solid var(--b);
    outline-offset: 3px;
}

.tour-end {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: rgba(7, 26, 59, .86);
    backdrop-filter: blur(4px);
    color: #fff;
}

.tour-end[hidden] {
    display: none;
}

.tour-end > i {
    color: var(--y);
    font-size: 2.6rem;
}

.tour-end h3 {
    margin: 12px 0 8px;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    font-weight: 800;
}

.tour-end p {
    max-width: 460px;
    margin: 0 0 20px;
    color: #c9d7ee;
}

.tour-end-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tour-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 6px 6px;
}

.tour-count {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff4cd;
    color: #855f00;
    font-size: .78rem;
    font-weight: 800;
}

.tour-text {
    flex: 1;
    margin: 0;
    color: var(--i);
    font-size: .95rem;
}

.tour-next {
    flex: 0 0 auto;
    padding: .55rem .95rem;
}

.tour-next:disabled {
    opacity: .45;
}

.tour-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 4px;
}

.tour-dots span {
    width: 22px;
    height: 4px;
    border-radius: 999px;
    background: #dbe5f3;
    transition: background .3s ease;
}

.tour-dots span.active {
    background: var(--b);
}

@keyframes tour-pulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@media (max-width: 767.98px) {
    .demo-tabs {
        margin-top: -4px;
    }

    .tour-zoom {
        transform: scale(2);
    }

    .tour-hotspot {
        width: 22px;
        height: 22px;
    }

    .tour-hotspot span {
        inset: 6px;
        border-width: 2px;
    }

    .tour-bar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tour-text {
        flex-basis: calc(100% - 60px);
        font-size: .88rem;
    }

    .tour-next {
        width: 100%;
    }

    .tour-end h3 {
        font-size: 1.05rem;
    }

    .tour-end p {
        display: none;
    }
}

.tour-loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(245, 248, 253, .9);
    color: #445774;
    font-weight: 700;
}

.tour.is-loading .tour-loader {
    display: flex;
}

.tour-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid #dbe5f3;
    border-top-color: var(--b);
    border-radius: 50%;
    animation: tour-spin .8s linear infinite;
}

@keyframes tour-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Etiqueta "Plan Gratis" sobre el mockup del hero */
.hero-free-badge {
    position: absolute;
    z-index: 3;
    top: -6%;
    left: 30%;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px 11px 11px;
    border: 1px solid #e3ebf7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(20, 40, 80, .14);
    color: var(--n);
    animation: stat-float 5s ease-in-out infinite;
    transition: box-shadow .25s ease;
}

.hero-free-badge:hover {
    color: var(--n);
    box-shadow: 0 20px 40px rgba(20, 40, 80, .2);
}

.hero-free-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff1bd;
    color: #aa7700;
    font-size: 1.2rem;
}

.hero-free-badge small,
.hero-free-badge strong {
    display: block;
    line-height: 1.2;
}

.hero-free-badge small {
    color: #6b7d97;
    font-size: .74rem;
    font-weight: 600;
}

.hero-free-badge strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

@media (min-width: 1200px) {
    .hero-free-badge {
        top: -14%;
        left: 34%;
    }
}

@media (max-width: 767.98px) {
    .hero-free-badge {
        top: -12%;
        left: 50%;
        padding: 8px 14px 8px 8px;
        transform: translateX(-50%);
        animation: none;
    }

    .hero-free-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .hero-free-badge strong {
        font-size: .9rem;
    }
}

/* Fondo del hero: profundidad y transiciones suaves */
.hero-grid:after {
    width: 64%;
    height: 100%;
    top: 0;
    -webkit-mask-image: radial-gradient(ellipse 58% 62% at 58% 52%, #000 28%, transparent 78%);
    mask-image: radial-gradient(ellipse 58% 62% at 58% 52%, #000 28%, transparent 78%);
}

.hero-orb-two {
    width: 560px;
    height: 560px;
    left: -240px;
    bottom: -300px;
    background: radial-gradient(circle, rgba(255, 203, 39, .2), rgba(255, 203, 39, 0) 70%);
}

.dashboard-wrap:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14% -6% -10% -10%;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 103, 255, .2), rgba(20, 103, 255, .07) 55%, rgba(20, 103, 255, 0));
}

@media (max-width: 767.98px) {
    .dashboard-wrap:before {
        inset: -8% -4%;
    }
}


/* Personajes ilustrados de la landing */
.landing-character-host{
  position:relative
}
.landing-character{
  pointer-events:none;
  user-select:none;
  height:auto
}
.character-problem{
  position:absolute;
  top:-30px;
  right:4%;
  width:210px
}
.character-faq{
  position:absolute;
  right:0;
  top:120px;
  width:230px
}
.character-cta{
  flex:0 0 auto;
  width:190px;
  align-self:flex-end;
  margin:-20px 0 -52px auto
}
@media (min-width:768px) and (max-width:991.98px){
  .character-cta{
    width:150px
  }
}


/* Hero animado: escena con mascotas e IA (welcome.blade.php, #heroEscena). */
/* ====== Chip "Nuevo: IA" ====== */

/* Chip "VE" y chip de IA juntos, arriba del texto (antes el "VE" iba fuera de la fila y quedaba un hueco). */
.hero-section .hero-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.hero-section .hero-chips .hero-proof {
    margin-bottom: 0;
}

.hero-section .hero-ia-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border: 1px solid rgba(255, 203, 39, .45);
    border-radius: 999px;
    background: rgba(255, 203, 39, .12);
    color: #ffe28a;
    font-size: .82rem;
    font-weight: 700;
}

.hero-section .hero-ia-chip b {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--y);
    color: var(--n);
    font-size: .7rem;
    letter-spacing: .5px;
}

.hero-section .hero-ia-chip i {
    animation: brillo-ia 2.4s ease-in-out infinite;
}

@keyframes brillo-ia {
    0%,
    100% {
        opacity: .6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.25) rotate(12deg);
    }
}

/* ====== Escena ====== */

.hero-section .escena {
    position: relative;
    margin-top: 30px;
}

.hero-section .hero-texto h1 {
    font-size: clamp(2.6rem, 3.5vw, 3.8rem);
}

@media (min-width: 1200px) {
    .hero-section .escena {
        margin-right: calc((100vw - 1140px) / -2 + 12px);
    }
}

@media (min-width: 1400px) {
    .hero-section .escena {
        margin-right: calc((100vw - 1320px) / -2 + 12px);
    }
}

.hero-section .escena-glow {
    position: absolute;
    inset: 5% 0 0 5%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(70, 140, 255, .45), rgba(70, 140, 255, 0) 65%);
    filter: blur(10px);
    pointer-events: none;
}

.hero-section .escena-equipo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    animation: flotar 6s ease-in-out infinite;
}

@keyframes flotar {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.hero-section .escena .hero-free-badge {
    top: -9%;
    left: 32%;
}

/* Tarjetas sobre la escena */

.hero-section .tarjeta {
    position: absolute;
    z-index: 4;
    padding: 12px 14px;
    border: 1px solid #e3ebf7;
    border-radius: 16px;
    background: #fff;
    color: var(--n);
    box-shadow: 0 18px 40px rgba(6, 26, 69, .28);
    opacity: 0;
    transform: translateY(14px) scale(.96);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .3, 1.3);
    pointer-events: none;
}

.hero-section .tarjeta.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hero-section .tarjeta small {
    display: block;
    color: #6b7d97;
    font-size: .72rem;
    font-weight: 600;
}

/* --- Escena 1: factura leída con IA --- */

.hero-section .factura {
    top: 14%;
    left: 1%;
    width: 215px;
}

.hero-section .factura-papel {
    position: relative;
    overflow: hidden;
    margin-bottom: 9px;
    padding: 10px;
    border: 1px dashed #cfdbec;
    border-radius: 10px;
    background: #fbfcfe;
}

.hero-section .factura-linea {
    height: 6px;
    margin-bottom: 6px;
    border-radius: 3px;
    background: #e4ebf4;
}

.hero-section .factura-linea.corta {
    width: 55%;
}

.hero-section .factura-linea.media {
    width: 78%;
}

.hero-section .scanner {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 30%;
    background: linear-gradient(180deg, rgba(255, 203, 39, 0), rgba(255, 203, 39, .55) 85%, #ffcb27 100%);
    opacity: 0;
}

.hero-section .factura.visible .scanner {
    animation: escanear 1.3s ease-in-out .2s 1 forwards;
}

@keyframes escanear {
    0% {
        top: -30%;
        opacity: 1;
    }

    90% {
        top: 100%;
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.hero-section .chip-ia {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1467ff, #7a5cff);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.hero-section .campo {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: .76rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .3s ease;
}

.hero-section .campo span {
    color: #6b7d97;
}

.hero-section .campo strong {
    font-weight: 700;
}

.hero-section .campo.lleno {
    opacity: 1;
    transform: translateX(0);
}

/* --- Escena 1: caja que entra al inventario --- */

.hero-section .caja-voladora {
    position: absolute;
    z-index: 5;
    left: 8%;
    bottom: 18%;
    width: 34px;
    height: 30px;
    border-radius: 5px;
    background: linear-gradient(90deg, #e3a35a 0 42%, #f2c27e 42% 58%, #e3a35a 58%);
    box-shadow: inset 0 7px 0 #cc8b45, 0 8px 16px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
}

.hero-section .caja-voladora.volando {
    animation: volar-caja 1.1s cubic-bezier(.45, 0, .3, 1) forwards;
}

@keyframes volar-caja {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }

    55% {
        opacity: 1;
        transform: translate(140px, -190px) rotate(200deg) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translate(250px, -120px) rotate(360deg) scale(.3);
    }
}

.hero-section .aviso {
    bottom: 26%;
    left: 34%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.hero-section .aviso-icono {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #dff6ec;
    color: var(--g);
    font-size: 1.1rem;
}

.hero-section .aviso strong {
    display: block;
    font-size: .9rem;
}

/* --- Escena 2: ventas del día --- */

.hero-section .ventas {
    top: 6%;
    right: 4%;
    width: 225px;
}

.hero-section .ventas-total {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.hero-section .ventas-sube {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dff6ec;
    color: #0d8a5a;
    font-size: .72rem;
    font-weight: 700;
}

.hero-section .ventas svg {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 6px;
}

.hero-section .ventas svg path {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
}

.hero-section .ventas.visible svg path {
    transition: stroke-dashoffset 1.6s ease .3s;
    stroke-dashoffset: 0;
}

.hero-section .confeti {
    position: absolute;
    z-index: 6;
    top: 14%;
    right: 16%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.hero-section .confeti i {
    position: absolute;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
}

.hero-section .confeti.estallar i {
    animation: confeti 1.4s ease-out forwards;
}

@keyframes confeti {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0);
    }

    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) rotate(var(--r));
    }
}

/* --- Escena 3: Asistente IA --- */

.hero-section .chat {
    top: 16%;
    right: 4%;
    width: 290px;
    padding: 0;
    overflow: hidden;
}

.hero-section .chat-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #0b2a5b, #1d4f9a);
    color: #fff;
}

.hero-section .chat-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--y);
    color: var(--n);
}

.hero-section .chat-cabecera strong {
    display: block;
    font-size: .85rem;
}

.hero-section .chat-cabecera small {
    color: #b9cbe6;
}

.hero-section .chat-cuerpo {
    min-height: 140px;
    padding: 12px;
    background: #f5f8fd;
}

.hero-section .burbuja {
    max-width: 88%;
    margin-bottom: 8px;
    padding: 8px 11px;
    border-radius: 14px;
    font-size: .8rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}

.hero-section .burbuja.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-section .burbuja.usuario {
    margin-left: auto;
    border-bottom-right-radius: 4px;
    background: var(--b);
    color: #fff;
}

.hero-section .burbuja.ia {
    border-bottom-left-radius: 4px;
    background: #fff;
    color: var(--n);
    box-shadow: 0 4px 12px rgba(20, 40, 80, .08);
}

.hero-section .burbuja.ia b {
    color: #0d8a5a;
}

.hero-section .escribiendo {
    display: none;
    gap: 4px;
    width: 52px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
}

.hero-section .escribiendo.visible {
    display: flex;
}

.hero-section .escribiendo span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9fb0c8;
    animation: punto 1s infinite;
}

.hero-section .escribiendo span:nth-child(2) {
    animation-delay: .15s;
}

.hero-section .escribiendo span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes punto {
    0%,
    100% {
        transform: translateY(0);
        opacity: .5;
    }

    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ====== Mascotas ====== */

.hero-section .mascota {
    position: absolute;
    z-index: 3;
    width: 21%;
    filter: drop-shadow(0 14px 14px rgba(3, 14, 40, .45));
    pointer-events: none;
}

.hero-section .mascota svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hero-section .mascota-leo {
    left: -3%;
    bottom: -20%;
}

.hero-section .mascota-vale {
    right: 0;
    bottom: -20%;
}

.hero-section .mascota-sami {
    left: 40%;
    bottom: -26%;
    width: 19%;
    opacity: 0;
    transform: translateY(70px) scale(.8);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.4);
}

.hero-section .mascota-sami.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hero-section .mascota-sami.visible svg {
    animation: saltar 0.9s ease-in-out .5s 3;
}

.hero-section .respira svg {
    animation: respirar 3.2s ease-in-out infinite;
    transform-origin: 50% 100%;
}

@keyframes respirar {
    0%,
    100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.015, .985);
    }
}

.hero-section .salta svg {
    animation: saltar .9s ease-in-out 2;
    transform-origin: 50% 100%;
}

@keyframes saltar {
    0%,
    100% {
        transform: translateY(0) scale(1, 1);
    }

    15% {
        transform: translateY(0) scale(1.06, .92);
    }

    45% {
        transform: translateY(-26px) scale(.97, 1.04);
    }

    75% {
        transform: translateY(0) scale(1.04, .95);
    }
}

.hero-section .brazo-saluda {
    transform-box: view-box;
    transform-origin: 160px 216px;
}

.hero-section .saluda .brazo-saluda {
    animation: saludar .5s ease-in-out 4 alternate;
}

@keyframes saludar {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(-16deg);
    }
}

.hero-section .ojo {
    transform-box: fill-box;
    transform-origin: center;
    animation: parpadear 4.5s infinite;
}

@keyframes parpadear {
    0%,
    92%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(.1);
    }
}

/* ====== Indicador de escenas ====== */

.hero-section .escena-pasos {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(70px, 6vw, 120px);
}

.hero-section .escena-paso {
    position: relative;
    overflow: hidden;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .7);
    font-size: .78rem;
    font-weight: 600;
}

.hero-section .escena-paso.activo {
    border-color: rgba(255, 203, 39, .6);
    color: #fff;
}

.hero-section .escena-paso .barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--y);
}

.hero-section .escena-paso.activo .barra {
    animation: llenar var(--duracion) linear forwards;
}

@keyframes llenar {
    to {
        width: 100%;
    }
}

/* Sin animaciones si el visitante lo pidió: escena final fija. */
@media (prefers-reduced-motion: reduce) {
    .hero-section .escena *,
    .hero-section .escena *::before,
    .hero-section .escena *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 991.98px) {
    /* En celular solo se repite la escena del Asistente IA (ver el script de welcome), con el chat debajo. */
    .hero-section .mascota-leo,
    .hero-section .mascota-sami,
    .hero-section .factura,
    .hero-section .aviso,
    .hero-section .ventas,
    .hero-section .caja-voladora,
    .hero-section .confeti,
    .hero-section .escena-pasos {
        display: none;
    }

    .hero-section .mascota-vale {
        width: 26%;
        right: -2%;
        bottom: auto;
        top: 18%;
    }

    .hero-section .chat {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 340px;
        margin: 22px auto 0;
    }
}


/* Sección "Inteligencia Artificial" (welcome.blade.php, #ia): Asistente IA y Carga IA con demo. */
.ia-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fd 100%);
}

.ia-section h2 .ia-resalte {
    padding: 0 .18em;
    border-radius: 10px;
    background: var(--y);
    color: var(--n);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.ia-panel {
    display: none;
    margin-top: 28px;
}

.ia-panel.activo {
    display: block;
    animation: ia-aparecer .45s ease;
}

@keyframes ia-aparecer {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Pestaña 1: chat ===== */

.ia-chat {
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(160deg, #071a3b 0%, #0b2a5b 100%);
    box-shadow: 0 30px 60px rgba(7, 26, 59, .25);
    color: #fff;
}

.ia-chat-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ia-chat-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--y);
    color: var(--n);
    font-size: 1.2rem;
}

.ia-chat-cabecera strong {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
}

.ia-chat-cabecera small {
    color: #9fb3d4;
}

.ia-chat-estado {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7fe0b5;
    font-size: .78rem;
    font-weight: 600;
}

.ia-chat-estado i {
    font-size: .55rem;
}

.ia-chat-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 320px;
    padding: 22px;
}

.ia-burbuja {
    max-width: 82%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: .95rem;
    line-height: 1.5;
    animation: ia-aparecer .35s ease;
}

.ia-burbuja.usuario {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--b);
}

.ia-burbuja.respuesta {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: rgba(255, 255, 255, .09);
    color: #e8eef8;
}

.ia-burbuja.respuesta b {
    color: var(--y);
}

.ia-escribiendo {
    align-self: flex-start;
    display: flex;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .09);
}

.ia-escribiendo span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9fb3d4;
    animation: ia-punto 1s infinite;
}

.ia-escribiendo span:nth-child(2) {
    animation-delay: .15s;
}

.ia-escribiendo span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes ia-punto {
    0%,
    100% {
        opacity: .4;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.ia-chat-entrada {
    display: flex;
    gap: 10px;
    margin: 0 22px 22px;
    padding: 8px 8px 8px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #7f93b5;
    font-size: .9rem;
    align-items: center;
}

.ia-chat-entrada span {
    flex: 1;
}

.ia-chat-entrada b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--b);
    color: #fff;
}

.ia-pruebalo {
    margin-bottom: 14px;
    color: var(--t);
    font-size: .9rem;
    font-weight: 600;
}

.ia-pregunta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid #dfe8f3;
    border-radius: 14px;
    background: #fff;
    color: var(--n);
    font-weight: 600;
    text-align: left;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .05);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ia-pregunta:hover {
    border-color: #b9cdf0;
    transform: translateX(4px);
}

.ia-pregunta.activa {
    border-color: var(--b);
    box-shadow: 0 10px 24px rgba(20, 103, 255, .16);
}

.ia-pregunta i {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    height: 36px;
    border-radius: 10px;
    background: #eaf1ff;
    color: var(--b);
    font-size: 1.05rem;
}

.ia-pregunta .bi-arrow-right-short {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    color: #9fb0c8;
}

.ia-mascota {
    display: block;
    width: 150px;
    height: auto;
    margin: 18px auto 0;
}

.ia-mascota.celebra {
    animation: ia-salto .8s ease-in-out 2;
}

@keyframes ia-salto {
    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-18px);
    }
}

/* ===== Pestaña 2: de la foto al inventario ===== */

.ia-pasos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
}

.ia-paso {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9fb0c8;
    font-weight: 700;
    transition: color .3s ease;
}

.ia-paso b {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eef3fb;
    color: #9fb0c8;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background .3s ease, color .3s ease;
}

.ia-paso.activo {
    color: var(--n);
}

.ia-paso.activo b {
    background: var(--b);
    color: #fff;
}

.ia-paso-flecha {
    color: #c9d6ea;
    font-size: 1.4rem;
}

.ia-carga {
    display: grid;
    grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr);
    align-items: center;
    gap: 22px;
}

.ia-foto {
    position: relative;
    overflow: hidden;
    padding: 26px 24px;
    border-radius: 6px;
    background: #fffdf6;
    box-shadow: 0 24px 48px rgba(20, 40, 80, .16);
    transform: rotate(-2.5deg);
    font-family: 'Courier New', monospace;
    font-size: .82rem;
    color: #3a3a3a;
}

.ia-foto h6 {
    margin: 0 0 4px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-align: center;
}

.ia-foto .centro {
    margin-bottom: 12px;
    text-align: center;
    font-size: .74rem;
}

.ia-foto .linea {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #cfc8b0;
    padding: 4px 0;
}

.ia-foto .total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-weight: 700;
}

.ia-escaner {
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 25%;
    background: linear-gradient(180deg, rgba(255, 203, 39, 0), rgba(255, 203, 39, .45) 85%, #ffcb27);
    opacity: 0;
}

.ia-foto.escaneando .ia-escaner {
    animation: ia-escanear 1.6s ease-in-out forwards;
}

@keyframes ia-escanear {
    0% {
        top: -25%;
        opacity: 1;
    }

    90% {
        top: 100%;
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.ia-flecha-ia {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1467ff, #7a5cff);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 12px 26px rgba(20, 103, 255, .35);
}

.ia-flecha-ia.pulso {
    animation: ia-pulso 1s ease-in-out infinite;
}

@keyframes ia-pulso {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

.ia-entrada {
    padding: 20px;
    border: 1px solid #dfe8f3;
    border-left: 4px solid var(--y);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 48px rgba(20, 40, 80, .1);
}

.ia-entrada-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ia-entrada-cabecera strong {
    color: var(--n);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.ia-chip-lectura {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1467ff, #7a5cff);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.ia-entrada-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 12px;
    font-size: .85rem;
}

.ia-entrada-datos span {
    display: block;
    color: var(--t);
    font-size: .72rem;
}

.ia-entrada table {
    width: 100%;
    font-size: .85rem;
}

.ia-entrada th {
    padding: 6px 4px;
    border-bottom: 1px solid #e4ebf4;
    color: var(--t);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ia-entrada td {
    padding: 7px 4px;
    border-bottom: 1px solid #f0f4fa;
    color: var(--n);
}

.ia-entrada .num {
    text-align: right;
}

.ia-lleno {
    opacity: 0;
    transition: opacity .35s ease, background .6s ease;
}

.ia-lleno.visible {
    opacity: 1;
}

.ia-lleno.recien {
    background: #fff6d6;
}

.ia-entrada-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.ia-lista {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0d8a5a;
    font-size: .85rem;
    font-weight: 700;
}

.ia-aprobar {
    padding: 9px 16px;
    border: 0;
    border-radius: 10px;
    background: #e4ebf4;
    color: #8a9bb3;
    font-weight: 700;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

.ia-aprobar.listo {
    background: var(--b);
    color: #fff;
    box-shadow: 0 10px 22px rgba(20, 103, 255, .3);
}

/* ===== Confianza y costo ===== */

.ia-sellos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.ia-sello {
    display: flex;
    gap: 14px;
    padding: 18px;
    border: 1px solid #e4ebf4;
    border-radius: 16px;
    background: #fff;
}

.ia-sello i {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.3rem;
}

.ia-sello:nth-child(1) i {
    background: #eaf1ff;
    color: var(--b);
}

.ia-sello:nth-child(2) i {
    background: #dff6ec;
    color: #0d8a5a;
}

.ia-sello:nth-child(3) i {
    background: #fff1bd;
    color: #aa7700;
}

.ia-sello strong {
    display: block;
    color: var(--n);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.ia-sello p {
    margin: 2px 0 0;
    color: var(--t);
    font-size: .88rem;
}

.ia-costo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #eef4ff;
    color: #31476b;
    font-size: .9rem;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .ia-section *,
    .ia-section *::before,
    .ia-section *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 991.98px) {
    .ia-carga {
        grid-template-columns: 1fr;
    }

    .ia-flecha-ia {
        margin: 0 auto;
        transform: rotate(90deg);
    }

    .ia-sellos {
        grid-template-columns: 1fr;
    }

    .ia-mascota {
        display: none;
    }

    .ia-paso span {
        display: none;
    }
}