/* ─────────────────────────────────────────────────────────
   Skin "case_studies" para el módulo cst_advanced_tabs
   Marcado y estilos tomados 1:1 del diseño de referencia
   (newhome/home-base.html, bloque .case-tabs / .case-panel).
   ───────────────────────────────────────────────────────── */

/* Fondo prediseñado de la sección Case Studies (gradiente lavanda suave
   + patrón hexagonal SVG inline en data-URI + glow lateral).
   Para activarlo: añade la CSS class "case-studies-bg" al et_pb_section.
   Si no quieres el fondo, simplemente no pongas la clase. */

/*
.case-studies-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='700' viewBox='0 0 800 700'><g fill='none' stroke='%235E4587' stroke-width='1.2' stroke-opacity='0.12'><path d='M520,40 L600,0 L680,40 L680,120 L600,160 L520,120 Z'/><path d='M680,40 L760,0 L840,40 L840,120 L760,160 L680,120 Z'/><path d='M600,160 L680,120 L760,160 L760,240 L680,280 L600,240 Z'/><path d='M440,160 L520,120 L600,160 L600,240 L520,280 L440,240 Z'/><path d='M520,280 L600,240 L680,280 L680,360 L600,400 L520,360 Z'/><path d='M680,280 L760,240 L840,280 L840,360 L760,400 L680,360 Z'/><path d='M360,280 L440,240 L520,280 L520,360 L440,400 L360,360 Z'/><path d='M440,400 L520,360 L600,400 L600,480 L520,520 L440,480 Z'/><path d='M600,400 L680,360 L760,400 L760,480 L680,520 L600,480 Z'/><path d='M520,520 L600,480 L680,520 L680,600 L600,640 L520,600 Z'/></g><g fill='%238B6FBF' fill-opacity='0.2'><circle cx='520' cy='40' r='5'/><circle cx='600' cy='0' r='5'/><circle cx='680' cy='40' r='5'/><circle cx='680' cy='120' r='5'/><circle cx='600' cy='160' r='5'/><circle cx='520' cy='120' r='5'/><circle cx='760' cy='0' r='5'/><circle cx='760' cy='160' r='5'/><circle cx='760' cy='240' r='5'/><circle cx='680' cy='280' r='5'/><circle cx='600' cy='240' r='5'/><circle cx='440' cy='160' r='5'/><circle cx='440' cy='240' r='5'/><circle cx='520' cy='280' r='5'/><circle cx='520' cy='360' r='5'/><circle cx='440' cy='400' r='5'/><circle cx='360' cy='360' r='5'/><circle cx='360' cy='280' r='5'/><circle cx='600' cy='400' r='5'/><circle cx='680' cy='360' r='5'/><circle cx='760' cy='400' r='5'/><circle cx='760' cy='480' r='5'/><circle cx='680' cy='520' r='5'/><circle cx='600' cy='480' r='5'/><circle cx='520' cy='520' r='5'/><circle cx='440' cy='480' r='5'/><circle cx='520' cy='600' r='5'/><circle cx='600' cy='640' r='5'/><circle cx='680' cy='600' r='5'/></g></svg>");
  background-size: 800px 700px;
  background-repeat: no-repeat;
  background-position: right top;
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}

.case-studies-bg::after {
  content: '';
  position: absolute;
  top: 15%;
  left: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(186, 161, 255, 0.18) 0%, rgba(186, 161, 255, 0.06) 35%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
*/
/* El contenido de la sección tiene que quedar por encima de los ::before/::after */
.case-studies-bg > .et_pb_row,
.case-studies-bg .cst-skin-case-studies { position: relative; z-index: 1; }

/* Wrapper del módulo tabs — ancho máximo coherente con el resto del site */
.cst-skin-case-studies { max-width: 1480px; margin: 0 auto; }

/* ── Contenedor agrupado de tabs ──────────────────────────
   Diseño: una "barra" blanca redondeada que agrupa las 6 tabs.
   La tab activa lleva el fondo morado dentro de la barra; las
   inactivas no llevan fondo, solo texto. */
.cst-skin-case-studies .case-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  margin: 0 auto 48px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(186, 161, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(50, 36, 74, 0.08);
}

