/* --- HEADER SMART LOGIC --- */
.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(250, 249, 246, 0.95);
  /* Color Alocassia Light con opacidad */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease-in-out;
  /* Animación de subida/bajada */
}

/* Esta clase se añade por JS al bajar */
.header-hidden {
  transform: translateY(-100%);
}

.main-header .nav-link {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--alocassia-green) !important;
}

.main-header .dropdown-menu {
  background-color: var(--alocassia-light);
  border-radius: 12px;
}

.main-header .dropdown-item:hover {
  background-color: rgba(197, 160, 89, 0.1);
  color: var(--alocassia-gold);
}

/* --- FOOTER STYLES --- */
.main-footer {
  background-color: #f0f2f0;
  /* Un tono crema-verde muy suave */
  color: var(--alocassia-text);
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  text-decoration: none;
  color: var(--alocassia-gray);
  font-size: 0.9rem;
  transition: all 0.3s;
}

.footer-links a:hover {
  color: var(--alocassia-gold);
  padding-left: 5px;
}

:root {
  --alocassia-green: #2c402e;
  --alocassia-gold: #c5a059;
  --alocassia-light: #faf9f6;
  --alocassia-text: #333333;
  --alocassia-gray: #8e9b90;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--alocassia-light);
  color: var(--alocassia-text);
}

h1,
h2,
h3,
h4,
h5,
.serif-font {
  font-family: "Playfair Display", serif;
}

/* --- HERO --- */
.hero {
  background-color: var(--alocassia-green);
  color: var(--alocassia-light);
  padding: 100px 0;
  text-align: center;
  border-bottom: 5px solid var(--alocassia-gold);
}

.hero h1 {
  font-size: 3.5rem;
  letter-spacing: 2px;
}

/* --- SWIPER DISPONIBILIDAD --- */
.agenda-section {
  padding: 60px 0;
}

.day-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
}

.day-card:hover {
  transform: translateY(-5px);
  border-color: var(--alocassia-gold);
}

.day-card.disponible .status {
  color: #2e8b57;
  font-weight: 600;
}

.day-card.no-disponible .status {
  color: #cd5c5c;
  font-weight: 600;
}

.day-card h4 {
  color: var(--alocassia-green);
}

/* --- SCROLLYTELLING: PRECIOS POR LARGO --- */
.contenedor-malla-largo {
  position: relative;
  background-color: var(--alocassia-green);
  padding: 80px 0 150px 0;
  overflow: hidden;
  min-height: 1200px;
  /* Espacio para el scroll */
}

.path-malla {
  fill: none;
  stroke: var(--alocassia-gold);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.tijeras-tracker {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--alocassia-gold);
  z-index: 10;
  transform-origin: center;
  will-change: transform;
}

.punto-malla {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 5;
  width: 280px;
}

