/* =========================
   Base / Layout
========================= */
.container { max-width: 95%; }

.icon-link > .bi { width: .75em; height: .75em; }

/* =========================
   Decor
========================= */
:root{
  --decor-color: #005eac;
  --decor-opacity: .22;
  --accent:#005eac;
  --ink:#e5e7eb;
  --muted:#9fb0c3;
  --bg:#0b1220;
}

.decor{
  position:absolute;
  width:340px;
  height:auto;
  color: var(--decor-color);
  opacity: var(--decor-opacity);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.decor-left{ left:-48px; top:8px; }
.decor-right{ right:-48px; bottom:-16px; }

@media (max-width: 991.98px){
  .decor{ display:none; }
}

/* =========================
   Header translucent (si lo usas)
========================= */
.site-header{
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a{
  color:#8e8e8e;
  transition: color .15s ease-in-out;
}
.site-header a:hover{
  color:#fff;
  text-decoration:none;
}

/* =========================
   Tipografías H1 / Displays
========================= */
h1, .h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6{
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
}

/* =========================
   Reveal wipe
========================= */
.reveal-wipe{
  display:inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.2,.9,.2,1);
  will-change: clip-path;
}
.reveal-wipe.is-visible{ clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
  .reveal-wipe{ clip-path: inset(0 0 0 0); transition:none; }
}

/* =========================
   Fade / Pop
========================= */
.fx-fade{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.fx-fade.in{ opacity:1; transform:none; }

.fx-pop{
  opacity:0 !important;
  transform: translateY(28px) scale(.96);
  filter: blur(6px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.2,.8,.2,1),
    filter .85s ease;
  will-change: opacity, transform, filter;
}
.fx-pop.in{
  opacity:1 !important;
  transform:none;
  filter: blur(0);
}

/* Delays (se quedan una sola vez, no duplicados) */
.fx-d0{ transition-delay: .10s; }
.fx-d1{ transition-delay: .30s; }
.fx-d2{ transition-delay: .50s; }

@media (prefers-reduced-motion: reduce){
  .fx-fade, .fx-pop{ opacity:1 !important; transform:none; filter:none; transition:none; }
}

/* =========================
   Hero copy animation
========================= */
@keyframes fadeup{
  from{ opacity:0; transform:translateY(12px); filter:blur(6px) }
  to  { opacity:1; transform:translateY(0);   filter:blur(0) }
}

.hero-copy > *{
  opacity:0;
  animation: fadeup 1.5s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy > *:nth-child(1){ animation-delay:.10s; }
.hero-copy > *:nth-child(2){ animation-delay:.28s; }
.hero-copy > *:nth-child(3){ animation-delay:.46s; }

.hero-copy .icon-link .bi{
  transition: transform .25s ease;
  display:inline-block;
}
.hero-copy .icon-link:hover .bi{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .hero-copy > *{ animation:none; opacity:1; filter:none; }
  .hero-copy .icon-link .bi{ transition:none; }
}

/* =========================
   Product device (decoración azul)
========================= */
@keyframes device-in{
  from{ opacity:0; transform: rotate(30deg) translateY(16px) scale(.98); }
  to  { opacity:1; transform: rotate(30deg) translateY(0)  scale(1); }
}

@keyframes fade-in-pop{
  from{ opacity:0; transform: translate(-50%,-50%) rotate(-30deg) scale(.92); }
  to  { opacity:1; transform: translate(-50%,-50%) rotate(-30deg) scale(1); }
}

.product-device{
  position:absolute;
  right:10%;
  bottom:-30%;
  width:300px;
  height:540px;
  background:#005eac;
  border-radius:21px;
  transform: rotate(30deg);
  overflow:hidden;

  --circle: 180px;
  --logo-scale: 60%;
  --pos-x: 48%;
  --pos-y: 48%;

  opacity:0;
  animation: device-in 1.55s ease-out .05s both;
  will-change: opacity, transform;
  transition: transform .45s ease;
}

.product-device::after{
  content:"";
  position:absolute;
  width:var(--circle);
  height:var(--circle);
  left:var(--pos-x);
  top:var(--pos-y);
  background:#fff;
  border-radius:50%;
  transform: translate(-50%,-50%) rotate(-30deg);
  z-index:1;
  pointer-events:none;
  animation: fade-in-pop 1.0s ease-out .25s both;
}

.product-device::before{
  content:"";
  position:absolute;
  width:var(--circle);
  height:var(--circle);
  left:var(--pos-x);
  top:var(--pos-y);
  background: center / var(--logo-scale) auto no-repeat url("../img/logo.png");
  transform: translate(-50%,-50%) rotate(-30deg);
  z-index:2;
  pointer-events:none;
  animation: fade-in-pop 1.1s ease-out .35s both;
}

.product-device:hover{
  transform: rotate(30deg) translateY(-4px) scale(1.01);
}

.product-device-2{
  top:-25%;
  right:auto;
  bottom:0;
  left:5%;
}

@media (prefers-reduced-motion: reduce){
  .product-device{ animation:none; opacity:1; }
}

/* =========================
   Flex equal helpers
========================= */
.flex-equal > *{ flex:1; }
@media (min-width: 768px){
  .flex-md-equal > *{ flex:1; }
}

/* =========================
   Offcanvas nav indicator
========================= */
.offcanvas-body .navbar-nav{
  position: relative;
  align-items: center;
  gap: .25rem;
  padding-bottom: 6px;
}

.offcanvas-body .nav-indicator{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:0;
  background:#005eac;
  border-radius:999px;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    width .35s cubic-bezier(.22,1,.36,1);
  will-change: transform, width;
}

.offcanvas-body .nav-link{
  position:relative;
  padding:.5rem .75rem;
  transition: color .25s ease, transform .2s ease;
}
.offcanvas-body .nav-link:hover{ transform: translateY(-1px); }

@media (max-width: 991.98px){
  .offcanvas-body .nav-indicator{ display:none; }
  .offcanvas-body .nav-link{
    border-radius:.6rem;
    background: linear-gradient(90deg, rgba(0,94,172,0),
                                     rgba(0,94,172,.12) 60%,
                                     rgba(0,94,172,0));
    background-size:0% 100%;
    transition: background-size .30s cubic-bezier(.22,1,.36,1), transform .2s ease;
  }
  .offcanvas-body .nav-link:hover,
  .offcanvas-body .nav-link:focus{
    background-size:100% 100%;
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce){
  .offcanvas-body .nav-indicator,
  .offcanvas-body .nav-link{ transition:none; }
}

/* =========================
   Album accordion row (desktop)
========================= */
@media (min-width: 992px){
  .accordion-row{
    --acc-gap: 1rem;
    --acc-min: 110px;
    --acc-max: 640px;
    --acc-dur: .6s;

    display:flex;
    gap: var(--acc-gap);
  }

  .accordion-row > .col{
    flex: 1 1 var(--acc-min) !important;
    min-width: var(--acc-min);
    transition:
      flex var(--acc-dur) cubic-bezier(.2,.8,.2,1),
      filter var(--acc-dur),
      transform var(--acc-dur);
    will-change: flex, filter, transform;
  }

  .accordion-row > .col:first-child{
    flex-basis: var(--acc-max) !important;
  }

  .accordion-row:hover > .col{
    flex-basis: var(--acc-min) !important;
    filter: grayscale(.15) brightness(.94);
  }
  .accordion-row:hover > .col:hover{
    flex-basis: var(--acc-max) !important;
    filter:none;
    transform: translateY(-2px);
  }

  .accordion-row .card-img-top{
    display:block;
    width:100%;
    height:260px;
    object-fit:cover;
    transition: transform var(--acc-dur) cubic-bezier(.2,.8,.2,1);
  }
  .accordion-row > .col:hover .card-img-top{
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce){
  .accordion-row > .col,
  .accordion-row .card-img-top{ transition:none !important; }
}

/* =========================
   fx-rise
========================= */
.fx-rise{
  opacity:0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.8,.2,1),
    filter .75s ease;
  will-change: opacity, transform, filter;
}
.fx-rise.in{
  opacity:1;
  transform:none;
  filter: blur(0);
}

.fx-delay-0{ transition-delay: .00s; }
.fx-delay-1{ transition-delay: .12s; }
.fx-delay-2{ transition-delay: .24s; }
.fx-delay-3{ transition-delay: .36s; }
.fx-delay-4{ transition-delay: .48s; }
.fx-delay-5{ transition-delay: .60s; }

@media (prefers-reduced-motion: reduce){
  .fx-rise{ opacity:1; transform:none; filter:none; transition:none; }
}

/* =========================
   PV section thumbs
========================= */
#pv{
  padding-right: clamp(40px, 6vw, 96px);
  padding-left:  clamp(40px, 6vw, 96px);
}

/* base */
#pv .pv-thumb{
  position:absolute;
  z-index:3;
  pointer-events:none;
  border-radius:10px;
  background:#fff;
  outline:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 26px 60px rgba(0,0,0,.45),
    0 10px 28px rgba(0,94,172,.28);
}

/* Desktop positions */
#pv .pv-thumb--right{
  right: clamp(32px, 5vw, 72px);
  top: 52%;
  transform: translateY(-50%) rotate(-8deg);
  width: clamp(180px, 15vw, 300px);
}
#pv .pv-thumb--left{
  left: clamp(32px, 5vw, 72px);
  top: 60%;
  transform: translateY(-50%) rotate(8deg);
  width: clamp(160px, 14vw, 260px);
}

