/* Home "Unidades dentales" compact showcase (units-options.tpl): unit info and package switch | big photo | models. */
/* Ink and accents from the official «Eastern Blue» palette (Carlos 25-oct): near-black → 900 (#1c505d, Carlos 25-oct), teal → 600. */
.rtg-units { --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-units a { color: inherit; text-decoration: none; }
.rtg-units img { display: block; max-width: 100%; height: auto; mix-blend-mode: multiply; } /* product photos sit on white: let the white melt into the page */

/* 2F · Escaparate compacto: logo, then info | big photo | model picker, one view tall on desktop.
   Spacing: the standard --rtg-section-gap above the logo and, through rtgFitEnd (roentgen-units.js), under the price
   list before the dark video band (Carlos 26-oct); the logo band and
   the showcase fit in the viewport below the sticky header (141px) with --rtg-sf-breath above and below. */
.rtg-stage--f {
  --rtg-sf-space: var(--rtg-section-gap); --rtg-sf-space-end: var(--rtg-section-gap-end); --rtg-sf-breath: 24px; --rtg-sf-logo-h: 84px; --rtg-sf-logo-gap: 64px;
  --rtg-sf-h: clamp(460px, calc(100svh - 141px - 2 * var(--rtg-sf-breath) - var(--rtg-sf-logo-h) - var(--rtg-sf-logo-gap)), 760px);
  --rtg-sf-teal-text: var(--rtg-700);
}
.rtg-units.rtg-stage--f { padding: var(--rtg-sf-space) 0 var(--rtg-sf-space-end); container-type: inline-size; }
/* Logo gap +20px at every width (Carlos 25-oct). */
.rtg-stage--f .rtg-sf__brand { position: relative; z-index: 1; margin: 0 0 var(--rtg-sf-logo-gap); line-height: 0; text-align: center; }
.rtg-stage--f .rtg-sf__brand img { display: inline-block; width: auto; max-width: 100%; height: var(--rtg-sf-logo-h); mix-blend-mode: normal; }
/* No taller than the photo needs: the middle column is the section width minus 300 + 236 + 2 × 32, and the units are at
   most ~92% as tall as wide, so narrower desktops do not get empty bands above and below the photo. */
.rtg-stage--f .rtg-sf { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) 236px; gap: 32px; height: min(var(--rtg-sf-h), max(var(--rtg-sf-min, 460px), calc((100cqw - 600px) * .92))); }