.punto-malla.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.tarjeta-precio {
  background: rgba(250, 249, 246, 0.95);
  border-left: 4px solid var(--alocassia-gold);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tarjeta-precio h4 {
  color: var(--alocassia-green);
  margin-bottom: 5px;
}

.tarjeta-precio .precio {
  font-size: 1.5rem;
  color: var(--alocassia-gold);
  font-weight: 600;
}

/* --- NOVEDADES --- */
.news-section {
  padding: 80px 0;
  background-color: #fff;
}

.news-card {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.news-card:hover {
  border-bottom: 2px solid var(--alocassia-gold);
}

.news-date {
  font-size: 0.8rem;
  color: var(--alocassia-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-gold {
  background-color: var(--alocassia-gold);
  color: #fff;
  border: none;
  padding: 10px 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.btn-gold:hover {
  background-color: #b08d2e;
  color: #fff;
}

/* --- REVELACIÓN DE FOTO Y PRECIO --- */
.reveal-section {
  height: 200vh;
  /* Espacio de scroll para la animación */
  background-color: var(--alocassia-light);
  position: relative;
}

.reveal-container {
  height: 100%;
  width: 100%;
}

.reveal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.reveal-image-wrapper {
  position: relative;
  width: 300px;
  /* Tamaño inicial */
  height: 400px;
  border-radius: 150px 150px 0 0;
  /* Forma orgánica tipo arco */
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease-out;
}

.reveal-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%);
  transition: filter 0.5s;
}

.price-bubble {
  position: absolute;
  bottom: 40px;
  right: -20px;
  background: var(--alocassia-gold);
  color: white;
  padding: 15px 25px;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.price-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.price-value {
  font-size: 1.4rem;
  font-weight: 700;
}

.reveal-text {
  margin-top: 40px;
  text-align: center;
  max-width: 500px;
}

/* Estado activo cuando el scroll llega a cierto punto */
.reveal-active .price-bubble {
  opacity: 1;
  transform: translateY(0) translateX(-20px);
}

.reveal-active .reveal-photo {
  filter: grayscale(0%);
}

/* --- SECCIÓN ESCÁNER DE PELO --- */
.hair-scanner-section {
  height: 350vh;
  /* Obliga a scrollear bastante para ver la animación completa */
  background-color: var(--alocassia-light);
  position: relative;
}

.scanner-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Envoltura para la foto */
.hair-image-wrapper {
  position: relative;
  width: 50vw;
  height: 80vh;
  border-radius: 15px;

  background-color: #e0e0e0;
}

.hair-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  /* Asegura que la cabeza quede arriba */
}

/* Envoltura para el filamento (Opción 2) */
.hair-strand-wrapper {
  position: relative;
  width: 200px;
  height: 60vh;
}

.hair-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
}

/* Textos guía laterales */
.guide-mark {
  position: absolute;
  left: 10px;
  width: 100%;
  border-top: 1px dashed rgba(255, 255, 255, 0.4);
  /* O rgba(0,0,0,0.2) en el filamento */
  z-index: 1;
}

.guide-mark span {
  background: rgba(44, 64, 46, 0.8);
  /* Alocassia Green con opacidad */
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  position: absolute;
  top: -10px;
  left: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#scanner-filamento .guide-mark {
  border-top: 1px dashed rgba(44, 64, 46, 0.2);
}

#scanner-filamento .guide-mark span {
  background: var(--alocassia-light);
  color: var(--alocassia-green);
  border: 1px solid var(--alocassia-green);
}

/* BARRA MEDIDORA Y PRECIO */
.measuring-bar {
  position: absolute;
  top: 10%;
  /* Posición inicial */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--alocassia-gold);
  box-shadow: 0 0 10px var(--alocassia-gold);
  z-index: 10;
  will-change: top;
}

/* Triangulito indicador */
.measuring-bar::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid var(--alocassia-gold);
}

.price-tag {
  position: absolute;
  right: -10px;
  top: -25px;
  /* Centrado respecto a la línea */
  background: var(--alocassia-gold);
  color: #fff;
  padding: 8px 15px;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateX(100%);
  /* Lo saca hacia la derecha */
  transition: all 0.3s ease;
}

.tag-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.tag-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-family: "Playfair Display", serif;
}

/* --- SECCIÓN CAPAS DINÁMICAS --- */
.dynamic-layers-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e8ede9;
  /* Un verde súper clarito/grisáceo para dar contraste */
  overflow: hidden;
  padding: 60px 20px;
}

/* Contenedor de las imágenes de fondo */
.moving-elements-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Se queda atrás */
  pointer-events: none;
  /* Evita que las imágenes interfieran si el usuario intenta hacer clic en el texto */
}

/* Animación y posición del Cabello (Izquierda) */
.floating-hair {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 250px;
  opacity: 0.6;
  /* Un poco transparente para no saturar */
  animation: floatHair 8s ease-in-out infinite;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

/* Animación y posición del Secador (Derecha) */
.floating-dryer {
  position: absolute;
  bottom: 15%;
  right: 15%;
  width: 180px;
  opacity: 0.8;
  animation: floatDryer 6s ease-in-out infinite;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.15));
}

