/* /public/assets/css/ads.css */
/* NC Ads Carousel — independent module */

:root{
  --ads-radius: 22px;
  --ads-line: rgba(11,18,32,.10);
  --ads-shadow: 0 22px 70px rgba(11,18,32,.12);
  --ads-shadow2: 0 12px 35px rgba(11,18,32,.10);
  --ads-glass: rgba(255,255,255,.82);
  --ads-dot: rgba(11,18,32,.35);
  --ads-dot-active: rgba(11,18,32,.82);
  --ads-dot-ring: rgba(43,196,227,.32);
}

/* Slot wrapper (you can place it anywhere) */
.nc-adsSlot{
  width: 100%;
}

/* Carousel shell */
.nc-ads{
  position: relative;
  width: 100%;
  border-radius: var(--ads-radius);
  border: 1px solid var(--ads-line);
  background: var(--ads-glass);
  box-shadow: var(--ads-shadow);
  overflow: hidden;
  isolation: isolate;
}

/* Landscape feel */
.nc-ads[data-aspect="landscape"]{
  aspect-ratio: 16 / 6;
}
@media (max-width: 680px){
  .nc-ads[data-aspect="landscape"]{
    aspect-ratio: 16 / 8;
  }
}

.nc-ads__track{
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

.nc-ads__slide{
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.nc-ads__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: translate3d(0,0,0);
  user-select: none;
  -webkit-user-drag: none;
}

/* Soft premium overlay */
.nc-ads::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(43,196,227,.10), transparent 60%),
    radial-gradient(900px 300px at 80% 0%, rgba(255,214,107,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  mix-blend-mode: multiply;
  opacity:.9;
}

/* Dots */
.nc-ads__dots{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display:flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: var(--ads-shadow2);
  z-index: 3;
}

.nc-ads__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ads-dot);
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  outline: none;
}

.nc-ads__dot.is-active{
  background: var(--ads-dot-active);
}

.nc-ads__dot.is-active::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border: 2px solid var(--ads-dot-ring);
}

/* Optional: small top label */
.nc-ads__badge{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: var(--ads-shadow2);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(11,18,32,.72);
}

/* Dragging feel */
.nc-ads.is-holding .nc-ads__track{
  transition: none;
  cursor: grabbing;
}

/* estilos para el carrusel de anuncios */
/* Add this at the END of /public/assets/css/ads.css */
/* More dynamic placeholder (premium motion) */

.nc-ads__placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  cursor:pointer;
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(900px 320px at 20% 0%, rgba(43,196,227,.14), transparent 60%),
    radial-gradient(900px 320px at 80% 0%, rgba(255,214,107,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
}

/* Moving “light ribbons” */
.nc-ads__placeholder::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 65%),
    radial-gradient(600px 260px at 30% 30%, rgba(43,196,227,.18), transparent 60%),
    radial-gradient(520px 240px at 70% 60%, rgba(255,214,107,.18), transparent 62%);
  transform: translateX(-45%) rotate(8deg);
  opacity:.7;
  mix-blend-mode: overlay;
  animation: ncAdsPhShine 5.2s cubic-bezier(.16,1,.3,1) infinite;
  pointer-events:none;
}
@keyframes ncAdsPhShine{
  0%{ transform: translateX(-55%) rotate(8deg); opacity:.0; }
  12%{ opacity:.7; }
  40%{ transform: translateX(60%) rotate(8deg); opacity:.0; }
  100%{ transform: translateX(60%) rotate(8deg); opacity:0; }
}

/* Floating “bubbles” (subtle) */
.nc-ads__placeholder::after{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(18px 18px at 18% 72%, rgba(43,196,227,.40), transparent 60%),
    radial-gradient(22px 22px at 82% 30%, rgba(255,214,107,.42), transparent 60%),
    radial-gradient(14px 14px at 72% 78%, rgba(29,143,151,.34), transparent 62%),
    radial-gradient(10px 10px at 30% 24%, rgba(43,196,227,.28), transparent 62%);
  opacity:.55;
  filter: blur(.2px);
  animation: ncAdsPhFloat 6.4s cubic-bezier(.16,1,.3,1) infinite;
  pointer-events:none;
}
@keyframes ncAdsPhFloat{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-10px,0); }
  100%{ transform: translate3d(0,0,0); }
}

/* Inner placeholder card */
.nc-ads__phInner{
  width:100%;
  height:100%;
  border-radius: 18px;
  border: 2px dashed rgba(11,18,32,.26);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap: 10px;
  padding: 16px;
  background: rgba(255,255,255,.62);
  position:relative;
  z-index:2;

  box-shadow: 0 18px 50px rgba(11,18,32,.10);
  transform: translate3d(0,0,0);
  transition: transform .25s cubic-bezier(.2,.9,.2,1), border-color .25s cubic-bezier(.2,.9,.2,1), background .25s cubic-bezier(.2,.9,.2,1);
}

/* Corner “moving” accent strokes */
.nc-ads__phInner::before,
.nc-ads__phInner::after{
  content:"";
  position:absolute;
  width: 110px;
  height: 110px;
  border-radius: 26px;
  background:
    radial-gradient(80px 60px at 30% 30%, rgba(43,196,227,.22), transparent 70%),
    radial-gradient(80px 60px at 70% 70%, rgba(255,214,107,.20), transparent 72%);
  opacity:.7;
  filter: blur(1px);
  pointer-events:none;
  animation: ncAdsPhCorners 4.8s cubic-bezier(.16,1,.3,1) infinite;
}
.nc-ads__phInner::before{ left:-30px; top:-30px; }
.nc-ads__phInner::after{ right:-30px; bottom:-30px; animation-delay: -2.4s; }
@keyframes ncAdsPhCorners{
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(10px,8px,0) rotate(14deg); }
  100%{ transform: translate3d(0,0,0) rotate(0deg); }
}

/* Text */
.nc-ads__phKicker{
  font-weight: 1000;
  letter-spacing: -.3px;
  font-size: clamp(1.1rem, 3.2vw, 1.7rem);
  color: rgba(11,18,32,.86);
  text-shadow: 0 10px 26px rgba(11,18,32,.08);
}

/* Animated underline */
.nc-ads__phKicker span{ position:relative; }
.nc-ads__phKicker::after{
  content:"";
  width:min(420px, 72%);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,214,107,.55), rgba(43,196,227,.20));
  display:block;
  margin: 8px auto 0;
  filter: blur(.1px);
  opacity:.9;
  animation: ncAdsPhUnderline 2.9s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes ncAdsPhUnderline{
  0%{ transform: scaleX(.55); opacity:.55; }
  50%{ transform: scaleX(1); opacity:.95; }
  100%{ transform: scaleX(.55); opacity:.55; }
}

.nc-ads__phSub{
  font-weight: 900;
  color: rgba(11,18,32,.62);
  font-size: .96rem;
  line-height: 1.25;
}

/* Hover/press interactions (desktop) */
@media (hover:hover){
  .nc-ads__placeholder:hover .nc-ads__phInner{
    transform: translate3d(0,-3px,0);
    border-color: rgba(43,196,227,.38);
    background: rgba(255,255,255,.72);
  }
  .nc-ads__placeholder:hover{
    filter: saturate(1.04);
  }
  .nc-ads__placeholder:active .nc-ads__phInner{
    transform: translate3d(0,-1px,0) scale(.995);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nc-ads__placeholder::before,
  .nc-ads__placeholder::after,
  .nc-ads__phInner::before,
  .nc-ads__phInner::after,
  .nc-ads__phKicker::after{
    animation:none !important;
  }
  .nc-ads__phInner{
    transition:none !important;
  }
}