/* Playground Footer presentation · contrato 4.2
   Theme = renderer/markup. Playground = configuración visual acotada al Footer.
   Este archivo funciona igual en storefront (body class) y en el preview real
   del Studio (.wapu-footer-preview-scope). */
/* Frontend Semantic Skin 1.0 · valores literales sólo como fallback central. */
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] {
  --wapu-pg-footer-bg: #111827;
  --wapu-pg-footer-text: #ffffff;
  --wapu-pg-footer-primary: #7c3aed;
  --wapu-pg-footer-primary-text: #ffffff;
  --wapu-pg-footer-accent: var(--wapu-pg-footer-primary);
  --wapu-pg-footer-sem-surface: var(--wapu-pg-footer-bg);
  --wapu-pg-footer-sem-text: var(--wapu-pg-footer-text);
  --wapu-pg-footer-sem-accent: var(--wapu-pg-footer-accent);
  --wapu-pg-footer-sem-accent-text: var(--wapu-pg-footer-primary-text);
  --wapu-pg-footer-sem-line: color-mix(in srgb, var(--wapu-pg-footer-sem-text) 12%, transparent);
}


:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official {
  background: var(--wapu-pg-footer-bg, var(--wapu-pg-footer-sem-surface));
  color: var(--wapu-pg-footer-text, var(--wapu-pg-footer-sem-text));
}

/* Template CTA: el CTA existe en el renderer del Theme; Playground sólo pinta. */
.wapu-pg-footer-template-footer_cta .wapu-footer-official__cta-wrap {
  width: min(1320px, 100%);
  margin-bottom: clamp(30px,5vw,64px);
}
.wapu-pg-footer-template-footer_cta .wapu-footer-official__studio-cta {
  --wapu-footer-cta-color: var(--wapu-pg-footer-primary, var(--ws-primary,var(--wapu-pg-footer-sem-accent)));
  --wapu-footer-cta-text: var(--wapu-pg-footer-primary-text,var(--wapu-pg-footer-sem-text));
}
.wapu-pg-footer-template-footer_cta .wapu-footer-official__inner {
  max-width: 1320px;
  padding-inline: 0;
}
.wapu-pg-footer-template-footer_cta .wapu-footer-official__brand {
  justify-content: flex-start;
  margin-bottom: clamp(34px,5vw,58px);
}
.wapu-pg-footer-template-footer_cta .wapu-footer-official__grid {
  display: grid;
  grid-template-columns: minmax(190px,.8fr) repeat(2,minmax(0,1fr));
  gap: clamp(28px,8vw,130px);
}
.wapu-pg-footer-template-footer_cta .wapu-footer-official__bottom { background: transparent; }

@media(max-width:900px){
  .wapu-pg-footer-template-footer_cta .wapu-footer-official__grid{grid-template-columns:1fr}
}

/* Contraste semántico del footer. El Theme conserva spacing/markup; PG sólo
   resuelve colores dentro de este scope. */
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official :is(.wapu-footer-official__logo-link,.wapu-footer-official__brand-text) {
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 88%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official :is(.wapu-footer-official__title,.wapu-footer-official__details,.wapu-footer-official__details summary) {
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 92%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official :is(.wapu-footer-official__list a,.wapu-footer-official__contact a,.wapu-footer-official__contact span) {
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 76%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official .wapu-footer-official__contact :is(a,span) {
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 62%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official .wapu-footer-official__socials a {
  background: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 11%, transparent);
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 88%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official .wapu-footer-official__bottom {
  border-color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 12%, transparent);
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 56%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official .wapu-footer-official__bottom a,
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official .wapu-footer-official__credit a {
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 72%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official .wapu-footer-official__summary::after,
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official .wapu-footer-official__details summary::after {
  color: color-mix(in srgb, var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text)) 68%, transparent);
}
:is(body,.wapu-footer-preview-scope)[class*="wapu-pg-footer-template-"] .wapu-footer--official :is(.wapu-footer-official__list a,.wapu-footer-official__contact a,.wapu-footer-official__bottom a):hover {
  color: var(--wapu-pg-footer-text,var(--wapu-pg-footer-sem-text));
}