/* Tarjeta Frontal (Efecto Glassmorphism) */
.glass-card {
  position: relative;
  z-index: 10;
  /* Se queda al frente */
  background: rgba(250, 249, 246, 0.75);
  /* Color crema de Alocassia con 75% de opacidad */
  backdrop-filter: blur(12px);
  /* El truco mágico: desenfoca lo que pasa por detrás */
  -webkit-backdrop-filter: blur(12px);
  /* Soporte para Safari */
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* Borde sutil brillante */
  border-radius: 20px;
  padding: 50px 40px;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 25px 40px rgba(0, 0, 0, 0.08);
  /* Sombra elegante */
  margin: 20px;
}

/* --- KEYFRAMES (Las animaciones de movimiento) --- */

/* El pelo sube, baja y rota levemente */
@keyframes floatHair {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-30px) rotate(5deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* El secador simula el movimiento de la muñeca del estilista */
@keyframes floatDryer {
  0% {
    transform: translate(0px, 0px) rotate(-10deg);
  }

  50% {
    transform: translate(-40px, -20px) rotate(5deg);
  }

  100% {
    transform: translate(0px, 0px) rotate(-10deg);
  }
}

/* Responsive: Ajustar tamaños en celulares */
@media (max-width: 768px) {
  .floating-hair {
    width: 180px;
    left: -10%;
    top: 10%;
  }

  .floating-dryer {
    width: 120px;
    right: -5%;
    bottom: 5%;
  }

  .glass-card {
    padding: 40px 25px;
  }
}

/* --- STEPPER ALISADO --- */
.alisado-stepper-section {
  background-color: #fff;
}

.stepper-container {
  /* Contenedor relativo para posicionar la línea */
}

.stepper-line-bg {
  position: absolute;
  top: 15px;
  bottom: 40px;
  left: 14px;
  width: 2px;
  background-color: rgba(197, 160, 89, 0.2);
  /* Línea base semitransparente */
  z-index: 1;
}

.stepper-progress {
  position: absolute;
  top: 15px;
  left: 14px;
  width: 2px;
  height: 0%;
  /* Esta altura crecerá con JS */
  background-color: var(--alocassia-gold);
  z-index: 2;
  transition: height 0.1s ease-out;
}

.step-item {
  position: relative;
  padding-left: 45px;
  margin-bottom: 35px;
  opacity: 0.3;
  /* Desactivado por defecto */
  transform: translateX(15px);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 3;
}

.step-item:last-child {
  margin-bottom: 0;
}

.step-item.active {
  opacity: 1;
  transform: translateX(0);
}

.step-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 2px solid rgba(197, 160, 89, 0.4);
  color: rgba(197, 160, 89, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.5s ease;
}

/* Estado activo del punto */
.step-item.active .step-dot {
  background-color: var(--alocassia-gold);
  color: #fff;
  border-color: var(--alocassia-gold);
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.5);
  transform: scale(1.1);
}

/* --- TARJETA DE RESULTADO Y ANIMACIÓN --- */
.alisado-result-card {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.alisado-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  filter: brightness(0.85);
  /* Un poco apagada al principio */
  transition: filter 1s ease;
}

/* Al encenderse, la foto cobra vida */
.alisado-img.glow {
  filter: brightness(1.1) contrast(1.1);
}

/* El destello de luz (espejo) */
.shine-sweep {
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  /* Inclinado para verse dinámico */
  pointer-events: none;
}

.shine-sweep.animate {
  animation: sweep 1.5s ease-out forwards;
}

@keyframes sweep {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

/*ABOUT*/
.about-image-container {
  position: relative;
  padding: 20px;
}

.about-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 80%;
  border: 2px solid var(--alocassia-gold);
  z-index: 1;
}

.about-img {
  position: relative;
  z-index: 2;
  border-radius: 4px;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1);
}

.google-business-card {
  background: #fff;
  border-radius: 12px;
  font-family: Arial, sans-serif;
  /* Para imitar el estilo de Google */
}

.x-small {
  font-size: 0.7rem;
  color: #1a73e8;
  font-weight: 600;
}

