/* Loaded last. The appearance runtime owns the four page palette variables. */
html[data-links-appearance] {
  --links-muted: color-mix(in srgb, var(--ink) 68%, var(--bg));
  --links-line: color-mix(in srgb, var(--ink) 18%, transparent);
  --links-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  background: var(--bg);
}
html[data-links-appearance='light'] {
  color-scheme: light;
}
html[data-links-appearance='dark'] {
  color-scheme: dark;
  --links-control-bg: color-mix(in srgb, var(--ink) 8%, var(--paper));
  --links-control-hover: color-mix(in srgb, var(--ink) 13%, var(--paper));
}
.hub #bio {
  margin-inline: auto;
  text-align: center;
  text-indent: 0;
}
.utilities .utilities-actions {
  align-items: center;
  gap: 6px;
}
.appearance-toggle {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  gap: 6px;
  padding-inline: 10px;
  border: 1px solid var(--links-line, #cecece);
  border-radius: 99px;
  white-space: nowrap;
}
.appearance-toggle .icon {
  width: 18px;
  height: 18px;
}
.appearance-label {
  font-size: 12px;
  font-weight: 600;
}
.utilities-actions .keep {
  min-height: 44px;
}
html[data-links-appearance] .skip {
  background: var(--paper);
  color: var(--ink);
}
html[data-links-appearance] .socials svg:not([fill]) {
  fill: currentColor;
}
html[data-links-appearance] :is(.utility, .socials a, .carousel-control):hover {
  background: var(--links-hover);
}
html[data-links-appearance] .keep:not([aria-pressed='true']) {
  border-color: var(--links-line);
}
html[data-links-appearance] .review-tools {
  color: var(--links-muted);
  border-color: var(--links-line);
}
html[data-links-appearance] .review-tools a:hover {
  color: var(--ink);
}
html[data-links-appearance] #handle,
html[data-links-appearance] .hub > footer p {
  color: var(--links-muted);
}
html[data-links-appearance]
  :is(.gallery-controls, .empty-category, .link-eyebrow) {
  color: var(--links-muted);
}
html[data-links-appearance] .category-nav button[aria-pressed='true'] {
  border-color: var(--links-line);
}
html[data-links-appearance] .carousel-footer {
  border-color: var(--links-line);
}
html[data-links-appearance] .carousel-tab:not([aria-selected='true']) {
  color: var(--links-muted);
}
html[data-links-appearance='dark'] :is(.link, .gallery-item, .video-card) {
  border-color: var(--links-line);
  box-shadow: none;
}
html[data-links-appearance='dark'] .link:hover {
  border-color: color-mix(in srgb, var(--ink) 40%, transparent);
}
html[data-links-appearance='dark'] .section-heading p,
html[data-links-appearance='dark'] .video-caption p {
  color: var(--links-muted);
}
/* Inline section and entry palettes need overrides at each owning element. */
html[data-links-appearance='dark'] :is(.editorial-section, .editorial-entry) {
  --editorial-bg: var(--paper) !important;
  --editorial-ink: var(--ink) !important;
  --editorial-accent: var(--accent) !important;
}
html[data-links-appearance='dark'] .editorial-entry {
  --gateway-border: var(--links-line) !important;
}
html[data-links-appearance='dark']
  :is(.video-section, .video-card, .video-caption) {
  --video-bg: var(--paper) !important;
  --video-ink: var(--ink) !important;
  --video-accent: var(--accent) !important;
}
html[data-links-appearance='dark'] .section.layout-contact {
  --contact-bg: var(--paper) !important;
  --contact-ink: var(--ink) !important;
}
html[data-links-appearance='dark']
  :is(.editorial-entry, .video-card, .video-caption, .section.layout-contact) {
  background: var(--paper);
  color: var(--ink);
}
html[data-links-appearance='dark'] .carousel-slide {
  --slide-bg: var(--paper) !important;
  --slide-ink: var(--ink) !important;
}
html[data-links-appearance='dark'] :is(.layout-brand, .brand-entry) {
  --brand-bg: var(--paper) !important;
  --brand-ink: var(--ink) !important;
  --brand-gold: var(--accent) !important;
}
html[data-links-appearance='dark'] :is(.link, .gallery-item) {
  background-color: var(--paper);
}
html[data-links-appearance='dark'] .layout-products .cover {
  background: var(--paper);
}
html[data-links-appearance='dark'] body::before {
  display: none;
}
html[data-links-appearance='dark']
  :is(
    .editorial-cta,
    .carousel-cta,
    .contact-action .contact-link,
    .video-play,
    .action,
    :where(#toast)
  ) {
  background: var(--links-control-bg);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--links-line);
}
html[data-links-appearance='dark']
  :is(
    .editorial-cta,
    .carousel-cta,
    .contact-action .contact-link,
    .action
  ):hover {
  background: var(--links-control-hover);
}
html[data-links-appearance='dark'] .keep[aria-pressed='true'] {
  background: var(--links-control-bg);
  color: var(--ink);
  border-color: var(--accent);
}
html[data-links-appearance='dark']
  :is(
    .layout-articles,
    .layout-spotlight[data-density='compact'],
    .layout-spotlight[data-density='slim']
  )
  .editorial-cta {
  background: transparent;
  color: var(--editorial-accent);
  box-shadow: none;
}
/* Dark Argentine blue keeps the campaign distinct without a pale panel. */
html[data-links-appearance='dark'] .product-carousel {
  --product-surface: var(--paper) !important;
  --product-ink: var(--ink) !important;
  --product-accent: var(--accent) !important;
}
html[data-links-appearance='dark'] .product-carousel[data-theme='messi'] {
  --product-surface: color-mix(in srgb, #488cae 16%, var(--paper)) !important;
  --product-ink: #e4f0f5 !important;
  --product-accent: #b8a079 !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--product-surface) 75%, var(--bg)),
    var(--product-surface)
  );
}
html[data-links-appearance='dark'] .product-carousel .product-carousel-picture {
  background: var(--product-surface);
}
html[data-links-appearance='dark']
  .product-carousel[data-theme='messi']
  :is(
    .product-carousel-stage,
    .product-carousel-slide,
    .product-carousel-picture
  ) {
  background: transparent;
}
html[data-links-appearance='dark']
  .product-carousel[data-theme='messi']
  .product-carousel-picture::before {
  opacity: 0.1;
}
html[data-links-appearance='dark'] .product-carousel .product-carousel-action {
  background: color-mix(in srgb, var(--product-ink) 9%, var(--product-surface));
  color: var(--product-ink);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--product-ink) 28%, transparent);
}
html[data-links-appearance='dark']
  .product-carousel
  .product-carousel-action:hover {
  background: color-mix(
    in srgb,
    var(--product-ink) 15%,
    var(--product-surface)
  );
}
html[data-links-appearance='dark'] .is-disclosure {
  --disclosure-ink: var(--ink) !important;
}
html[data-links-appearance='dark'] .layout-shortcuts :is(.links, .link) {
  border-color: var(--links-line);
}
html[data-links-appearance='dark'] .layout-product-carousel > .section-heading {
  --product-ink: var(--ink);
}
html[data-links-appearance] dialog {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--links-line);
}
html[data-links-appearance] .modal-note {
  color: var(--links-muted);
}
html[data-links-appearance] .share-value {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--links-line);
}
html[data-links-appearance] :is(.action, #toast) {
  background: var(--ink);
  color: var(--bg);
}
html[data-links-appearance='dark'] :is(.action, #toast) {
  background: var(--links-control-bg);
  color: var(--ink);
}
html[data-links-appearance='dark'] dialog::backdrop {
  background: #050707ba;
}
html[data-links-appearance] .qr-image {
  background: #fff;
}
html[data-links-appearance='dark'] #error {
  color: #f2b9ae;
}

