/* Kontta motion layer.

   The brand is "serena, exacta, cálida": nothing bounces, nothing shouts.
   Motion here does three jobs only:
     1. continuity between pages (cross-document view transitions);
     2. lists that arrive as lists, settling into place as they scroll in;
     3. a clean handoff from the prerendered page to the live one
        (see the swap script in prerender.mjs).
   Every rule is progressive: without support, the page is simply static. */

/* --- Page to page -------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: k-page-out .18s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: k-page-in .42s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes k-page-out { to { opacity: 0; } }
@keyframes k-page-in  { from { opacity: 0; transform: translateY(10px); } }

/* --- Lists settling in ----------------------------------------------------
   Tagged by the build (`k-rv`): cards and rows laid out by a grid inside a
   section. Driven by scroll position rather than time, so re-renders and the
   prerender swap cannot replay it, and nothing is hidden on browsers that do
   not support scroll timelines. The slight defocus is the ledger "resolving". */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .k-rv {
      animation: k-rv linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    /* Siblings on the same row start a beat apart. Capped at three. */
    .k-rv:nth-child(3n + 2) { animation-range: entry 8% entry 78%; }
    .k-rv:nth-child(3n + 3) { animation-range: entry 16% entry 86%; }
  }
}
@keyframes k-rv {
  from { opacity: 0; transform: translateY(22px); filter: blur(3px); }
  60%  { filter: none; }
  to   { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --- FAQ disclosures ------------------------------------------------------
   Native <details>: every answer is in the document for crawlers and answer
   engines, keyboard and screen readers get the platform behaviour, and the
   page collects them into its FAQPage schema at build time. */
details[data-faq] summary { list-style: none; cursor: pointer; border-radius: 14px; flex-wrap: nowrap !important; flex-direction: row !important; align-items: center !important; }
details[data-faq] summary > * { min-width: 0; }
details[data-faq] .kf-ico { flex-shrink: 0; }
details[data-faq] summary::-webkit-details-marker { display: none; }
details[data-faq] summary:focus-visible { outline: 2px solid #0e5f42; outline-offset: 3px; }
details[data-faq] .kf-ico { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
details[data-faq][open] .kf-ico { transform: rotate(45deg); }
details[data-faq] { transition: border-color .22s ease, box-shadow .22s ease; }
details[data-faq][open] { border-color: #cfe0d6 !important; box-shadow: 0 14px 34px -24px rgba(24, 43, 33, .28); }
details[data-faq][open] .kf-a { animation: kf-open .4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes kf-open { from { opacity: 0; transform: translateY(-4px); } }
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  details[data-faq]::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .35s cubic-bezier(.16, 1, .3, 1), content-visibility .35s allow-discrete;
  }
  details[data-faq][open]::details-content { block-size: auto; }
}