/* =========================================================
   ACORDEONES DE SALIENT (Toggles / Accordion)
   - Estilo "Default" y "Material"  → número en círculo
     (mismo diseño que el acordeón del componente Servicios).
   - Estilo "Animated circle"        → círculo con + / −
     (el de las fichas de profesionales).
   Salient marca el abierto con .toggle.open.
   ========================================================= */

.toggles[data-style='default'],
.toggles[data-style='material'],
.toggles[data-style='animated_circle'] {
  --tg-line: #e9e3d5;
  --tg-size: 32px;
  --tg-gap: 16px;
  --tg-ease: cubic-bezier(0.65, 0, 0.35, 1);
  counter-reset: eq-toggle;
}

.toggles[data-style='default'] .toggle,
.toggles[data-style='material'] .toggle,
.toggles[data-style='animated_circle'] .toggle {
  counter-increment: eq-toggle;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.toggles[data-style='default'] .toggle > .toggle-title,
.toggles[data-style='material'] .toggle > .toggle-title,
.toggles[data-style='animated_circle'] .toggle > .toggle-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.toggles[data-style='default'] .toggle > .toggle-title > a,
.toggles[data-style='material'] .toggle > .toggle-title > a,
.toggles[data-style='animated_circle'] .toggle > .toggle-title > a {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: var(--tg-gap);
  margin: 0 !important;
  padding: 18px 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--primary-font) !important;
  font-weight: 600 !important;
  font-size: clamp(18px, calc(20 / 1440 * 100vw), 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--dark) !important;
  transition: color 0.3s ease;
}

/* Fuera los iconos de Salient */
.toggles[data-style='default'] .toggle > .toggle-title > a > i,
.toggles[data-style='default'] .toggle > .toggle-title > a > svg,
.toggles[data-style='material'] .toggle > .toggle-title > a > i,
.toggles[data-style='material'] .toggle > .toggle-title > a > svg,
.toggles[data-style='animated_circle'] .toggle > .toggle-title > a > i,
.toggles[data-style='animated_circle'] .toggle > .toggle-title > a > svg,
.toggles[data-style='default'] .toggle > .toggle-title::before,
.toggles[data-style='default'] .toggle > .toggle-title::after,
.toggles[data-style='material'] .toggle > .toggle-title::before,
.toggles[data-style='material'] .toggle > .toggle-title::after,
.toggles[data-style='animated_circle'] .toggle > .toggle-title::before,
.toggles[data-style='animated_circle'] .toggle > .toggle-title::after {
  display: none !important;
}

@media (hover: hover) {
  .toggles[data-style='default'] .toggle:not(.open) > .toggle-title > a:hover,
  .toggles[data-style='material'] .toggle:not(.open) > .toggle-title > a:hover,
  .toggles[data-style='animated_circle'] .toggle:not(.open) > .toggle-title > a:hover {
    color: var(--accent) !important;
  }
}

/* Contenido */
.toggles[data-style='default'] .toggle > [role='region'],
.toggles[data-style='material'] .toggle > [role='region'],
.toggles[data-style='animated_circle'] .toggle > [role='region'],
.toggles[data-style='default'] .toggle > div:not(.toggle-title),
.toggles[data-style='material'] .toggle > div:not(.toggle-title),
.toggles[data-style='animated_circle'] .toggle > div:not(.toggle-title) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.toggles[data-style='default'] .toggle .inner-toggle-wrap,
.toggles[data-style='material'] .toggle .inner-toggle-wrap,
.toggles[data-style='animated_circle'] .toggle .inner-toggle-wrap {
  padding: 0 0 22px calc(var(--tg-size) + var(--tg-gap)) !important;
  font-family: var(--secondary-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--dark);
}

.toggles[data-style='default'] .toggle .inner-toggle-wrap p:last-child,
.toggles[data-style='material'] .toggle .inner-toggle-wrap p:last-child,
.toggles[data-style='animated_circle'] .toggle .inner-toggle-wrap p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ---------- Default / Material: número ---------- */
.toggles[data-style='default'] .toggle > .toggle-title > a::before,
.toggles[data-style='material'] .toggle > .toggle-title > a::before {
  content: counter(eq-toggle) !important;
  box-sizing: border-box;
  flex: none;
  display: grid !important;
  place-items: center;
  position: static !important;
  width: var(--tg-size) !important;
  height: var(--tg-size) !important;
  margin: 0 !important;
  border: 2px solid var(--dark-cream);
  border-radius: 50%;
  background: transparent;
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--dark-cream);
  transform: none !important;
  transition:
    background-color 0.4s var(--tg-ease),
    border-color 0.4s var(--tg-ease),
    color 0.4s var(--tg-ease);
}

.toggles[data-style='default'] .toggle.open > .toggle-title > a::before,
.toggles[data-style='material'] .toggle.open > .toggle-title > a::before {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--light);
}

.toggles[data-style='default'] .toggle > .toggle-title > a::after,
.toggles[data-style='material'] .toggle > .toggle-title > a::after {
  display: none !important;
}

/* ---------- Animated circle: + / − ---------- */
.toggles[data-style='animated_circle'] {
  --tg-size: 28px;
}

/* círculo + barra horizontal */
.toggles[data-style='animated_circle'] .toggle > .toggle-title > a::before {
  content: '' !important;
  box-sizing: border-box;
  flex: none;
  display: block !important;
  position: static !important;
  width: var(--tg-size) !important;
  height: var(--tg-size) !important;
  margin: 0 !important;
  border: 2px solid var(--dark-cream);
  border-radius: 50%;
  color: var(--dark-cream);
  background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat;
  transform: none !important;
  transition:
    background-color 0.4s var(--tg-ease),
    border-color 0.4s var(--tg-ease),
    color 0.4s var(--tg-ease);
}

/* barra vertical: desaparece al abrir (+ → −) */
.toggles[data-style='animated_circle'] .toggle > .toggle-title > a::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--tg-size) / 2 - 1px) !important;
  right: auto !important;
  width: 2px !important;
  height: 10px !important;
  margin: -5px 0 0 !important;
  border: 0 !important;
  border-radius: 0;
  background-color: var(--dark-cream);
  transform: scaleY(1) !important;
  transition:
    transform 0.4s var(--tg-ease),
    background-color 0.4s var(--tg-ease) !important;
}

.toggles[data-style='animated_circle'] .toggle.open > .toggle-title > a::before {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--light);
}

.toggles[data-style='animated_circle'] .toggle.open > .toggle-title > a::after {
  background-color: var(--light);
  transform: scaleY(0) rotate(90deg) !important;
}

@media (max-width: 999px) {
  .toggles[data-style='default'] .toggle > .toggle-title > a,
  .toggles[data-style='material'] .toggle > .toggle-title > a,
  .toggles[data-style='animated_circle'] .toggle > .toggle-title > a {
    font-size: 18px !important;
  }
}