/* ==========================================================================
   SWD Image Resizer · COMPRESSION · CRITICAL
   --------------------------------------------------------------------------
   CSS mínimo necesario para la carga inicial de Compression.
   El contrato completo del workspace se carga bajo demanda desde
   compression-runtime.css antes de iniciar el runtime del editor.
   ========================================================================== */

body[data-irx-service="compression"] .irx-app:not(.has-image) [data-choose-file] {
  position: relative;
  z-index: 4;
  isolation: isolate;
  transform-origin: center;
  animation: irx-guidance-heartbeat-glow 1.55s cubic-bezier(.22,.61,.36,1) infinite;
}

body[data-irx-service="compression"] .irx-app:not(.has-image) [data-choose-file].is-file-picker-active {
  animation: none !important;
  transform: scale(.985);
  opacity: .86;
  box-shadow: 0 0 0 .16rem rgba(242,194,48,.46), 0 0 1.1rem rgba(242,194,48,.20);
}

body[data-irx-service="compression"] .irx-file-picker-trigger {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

body[data-irx-service="compression"] .irx-app:not(.has-image) .irx-file-picker-trigger:focus-visible {
  animation: none !important;
  outline: .22rem solid #fff;
  outline-offset: .25rem;
  box-shadow: 0 0 0 .16rem var(--color-accent), 0 0 1.1rem rgba(242,194,48,.24);
}

body[data-irx-service="compression"] .irx-generate-button:focus-visible {
  animation: none !important;
  transform: none !important;
  color: var(--color-bg) !important;
  background: var(--color-accent) !important;
  outline: .22rem solid var(--color-accent) !important;
  outline-offset: .18rem;
  box-shadow: 0 0 0 .12rem #0a0a0a, 0 0 0 .38rem var(--color-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-irx-service="compression"] .irx-app:not(.has-image) [data-choose-file] {
    animation: none !important;
  }
}

body[data-irx-service="compression"] .irx-compression-hero {
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: 100vw;
  height: clamp(20rem, 31vh, 28rem);
  min-height: 20rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  border-bottom: 0;
  background-color: #080808;
  background-image: url("/assets/images/tools/image/heroes/hero-compression.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

body[data-irx-service="compression"] .irx-compression-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.82) 34%, rgba(8,8,8,.46) 62%, rgba(8,8,8,.20) 100%),
    linear-gradient(180deg, rgba(8,8,8,.18), rgba(8,8,8,.40));
  pointer-events: none;
}

body[data-irx-service="compression"] .irx-service-hero__frame {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
}

body[data-irx-service="compression"] .irx-compression-hero .irx-benefits__content {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  margin-inline: auto;
  padding: 1.2rem clamp(1.6rem, 5vw, 6rem);
  border-radius: 1rem;
  text-shadow: 0 .12rem .5rem rgba(0,0,0,.92);
}

body[data-irx-service="compression"] .irx-compression-hero .irx-hero__title {
  max-width: 18ch;
  margin-bottom: .55rem;
  color: #fff;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: .98;
}

body[data-irx-service="compression"] .irx-compression-hero .irx-benefits__lead {
  max-width: 70rem;
  margin-bottom: .8rem;
  color: #fff;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.35;
}

@media (max-width: 767px) {
  body[data-irx-service="compression"] .irx-compression-hero {
    background-position: center;
    background-size: cover;
  }

  body[data-irx-service="compression"] .irx-compression-hero::before {
    background: rgba(8,8,8,.68);
  }

  body[data-irx-service="compression"] .irx-compression-hero .irx-benefits__content {
    width: 100%;
    padding: .9rem .8rem;
    text-align: center;
  }

  body[data-irx-service="compression"] .irx-compression-hero .irx-hero__title,
  body[data-irx-service="compression"] .irx-compression-hero .irx-benefits__lead {
    margin-inline: auto;
  }

  /* Mobile contract: keep the hero title and image, hide the descriptive lead. */
  body[data-irx-service="compression"] .irx-compression-hero .irx-benefits__lead {
    display: none;
  }
}

@media (min-width: 1200px) {
  body[data-irx-service="compression"] .irx-compression-hero .irx-benefits__content {
    margin-left: calc(max(1.6rem, calc((100vw - var(--container-width, 120rem)) / 2)) + 5rem);
    margin-right: 0;
    padding-left: 0;
    padding-right: clamp(1.6rem, 5vw, 6rem);
  }
}

body[data-irx-service="compression"] .irx-compression-hero[data-irx-compression-landing="jpg"] {
  background-image: url("/assets/images/tools/image/heroes/hero-compression-jpg.webp");
}

body[data-irx-service="compression"] .irx-compression-hero[data-irx-compression-landing="png"] {
  background-image: url("/assets/images/tools/image/heroes/hero-compression-png.webp");
}

body[data-irx-service="compression"] .irx-compression-hero[data-irx-compression-landing="webp"] {
  background-image: url("/assets/images/tools/image/heroes/hero-compression-webp.webp");
}

