/* Sección Bienvenidos — negra, wordmark real en blanco casi a todo el ancho, y carrusel de cócteles debajo */

.welcome {
  background: #000;
  border-top: none; /* continúa el negro de la foto de equipo, con el corte curvo ya resuelto ahí */
  padding-top: var(--space-5); /* el hero ya mide lo que ocupa su contenido (ver hero.css), no hace falta forzar el separador al borde */
  padding-bottom: 0; /* la foto de piernas.png debe tocar el borde inferior de la sección, ver .about-figure */
}

@media (min-width: 900px) {
  .welcome {
    padding-top: var(--space-8); /* en escritorio hay más aire disponible bajo el hero, vuelve al espaciado original */
  }
}
.welcome-inner { display: flex; justify-content: center; }

/* El bloque Nosotros (.about-inner, ver about.css) vive dentro de esta misma sección —
   solo hace falta separarlo del carrusel, el fondo negro y la ausencia de borde ya son compartidos */
.welcome .about-inner {
  margin-top: var(--space-9);
}

/* Separador entre el hero y Bienvenidos: sin la foto de equipo de antes, hacía falta una
   marca visual de que empieza otra sección, aunque el negro sea continuo de una a otra. */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: min(70%, 20rem);
  margin: 0 auto var(--space-8);
}
.section-divider span {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.section-divider i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--color-text-muted);
  transform: rotate(45deg);
  font-style: normal; /* es un <i> solo por brevedad semántica (aria-hidden), no cursiva */
}

.welcome-logo {
  width: min(94%, 62rem);
  height: auto;
  margin-inline: auto; /* display:block por el reset global — sin esto no se centra, ver context.md §17 */
}

/* La rejilla 3D de cócteles vive en assets/css/sections/carousel-3d.css */