@import url('https://use.typekit.net/yid3rcv.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ===== Boutique Spa (by Soledad Diego) · brand tokens sod v1 · Eucalipto ===== */

/* FIX: gap cream entre header fijo (70px) y hero - body trae 140px */
body {
  padding-top: 70px !important;
}

/* BASE */
body, .section-pd, .step-content {
  background: #EFE7DA !important;        /* cream */
  color: #2A2622 !important;             /* ink / offblack */
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
}

/* TÍTULOS (genérico) */
h1, h2, h3, h4, .title-small,
h4.cap, .cap, .cap.title {
  font-family: 'gelica', serif !important;
  font-weight: 400 !important;
  color: #2A2622 !important;             /* offblack */
  font-size: 32px !important;
}

/* HEADERS DE SECCIÓN (.title-main) - fondo eucalipto, texto offblack */
.title-main {
  background: #9DAA92 !important;         /* eucalipto */
  color: #2A2622 !important;             /* offblack */
  padding: 12px 24px !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  font-family: 'gelica', serif !important;
  font-weight: 400 !important;
  font-size: 48px !important;
}

/* TÍTULO HERO (.company-name) - sin recuadro, texto offblack */
.company-name,
.company-name-only {
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #2A2622 !important;             /* offblack */
  font-family: 'gelica', serif !important;
  font-weight: 400 !important;
  font-size: 48px !important;
  text-transform: none !important;       /* respeta "by" minúscula del campo */
}

/* TEXTO DESCRIPCIÓN */
.txt, .content p, p {
  color: #7A6E5C !important;             /* topo */
  font-family: 'Montserrat', sans-serif !important;
}

/* PRECIO */
.bar-flex-item.price, .badge.price {
  font-family: 'gelica', serif !important;
  color: #7A6E5C !important;             /* topo */
  font-size: 28px !important;
  font-weight: 400 !important;
  background: transparent !important;
}

/* DURACIÓN */
.time, .bar-service .time {
  color: #8A7E6C !important;             /* sand oscurecido */
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.2em !important;
}

/* BOTONES */
.btn.select,
.btn.custom,
.btn.book,
.btn-success {
  background: #9DAA92 !important;        /* eucalipto */
  background-color: #9DAA92 !important;
  color: #2A2622 !important;             /* offblack */
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
}

.btn.select a,
.btn.custom a,
.btn.book a,
.btn-success a {
  color: #2A2622 !important;             /* offblack */
  font-size: 12px !important;            /* iguala tamaño en todos los botones */
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Label del CTA principal: "Reservar" -> "Reservar turno" */
.btn.book.custom > a {
  font-size: 0 !important;
}
.btn.book.custom > a::after {
  content: "Reservar turno";
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #2A2622 !important;             /* offblack */
}

.btn.select:hover,
.btn.custom:hover,
.btn.book:hover,
.btn-success:hover {
  background: #879476 !important;        /* eucalipto oscurecido */
  background-color: #879476 !important;
}

/* CONTACTOS - iconos circulares eucalipto, glifo + texto offblack */
li:has(> .icon),
li:has(> .icon) a,
li:has(> .icon) .links,
li:has(> .icon) .links a {
  color: #2A2622 !important;             /* texto offblack */
}
li:has(> .icon) > .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: #9DAA92 !important;        /* eucalipto */
  border-radius: 9999px !important;
  color: #2A2622 !important;             /* glifo offblack */
}
li:has(> .icon) > .icon i {
  color: #2A2622 !important;             /* glifo offblack */
}

/* GRID HORARIOS - jerarquía: disponible resalta, ocupado recede */
/* DISPONIBLE: caja eucalipto suave con borde, texto offblack */
.cell.sb-cell.free {
  background-color: #DCE3D6 !important;    /* eucalipto claro */
  border: 1px solid #9DAA92 !important;
  color: #2A2622 !important;              /* offblack */
  opacity: 1 !important;
}
/* DISPONIBLE hover/selección: eucalipto sólido */
.sb-cell.free.hovered,
.cell.sb-cell.free:hover {
  background-color: #9DAA92 !important;    /* eucalipto */
  border-color: #879476 !important;
  color: #2A2622 !important;              /* offblack */
  opacity: 1 !important;
}
/* OCUPADO / break: apagado, recede */
.cell.sb-cell.reserved,
.cell.sb-cell.breaktime {
  background-color: transparent !important;
  border: 1px dashed #D7CDBC !important;  /* sand */
  color: #B8AE9F !important;              /* gris apagado */
  opacity: 1 !important;
}

/* "Nuestra hora" (timezone del booking) - offblack, no apagado */
#sb_booking_company_time,
#sb_booking_company_time .time {
  color: #2A2622 !important;              /* offblack */
}

/* FORMULARIO */
.form-control, input, select, textarea {
  background: #FFFFFF !important;
  color: #2A2622 !important;             /* offblack */
  border: 1px solid #D7CDBC !important;  /* sand */
  border-radius: 4px !important;
}