/* Home "Sistema de esterilización" · C «Dos grupos» (block.tpl): Autoclaves | Preparación y apoyo, all at true scale. */
/* Ink and accents from the official palette (900 #1c505d / 600), as in the units showcase (Carlos 25-oct). */
.rtg-st--c { --rtg-ease-fluid: cubic-bezier(.16, 1, .3, 1); --rtg-ink: var(--rtg-900); --rtg-muted: #6e6e73; --rtg-teal: var(--rtg-600); --rtg-line: #e5e5ea; --rtg-floor: #ededf0; }
.rtg-st--c a { color: inherit; text-decoration: none; }

/* Same one-view mechanism as "Unidades dentales" (roentgen-units.css): section spacing, logo band, then a stage of fixed
   height that fits below the sticky header (141px) with --rtg-st-breath above and below. */
.rtg-st--c {
  --rtg-st-space: var(--rtg-section-gap); --rtg-st-space-end: var(--rtg-section-gap-end); --rtg-st-breath: 24px; --rtg-st-logo-h: 84px; --rtg-st-logo-gap: 64px; --rtg-st-min: 460px;
  --rtg-st-h: clamp(460px, calc(100svh - 141px - 2 * var(--rtg-st-breath) - var(--rtg-st-logo-h) - var(--rtg-st-logo-gap)), 760px);
  --rtg-st-c-gap: 28px;    /* between the products of a group; labels may use half of it on each side */
  --rtg-st-c-gutter: 56px; /* white space on each side of the hairline between the groups */
  --rtg-st-c-air: 14px;    /* white space between the products and the table line under them (Carlos 25-oct) */
  --rtg-st-c-v: calc(150px + var(--rtg-st-c-air)); /* everything in the stage that is not the shelf: caption, air, labels */
}
.rtg-st.rtg-st--c { padding: var(--rtg-st-space) 0 var(--rtg-st-space-end); container-type: inline-size; }
/* Logo gap +20px at every width, as in the units showcase (Carlos 25-oct). */
.rtg-st--c .rtg-st-c__brand { margin: 0 0 var(--rtg-st-logo-gap); line-height: 0; text-align: center; }
.rtg-st--c .rtg-st-c__brand img { display: inline-block; width: auto; max-width: 100%; height: var(--rtg-st-logo-h); }

/* One scale for all six. The template passes how many products each group has and their total width in mm at one
   scale (--rtg-st-c-span-a/-s: real height × the product's aspect in its photo) and the tallest height (--rtg-st-c-tall).
   px per mm = the smaller of what the height allows (stage minus labels, over the tallest product) and what the width
   allows (stage minus gaps, gutters and the hairline, over all six side by side; 1% spare for rounding). The cq units
   resolve against the stage, a size container: nothing between it and the photos may be a container. */
.rtg-st--c .rtg-st-c__stage {
  --rtg-px-per-mm: min(
    calc((100cqh - var(--rtg-st-c-v)) / var(--rtg-st-c-tall, 475)),
    calc((100cqw - (var(--rtg-st-c-na, 3) + var(--rtg-st-c-ns, 3) - 1) * var(--rtg-st-c-gap) - 2 * var(--rtg-st-c-gutter) - 1px) / ((var(--rtg-st-c-span-a, 1568) + var(--rtg-st-c-span-s, 868)) * 1.01))
  );
  --rtg-st-c-shelf: calc(var(--rtg-st-c-tall, 475) * var(--rtg-px-per-mm));
  display: grid; grid-auto-columns: auto; grid-auto-flow: column; justify-content: center; align-content: center;
  height: min(var(--rtg-st-h), max(var(--rtg-st-min), calc((100cqw - 600px) * .92))); container-type: size;
}
/* Desktop: the products sit right under the logo (top-aligned, Carlos 25-oct) and the stage gives back the height the
   line-up does not use, so the section is never taller than the units showcase and leaves no hole before the blog.
   Same terms as --rtg-px-per-mm, evaluated against the section (the stage's own cq units point to its ancestor). */
@media (min-width: 992px) {
  .rtg-st--c .rtg-st-c__stage {
    --rtg-st-c-stage-h: min(var(--rtg-st-h), max(var(--rtg-st-min), calc((100cqw - 600px) * .92)));
    --rtg-st-c-k: min(
      calc((var(--rtg-st-c-stage-h) - var(--rtg-st-c-v)) / var(--rtg-st-c-tall, 475)),
      calc((100cqw - (var(--rtg-st-c-na, 3) + var(--rtg-st-c-ns, 3) - 1) * var(--rtg-st-c-gap) - 2 * var(--rtg-st-c-gutter) - 1px) / ((var(--rtg-st-c-span-a, 1568) + var(--rtg-st-c-span-s, 868)) * 1.01))
    );
    align-content: start;
    margin-bottom: calc(var(--rtg-st-c-tall, 475) * var(--rtg-st-c-k) + var(--rtg-st-c-v) - var(--rtg-st-c-stage-h));
  }
}

/* Groups: a tiny caption, the shelf, the labels; the column is exactly as wide as its products (its caption never
   widens it). Both groups start at the same top and their shelves are equally tall, so one baseline. */
.rtg-st--c .rtg-st-c__group { display: grid; grid-template-columns: min-content; align-content: start; min-width: 0; transition: opacity .5s var(--rtg-ease-fluid); }
.rtg-st--c .rtg-st-c__group + .rtg-st-c__group { margin-left: var(--rtg-st-c-gutter); padding-left: var(--rtg-st-c-gutter); border-left: 1px solid var(--rtg-line); }
.rtg-st--c .rtg-st-c__cap { width: 0; min-width: 100%; margin: 0 0 20px; overflow: hidden; color: var(--rtg-muted); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rtg-st--c .rtg-st-c__shelf { display: flex; align-items: flex-start; gap: var(--rtg-st-c-gap); margin: 0; padding: 0; list-style: none; }

/* A product: its slot is exactly the product's drawn width; the photo (square, white margins) is sized so the product
   inside it is real-mm × px-per-mm tall, centered, with its bottom on the baseline. The white margins are clipped. */
.rtg-st--c .rtg-st-c__item {
  --rtg-box-w: calc(1 - var(--rtg-box-l, 0) - var(--rtg-box-r, 0));
  --rtg-box-h: calc(1 - var(--rtg-box-t, 0) - var(--rtg-box-b, 0));
  --rtg-side: calc(var(--rtg-real-mm, 300) * var(--rtg-px-per-mm) / var(--rtg-box-h));
  position: relative; flex: none; width: calc(var(--rtg-side) * var(--rtg-box-w)); transition: opacity .5s var(--rtg-ease-fluid);
}
.rtg-st--c .rtg-st-c__item::before { content: ""; position: absolute; top: calc(var(--rtg-st-c-shelf) + var(--rtg-st-c-air)); right: calc(var(--rtg-st-c-gap) / -2); left: calc(var(--rtg-st-c-gap) / -2); height: 1px; background: var(--rtg-floor); } /* the shared table */
.rtg-st--c .rtg-st-c__link { display: flex; flex-direction: column; align-items: center; border-radius: 6px; }
.rtg-st--c .rtg-st-c__photo { position: relative; display: block; width: 100%; height: var(--rtg-st-c-shelf); overflow: clip; }
.rtg-st--c .rtg-st-c__photo img {
  position: absolute; bottom: calc(var(--rtg-side) * var(--rtg-box-b, 0) * -1); left: calc(50% - var(--rtg-side) * (var(--rtg-box-l, 0) + var(--rtg-box-w) / 2));
  display: block; width: var(--rtg-side); max-width: none; height: var(--rtg-side); mix-blend-mode: multiply; pointer-events: none; /* white melts into the page; its margins must not catch clicks */
}

/* Labels may use half a gap on each side, so short products still read their kind in one or two lines. */
.rtg-st--c .rtg-st-c__label { display: flex; flex-direction: column; align-items: center; width: calc(100% + var(--rtg-st-c-gap)); margin: calc(14px + var(--rtg-st-c-air)) calc(var(--rtg-st-c-gap) / -2) 0; text-align: center; }
.rtg-st--c .rtg-st-c__model {
  max-width: 100%; padding-bottom: 3px; overflow: hidden; color: var(--rtg-ink); font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(var(--rtg-teal), var(--rtg-teal)) 50% 100% / 0 2px no-repeat; transition: background-size .6s var(--rtg-ease-fluid);
}
.rtg-st--c .rtg-st-c__kind { margin-top: 2px; color: var(--rtg-muted); font-size: 12.5px; line-height: 1.3; text-wrap: balance; }
.rtg-st--c .rtg-st-c__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.35; }
.rtg-st--c .rtg-st-c__badge { color: var(--rtg-muted); font-size: 11.5px; font-weight: 600; }
.rtg-st--c .rtg-st-c__price { color: var(--rtg-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Promotion (live from PrestaShop): the crossed-out list price in neutral grey with the discount in the promotion
   colour first, then the sale price in bold ink. */
.rtg-st--c .rtg-st-c__price.is-sale { font-weight: 700; }
.rtg-st--c .rtg-st-c__offer { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 6px; margin-top: 4px; font-size: 11.5px; line-height: 1.35; }
.rtg-st--c .rtg-st-c__tag { padding: 1px 7px; border-radius: calc(var(--rtg-radius) - 8px); background: var(--rtg-price-sale); color: #fff; font-weight: 700; }
.rtg-st--c .rtg-st-c__offer s { color: var(--rtg-price-was); font-variant-numeric: tabular-nums; }

/* The effect: nothing changes size. The other group dims, the siblings quiet down, the model gets a teal line.
   Entering waits 120ms so sweeping across the row does not flicker; leaving is immediate. */
.rtg-st--c .rtg-st-c__link:focus-visible { outline: 2px solid var(--rtg-teal); outline-offset: 4px; }
.rtg-st--c .rtg-st-c__stage:has(.rtg-st-c__link:focus-visible) .rtg-st-c__group:not(:has(.rtg-st-c__link:focus-visible)) { opacity: .4; transition-delay: .12s; }
.rtg-st--c .rtg-st-c__shelf:has(.rtg-st-c__link:focus-visible) .rtg-st-c__item:not(:has(.rtg-st-c__link:focus-visible)) { opacity: .7; transition-delay: .12s; }
.rtg-st--c .rtg-st-c__link:focus-visible .rtg-st-c__model { background-size: 100% 2px; }
@media (hover: hover) {
  .rtg-st--c .rtg-st-c__stage:has(.rtg-st-c__link:hover) .rtg-st-c__group:not(:has(.rtg-st-c__link:hover)) { opacity: .4; transition-delay: .12s; }
  .rtg-st--c .rtg-st-c__shelf:has(.rtg-st-c__link:hover) .rtg-st-c__item:not(:has(.rtg-st-c__link:hover)) { opacity: .7; transition-delay: .12s; }
  .rtg-st--c .rtg-st-c__link:hover .rtg-st-c__model { background-size: 100% 2px; transition-delay: .12s; }
}

/* Short desktop windows (1366×768, 1280×720): smaller logo band and labels, as in "Unidades dentales". */
@media (min-width: 992px) and (max-height: 760px) {
  .rtg-st--c { --rtg-st-breath: 16px; --rtg-st-logo-h: 58px; --rtg-st-logo-gap: 50px; --rtg-st-min: 360px; --rtg-st-c-air: 10px; --rtg-st-c-v: calc(136px + var(--rtg-st-c-air)); --rtg-st-h: clamp(360px, calc(100svh - 141px - 2 * var(--rtg-st-breath) - var(--rtg-st-logo-h) - var(--rtg-st-logo-gap)), 760px); }
  .rtg-st--c .rtg-st-c__cap { margin-bottom: 14px; }
  .rtg-st--c .rtg-st-c__label { margin-top: calc(10px + var(--rtg-st-c-air)); }
  .rtg-st--c .rtg-st-c__model { font-size: 14px; }
  .rtg-st--c .rtg-st-c__kind { font-size: 12px; }
  .rtg-st--c .rtg-st-c__meta { margin-top: 3px; font-size: 12.5px; line-height: 1.3; }
  }

/* Tablet and phone: no fixed height. The groups stack, autoclaves first, hairline on top of the support group; one
   scale for both rows: the smaller of what each row needs to fit the width (gaps plus half a gap at each end). */
@media (max-width: 991.98px) {
  .rtg-st--c { --rtg-st-logo-h: 70px; --rtg-st-logo-gap: 56px; --rtg-st-c-gap: 24px; }
  .rtg-st--c .rtg-st-c__stage {
    --rtg-px-per-mm: min(calc((100cqw - var(--rtg-st-c-na, 3) * var(--rtg-st-c-gap)) / max(var(--rtg-st-c-span-a, 1568), 1)), calc((100cqw - var(--rtg-st-c-ns, 3) * var(--rtg-st-c-gap)) / max(var(--rtg-st-c-span-s, 868), 1))); /* max(…, 1): a group with nothing on sale (span 0) must not divide by zero */
    grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); justify-content: stretch; height: auto; container-type: inline-size;
  }
  .rtg-st--c .rtg-st-c__group { grid-template-columns: minmax(0, 1fr); padding-inline: calc(var(--rtg-st-c-gap) / 2); }
  .rtg-st--c .rtg-st-c__group + .rtg-st-c__group { margin: 36px 0 0; padding-top: 32px; padding-left: calc(var(--rtg-st-c-gap) / 2); border-top: 1px solid var(--rtg-line); border-left: 0; }
  .rtg-st--c .rtg-st-c__cap { margin-bottom: 16px; }
}
/* Phone: two autoclaves per row (the shelf wraps, B22 under them) so they are not tiny; the support row and the
   autoclaves keep the same scale. 0.7 × the autoclave span leaves room for the two first ones and pushes the third. */
@media (max-width: 575.98px) {
  .rtg-st--c { --rtg-st-logo-h: 58px; --rtg-st-logo-gap: 48px; }
  .rtg-st--c .rtg-st-c__stage { --rtg-px-per-mm: min(calc((100cqw - 2 * var(--rtg-st-c-gap)) / max(var(--rtg-st-c-span-a, 1568) * .7, 1)), calc((100cqw - var(--rtg-st-c-ns, 3) * var(--rtg-st-c-gap)) / max(var(--rtg-st-c-span-s, 868), 1))); }
  .rtg-st--c .rtg-st-c__shelf { flex-wrap: wrap; row-gap: 24px; }
  .rtg-st--c .rtg-st-c__model { font-size: 13px; }
  .rtg-st--c .rtg-st-c__kind { font-size: 11.5px; }
  .rtg-st--c .rtg-st-c__meta { font-size: 12px; }
  .rtg-st--c .rtg-st-c__badge { font-size: 11px; }
  }
@media (prefers-reduced-motion: reduce) {
  .rtg-st--c :is(.rtg-st-c__group, .rtg-st-c__item, .rtg-st-c__model) { transition-duration: .01ms !important; transition-delay: 0s !important; }
}