body {
    font-family: 'Caviar Dreams', sans-serif;
    background-color: #EFE7E4;
    color: #000;
  }
  
  .brand-color {
    color: #8B5617;
  }
  
  /* Botón tradicional (beige) */
  .btn-brand {
    background-color: #BE906F;
    color: #fff;
    border: none;
    font-weight: normal;
    padding: 0.75rem 2rem;
    border-radius: 12px;
    font-size: 1.2rem;
    font-family: 'Caviar Dreams', sans-serif;
    transition: all 0.3s ease;
  }
  
  .btn-brand:hover {
    background-color: #8B5617;
  }
  
  /* Botón especial blanco (hero) */
  .btn-hero {
    background-color: #fff;
    color: #8B5617;
    border: none;
    font-weight: normal;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-size: 1.2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    font-family: 'Caviar Dreams', sans-serif;
    transition: all 0.3s ease;
  }
  
  .btn-hero:hover {
    background-color: #f2f2f2;
    color: #8B5617;
  }
  
  .hero {
    background: #FFFFFF;
    padding: 4rem 2rem;
    text-align: center;
  }
  
  .hero img {
    max-width: 250px;
  }
  
  .section {
    padding-top: 4rem;
    padding-bottom: 2rem;
    background-color: #EFE7E4;
  }
  
  .section.bg {
    background-color: #BE906F;
    color: #fff;
  }
  
  .mockup {
    max-width: 300px;
    margin: 2rem auto;
    display: block;
  }
  
  .testimonial {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
  }
  
  .testimonial img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
  }
  
  /* Botón flotante WhatsApp */
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: white;
    font-size: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
    text-decoration: none;
  }
  
  .whatsapp-float:hover {
    background-color: #128c7e;
  }
  
  /* Hero con mockup */
  .hero-mockup {
    background: linear-gradient(145deg, #EFE7E4, #dbc8bd);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .hero-mockup:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  }
  
  .hero-mockup img {
    border-radius: 1.2rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    margin: 2rem auto;
    display: block;
  }
  
  /* Comentarios estilo tarjeta */
  .comment-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 500px; /* aumenta el tamaño */
    margin: 0 auto; /* centra */
  }
  
  .comment-card img {
    display: block;
    width: 100%; /* mantén si usas contenedor */
    height: auto;
  }
  
  .comment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
  

  
  /* Foto autora */
  .author-photo {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border-radius: 1.2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: block;
  }
/* Secciones suaves */
.bg-dos {
  background-color: #EFE7E4; /* arena claro */
}
.bg-tres {
  background-color: #EFE7E4; /* nude pastel */
}
.bg-cuatro {
  background-color: #fdfdfd; /* blanco ligeramente cálido */
}


.section {
  padding-top: 4rem;
  padding-bottom: 2rem;
  background-color: #EFE7E4;
}

.section {
  padding-top: 4rem;
  padding-bottom: 2rem; /* ← aquí estaba probablemente 4rem o más */
}

.section h2 {
  margin-top: 0; /* ← previene que el título de la nueva sección se aleje */
}

h2 {
  font-family: 'Caviar Dreams', sans-serif;
  font-weight: 700;
}
.card-wrapper {
  background-color: #fff !important;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.image-fade {
  position: relative;
  display: inline-block;
  border-radius: 1.2rem;
  overflow: hidden;
}

.image-fade::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: radial-gradient(ellipse at center, rgba(221, 144, 10, 0) 50%, #E8D9CF 90%);
  pointer-events: none;
  z-index: 2;
}

.image-fade img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  border-radius: 1.2rem;
}




/* CSS adicional para el control de la imagen */
.image-container-fixed-height {
  height: 80%; /* El contenedor tomará el alto de la columna */
  width: 80%;
  overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
}

.image-object-fit {
  width: 80%;
  height: 80%;
  object-fit: cover; /* Esto es clave: la imagen cubrirá el área, recortando si es necesario */
  object-position: center; /* O ajusta a 'left', 'right', 'top', 'bottom' para enfocar */
}

.card-brand-light {
  background-color: #E8D9CF;
  color: #000;
}

.bg-soft-red {
  background-color: #fcebea;
  border: 1px solid #f5c2c7;
  border-radius: 12px;
}

.accordion-button:not(.collapsed) {
  background-color: #E8D9CF; /* color sutil de la marca */
  color: #000;
  font-weight: bold;
}

.accordion-button:focus {
  box-shadow: none;
}


.card-achievement {
  min-height: 100%;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.card-achievement:hover {
  transform: translateY(-4px);
}

.card-beige {
  background-color: #E8D9CF;
}

.card-white {
  background-color: #fff;
}