/* The HATTRICK module follows the page's neutral black/white appearance. */
html[data-links-appearance] .app-brand-card {
  --app-card-bg: var(--paper) !important;
  --app-card-ink: var(--ink) !important;
  --app-card-accent: var(--accent) !important;
  --app-muted: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --app-rule: color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: none;
}
html[data-links-appearance] .app-brand-language,
html[data-links-appearance] .football-widget {
  color-scheme: inherit;
}
html[data-links-appearance]
  :is(
    .app-brand-language,
    .app-clock-label,
    .app-clock-colon,
    .app-brand-description,
    .app-feature-copy > span
  ) {
  color: var(--app-muted);
}
html[data-links-appearance]
  :is(.app-brand-clock, .app-brand-cta, .app-brand-features) {
  border-color: var(--app-rule);
}
html[data-links-appearance] .app-feature-mark {
  color: var(--app-card-ink);
  background: color-mix(in srgb, var(--app-card-ink) 5%, transparent);
}
html[data-links-appearance] .football-widget {
  --football-muted: var(--app-muted, var(--links-muted));
  --football-rule: var(--app-rule, var(--links-line));
  color: var(--app-card-ink, var(--ink));
}
html[data-links-appearance]
  :is(
    .football-widget-tab[aria-selected='true'],
    .football-widget-tab:hover,
    .football-widget-retry,
    .football-widget-table .football-widget-points
  ) {
  color: var(--app-card-ink, var(--ink));
}
html[data-links-appearance] .football-widget-tab[aria-selected='true'] {
  border-bottom-color: currentColor;
}
html[data-links-appearance] .football-widget-league {
  background: var(--app-card-bg, var(--paper));
  color: var(--app-card-ink, var(--ink));
}
html[data-links-appearance] .football-widget-match-label,
html[data-links-appearance]
  .football-widget-event[data-phase='open']
  .football-widget-event-time {
  color: var(--app-card-ink, var(--ink));
}
html[data-links-appearance]
  .football-widget
  :is(a, button, select):focus-visible {
  outline-color: var(--app-card-accent, var(--accent));
}
html[data-links-appearance] .football-widget :is(a, button, select) {
  -webkit-tap-highlight-color: var(--links-hover);
}
html[data-links-appearance]
  .football-widget
  :is(a, .football-widget-tab, .football-widget-retry):hover {
  background: var(--links-hover);
}
html[data-links-appearance='light']
  .football-widget-match-state.is-live
  .football-widget-match-label,
