/* ==========================
   PALETA Y VARIABLES
========================== */
:root {
  --color-primario: #D8A798;
  --color-secundario: #F4DDCA;
  --color-oscuro: rgb(116 114 115);
  --color-claro: /*#fefcf7;*/#ffede840;
  --color-texto: #9a8a89;
  --color-blanco: #ffffff;
  --fuente-principal: 'Inter', sans-serif;
}

/* ==========================
   RESETEO BÁSICO
========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--fuente-principal);
  background-color: var(--color-claro);
  color: var(--color-texto);
  line-height: 1.6;
  padding-top: 180px; /* espacio para navbar fija */
}

a {
  color: #a64d79;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================
   HEADER MODERNO
========================== */
.top-header {
  background-color: var(--color-oscuro);
  font-size: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eaeaea;
}

.top-header .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.contacto-header a,
.social-header a {
  color: white;
  margin-right: 1rem;
  text-decoration: none;
}

.contacto-header a:hover,
.social-header a:hover {
  text-decoration: underline;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  background-color: var(--color-blanco);
}

.logo {
  height: 100px;
}

.main-header nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.main-header nav a {
  color: var(--color-texto);
  font-weight: 600;
  transition: color 0.3s;
}

.main-header nav a:hover {
  color: var(--color-primario);
}

/* ==========================
   HERO
========================== */
.hero {
  /*background-image: url('../images/hero_bg1.png');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  
  min-height: 70vh;
  max-height: 100vh;

  display: flex;
  align-items: center;
  text-align: left;
  color: #6b3e6b;
  overflow: hidden;
}

/* Para pantallas chicas (móviles) */
@media (max-width: 768px) {
  .hero {
    background-image: url('../images/hero_bg_prof.png');
  }
}

.hero-prof{
  background-image: url('../images/hero_bg_prof.png');
}

.hero .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-text {
  max-width: 600px;
}

.hero-titulo {
  font-size: 3.2rem;
  font-weight: 500;
  font-family: 'Avenir Next', 'Futura', 'Montserrat', sans-serif;
  margin-bottom: 0.5rem;
}


.hero-descripcion {
  font-size: 1.1rem;
  color: #7e6c6b;
  margin-bottom: 2rem;
}

@media (max-width: 576px) {
  .hero {
    padding: 10rem 1.5rem;
    min-height: 60vh;
  }

  .hero-titulo {
    font-size: 2rem;
  }

  .hero-descripcion {
    font-size: 1rem;
  }
}

.hero-descripcion {
  font-size: 1.1rem;
  color: #7e6c6b;
  margin-bottom: 2rem;
}

.btn {
  background-color: #a64d79;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}


/* ==========================
   SECCIONES GENERALES
========================== */
.section {
  padding: 4rem 0;
}

.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #6b3e6b;
  font-weight: 600;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.15),    /* sombra discreta */
    0 0 8px rgba(227, 202, 227, 0.4); /* halo suave en tono pastel */
}

/* ==========================
   QUIÉNES SOMOS / SERVICIOS
========================== */
#servicios ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
}

#servicios li {
  background-color: var(--color-secundario);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  font-weight: 500;
}

/* ==========================
   PROFESIONALES
========================== */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: center;*/
  gap: 1rem;
}

.team-member {
  background-color: white;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1rem;
  max-width: 380px;
  text-align: center;
}

.team-member img {
  width: 160px;              /* ancho fijo */
  height: 200px;             /* alto fijo para óvalo vertical */
  object-fit: cover;         /* recorta y encaja proporcionalmente */
  border-radius: 50% / 40%;  /* forma ovalada */
  display: block;
  margin: 0 auto 1rem auto;  /* centrado */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* ==========================
   FORMULARIOS (GENERAL)
========================== */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

form input,
form select,
form textarea {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
}

form button {
  background-color: #a64d79;
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

form button:hover {
  background-color: #8e3c65;
}

/* ==========================
   CONTACTO ESTILO MODERNO
========================== */
.contacto-creare {
  background-color: var(--color-claro);
  padding: 4rem 0;
  color: var(--color-texto);
}

.contacto-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: flex-start;
  justify-content: space-between;
}

.info-contacto {
  flex: 1;
  min-width: 300px;
}

.info-contacto h4 {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--color-primario);
  margin-bottom: 0.5rem;
}

.info-contacto h2 {
  font-size: 2rem;
  color: #6b3e6b;
  margin-bottom: 1rem;
}

.info-contacto p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--color-texto);
}

.contacto-datos {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contacto-datos div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: #444;
}

