/* =============================================================
   JURÍDICO VIRTUAL — PREVIEWS DEL HERO
   Rotación editorial discreta para escritorio y móvil.
   ============================================================= */

.hero-mobile-previews { display: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-desktop-previews,
.hero-desktop-preview-stage {
  position: relative;
  width: 100%;
}

.hero-desktop-preview-stage {
  height: clamp(440px, 42vw, 570px);
  overflow: hidden;
  border: 1px solid #c2d3d9;
  border-radius: 32px 8px 32px 8px;
  background: #dce7eb;
}

.hero-desktop-preview-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.995);
  pointer-events: none;
  transition:
    opacity .72s cubic-bezier(.22,.72,.24,1),
    transform .72s cubic-bezier(.22,.72,.24,1),
    visibility 0s linear .72s;
}

.hero-desktop-preview-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.hero-desktop-preview-slide .hero-img-wrap {
  width: 100%;
  height: 100% !important;
  border: 0;
  border-radius: 0;
}

.hero-topic-preview {
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.hero-topic-preview::before,
.hero-topic-preview::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-topic-preview::before {
  width: 360px;
  height: 360px;
  top: -185px;
  right: -145px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
}

.hero-topic-preview::after {
  width: 220px;
  height: 220px;
  left: -120px;
  bottom: -120px;
  background: rgba(107,171,194,.13);
}

.hero-topic-news { background: #071f30; }
.hero-topic-services { background: linear-gradient(145deg,#08283c 0%,#174f69 100%); }
.hero-topic-sites { background: linear-gradient(145deg,#102b38 0%,#245e68 100%); }
.hero-topic-facebook { background: linear-gradient(145deg,#0b3152 0%,#175d93 100%); }

.hero-topic-media,
.hero-topic-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-topic-media {
  z-index: -3;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
  transition: transform 6.8s ease;
}

.hero-desktop-preview-slide.is-active .hero-topic-media { transform: scale(1.045); }

.hero-topic-overlay {
  z-index: -2;
  background: linear-gradient(180deg,rgba(5,25,38,.14) 0%,rgba(5,25,38,.8) 65%,rgba(5,25,38,.96) 100%);
}

.hero-topic-content {
  position: absolute;
  z-index: 2;
  left: clamp(30px,4.2vw,52px);
  right: clamp(30px,4.2vw,52px);
  bottom: clamp(42px,5vw,66px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.hero-topic-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 15px;
  background: rgba(255,255,255,.11);
  color: #d9eef5;
  font-size: 1.28rem;
  box-shadow: 0 12px 32px rgba(2,18,28,.16);
  backdrop-filter: blur(10px);
}

.hero-topic-content small {
  margin-bottom: 10px;
  color: #b7ddeb;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-topic-content strong {
  max-width: 15ch;
  color: #fff;
  font-size: clamp(1.8rem,3.1vw,2.65rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero-topic-content > span:not(.hero-topic-icon) {
  max-width: 40ch;
  margin-top: 16px;
  color: rgba(255,255,255,.78);
  font-size: .88rem;
  line-height: 1.65;
}

.hero-topic-content b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.38);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: gap .3s ease, border-color .3s ease;
}

.hero-topic-preview:hover .hero-topic-content b,
.hero-topic-preview:focus-visible .hero-topic-content b {
  gap: 14px;
  border-color: #fff;
}

.hero-topic-preview:focus-visible {
  outline: 3px solid #8dc9df;
  outline-offset: -5px;
}

.hero-topic-decoration {
  position: absolute;
  top: 74px;
  right: 42px;
  display: grid;
  grid-template-columns: repeat(2,72px);
  gap: 14px;
  opacity: .16;
  color: #d9f1f8;
  font-size: 3.5rem;
  transform: rotate(-7deg);
}

.hero-topic-decoration i:last-child { grid-column: 2; }
.hero-facebook-mark { display: block; top: 54px; right: 54px; font-size: 12rem; line-height: 1; opacity: .08; transform: none; }

.hero-site-logo-trio {
  position: absolute;
  z-index: 2;
  top: 76px;
  right: 42px;
  width: 174px;
  height: 118px;
  pointer-events: none;
}

.hero-site-logo-trio > span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 13px 32px rgba(1,19,27,.2);
}

.hero-site-logo-trio > span:nth-child(1) { top: 0; left: 0; }
.hero-site-logo-trio > span:nth-child(2) { top: 8px; right: 0; }
.hero-site-logo-trio > span:nth-child(3) { bottom: 0; left: 53px; }
.hero-site-logo-trio img { width: 100%; height: 100%; object-fit: contain; }

.hero-preview-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-preview-controls-desktop {
  position: absolute;
  z-index: 8;
  top: 18px;
  right: 18px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 13px;
  background: rgba(5,28,42,.68);
  box-shadow: 0 10px 28px rgba(2,18,28,.16);
  backdrop-filter: blur(12px);
}

.hero-preview-control {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}

.hero-preview-controls-desktop .hero-preview-control { color: #fff; }
.hero-preview-control:hover { background: rgba(255,255,255,.14); }
.hero-preview-control:active { transform: scale(.94); }
.hero-preview-control:focus-visible { outline: 2px solid #9ed7eb; outline-offset: 2px; }

.hero-preview-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 3px;
}

.hero-preview-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  color: rgba(255,255,255,.38);
  cursor: pointer;
  transition: width .3s ease, color .3s ease;
}

.hero-preview-dots button[aria-current="true"] { width: 20px; color: #fff; }
.hero-preview-dots button:focus-visible { outline: 2px solid #9ed7eb; outline-offset: 3px; }

@media (max-width: 920px) {
  .hero-stats-desktop,
  .hero-img-col { display: none !important; }

  .hero-mobile-previews {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 8px 7px;
    border: 1px solid rgba(42,108,143,.18);
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(255,255,255,.9),rgba(229,239,243,.78));
    box-shadow: 0 18px 45px rgba(8,38,55,.085);
    backdrop-filter: blur(12px);
  }

  .hero-mobile-preview-stage {
    position: relative;
    min-height: 174px;
    overflow: hidden;
    border-radius: 13px;
  }

  .hero-mobile-preview-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    pointer-events: none;
    transition:
      opacity .58s cubic-bezier(.22,.72,.24,1),
      transform .58s cubic-bezier(.22,.72,.24,1),
      visibility 0s linear .58s;
  }

  .hero-mobile-preview-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .hero-mobile-stats {
    height: 174px;
    margin: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: none;
    background: transparent !important;
    backdrop-filter: none;
  }

  .hero-brief-preview {
    display: grid;
    grid-template-columns: 54px 1fr;
    grid-template-rows: 1fr auto;
    gap: 8px 16px;
    align-items: center;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(39,105,135,.13);
    border-radius: 13px;
    background:
      radial-gradient(circle at 95% 12%,rgba(48,125,158,.14),transparent 32%),
      rgba(255,255,255,.72);
    color: #09283c;
    text-decoration: none;
  }

  .hero-brief-facebook {
    background:
      radial-gradient(circle at 95% 12%,rgba(46,111,163,.16),transparent 34%),
      rgba(246,250,252,.84);
  }

  .hero-brief-sites { grid-template-columns: 74px 1fr; }

  .hero-site-logo-trio-mobile {
    position: relative;
    top: auto;
    right: auto;
    width: 70px;
    height: 62px;
    grid-row: 1 / span 2;
  }

  .hero-site-logo-trio-mobile > span {
    width: 36px;
    height: 36px;
    padding: 5px;
    border-color: #c4d8df;
    box-shadow: 0 7px 16px rgba(8,38,55,.12);
  }

  .hero-site-logo-trio-mobile > span:nth-child(1) { top: 0; left: 0; }
  .hero-site-logo-trio-mobile > span:nth-child(2) { top: 0; right: 0; }
  .hero-site-logo-trio-mobile > span:nth-child(3) { bottom: 0; left: 17px; }

  .hero-brief-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    grid-row: 1 / span 2;
    border-radius: 15px;
    background: linear-gradient(145deg,#0b3048,#2f789c);
    color: #fff;
    font-size: 1.18rem;
    box-shadow: 0 10px 22px rgba(19,80,111,.16);
  }

  .hero-brief-copy { display: flex; min-width: 0; flex-direction: column; }
  .hero-brief-copy small { margin-bottom: 3px; color: #3a7188; font-size: .59rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .hero-brief-copy strong { color: #09283c; font-size: 1.14rem; line-height: 1.2; letter-spacing: -.025em; }
  .hero-brief-copy > span { margin-top: 6px; color: #45616e; font-size: .73rem; line-height: 1.48; }
  .hero-brief-action { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #1b6687; font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .hero-brief-preview:focus-visible { outline: 3px solid #2f83a8; outline-offset: -4px; }

  .hero-mobile-previews .hero-preview-controls {
    min-height: 35px;
    margin-top: 3px;
    color: #1b5875;
  }

  .hero-mobile-previews .hero-preview-control { width: 29px; height: 29px; }
  .hero-mobile-previews .hero-preview-control:hover { background: rgba(30,103,136,.09); }
  .hero-mobile-previews .hero-preview-dots button { color: #aac2cc; }
  .hero-mobile-previews .hero-preview-dots button[aria-current="true"] { color: #246f92; }
}

@media (max-width: 640px) {
  .hero-mobile-preview-stage { min-height: 154px; }
  .hero-mobile-stats { height: 154px; padding: 4px !important; }
  .hero-mobile-stats .stat { min-height: 112px; }
  .hero-brief-preview { grid-template-columns: 48px 1fr; gap: 6px 13px; padding: 17px 16px; }
  .hero-brief-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 1.02rem; }
  .hero-brief-copy strong { font-size: 1rem; }
  .hero-brief-copy > span { font-size: .68rem; line-height: 1.42; }
  .hero-brief-action { font-size: .6rem; }
  .hero-brief-sites { grid-template-columns: 68px 1fr; }
  .hero-site-logo-trio-mobile { width: 64px; height: 58px; }
  .hero-site-logo-trio-mobile > span { width: 34px; height: 34px; }
  .hero-site-logo-trio-mobile > span:nth-child(3) { left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-desktop-preview-slide,
  .hero-mobile-preview-slide,
  .hero-topic-media,
  .hero-preview-control,
  .hero-preview-dots button { transition: none !important; }
}