/* Calls to action inside articles (articles/_cta.html). The box opens its main link from anywhere on it;
   the other actions sit above that link. Dark, to match the article pages. */
.acta {
  /* the visitor's palette (static/atlas-palette.css): red by default, ocean / violet when chosen */
  --acta-accent: rgb(var(--xp-c-a2, 196, 0, 37)); --acta-accent-2: rgb(var(--xp-c-a, 255, 42, 74));
  --acta-ink: rgb(var(--xp-c-ink, 244, 245, 247)); --acta-bg: rgb(var(--xp-c-bg2, 11, 12, 16)); --acta-line: rgba(var(--xp-c-ink, 244, 245, 247), .1);
  position: relative; isolation: isolate; display: flex; gap: 0; margin: 30px 0; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--acta-line); color: var(--acta-ink); font-family: inherit; line-height: 1.6;
  background:
    radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--acta-accent) 26%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--acta-bg) 82%, var(--acta-ink) 6%), var(--acta-bg) 60%);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.acta:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acta-accent) 55%, transparent);
              box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--acta-accent) 25%, transparent); }
.acta--whatsapp { --acta-accent: #1fae5b; --acta-accent-2: #25d366; }
.acta--contact, .acta--link { --acta-accent: #5b8cff; --acta-accent-2: #7da4ff; }

.acta-media { flex: 0 0 38%; max-width: 38%; min-height: 220px; position: relative; overflow: hidden; }
.acta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0 !important;
                  border-radius: 0 !important; transition: transform .5s ease; cursor: pointer !important; }
.acta:hover .acta-media img { transform: scale(1.05); }
.acta-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, color-mix(in srgb, var(--acta-bg) 85%, transparent)); }
[dir="ltr"] .acta-media::after { background: linear-gradient(270deg, transparent 40%, color-mix(in srgb, var(--acta-bg) 85%, transparent)); }

.acta-body { flex: 1; min-width: 0; padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.acta-top { display: flex; align-items: center; gap: 10px; }
.acta-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto;
             background: color-mix(in srgb, var(--acta-accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--acta-accent) 35%, transparent); overflow: hidden; }
.acta-icon img { width: 100%; height: 100%; object-fit: contain; margin: 0 !important; border-radius: 0 !important; background: #fff; }
.acta-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
              padding: 4px 11px; border-radius: 99px; color: var(--acta-accent-2);
              background: color-mix(in srgb, var(--acta-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acta-accent) 30%, transparent); }
.acta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acta-accent-2); box-shadow: 0 0 0 0 var(--acta-accent-2); animation: acta-pulse 1.8s infinite; }
@keyframes acta-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); } 70% { box-shadow: 0 0 0 8px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.acta-title { font-size: 21px; font-weight: 900; line-height: 1.45; color: var(--acta-ink); text-wrap: balance; }
.acta-sub { margin: 0 !important; color: color-mix(in srgb, var(--acta-ink) 70%, transparent); font-size: 15px; line-height: 1.8; }
.acta-lines { list-style: none; margin: 2px 0 0 !important; padding: 0 !important; display: grid; gap: 4px; }
.acta-lines li { margin: 0 !important; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: color-mix(in srgb, var(--acta-ink) 72%, transparent); }
.acta-lines li .ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--acta-accent-2); }

.acta-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.acta a { text-decoration: none !important; }
.acta-main { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 14px; font-weight: 800; font-size: 15px;
             color: rgb(var(--xp-c-on-a, 255, 255, 255)) !important; background: var(--acta-accent);
             box-shadow: 0 10px 24px color-mix(in srgb, var(--acta-accent) 35%, transparent); transition: transform .15s, filter .15s; }
.acta-main::after { content: ""; position: absolute; inset: 0; z-index: 1; }          /* the whole box opens the main link */
.acta:hover .acta-main { filter: brightness(1.08); }
.acta-arrow { transition: transform .2s; display: inline-flex; }
[dir="ltr"] .acta-arrow .ico { transform: scaleX(-1); }
.acta .ico { width: 18px; height: 18px; flex: 0 0 auto; }
.acta-icon .ico { width: 22px; height: 22px; color: var(--acta-accent-2); }
.acta:hover .acta-arrow { transform: translateX(-4px); }
[dir="ltr"] .acta:hover .acta-arrow { transform: translateX(4px); }
.acta-act { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px;
            font-weight: 700; font-size: 13.5px; color: var(--acta-ink) !important; background: rgba(var(--xp-c-ink, 244, 245, 247), .06);
            border: 1px solid var(--acta-line); transition: background .15s, border-color .15s, color .15s, transform .15s; }
.acta-act:hover { background: rgba(var(--xp-c-ink, 244, 245, 247), .12); border-color: rgba(var(--xp-c-ink, 244, 245, 247), .25); transform: translateY(-1px); }
.acta-act--whatsapp:hover { border-color: rgba(37,211,102,.6); color: #4be08a !important; }
.acta-act--call:hover, .acta-act--book:hover { border-color: color-mix(in srgb, var(--acta-accent) 60%, transparent); color: var(--acta-accent-2) !important; }
.acta a:focus-visible { outline: 2px solid var(--acta-accent-2); outline-offset: 3px; }

/* banner: wide, the text beside the button */
.acta--banner .acta-body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 22px 26px; }
.acta--banner .acta-top { flex: 0 0 auto; }
.acta--banner .acta-badge { display: none; }
.acta--banner .acta-title { flex: 1 1 260px; font-size: 19px; }
.acta--banner .acta-sub { flex: 1 1 100%; order: 5; font-size: 14px; }
.acta--banner .acta-lines { display: none; }
.acta--banner .acta-actions { margin: 0; }

/* slim: one line, for the middle of the text */
.acta--slim { border-radius: 16px; margin: 22px 0; }
.acta--slim .acta-body { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; }
.acta--slim .acta-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 12px; }
.acta--slim .acta-badge, .acta--slim .acta-act { display: none; }
.acta--slim .acta-title { flex: 1; font-size: 16px; font-weight: 800; }
.acta--slim .acta-actions { margin: 0; }
.acta--slim .acta-main { padding: 9px 16px; font-size: 14px; }

.acta--end { margin-top: 42px; }

@media (max-width: 640px) {
  .acta { flex-direction: column; }
  .acta-media { flex-basis: auto; max-width: 100%; min-height: 0; aspect-ratio: 16 / 8; }
  .acta-media::after { background: linear-gradient(180deg, transparent 40%, rgba(20,26,39,.9)) !important; }
  .acta-body { padding: 20px 18px; }
  .acta-title { font-size: 19px; }
  .acta-main { flex: 1 1 100%; justify-content: center; }
  .acta-act { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .acta--slim .acta-body { flex-wrap: wrap; }
  .acta--slim .acta-main { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .acta, .acta * { transition: none !important; animation: none !important; } }

/* inside the article's text: its own rules for pictures and lists don't reach the CTA */
.acta .acta-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
                        max-width: none !important; object-fit: cover; border: 0 !important; display: block; }
.acta .acta-lines li { padding: 0 !important; }
.acta .acta-lines li::before { content: none !important; display: none !important; }
.acta .acta-icon img { border: 0 !important; height: 100% !important; }