html[data-links-appearance='light']
  .football-widget-event[data-phase='open']
  .football-widget-event-phase {
  color: #286041;
}
html[data-links-appearance='light']
  .football-widget-event[data-phase='settled']
  .football-widget-event-phase,
html[data-links-appearance='light'] .football-widget-status.has-error {
  color: #795e2d;
}

/* Prepared content is always visible, including before JS or observer callbacks. */
.links-reveal-ready {
  opacity: 1;
}
.app-feature-mark .icon {
  animation: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  html.links-theme-transition::view-transition-old(root),
  html.links-theme-transition::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  html.links-theme-transition::view-transition-old(root) {
    z-index: 1;
  }
  html.links-theme-transition::view-transition-new(root) {
    z-index: 9999;
    animation: links-theme-reveal 500ms ease-in both;
  }
  html.links-theme-transition::view-transition-group(root) {
    animation: none;
  }
  html.links-theme-transition::view-transition {
    pointer-events: none;
  }
  html[data-links-motion='on']
    :is(.carousel-picture, .editorial-picture, .video-start) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  html[data-links-motion='on']
    .links-reveal-visible
    .carousel-slide[data-active='true']
    .carousel-picture
    img {
    animation: links-photo-enter 950ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  html[data-links-motion='on']
    .links-reveal-visible
    .carousel-slide[data-active='true']
    .carousel-picture::after,
  html[data-links-motion='on'] .links-reveal-visible .editorial-picture::after,
  html[data-links-motion='on'] .links-reveal-visible .video-start::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      110deg,
      transparent 15%,
      #ffffff30 48%,
      transparent 80%
    );
    animation: links-photo-sweep 1100ms ease-out both;
    animation-delay: var(--links-item-delay, 80ms);
  }
  html[data-links-motion='on'] .links-reveal-visible {
    animation: links-section-enter 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--links-reveal-delay, 0ms);
  }
  html[data-links-motion='on'] .profile.links-reveal-visible .avatar {
    animation: links-brand-enter 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  html[data-links-motion='on']
    .profile.links-reveal-visible
    :is(#name, #handle, #bio),
  html[data-links-motion='on'] .profile.links-reveal-visible .socials a,
  html[data-links-motion='on'] .links-reveal-visible .editorial-entry,
  html[data-links-motion='on']
    .links-reveal-visible
    .contact-social
    .contact-link {
    animation: links-detail-enter 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(100ms + var(--links-item-delay, 0ms));
  }
  html[data-links-motion='on'] .profile.links-reveal-visible #handle {
    animation-delay: 130ms;
  }
  html[data-links-motion='on'] .profile.links-reveal-visible #bio {
    animation-delay: 210ms;
  }
  html[data-links-motion='on'] .profile.links-reveal-visible .socials a {
    animation-delay: calc(240ms + var(--links-item-delay, 0ms));
  }
  html[data-links-motion='on']
    .links-reveal-visible
    .carousel-slide[data-active='true']
    .carousel-copy
    > * {
    animation: links-detail-enter 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 100ms;
  }
  html[data-links-motion='on']
    .links-reveal-visible
    .carousel-slide[data-active='true']
    .carousel-copy
    > :nth-child(2) {
    animation-delay: 170ms;
  }
  html[data-links-motion='on']
    .links-reveal-visible
    .carousel-slide[data-active='true']
    .carousel-copy
    > :nth-child(n + 3) {
    animation-delay: 240ms;
  }
  html[data-links-motion='on'] .links-reveal-finished,
  html[data-links-motion='on']
    .links-reveal-finished
    :is(
      .avatar,
      #name,
      #handle,
      #bio,
      .socials a,
      .editorial-entry,
      .contact-social .contact-link,
      .carousel-copy > *
    ) {
    animation: none !important;
  }
  html[data-links-motion='on'] .category-nav button {
    transition:
      background-color 220ms ease,
      color 220ms ease,
      box-shadow 220ms ease;
  }
  html[data-links-motion='on'] .category-nav button[aria-pressed='true'] {
    animation: links-tab-enter 320ms ease-out both;
  }
  html[data-links-motion='on'] .editorial-picture img {
    transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html[data-links-motion='on']
    :is(
      .utility,
      .keep,
      .category-nav button,
      .socials a,
      .editorial-entry,
      .contact-link,
      .gallery-item,
      .action
    ) {
    transition:
      color 160ms ease,
      background-color 160ms ease,
      border-color 160ms ease,
      transform 160ms ease;
  }
  html[data-links-motion='on']
    :is(.link-arrow, .gateway-button > .icon, .editorial-cta .icon) {
    transition: transform 180ms ease;
  }
  @media (hover: hover) and (pointer: fine) {
    html[data-links-motion='on'] :is(.editorial-entry, .gallery-item):hover {
      transform: translateY(-3px);
    }
    html[data-links-motion='on'] .editorial-entry:hover .editorial-picture img {
      transform: scale(1.045);
    }
    html[data-links-motion='on'] .link:hover .link-arrow {
      transform: translateX(2px);
    }
    html[data-links-motion='on'] .gateway-button:hover > .icon {
      transform: translateY(-1px);
    }
    html[data-links-motion='on'] .editorial-entry:hover .editorial-cta .icon {
      transform: translateX(2px);
    }
    html[data-links-motion='on'] .socials a:hover {
      transform: translateY(-3px) rotate(-4deg);
    }
  }
  html[data-links-motion='on']
    :is(.utility, .keep, .action, .contact-link):active {
    transform: translateY(1px) scale(0.975);
  }
}
@keyframes links-theme-reveal {
  from {
    clip-path: circle(0 at var(--theme-x) var(--theme-y));
  }
  to {
    clip-path: circle(var(--theme-r) at var(--theme-x) var(--theme-y));
  }
}
@keyframes links-brand-enter {
  from {
    opacity: 0;
    scale: 0.86;
    rotate: -9deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
@keyframes links-detail-enter {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes links-tab-enter {
  from {
    scale: 0.92;
  }
  to {
    scale: 1;
  }
}
@keyframes links-photo-enter {
  from {
    scale: 1.065;
    translate: 0 8px;
  }
  to {
    scale: 1;
    translate: 0 0;
  }
}
@keyframes links-photo-sweep {
  from {
    opacity: 0;
    translate: -100% 0;
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: 100% 0;
  }
}
@keyframes links-section-enter {
  from {
    opacity: 0.15;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
html[data-links-motion='off'] *,
html[data-links-motion='off'] *::before,
html[data-links-motion='off'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-links-motion='off'] .app-clock-old {
  display: none;
}
html[data-links-motion='off']
  :is(
    .link:hover,
    .brand-entry:hover,
    .brand-entry:active,
    .video-start:hover .video-play,
    .app-brand-cta:hover .icon,
    .app-brand-cta:focus-visible .icon
  ) {
  transform: none;
}
@media (max-width: 359px) {
  .appearance-toggle {
    width: 44px;
    padding-inline: 0;
  }
  .appearance-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-links-appearance] *,
  html[data-links-appearance] *::before,
  html[data-links-appearance] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html[data-links-appearance] .app-clock-old {
    display: none;
  }
  html[data-links-appearance]
    :is(
      .link:hover,
      .brand-entry:hover,
      .brand-entry:active,
      .video-start:hover .video-play,
      .app-brand-cta:hover .icon,
      .app-brand-cta:focus-visible .icon
    ) {
    transform: none;
  }
}
