.promo-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-ivory);
  box-shadow: var(--shadow-card);
}

.promo-slot picture,
.promo-slot img {
  width: 100%;
}

.promo-slot img {
  height: auto;
  object-fit: contain;
}

.promo-track {
  display: grid;
}

.promo-slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

.promo-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.promo-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.promo-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: rgba(21, 21, 21, 0.32);
}

.promo-dot.active {
  background: var(--color-ink);
}

.banner-section {
  padding: 22px 0;
}

/* Seccion de banner sin banners habilitados: colapsa por completo.
   Estas secciones (hero-slot, banner-section) contienen unicamente el slot, asi que
   sin el su padding vertical dejaba una franja vacia, visible sobre todo en movil
   bajo el encabezado. Se conserva el elemento en el DOM porque #inicio es el ancla
   del enlace Inicio del menu. */
.promo-section-empty {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  min-height: 0;
}

/* ============================================================================
   TEXTO SOBRE EL BANNER

   Antes el banner era solo una imagen: si tenia que decir algo, ese algo iba
   incrustado dentro del archivo. Eso obliga a rehacer las tres versiones
   (escritorio, tablet y movil) por cada palabra que cambie, no se puede
   traducir, no lo lee un buscador y no lo lee un lector de pantalla. Ahora el
   texto es texto de verdad y se edita en el panel.

   El velo oscuro no es decorativo: sin el, un titular blanco sobre una foto
   clara de flores queda por debajo del contraste minimo legible. Va como
   degradado desde el lado del texto para no tapar la foto entera.
   ============================================================================ */

.promo-slide { position: relative; }

.promo-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: clamp(16px, 4vw, 56px);
  pointer-events: none;   /* el velo no debe robar los clics del slider */
}

.promo-copy-inner {
  max-width: 34ch;
  pointer-events: auto;
}

.promo-copy--izquierda { justify-content: flex-start; text-align: left; }
.promo-copy--centro    { justify-content: center;     text-align: center; }
.promo-copy--derecha   { justify-content: flex-end;   text-align: right; }

.promo-copy--izquierda { background: linear-gradient(to right, rgba(20, 16, 13, 0.72) 0%, rgba(20, 16, 13, 0.42) 42%, rgba(20, 16, 13, 0) 72%); }
.promo-copy--derecha   { background: linear-gradient(to left,  rgba(20, 16, 13, 0.72) 0%, rgba(20, 16, 13, 0.42) 42%, rgba(20, 16, 13, 0) 72%); }
.promo-copy--centro    { background: linear-gradient(to top,   rgba(20, 16, 13, 0.74) 0%, rgba(20, 16, 13, 0.38) 60%, rgba(20, 16, 13, 0.12) 100%); }

.promo-copy-titulo {
  margin: 0 0 8px;
  font-family: "Cormorant Infant", "Playfair Display", Georgia, serif;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
}

.promo-copy-bajada {
  margin: 0 0 14px;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}

.promo-copy-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;        /* area tactil comoda */
  padding: 11px 22px;
  border-radius: 999px;
  background: #fff;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background-color 200ms ease, transform 200ms ease;
}

.promo-copy-cta:hover { background: #F7EFE6; transform: translateY(-2px); }
.promo-copy-cta:focus-visible { outline: 3px solid #C9A227; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .promo-copy-cta { transition: none; }
  .promo-copy-cta:hover { transform: none; }
}

/* En movil el texto se apoya abajo: al centro taparia la foto completa. */
@media (max-width: 600px) {
  .promo-copy { align-items: flex-end; }
  .promo-copy-inner { max-width: none; }
  .promo-copy--izquierda,
  .promo-copy--derecha,
  .promo-copy--centro {
    background: linear-gradient(to top, rgba(20, 16, 13, 0.8) 0%, rgba(20, 16, 13, 0.34) 58%, rgba(20, 16, 13, 0) 100%);
  }
}