/* App background token (webapp + checkout): subtle brand ambience behind the shell.
   NOTE: The site now uses a single decorative background image across the whole webapp.
   We keep `--prtk-app-bg` as the base color, and layer the image on `body` so it feels like
   the background of the entire site (from top behind the header through the whole body). */
:root{
  /* Base background color */
  --prtk-app-bg: var(--ptk-bg, #F8FAFC);
  /* La ilustración decorativa de fondo se retiró: iba en `cover` y `fixed`
     detrás de toda la app, así que asomaba en cualquier página con espacio
     libre. El fondo es el color liso de arriba. */
  --prtk-app-bg-image: none;
}

/* Webapp pages: global site-like background */
body.prtk-webapp:not(.prtk-meeting-page),
body.prtk-page-ptk-wall:not(.prtk-meeting-page){
  background-color: var(--prtk-app-bg) !important;
  background-image: none !important;
}

/* Some templates (public profiles, special routes) may not set `prtk-webapp`.
   Use the server-side `ptk-has-app` class as a reliable fallback.
   Exclude checkout-like pages (they must stay clean). */
html.ptk-has-app:not(.prtk-meeting-page),
body.ptk-has-app:not(.prtk-checkout-like):not(.prtk-meeting-page){
  background-color: var(--prtk-app-bg) !important;
  background-image: none !important;
}
@media (max-width: 820px){
  body.ptk-has-app:not(.prtk-checkout-like):not(.prtk-meeting-page){
    background-attachment: scroll !important;
    background-size: cover !important;
  }
}

@media (max-width: 820px){
  body.prtk-webapp:not(.prtk-meeting-page),
  body.prtk-page-ptk-wall:not(.prtk-meeting-page){ background-attachment: scroll; background-size: cover; }
}

/* Checkout-like pages keep the clean background (no artwork). */
body.prtk-checkout-like{
  background: var(--prtk-app-bg);
  background-repeat: no-repeat;
}

.prititak-app{
  --ptk-container: var(--prtk-container, 1240px);
  /* Transparent so the BODY background shows through (site-like). */
  background: transparent !important;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: var(--ptk-4) 0 var(--ptk-6); /* reduced top spacing so content sits under the header */
}

@media (max-width: 640px){
  .prititak-app{ padding-top: var(--ptk-4); /* reduce top padding on small screens */ }
}

/* Webapp pages: top spacing is locked via ptk-ui-harmony-fix.css (padding-top !important)
   to guarantee consistency across all pages regardless of theme container padding. */

.prititak-app :where(.ptk-wrap){
  max-width: min(var(--ptk-container, 1240px), calc(100vw - 18px));
  width: min(100%, var(--ptk-container, 1240px));
  margin-inline: auto;
  padding-inline:
    calc(clamp(10px, 1vw, 16px) + env(safe-area-inset-left, 0px))
    calc(clamp(10px, 1vw, 16px) + env(safe-area-inset-right, 0px));
}

/* Tablets (iPad incl. landscape up to 1366px): use full-width layout like the header.
   Keeps a small gutter so content doesn't touch the edges.
   NOTE: iPad landscape can be 1366px wide, so 1024px was too narrow. */
@media (min-width: 641px) and (max-width: 1366px){
  .prititak-app :where(.ptk-wrap){
    max-width: var(--ptk-container, 1240px);
    padding-inline:
      calc(14px + env(safe-area-inset-left, 0px))
      calc(14px + env(safe-area-inset-right, 0px));
  }
}

.prititak-app :where(.ptk-shell){
  /* IMPORTANT:
     The "rounded ambient canvas" behind the cards (the big soft/grey layer)
     must be removed completely so it doesn't sit behind/over the page.
     We keep spacing (padding) but eliminate the visual layer (bg/border/shadow). */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 20px; /* keep breathing room without adding a visible layer */
  animation: ptk-rise 360ms var(--ptk-ease) both;
  position: relative; /* create stacking context so shadows appear above later page elements */
  z-index: 20; /* raise above footer and similar page chrome */
  margin-bottom: 12px; /* small separation from footer */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
} 

.prititak-app :where(.ptk-page-title){
  margin: 0;
  font-size: var(--ptk-fs-28);
  line-height: var(--ptk-lh-tight);
  font-weight: var(--ptk-fw-900);
  letter-spacing: var(--ptk-ls-tight);
  font-family: var(--ptk-font-display);
}

.prititak-app :where(.ptk-subtitle){
  margin: var(--ptk-2) 0 0;
  color: var(--ptk-text-muted);
  font-size: var(--ptk-fs-14);
  line-height: 1.45;
}

.prititak-app :where(.ptk-subtitle--tight){
  margin-top: 0;
}

.prititak-app :where(.ptk-divider){
  border: 0;
  height: 1px;
  background: var(--ptk-border);
  margin: var(--ptk-6) 0;
}

/* Canonical “page header” card (reuses existing hero card markup). */
.prititak-app .ptk-card--hero{
  position: relative;
  overflow: hidden;
  /* White hero so it clearly separates from the (colorful) page background. */
  background: var(--ptk-surface);
  border: 1px solid color-mix(in oklab, var(--ptk-border) 80%, transparent);
  box-shadow: var(--ptk-shadow-md);
}

@keyframes ptk-rise{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px){
  .prititak-app :where(.ptk-shell){
    padding: var(--ptk-5);
    border-radius: 0 !important;
  }
}