/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 2.0.0
Description: Sisgenyca. El diseño lo pone el CSS original del template
Cardia (tema/css/main.css + sisgenyca.css), igual que en el React. Aquí
solo queda lo que ese CSS no cubre porque en el React lo hacía React:
el carrusel del hero sin Swiper, el botón flotante y poco más.
*/

/* ── Hero sin Swiper ──────────────────────────────────────────
 * El React apila las diapositivas con Swiper. Aquí se alternan por
 * clase: la activa se muestra, el resto no se pintan. Nada de
 * position:absolute, que pelearía con .sg-hero-slide del template.
 */
.sg-hero .e-con.e-flex.sg-hero-slide { display: none; }
.sg-hero .e-con.e-flex.sg-hero-slide.is-active { display: flex; }

.sg-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.sg-hero-dots button {
  width: 10px; height: 10px; padding: 0; border: 0;
  border-radius: 99px; background: #fff; opacity: 0.5;
  cursor: pointer; transition: all 0.3s;
}
.sg-hero-dots button.is-active {
  opacity: 1; width: 28px; background: var(--theme);
}

/* ── Listas del CPT de análisis ───────────────────────────────
 * Salen de un campo de texto (una línea por punto) a través de un
 * dynamic tag. El template no tiene clase para esto.
 */
.sg-puntos { list-style: none; margin: 0 0 14px; padding: 0; }
.sg-puntos li { position: relative; padding-left: 26px; margin-bottom: 8px; line-height: 1.5; }
.sg-puntos li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--theme); box-shadow: inset 0 0 0 3px #fff;
}
.sg-meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-meta li { background: var(--transparent); border-radius: 30px; padding: 5px 14px; font-size: 0.85em; line-height: 1.4; }
.sg-meta .sg-meta-muestra { background: rgba(22, 51, 83, 0.07); }

/* ── Botón flotante «INFORMES» ────────────────────────────────
 * Equivale al QuoteFab del React. El template ya trae .sg-fab*, así
 * que aquí solo va lo mínimo que falta.
 */
.sg-fab-panel-inner { position: relative; }

/* ── Marquesina ───────────────────────────────────────────────
 * El template la mueve con .marquee-inner dentro de .marquee-right,
 * que recorta. Aquí el texto va en un solo párrafo, así que se le da
 * el desplazamiento y se impide que parta línea.
 */
.marquee-right, .marquee-left { overflow: hidden; width: 100%; }
.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: sg-marquee 30s linear infinite;
  margin: 0;
}
.marquee-inner .sg-marq-item { padding-right: 40px; }
@keyframes sg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-inner { animation: none; padding-left: 0; white-space: normal; }
}

/* ── Ningún medio desborda ────────────────────────────────── */
img, video, iframe, svg { max-width: 100%; }

/* ── Carrusel de especialidades ───────────────────────────────
 * El React lo mueve con Swiper; aquí se muestra una tarjeta a la vez
 * con el mismo marcado del template (.testi-one-item).
 */
.sg-testi-slider { position: relative; }
.sg-testi-slider .e-con.testi-one-item { display: none; }
.sg-testi-slider .e-con.testi-one-item.is-active { display: flex; }
.sg-testi-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
}
.sg-testi-dots button {
  width: 10px; height: 10px; padding: 0; border: 0;
  border-radius: 99px; background: var(--header); opacity: 0.25;
  cursor: pointer; transition: all 0.3s;
}
.sg-testi-dots button.is-active { opacity: 1; width: 28px; background: var(--theme); }