/* Tablet adjustments */
@media (max-width: 991.98px){
  #pv .pv-thumb--right{ width: clamp(150px, 40vw, 240px); top:60%; }
  #pv .pv-thumb--left { width: clamp(120px, 36vw, 200px); top:66%; }
}

/* Mobile: HIDE thumbs always */
@media (max-width: 767.98px){
  #pv .pv-thumb{ display:none !important; }
}

/* =========================
   Footer
========================= */
.footer-neo.simple{
  color:var(--ink);
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(0,94,172,.15), transparent 60%),
    radial-gradient(700px 300px at 88% 0%, rgba(216,210,201,.16), transparent 60%),
    var(--bg);
  padding:48px 0 22px;
}

.footer-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:20px;
}

.footer-neo .contact-top{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:.25rem;
  margin-bottom:.5rem;
}

.brand-logo img{
  display:block;
  max-width:220px;
  height:auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

.tagline{ margin:0; color:var(--muted); }

.social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.ico{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.07);
  color:#e2e8f0;
  text-decoration:none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.ico:hover{
  background: rgba(0,94,172,.22);
  color:#fff;
  transform: translateY(-2px);
}
.ico i{ font-size:22px; line-height:1; }

.copy{ color:#cbd5e1; margin-top:4px; font-size:.95rem; }

@media (prefers-color-scheme: light){
  .footer-neo.simple{ --bg:#ffffff; --ink:#0b1220; }
  .copy{ color:#64748b; }
}