.stars-gold i {
  font-size: 0.85rem;
}

/* --- SECCIÓN NOVIAS (EFECTO VELO) --- */
.bridal-section {
  height: 250vh;
  /* Permite hacer un scroll largo y pausado para la animación */
  background-color: #000;
  position: relative;
}

.bridal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bride-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transform: scale(1.15);
  /* Inicia con un leve zoom para luego alejarse */
  will-change: transform;
  filter: brightness(0.8);
  /* Oscurece un poco para que el texto blanco resalte */
}

/* El Velo: Capa perla con desenfoque */
.bridal-veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  /* Un poco más alto para que el barrido sea fluido */
  background: rgba(250, 249, 246, 0.85);
  /* Color crema de Alocassia */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
  will-change: transform, opacity;
}

/* Contenedor del texto centrado */
.bridal-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 700px;
  padding: 0 20px;
  opacity: 0;
  /* Oculto al inicio */
  transform: translateY(40px);
  /* Ligeramente abajo para que suba al aparecer */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.bridal-content.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- SCROLL HORIZONTAL MANICURE --- */
.manicure-scroll-section {
  height: 300vh;
  /* Espacio para hacer scroll vertical mientras se mueve horizontalmente */
  background-color: var(--alocassia-light);
  position: relative;
}

.manicure-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* Oculta lo que sale por la derecha */
  display: flex;
  flex-direction: column;
}

.manicure-track {
  display: flex;
  gap: 40px;
  padding: 40px 10vw;
  width: max-content;
  /* El ancho se adapta a la cantidad de tarjetas */
  transform: translateX(0);
  will-change: transform;
  /* Optimización de rendimiento */
}

.manicure-card {
  width: 300px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  flex-shrink: 0;
  /* Evita que las tarjetas se aplasten */
  border-bottom: 4px solid var(--alocassia-gold);
}

.manicure-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.manicure-card-body {
  padding: 20px;
}

/* --- CANVAS SCROLL --- */
.canvas-scroll-section {
  height: 400vh;
  /* La cantidad de scroll determina la velocidad de la "reproducción" */
  background-color: #000;
  position: relative;
}

.canvas-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hacemos que el canvas se comporte como object-fit: cover */
#hero-lightpass {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.6;
  /* Oscurecido para que resalte la tarjeta */
  z-index: 1;
  object-fit: cover;
}

.video-overlay-card {
  position: relative;
  z-index: 10;
  max-width: 500px;
  height: auto;
}

/* Contenedor central absoluto */
.cards-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  /* Permite que el scroll funcione sin que la caja interfiera */
}

/* Estado base de las tarjetas (Ocultas) */
.canvas-card {
  position: absolute;
  max-width: 500px;
  width: 90%;
  /* Para que en móviles no se desborde */
  opacity: 0;
  transform: translateY(30px);
  /* Empieza un poco más abajo */
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: auto;
  /* Reactiva los clics dentro de la tarjeta */
}

/* Estado activo de las tarjetas (Visibles) */
.canvas-card.active {
  opacity: 1;
  transform: translateY(0);
  /* Sube a su posición original */
}

/* --- ACORDEÓN PREGUNTAS FRECUENTES --- */
.alocassia-accordion .accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.alocassia-accordion .accordion-item:last-child {
  border-bottom: none;
}

.alocassia-accordion .accordion-button {
  background-color: transparent;
  color: var(--alocassia-green);
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 20px 10px;
  box-shadow: none;
  /* Quita el borde azul molesto al hacer clic */
  transition: color 0.3s;
}

.alocassia-accordion .accordion-button:not(.collapsed) {
  color: var(--alocassia-gold);
  background-color: transparent;
  box-shadow: none;
}

/* Cambiar el color de la flechita del acordeón */
.alocassia-accordion .accordion-button::after {
  filter: grayscale(100%) opacity(50%);
  transition: all 0.3s;
}

.alocassia-accordion .accordion-button:not(.collapsed)::after {
  filter: invert(72%) sepia(48%) saturate(452%) hue-rotate(352deg)
    brightness(91%) contrast(90%);
  /* Truco CSS para volver la flecha color oro */
}