/* Left: model, package switch, name, price, CTA and what the package includes. */
.rtg-stage--f .rtg-sf__info { position: relative; display: grid; min-width: 0; min-height: 0; }
.rtg-stage--f .rtg-sf__panel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; min-height: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s ease, transform .8s var(--rtg-ease-fluid), visibility 0s linear .45s; }
.rtg-stage--f .rtg-sf__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .1s, transform .9s var(--rtg-ease-fluid) .1s; }
/* Model in Light and a step smaller so it doesn't compete with the Roentgen logo above (Carlos 25-oct). */
.rtg-stage--f .rtg-sf__model { margin: 0; color: var(--rtg-ink); font-size: clamp(34px, 3.2vw, 48px); font-weight: 300; line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.rtg-stage--f .rtg-sf__segments { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; width: 100%; padding: 4px; border-radius: var(--rtg-radius); background: #f2f3f5; } /* official radius; segments nest 4px inside */
.rtg-stage--f .rtg-sf__seg { overflow: hidden; padding: 7px 6px; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: calc(var(--rtg-radius) - 4px); background: transparent; color: var(--rtg-muted); font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.rtg-stage--f .rtg-sf__seg[aria-pressed="true"] { background: var(--rtg-ink); color: #fff; }
.rtg-stage--f .rtg-sf__views { display: grid; min-height: 0; }
.rtg-stage--f .rtg-sf__view { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.rtg-stage--f .rtg-sf__view.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.rtg-stage--f .rtg-sf__name { margin: 0; color: var(--rtg-muted); font-size: 14px; line-height: 1.35; }
.rtg-stage--f .rtg-offer__price { margin: 0; color: var(--rtg-ink); font-size: 26px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Price block (offer.tpl, live from PrestaShop). On promotion: a «Promoción −10%» tag in the promotion colour, the
   sale price in the same petrol ink as any price, and the crossed-out list price in neutral grey under it. Colours
   from the 25-oct price-colour research: dark price, grey struck list price, colour only on the tag. */
.rtg-stage--f .rtg-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rtg-stage--f .rtg-offer__tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: calc(var(--rtg-radius) - 6px); background: var(--rtg-price-sale); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; }
.rtg-stage--f .rtg-offer__was { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--rtg-price-was); font-size: 13px; line-height: 22px; }
.rtg-stage--f .rtg-offer__was s { font-variant-numeric: tabular-nums; }
/* Model picker with promotions: list price and promotion columns, under small headings. */
@media (min-width: 992px) {
  .rtg-stage--f.rtg-stage--offers .rtg-sf { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) 328px; } /* room for «RTG-PANDA» beside two price columns */
  .rtg-stage--offers .rtg-sf__list > li.rtg-sf__list-head { display: grid; grid-template-columns: minmax(0, 1fr) 88px 88px; flex: none; gap: 8px; padding: 0 14px 6px 17px; color: var(--rtg-muted); font-size: 11px; font-weight: 600; line-height: 16px; text-align: right; white-space: nowrap; }
  .rtg-stage--offers .rtg-sf__list > li.rtg-sf__list-head span:first-child { text-align: left; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick { display: grid; grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 8px; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick-was { color: var(--rtg-price-was); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick-price { text-align: right; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick-was.is-plain { color: inherit; font-size: 12.5px; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick-price.is-none { color: var(--rtg-line); }
}
@media (max-width: 991.98px) {
  .rtg-stage--offers .rtg-sf__list > li.rtg-sf__list-head { display: none; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick-was { color: var(--rtg-price-was); font-size: 11.5px; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick-was.is-plain { color: inherit; font-size: inherit; }
  .rtg-stage--f.rtg-stage--offers .rtg-sf__pick-price.is-none { display: none; }
}
.rtg-stage--f .rtg-sf__pick-price.is-sale { color: var(--rtg-ink); font-weight: 700; }
.rtg-stage--f .rtg-sf__cta { display: inline-flex; align-items: center; min-height: 42px; margin-top: 4px; padding: 0 20px; border-radius: var(--rtg-radius); background: var(--rtg-ink); color: #fff; font-size: 14px; font-weight: 600; transition: background-color .2s ease; }
/* «Incluye» heads the package list and carries its divider (Carlos 26-oct). */
.rtg-stage--f .rtg-sf__items-title { align-self: stretch; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rtg-line); color: var(--rtg-ink); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rtg-stage--f .rtg-sf__items { display: grid; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; }
.rtg-stage--f .rtg-sf__items li { position: relative; padding-left: 18px; color: var(--rtg-ink); font-size: 12.5px; line-height: 1.35; }
.rtg-stage--f .rtg-sf__items li::before { content: ""; position: absolute; top: .3em; left: 2px; width: 9px; height: 5px; border-bottom: 2px solid var(--rtg-teal); border-left: 2px solid var(--rtg-teal); transform: rotate(-45deg); }

/* Middle: the photo fills the whole height; options and models cross-fade in place. */
/* Every photo carries its own white margins (7–22% above the unit). The template passes where the unit sits in the
   photo (--rtg-box-t/r/b/l, fractions of its side, from rtghomeproducts.php), and the photo is scaled and placed so the
   unit itself fills the box, top-aligned: the gap to the logo is exactly --rtg-sf-logo-gap for every model. */
.rtg-stage--f .rtg-sf__media { position: relative; min-width: 0; min-height: 0; container-type: size; }
.rtg-stage--f .rtg-sf__shot { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .5s ease, transform .9s var(--rtg-ease-fluid), visibility 0s linear .5s; }
.rtg-stage--f .rtg-sf__shot.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease, transform 1s var(--rtg-ease-fluid); }
.rtg-stage--f .rtg-sf__shot img {
  --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: min(calc(100cqh / var(--rtg-box-h)), calc(100cqw / var(--rtg-box-w)));
  position: absolute; top: calc(var(--rtg-side) * var(--rtg-box-t, 0) * -1); left: calc(50cqw - var(--rtg-side) * (var(--rtg-box-l, 0) + var(--rtg-box-w) / 2));
  width: var(--rtg-side); max-width: none; height: var(--rtg-side); pointer-events: none; /* its white overflow must not catch clicks */
}

/* Right: the line-up; rows share the height so 6–12 models still fit. */
/* The list runs the showcase's full height (rows keep 52px, the spare room goes between them): its last row marks the
   bottom of the section, which then sits one top-gap above the next one (roentgen-units.js; Carlos 26-oct). */
.rtg-stage--f .rtg-sf__list { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-height: 0; margin: 0; padding: 0; list-style: none; }
.rtg-stage--f .rtg-sf__list li { display: flex; flex: 0 1 52px; min-height: 0; }
.rtg-stage--f .rtg-sf__pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; padding: 0 14px; border: 0; border-left: 3px solid transparent; border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0; background: transparent; color: var(--rtg-muted); text-align: left; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.rtg-stage--f .rtg-sf__pick.is-active { border-left-color: var(--rtg-teal); background: var(--rtg-50); color: var(--rtg-ink); }
.rtg-stage--f .rtg-sf__pick-model { overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rtg-stage--f .rtg-sf__pick-price { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.rtg-stage--f :is(.rtg-sf__seg, .rtg-sf__pick, .rtg-sf__cta):focus-visible { outline: 2px solid var(--rtg-teal); outline-offset: 2px; }
@media (hover: hover) {
  .rtg-stage--f .rtg-sf__seg:not([aria-pressed="true"]):hover { color: var(--rtg-ink); }
  .rtg-stage--f .rtg-sf__cta:hover { background: var(--rtg-sf-teal-text); }
  .rtg-stage--f .rtg-sf__pick:not(.is-active):hover { background: #f7f8f9; color: var(--rtg-ink); }
}

/* Short desktop windows (1366×768, 1280×720 laptops): a smaller logo band gives the photo the height back. */
@media (min-width: 992px) and (max-height: 760px) {
  .rtg-stage--f { --rtg-sf-breath: 16px; --rtg-sf-logo-h: 58px; --rtg-sf-logo-gap: 50px; --rtg-sf-min: 360px; --rtg-sf-h: clamp(360px, calc(100svh - 141px - 2 * var(--rtg-sf-breath) - var(--rtg-sf-logo-h) - var(--rtg-sf-logo-gap)), 760px); }
}
/* Short desktop windows, and narrow desktops where the showcase drops to its 460px floor (section ≤ 1100px):
   tighter type so the info column still fits the fixed height. */
@media (min-width: 992px) and (max-height: 820px) {
  .rtg-stage--f .rtg-sf__panel { gap: 10px; }
  .rtg-stage--f .rtg-sf__model { font-size: clamp(32px, 3vw, 42px); }
  .rtg-stage--f .rtg-offer__price { font-size: 22px; }
  .rtg-stage--f .rtg-sf__items-title { margin-top: 6px; padding-top: 6px; font-size: 11px; }
  .rtg-stage--f .rtg-sf__items { margin-top: 4px; gap: 1px; }
  .rtg-stage--f .rtg-sf__items li { font-size: 12px; line-height: 1.3; }
}
@container (min-width: 930px) and (max-width: 1100px) {
  .rtg-stage--f .rtg-sf__panel { gap: 10px; }
  .rtg-stage--f .rtg-sf__model { font-size: clamp(32px, 3vw, 42px); }
  .rtg-stage--f .rtg-offer__price { font-size: 22px; }
  .rtg-stage--f .rtg-sf__items-title { margin-top: 6px; padding-top: 6px; font-size: 11px; }
  .rtg-stage--f .rtg-sf__items { margin-top: 4px; gap: 1px; }
  .rtg-stage--f .rtg-sf__items li { font-size: 12px; line-height: 1.3; }
}
@media (min-width: 992px) and (max-height: 700px) {
  .rtg-stage--f .rtg-sf__panel { gap: 8px; }
  .rtg-stage--f .rtg-sf__model { font-size: 32px; }
  .rtg-stage--f .rtg-sf__name { font-size: 13px; }
  .rtg-stage--f .rtg-sf__cta { min-height: 36px; }
  .rtg-stage--f .rtg-sf__items li { font-size: 11.5px; line-height: 1.25; }
}

/* Tablet and phone: no fixed height; photo first, then info, then the models in rows. */
@media (max-width: 991.98px) {
  .rtg-stage--f { --rtg-sf-logo-h: 70px; --rtg-sf-logo-gap: 56px; }
  .rtg-stage--f .rtg-sf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "info" "list"; gap: 20px; height: auto; }
  .rtg-stage--f .rtg-sf__media { grid-area: media; aspect-ratio: 1; }
  .rtg-stage--f .rtg-sf__info { grid-area: info; }
  .rtg-stage--f .rtg-sf__panel { justify-content: flex-start; }
  .rtg-stage--f .rtg-sf__panel:not(.is-active) { position: absolute; inset: 0 0 auto; }
  .rtg-stage--f .rtg-sf__view:not(.is-active) { position: absolute; inset: 0 0 auto; }
  .rtg-stage--f .rtg-sf__views { position: relative; }
  .rtg-stage--f .rtg-sf__list { grid-area: list; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rtg-stage--f .rtg-sf__list li { display: block; }
  .rtg-stage--f .rtg-sf__pick { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-left: 0; border-bottom: 2px solid transparent; border-radius: var(--rtg-radius); }
  .rtg-stage--f .rtg-sf__pick.is-active { border-bottom-color: var(--rtg-teal); }
}
@media (max-width: 767.98px) {
  .rtg-stage--f { --rtg-sf-logo-h: 58px; --rtg-sf-logo-gap: 48px; }
  .rtg-stage--f .rtg-sf__model { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .rtg-stage--f :is(.rtg-sf__panel, .rtg-sf__view, .rtg-sf__shot, .rtg-sf__seg, .rtg-sf__pick) { transition-duration: .01ms !important; transition-delay: 0s !important; }
}