/* Wrapper externo para centrar la barra */
.cst-skin-case-studies .case-panels { position: relative; }
.cst-skin-case-studies > .case-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
}
.cst-skin-case-studies {
  text-align: center;
}

.cst-skin-case-studies .case-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #32244a;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: none;
}

.cst-skin-case-studies .case-tab svg {
  width: 18px;
  height: 18px;
  stroke: #32244a;
  stroke-width: 2;
  opacity: 0.85;
  transition: all 0.25s ease;
}

.cst-skin-case-studies .case-tab:hover {
  background: rgba(186, 161, 255, 0.08);
}

.cst-skin-case-studies .case-tab:hover svg {
  opacity: 1;
  stroke: #5E4587;
}

/* Tab activa: fondo morado oscuro, texto blanco */
.cst-skin-case-studies .case-tab.active {
  background: #32244a;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(50, 36, 74, 0.18);
}

.cst-skin-case-studies .case-tab.active svg {
  stroke: #ffffff;
  opacity: 1;
}

.cst-skin-case-studies .case-panels {
  position: relative;
}

.cst-skin-case-studies .case-panel {
  display: none;
  animation: cstFadeInCase 0.4s ease;
}

.cst-skin-case-studies .case-panel.active {
  display: block;
}

@keyframes cstFadeInCase {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dropdown plegable (responsive) ─────────────────────────────────────
   En desktop está oculto; en mobile (≤780px) sustituye a .case-tabs y
   muestra el icono + título completo de la tab activa. Al pulsar abre
   una lista plegable con todas las opciones (icono + texto). */
.cst-skin-case-studies .case-tabs-dd { display: none; }

.cst-skin-case-studies .case-tabs-dd__trigger {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(186, 161, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(50, 36, 74, 0.10);
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #32244a;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cst-skin-case-studies .case-tabs-dd__trigger:hover,
.cst-skin-case-studies .case-tabs-dd__trigger[aria-expanded="true"] {
  border-color: rgba(94, 69, 135, 0.55);
  box-shadow: 0 8px 22px rgba(50, 36, 74, 0.16);
}

.cst-skin-case-studies .case-tabs-dd__current {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-align: left;
}

.cst-skin-case-studies .case-tabs-dd__current svg {
  width: 20px;
  height: 20px;
  stroke: #32244a;
  stroke-width: 2;
  flex-shrink: 0;
}

.cst-skin-case-studies .case-tabs-dd__caret {
  transition: transform 0.25s ease;
  color: #5E4587;
  flex-shrink: 0;
}

.cst-skin-case-studies .case-tabs-dd__trigger[aria-expanded="true"] .case-tabs-dd__caret {
  transform: rotate(180deg);
}

.cst-skin-case-studies .case-tabs-dd {
  position: relative;
  margin: 0 auto 24px;
  max-width: 420px;
}

.cst-skin-case-studies .case-tabs-dd__trigger {
  margin-bottom: 0;
}

.cst-skin-case-studies .case-tabs-dd__list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  background: #ffffff;
  border: 1px solid rgba(186, 161, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(50, 36, 74, 0.16);
  z-index: 5;
}

.cst-skin-case-studies .case-tabs-dd__list[hidden] {
  display: none;
}

.cst-skin-case-studies .case-tabs-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #32244a;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cst-skin-case-studies .case-tabs-dd__item svg {
  width: 18px;
  height: 18px;
  stroke: #32244a;
  stroke-width: 2;
  flex-shrink: 0;
}

.cst-skin-case-studies .case-tabs-dd__item:hover {
  background: rgba(186, 161, 255, 0.12);
}

.cst-skin-case-studies .case-tabs-dd__item.active {
  background: #32244a;
  color: #ffffff;
}

.cst-skin-case-studies .case-tabs-dd__item.active svg {
  stroke: #ffffff;
}

@media (max-width: 780px) {
  /* Sustituir la barra de tabs por el dropdown plegable. */
  .cst-skin-case-studies .case-tabs { display: none !important; }
  .cst-skin-case-studies .case-tabs-dd { display: block; }
}