body[data-irx-service="compression"] .irx-compression-hero[data-irx-compression-landing="avif"] {
  background-image: url("/assets/images/tools/image/heroes/hero-compression-avif.webp");
}

body[data-irx-service="compression"] .irx-compression-hero[data-irx-compression-landing="batch"] {
  background-image: url("/assets/images/tools/image/heroes/hero-compression-batch.webp");
}

body[data-irx-service="compression"] {
  --irx-landing-flow-gap: clamp(1.6rem, 2.2vw, 2.8rem);
}

/* Compression general: mirror below the upload selector the same vertical
   breathing room created above it by the primary ad banner. Specialized
   compression landings carry data-irx-compression-landing and are excluded. */
body[data-irx-service="compression"]
.irx-compression-hero:not([data-irx-compression-landing]) ~ #selector-imagenes {
  padding-bottom: var(--irx-landing-flow-gap) !important;
}

@media (max-width: 767px) {
  body[data-irx-service="compression"]
  .irx-compression-hero:not([data-irx-compression-landing]) ~ #selector-imagenes {
    padding-bottom: 1.2rem !important;
  }
}

body[data-irx-service="compression"] .irx-statistics-section--format {
  margin-top: var(--irx-landing-flow-gap);
}

body[data-irx-service="compression"] .irx-statistics-section--format .irx-statistics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

body[data-irx-service="compression"] .irx-statistics__copy--format {
  width: min(100%, 76rem);
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

body[data-irx-service="compression"] .irx-statistics__copy--format .irx-section-kicker {
  margin-bottom: 1rem;
}

body[data-irx-service="compression"] .irx-statistics__copy--format h2 {
  max-width: none;
  margin-inline: auto;
}

body[data-irx-service="compression"] .irx-statistics-section--format .irx-statistics__grid {
  width: min(100%, 68rem);
  margin-inline: auto;
}

body[data-irx-service="compression"] .irx-statistics-section--format .irx-statistics__grid > div {
  text-align: center;
}

body[data-irx-service="compression"] .irx-faq-section {
  margin-block: var(--irx-landing-flow-gap);
  padding: 0;
}

body[data-irx-service="compression"] .irx-faq {
  display: grid;
  gap: 2rem;
}

body[data-irx-service="compression"] .irx-faq__copy {
  max-width: 62rem;
}

body[data-irx-service="compression"] .irx-faq__items {
  display: grid;
  gap: 1rem;
}

body[data-irx-service="compression"] .irx-faq__item {
  border: .1rem solid var(--irx-line);
  border-radius: 1.4rem;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow: hidden;
  transition: border-color .28s ease, box-shadow .28s ease;
}

body[data-irx-service="compression"] .irx-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.5rem 1.6rem;
  font-weight: 700;
  color: #fff;
  transition: background-color .28s ease, color .28s ease;
}

body[data-irx-service="compression"] .irx-faq__item summary:focus-visible {
  outline: .22rem solid var(--color-accent);
  outline-offset: -.38rem;
  background: rgba(242,194,48,.18);
  box-shadow: inset 0 0 0 .14rem #fff, inset 0 0 0 .48rem rgba(242,194,48,.72);
}

body[data-irx-service="compression"] .irx-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Active FAQ: yellow question surface, black copy.
   The global short-brand decorator keeps "Resizer" yellow; on the active
   yellow surface it receives a black glyph outline so the accent remains visible. */
body[data-irx-service="compression"] .irx-faq__item[open] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 .02rem var(--color-accent);
}

body[data-irx-service="compression"] .irx-faq__item[open] summary {
  color: #0a0a0a;
  background: var(--color-accent);
}

body[data-irx-service="compression"] .irx-faq__item[open] summary:focus-visible {
  outline-color: #fff;
  box-shadow: inset 0 0 0 .18rem #0a0a0a, inset 0 0 0 .46rem #fff;
}

body[data-irx-service="compression"] .irx-faq__item[open] summary .irx-short-brand {
  color: #0a0a0a;
}

body[data-irx-service="compression"] .irx-faq__item[open] summary .irx-short-brand .s_accent {
  color: var(--color-accent) !important;
  -webkit-text-stroke: .20rem #0a0a0a;
  paint-order: stroke fill;
  text-shadow:
    .13rem 0 #0a0a0a,
    -.13rem 0 #0a0a0a,
    0 .13rem #0a0a0a,
    0 -.13rem #0a0a0a,
    .095rem .095rem #0a0a0a,
    -.095rem .095rem #0a0a0a,
    .095rem -.095rem #0a0a0a,
    -.095rem -.095rem #0a0a0a;
}

body[data-irx-service="compression"] .irx-faq__answer {
  padding: 0 1.6rem 1.5rem;
  color: var(--irx-muted);
  transform-origin: top center;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  body[data-irx-service="compression"] .irx-faq__item,
  body[data-irx-service="compression"] .irx-faq__item summary {
    transition: none;
  }
}