.elementor-2561 .elementor-element.elementor-element-0ef74ee{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2561 .elementor-element.elementor-element-f63e420{width:100%;max-width:100%;text-align:start;}.elementor-2561 .elementor-element.elementor-element-f63e420 > .elementor-widget-container{margin:-10px 0px 0px -10px;}.elementor-2561 .elementor-element.elementor-element-f63e420.elementor-element{--align-self:center;}.elementor-2561 .elementor-element.elementor-element-f63e420 img{width:100vw;max-width:100vw;}.elementor-2561 .elementor-element.elementor-element-63c5425{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2561 .elementor-element.elementor-element-63c5425.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-2561 .elementor-element.elementor-element-39df9c5{width:100%;max-width:100%;}.elementor-2561 .elementor-element.elementor-element-39df9c5.elementor-element{--align-self:stretch;}@media(min-width:768px){.elementor-2561 .elementor-element.elementor-element-63c5425{--content-width:100vw;}}/* Start custom CSS for html, class: .elementor-element-39df9c5 */#promo-banner-wrapper{
  --banner-height: 800px;      /* EDITA AQUÍ: alto del banner */
  --slide-duration: 0.5s;      /* EDITA AQUÍ: velocidad de la animación */
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
}

#promo-banner{
  display: flex;
  height: var(--banner-height);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

.promo-panel{
  position: relative;
  flex: 1;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-right: 3px solid #D4AF37;   /* EDITA AQUÍ: color del borde dorado */
  transition: flex-grow var(--slide-duration) cubic-bezier(.4,0,.2,1);
  background-repeat: no-repeat;   
}

.promo-panel:last-child{
  border-right: none;
}

.promo-panel.active{
  flex-grow: 5;
}

/* capa oscura: suave cuando está cerrada (deja ver bien la imagen), más marcada al abrir (para que el texto se lea) */
.promo-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.780), rgba(0,0,0,55));
  transition: background var(--slide-duration) ease;
}

.promo-panel.active::before{
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.15));
}

/* --- pestaña vertical (estado cerrado) --- */
.promo-tab{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.promo-panel.active .promo-tab{
  opacity: 0;
  pointer-events: none;
}

.promo-tab-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* --- contenido expandido (estado abierto) --- */
.promo-content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  /* al CERRAR: desaparece rápido y sin espera, para no encimarse con el texto entrante */
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.promo-panel.active .promo-content{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* al ABRIR: espera a que termine el deslizamiento antes de aparecer */
  transition: opacity 0.35s ease var(--slide-duration),
              transform 0.35s ease var(--slide-duration);
}

.promo-content h3{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.promo-content p{
  margin: 0 0 10px;
  font-size: 14px;
  max-width: 480px;
  line-height: 1.4;
}

.promo-code{
  display: inline-block;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(2px);
}

/* --- responsive: en móvil se apilan verticalmente --- */
@media (max-width: 640px){
  #promo-banner{
    flex-direction: column;
    height: auto;
  }
  .promo-panel{
    flex: none;
    height: 120px;
    transition: height var(--slide-duration) cubic-bezier(.4,0,.2,1);
  }
  .promo-panel.active{
    height: 500px;
  }
  .promo-tab-text{
    writing-mode: horizontal-tb;
    transform: none;
  }
}/* End custom CSS */