.home-hero h1 {
    font-size: clamp(1.8rem, 2.5vw + 1rem, 2.4rem);
    color: #000;
    text-shadow: 
     2px 2px 4px rgba(255, 255, 255),   /* sombra fuerte abajo */
    -1px -1px 2px rgba(255, 255, 255);  /* contorno fino */
}

.home-hero h2 {
  color: #000;
  text-shadow: 
     2px 2px 4px rgba(255, 255, 255),   /* sombra fuerte abajo */
    -1px -1px 2px rgba(255, 255, 255);  /* contorno fino */
}

.home-hero p {
    font-size: clamp(1rem, 1.2vw + .8rem, 1.25rem);
    color: #fff !important;

}

.social-card {
    transition: transform .15s ease, box-shadow .15s ease;
    border-radius: 14px;
}
.social-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
}

.btn-xl {
    padding: .8rem 1.5rem;
    font-size: 1.1rem;
}

/* ---------- Carrusel vertical centrado (soporta vertical y horizontal) ---------- */
.portrait-carousel{
  width: min(92vw, 440px);     /* centrado y responsive */
  margin-inline: auto;
}

.portrait-carousel .carousel-viewport{
  position: relative;
  aspect-ratio: 4 / 5;         /* marco vertical tipo Instagram */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.12);
  background: #D8A9D5;
}

/* Inner ocupa todo el alto del viewport */
.portrait-carousel .carousel-inner,
.portrait-carousel .carousel-item{
  height: 100%;
}

/* Fondo difuminado con la MISMA imagen del slide.
   Usamos una CSS var (--bg) que pondremos en el HTML. */
.portrait-carousel .carousel-item{
  position: relative;
  isolation: isolate; /* para que el blur no se “escape” */
}
.portrait-carousel .carousel-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;   /* llena el marco */
  filter: blur(22px);
  transform: scale(1.08);   /* extiende un poco el fondo */
  z-index: 0;
  opacity: .7;              /* leve transparencia para que no distraiga */
}

/* Imagen principal: SIEMPRE visible completa sin recorte */
.portrait-carousel .carousel-item img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* clave: no recorta, muestra todo */
  display: block;
  background: transparent;   /* sin marco sólido */
}

/* Controles dentro del cuadro */
.portrait-carousel .carousel-control-prev,
.portrait-carousel .carousel-control-next{
  width: 18%;
}
.portrait-carousel .carousel-control-prev-icon,
.portrait-carousel .carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}