.alocassia-accordion .accordion-body {
  padding: 0 10px 25px 10px;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- SLIDER ANTES Y DESPUÉS --- */
.ba-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 60vh;
  /* Se adapta a la altura de la pantalla */
  min-height: 400px;
  max-height: 600px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #e0e0e0;
}

.ba-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Evita que las imágenes interfieran con el input */
}

.ba-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* La imagen del 'Después' inicia recortada exactamente a la mitad (50%) */
.ba-after {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  z-index: 2;
}

/* El input nativo (invisible pero arrastrable) */
.ba-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Lo hacemos invisible */
  cursor: ew-resize;
  z-index: 10;
  /* Debe estar por encima de todo */
  margin: 0;
  /* Resetea márgenes de navegadores */
}

/* La línea visual separadora */
.ba-slider-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  /* No intercepta el clic del usuario */
  z-index: 5;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* El botón central con las flechitas */
.ba-slider-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  background: var(--alocassia-gold);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  font-size: 1.1rem;
}

/* Etiquetas flotantes "Antes" y "Después" */
.ba-label {
  position: absolute;
  top: 20px;
  padding: 6px 15px;
  background: rgba(44, 64, 46, 0.85);
  /* Verde Alocassia */
  color: #fff;
  border-radius: 30px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.label-before {
  right: 20px;
}

/* El antes asoma a la derecha */
.label-after {
  left: 20px;
}

/* El después asoma a la izquierda */

/* Ajustes para móviles */
@media (max-width: 768px) {
  .ba-container {
    height: 50vh;
  }

  .ba-slider-button {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .ba-label {
    font-size: 0.7rem;
    padding: 4px 12px;
  }
}

/* --- SECCIÓN PARALLAX BOTÁNICO --- */
.botanical-parallax-section {
  background-color: #e8ede9;
  /* Un tono gris-verde súper sutil */
  overflow: hidden;
  /* Crucial para que las hojas desenfocadas no agranden el ancho de la página */
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.parallax-leaves-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Las hojas son "fantasmas", el usuario puede hacer clic a través de ellas */
  z-index: 1;
}

/* El contenedor que será animado por JavaScript */
.parallax-wrapper {
  position: absolute;
  will-change: transform;
  /* Optimización GPU nativa */
}

/* --- ESTILOS INDIVIDUALES DE LAS HOJAS --- */

/* Wrapper 1: Arriba a la Izquierda */
.leaf-wrapper-1 {
  top: -10%;
  left: -10%;
}

.leaf-1 {
  width: 400px;
  opacity: 0.25;
  /* Translúcido para ser elegante */
  transform: rotate(35deg);
  /* Inclinación de la hoja */
  filter: blur(12px) drop-shadow(10px 20px 15px rgba(0, 0, 0, 0.2));
  /* El efecto de estar "muy cerca del lente" */
}

/* Wrapper 2: Abajo a la Derecha */
.leaf-wrapper-2 {
  bottom: -15%;
  right: -5%;
}

.leaf-2 {
  width: 300px;
  opacity: 0.15;
  transform: rotate(-45deg);
  filter: blur(5px) drop-shadow(-10px 15px 10px rgba(0, 0, 0, 0.1));
  /* Menos borrosa, parece estar en segundo plano */
}

/* Sombra Botánica: Una mancha asimétrica que parece proyectada por luz */
.shadow-wrapper {
  top: 20%;
  right: 20%;
}

.parallax-shadow {
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(44, 64, 46, 0.05) 0%,
    rgba(250, 249, 246, 0) 60%
  );
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  /* Forma amorfa orgánica */
  transform: rotate(15deg);
}

/* Responsivo para celulares */
@media (max-width: 768px) {
  .leaf-1 {
    width: 250px;
  }

  .leaf-2 {
    width: 180px;
    right: -15%;
  }

  .parallax-shadow {
    width: 300px;
    height: 300px;
  }
}