.contacto-datos div i {
  font-size: 1.2rem;
  color: var(--color-primario);
}

.acciones-contacto {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-secundario {
  background-color: var(--color-secundario);
  color: var(--color-texto);
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.btn-secundario:hover {
  background-color: #efd0bc;
}

.formulario-contacto {
  flex: 1;
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  min-width: 300px;
}

.formulario-contacto h3 {
  font-size: 1.5rem;
  color: var(--color-texto);
  margin-bottom: 0.5rem;
}

.formulario-contacto p {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.formulario-contacto .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.formulario-contacto input,
.formulario-contacto textarea {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.formulario-contacto button {
  background-color: var(--color-primario);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.formulario-contacto button:hover {
  background-color: #c68675;
}

/* ==========================
   MAPA
========================== */
.mapa-contacto iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 8px;
}

.mapa-contacto h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.mapa-contacto p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

/* ==========================
   FOOTER
========================== */
footer {
  background-color: var(--color-oscuro);
  color: white;
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 768px) {
  .main-header nav ul {
    flex-direction: column;
    align-items: center;
  }

  .team-grid {
    flex-direction: column;
    align-items: center;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .contacto-grid {
    flex-direction: column;
  }

  .formulario-contacto .form-row {
    flex-direction: column;
  }

  .top-header .container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ==========================
   BOTONES FLOTANTES
========================== */
.botones-flotantes {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  z-index: 1000;
}

.botones-flotantes a,
.botones-flotantes button {
  background-color: var(--color-oscuro);
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.botones-flotantes a:hover,
.botones-flotantes button:hover {
  background-color: #c68675;
}

/* Elimina botón de turnos flotante si ya no se usa */
.boton-turno {
  display: none;
}


.team-member .social-icons {
  margin-top: 1rem;
  padding-bottom: 2rem;
}

.team-member .social-icons a {
  margin: 0 0.5rem;
  color: #444;
  font-size: 1.2rem;
}

.team-member .social-icons a:hover {
  color: var(--color-primario);
}

.card:hover {
  transform: translateY(-4px);
  transition: 0.3s ease-in-out;
}

/* ========== TRATAMIENTOS ESTÉTICA CREARE ========== */
.bg-light-custom {
  background-color: var(--color-claro);
}

.descripcion-tratamientos {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  color: var(--color-texto);
  font-size: 1.1rem;
}

.grid-tratamientos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.card-tratamiento {
  background-color: white;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-tratamiento:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.card-tratamiento h3 {
  font-size: 1.2rem;
  color: #6b3e6b;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.card-tratamiento p {
  font-size: 1rem;
  color: #555;
}

.icono-tratamiento {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}
strong {
  color: #6b3e6b;
  font-weight: 600;
}
.quienes-somos{
   background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), 
              url('../images/fondo.png');
  background-repeat: no-repeat;
  background-size: cover;   /* que ocupe toda la sección */
  background-position: center;
}

.profesionales{
   background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), 
              url('../images/fondo.png');
  background-repeat: no-repeat;
  background-size: cover;   /* que ocupe toda la sección */
  background-position: center;
}

.quienes-somos .quienes-texto {
  max-width: 750px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
}

.quienes-somos p em {
  display: block;
  margin-top: 2rem;
  font-style: italic;
  color: #6b3e6b;
  font-weight: 500;
}



.hero-img-logo img {
  margin-top: -15rem;
  margin-bottom: -15rem;
  width: 100%;       /* que ocupe todo el ancho del contenedor */
  max-width: 25rem;;  /* límite máximo para que no sea gigante */
  height: auto;      /* para mantener la proporción */
  object-fit: cover;  /* recorta si es necesario para llenar el área */
  
}



.navbar-nav .nav-link {
  /*font-weight: 500;*/
  color: var(--color-texto);
}

.navbar-nav .nav-link:hover {
  color: var(--color-primario);
}

.btn-ver-mas {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
}

.btn-ver-mas:hover {
  background-color: #0056b3;
}

.btn-ver-mas {
  display: inline-block;
  padding: 10px 22px;
  margin-top: 10px;
  font-family: 'Avenir', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #a8908f; /* tono cercano al logo */
  background: linear-gradient(135deg, #d8c6c8, #f4e8e9);
  border: 2px solid #a8908f;
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(168, 144, 143, 0.25);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.btn-ver-mas:hover,
.btn-ver-mas:focus {
  background: #a8908f;
  color: #fff;
  box-shadow: 0 6px 12px rgba(168, 144, 143, 0.5);
  outline: none;
  text-decoration: none;
}

.btn:hover {
    background-color: #8e3c65;
    color: white;
    text-decoration: none;
}

.team-member {
  position: relative; /* clave para que el absolute sea relativo a este contenedor */
  padding-bottom: 50px; /* espacio para que no tape el contenido */
  min-height: 300px; /* o el alto que necesites */
  box-sizing: border-box;
}

.btn-ver-mas {
  position: absolute;
  bottom: 15px;
  right: 15px;          /* a la derecha */
  background-color: #6f5f5e;
  color: #6f5f5e;
  padding: 8px 16px;
  border-radius: 20px;  /* bordes redondeados */
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;             /* espacio entre texto e icono */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background-color 0.3s ease;
}

.btn-ver-mas:hover {
    background-color: #6f5f5e;
}

.btn-ver-mas .icon {
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}


#team-container {
  display: flex;
  flex-wrap: wrap;       /* permite que las tarjetas bajen de línea si no caben */
  gap: 1rem;             /* espacio entre tarjetas */
  justify-content: flex-start;
}

.team-member {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 275px;
  padding: 1.2rem;
  box-sizing: border-box;
  background: #faf7f6;  /* un blanco cálido, no tan fuerte */
  border: none;         /* quita borde gris duro */
  border-radius: 0.8rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* más destaque al pasar el mouse */
}

.team-content {
  flex-grow: 1;
}

.team-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap; /* permite que los botones se muevan a otra línea si no caben */
}

.team-actions .btn,
.team-actions .btn-ver-mas {
  flex: none;            /* que no se estiren */
  padding: 0.5rem 1rem;
  text-align: center;
  white-space: nowrap;   /* evita que el texto se rompa en varias líneas */
}

.btn-receta{
  background-color: #a08584;
}

.contacto-datos > div {
  display: flex;
  flex-direction: column; /* título arriba, dato debajo */
  align-items: flex-start; /* alineado a la izquierda */
  margin-bottom: 1rem;
}

.contacto-datos h5 {
  display: flex;
  align-items: center; /* ícono y texto alineados verticalmente */
  gap: 0.5rem;         /* espacio entre ícono y texto */
  margin: 0;           /* quitar margen predeterminado */
}

.contacto-datos p {
  margin: 0.25rem 0 0 2.5rem; /* pequeño margen arriba para separar del título */
}


section {
  scroll-margin-top: 170px; /* ajusta según altura del header + margen extra */
}

 .hero, 
#heroCarousel,
.carousel-item img {
  width: 100%;
  max-width: 100%;
}

/* Altura del carrusel */
#heroCarousel,
#heroCarousel .carousel-item,
#heroCarousel img {
  height: 80vh;  /* ajustá según necesites */
  object-fit: cover;
}

/* Reubicar caption a la derecha */
.carousel-caption {
  right: 15%;
  left: auto;
  top: 5%;
  bottom: auto;
  text-align: right;
}


/* Logo dentro del carrusel */
.logo-slide {
  width: 20rem !important;      /* fijás el ancho */
  height: auto !important;      /* mantiene la proporción */
  max-width: 100% !important;   /* evita que se pase del contenedor */
  object-fit: contain !important; /* asegura que no se deforme */
}
/* Estilo del título */
.hero-titulo {
  font-family: 'Lora', serif;
  font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.5rem;   /* ajusta tamaño */
    letter-spacing: 2px; /* espaciado entre letras para elegancia */
    color: #7e6b66;  /* un tono similar al logo */
    text-align: center;
}


/* Hero ocupa todo el ancho y alto de la pantalla */
.hero {
 
  margin: 0;
  padding: 0;
  
}

/* Carrusel también ocupa todo el contenedor */
#heroCarousel {
  width: 100%;
  max-width: 100%;
}

/* Ajuste de altura responsive */
#heroCarousel,
#heroCarousel .carousel-item,
#heroCarousel img {
  height: 80vh;  /* altura según necesites */
  object-fit: cover;
}

/* Para móviles: ocupando todo el ancho y altura proporcional */
@media (max-width: 768px) {
  #heroCarousel,
  #heroCarousel .carousel-item,
  #heroCarousel img {
    height: 70vh; /* un poco menos para no ocupar toda la pantalla */
  }

  .carousel-caption {
    right: 5%;
    left: 5%;
    top: auto;
    bottom: 10%;
    text-align: center;
  }

  .logo-slide {
    width: 12rem !important;
  }

  .hero-titulo {
    font-size: 1.2rem;
  }
}