/* ═══════════════════════════════════════════════════════════════
   A79 CAROUSEL SHELL — estilos del documento padre (home)
   Extracto de banners_style.css: solo el shell del carrusel + los
   tokens que consume. NO incluye el reset global de body/.banner
   para no interferir con los estilos del sitio (app.css).
   El contenido de cada slide vive en su iframe y carga su propio
   banners_style.css completo.
═══════════════════════════════════════════════════════════════ */

:root {
  --oro:   #C18A05;   /* brandbook gold (CTAs / acentos) */
  --onyx:  #11110D;   /* base background                 */
  --perla: #F8F7F4;   /* primary light text              */
  --fade:  700ms;     /* cross-fade entre slides         */
  --slide: 6000ms;    /* duración por slide              */
}

/* =========================================================
   CAROUSEL SHELL
   ========================================================= */
.carousel{
  position:relative;
  width:100%;
  height:clamp(440px, 42vw, 620px); /* fallback inicial; JS ajusta al alto real del slide activo */
  overflow:hidden;
  background:#000;
  border-radius:0;
  transition:height var(--fade) ease;
}

/* =========================================================
   SLIDES
   ========================================================= */
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  transition:opacity var(--fade) ease;
  pointer-events:none;
}
.slide.active{
  opacity:1;
  z-index:2;
  pointer-events:auto;
}
.slide.exiting{
  opacity:0;
  z-index:3;
  pointer-events:none;
}
.slide iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}

/* Slide loading placeholder */
.slide-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:var(--onyx);
  z-index:5;
  transition:opacity 0.3s ease;
}
.slide-placeholder.hidden{opacity:0;pointer-events:none;}
.placeholder-logo{
  font-family:'Playfair Display',serif;
  font-size:28px;
  letter-spacing:0.25em;
  color:var(--oro);
  opacity:0.6;
}
.placeholder-dots{
  display:flex;gap:8px;
}
.placeholder-dots span{
  width:6px;height:6px;border-radius:50%;
  background:var(--perla);opacity:0.3;
  animation:pdot 1.2s ease-in-out infinite;
}
.placeholder-dots span:nth-child(2){animation-delay:.15s;}
.placeholder-dots span:nth-child(3){animation-delay:.3s;}
@keyframes pdot{0%,80%,100%{opacity:0.2;transform:scale(0.8);}40%{opacity:0.8;transform:scale(1.2);}}

/* =========================================================
   OVERLAY CONTROLS (arrows)
   ========================================================= */
.carousel .arrow{
  position:absolute;
  top:50%;transform:translateY(-50%);
  z-index:10;
  width:44px;height:44px;
  background:rgba(17,17,13,0.55);
  border:1px solid rgba(248,247,244,0.15);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
  color:var(--perla);
  backdrop-filter:blur(6px);
}
.carousel .arrow:hover{
  background:rgba(193,138,5,0.35);
  border-color:var(--oro);
  transform:translateY(-50%) scale(1.08);
}
.carousel .arrow-prev{left:16px;}
.carousel .arrow-next{right:16px;}
.carousel .arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* =========================================================
   PROGRESS BAR (top of carousel)
   ========================================================= */
.progress-track{
  position:absolute;top:0;left:0;right:0;
  height:3px;z-index:12;
  background:rgba(248,247,244,0.12);
}
.progress-fill{
  height:100%;
  background:var(--oro);
  width:0%;
  transition:none;
}

/* =========================================================
   CONTROL BAR (bottom strip on carousel)
   ========================================================= */
.control-bar{
  position:relative;
  z-index:10;
  height:52px;
  background:rgba(17,17,13,0.72);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(248,247,244,0.08);
  display:flex;align-items:center;
  padding:0 20px;
  gap:16px;
}
.cb-counter{
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  color:rgba(248,247,244,0.45);
  min-width:38px;
  white-space:nowrap;
}
.cb-dots{
  display:flex;align-items:center;gap:8px;
  flex:0 0 auto;
}
.cb-dot{
  position:relative;
  width:28px;height:4px;
  border-radius:2px;
  background:rgba(248,247,244,0.18);
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s;
}
.cb-dot:hover{transform:scaleY(1.5);}
.cb-dot .dot-fill{
  position:absolute;inset:0;
  background:var(--oro);
  width:0%;
  border-radius:2px;
}
.cb-dot.active .dot-fill{width:0%;}  /* JS controls the width */
.cb-title{
  font-family:'Playfair Display',serif;
  font-size:13px;
  font-style:italic;
  color:rgba(248,247,244,0.65);
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.04em;
}
.cb-play{
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid rgba(248,247,244,0.2);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,border-color .2s;
  color:var(--perla);
  flex-shrink:0;
}
.cb-play:hover{background:rgba(193,138,5,0.25);border-color:var(--oro);}
.cb-play svg{width:14px;height:14px;fill:currentColor;}

/* =========================================================
   WRAPPER LAYOUT
   ========================================================= */
.carousel-wrapper{
  width:100%;
}

/* =========================================================
   CAROUSEL — MOBILE
   ========================================================= */
@media (max-width: 768px){
  .carousel{ height:600px; }
}
@media (max-width: 640px){
  .control-bar{ padding:0 14px; gap:10px; }
  .cb-title{ display:none; }              /* slide shows its own title */
  .cb-dot{ width:16px; }
  .cb-dots{ gap:6px; flex:1; justify-content:center; }
}
@media (max-width: 480px){
  .carousel{ height:580px; }
  .carousel .arrow{ width:38px; height:38px; }
  .carousel .arrow-prev{ left:10px; }
  .carousel .arrow-next{ right:10px; }
}