@layer composition {
  .stack {
    --local-justify: flex-start;
    --local-align: stretch;
    --local-flow-space: var(--gs-pad-md);

    display: flex;
    flex-direction: column;
    justify-content: var(--local-justify);
    align-items: var(--local-align);
  }

  .stack > * {
    margin-block: 0;
  }

  .stack > * + * {
    margin-block-start: var(--local-flow-space);
  }

  .stack-xs {
    --local-flow-space: var(--gs-pad-xs);
  }

  .stack-sm {
    --local-flow-space: var(--gs-pad-sm);
  }

  .stack-lg {
    --local-flow-space: var(--gs-pad-lg);
  }

  .stack-xl {
    --local-flow-space: var(--gs-pad-xl);
  }

  .cluster {
    --local-cluster-gap: var(--gs-pad-md);
    --local-align: center;
    --local-justify: flex-start;

    display: flex;
    flex-wrap: wrap;
    gap: var(--local-cluster-gap);
    align-items: var(--local-align);
    justify-content: var(--local-justify);
  }

  .cluster-sm {
    --local-cluster-gap: var(--gs-pad-sm);
  }

  .cluster-between {
    --local-justify: space-between;
  }

  .cluster-center {
    --local-justify: center;
  }

  .cluster-end {
    justify-content: flex-end;
  }

  .grid-auto {
    --local-grid-gap: var(--gs-pad-md);
    --local-align: stretch;
    --local-justify: start;
    --local-min-item-width: var(--gs-grid-auto-md);

    display: grid;
    gap: var(--local-grid-gap);
    align-items: var(--local-align);
    justify-items: var(--local-justify);

    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--local-min-item-width)), 1fr)
    );
  }

  .grid-gap-xs   { --local-grid-gap: var(--gs-pad-xs); }
  .grid-gap-sm   { --local-grid-gap: var(--gs-pad-sm); }
  .grid-gap-lg   { --local-grid-gap: var(--gs-pad-lg); }
  .grid-gap-xl   { --local-grid-gap: var(--gs-pad-xl); }
  .grid-gap-none { --local-grid-gap: 0; }

  .grid-auto-xs {
    --local-min-item-width: var(--gs-grid-auto-xs);
  }

  .grid-auto-sm {
    --local-min-item-width: var(--gs-grid-auto-sm);
  }

  .grid-auto-md {
    --local-min-item-width: var(--gs-grid-auto-md);
  }

  .grid-auto-lg {
    --local-min-item-width: var(--gs-grid-auto-lg);
  }

  .switcher {
    --local-switcher-gap: var(--gs-pad-lg);
    --local-align: flex-start;
    --local-justify: flex-start;
    --local-switcher-target-width: var(--gs-switcher-target-width);

    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: var(--local-switcher-gap);
    align-items: var(--local-align);
    justify-content: var(--local-justify);
  }

  .switcher > * {
    flex-grow: 1;

    flex-basis: calc((var(--local-switcher-target-width) - 100%) * 999);
  }

  .switch-at-sm {
    container-name: switch-sm;
  }

  @container switch-sm (max-width: 30rem) {
    .switch-at-sm > * {
      width: 100%;
      flex-basis: auto;
    }
  }

  .switch-at-md {
    container-name: switch-md;
  }

  @container switch-md (max-width: 50rem) {
    .switch-at-md > * {
      width: 100%;
    }
  }

  .sidebar-layout {
    --local-sidebar-gap: var(--gs-pad-lg);
    --local-sidebar-target-width: var(--gs-sidebar-target-width);

    display: flex;
    flex-wrap: wrap;
    gap: var(--local-sidebar-gap);
  }

  .sidebar-layout > * {
    flex-grow: 1;
    flex-basis: var(--local-sidebar-target-width);
  }

  .sidebar-layout > :not(.sidebar-fixed) {
    flex-basis: 0;
    flex-grow: 999;
    min-width: 50%;
  }

  .cover {
    --local-cover-min-height: var(--gs-cover-min-height);

    display: flex;
    flex-direction: column;
    min-block-size: var(--local-cover-min-height);

    padding: var(--gs-pad-md);
  }

  .cover > .centered {
    margin-block: auto;
  }

  .cover > :first-child:not(.centered) {
    margin-block-start: 0;
  }

  .cover > :last-child:not(.centered) {
    margin-block-end: 0;
  }

  .reel {
    --local-reel-gap: var(--gs-pad-md);
    --local-reel-item-width: auto;

    display: flex;
    gap: var(--local-reel-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--gs-pad-md);

    scrollbar-color: color-mix(in oklch, var(--gs-text-main) 20%, transparent) transparent;
  }

  .reel > * {
    flex: 0 0 var(--local-reel-item-width);
    scroll-snap-align: start;
  }

  .reel::-webkit-scrollbar {
    height: var(--gs-scrollbar-height);
  }

  .reel::-webkit-scrollbar-track {
    background: transparent;
  }

  .reel::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--gs-text-main) 20%, transparent);
    border-radius: var(--gs-radius-pill);
  }

  .reel::-webkit-scrollbar-thumb:hover {
    background: var(--gs-surface);
  }

  .frame {
    --local-aspect-ratio: var(--gs-aspect-ratio);
    --local-frame-radius: 0;

    aspect-ratio: var(--local-aspect-ratio);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--local-frame-radius);
  }

  .frame > img,
  .frame > video {
    inline-size: 100%;

    block-size: 100%;

    object-fit: cover;

    transition: transform var(--gs-duration-flow) var(--gs-motion-snappy);
  }

  .frame-zoom:hover > img,
  .frame-zoom:hover > video {
    transform: scale(1.05);
  }

  .ratio-square {
    --local-aspect-ratio: 1 / 1;
  }

  .ratio-landscape {
    --local-aspect-ratio: 16 / 9;
  }

  .ratio-portrait {
    --local-aspect-ratio: 3 / 4;
  }

  .ratio-ultrawide {
    --local-aspect-ratio: 21 / 9;
  }

  .wrapper {
    --local-wrapper-max: var(--gs-layout-max);

    margin-inline: auto;
    width: 100%;
    max-width: var(--local-wrapper-max);
    padding-inline: var(--gs-padding-layout);
  }

  .wrapper[data-variant="sm"],
  .wrapper-sm {
    --local-wrapper-max: var(--gs-layout-narrow);
  }

  .wrapper[data-variant="lg"],
  .wrapper-lg {
    --local-wrapper-max: var(--gs-layout-wide);
  }

  .wrapper[data-variant="xl"],
  .wrapper-xl {
    --local-wrapper-max: var(--gs-layout-full);
    padding-inline: 0;
  }

  .full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  /* COMPOSICIONES DE GRID ESTÁTICAS Y RESPONSIVAS */
  .grid {
    --local-grid-gap: var(--gs-pad-md);
    --local-align: stretch;
    --local-justify: stretch;

    display: grid;
    gap: var(--local-grid-gap);
    align-items: var(--local-align);
    justify-items: var(--local-justify);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4 {
      grid-template-columns: 1fr;
    }
  }

  /* MARQUEE KINETIC SCROLLING BANNER */
  .marquee-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
  }
  .marquee-track {
    --local-marquee-duration: var(--gs-marquee-duration);
    --local-marquee-gap: var(--gs-marquee-gap);

    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: gs-marquee var(--local-marquee-duration) linear infinite;
    gap: var(--local-marquee-gap);
    padding-inline-end: var(--local-marquee-gap);
  }
  @keyframes gs-marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
  }

  /* Premium blog list row layout */
  .c-blog-list-row {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    border-bottom: var(--gs-stroke-xs) solid var(--gs-border) !important;
    transition: background-color var(--gs-motion) ease, transform var(--gs-motion) ease !important;
  }
  .c-blog-list-row:hover {
    background-color: var(--gs-fill-empty-subtle) !important;
    transform: translateX(0.25rem) !important;
  }
  .c-blog-list-row > .wrapper {
    display: grid !important;
    grid-template-columns: 12rem 1fr auto !important;
    align-items: center !important;
    gap: var(--gs-spacing-400) !important;
    padding: var(--gs-spacing-300) var(--gs-spacing-400) !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .c-blog-list-row > .wrapper > *:nth-child(1) {
    font-size: 0.8125rem !important;
    color: var(--gs-text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
  .c-blog-list-row > .wrapper > *:nth-child(2) {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--gs-text-heading) !important;
    margin: 0 !important;
  }
  .c-blog-list-row > .wrapper > *:nth-child(3) {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--gs-brand) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: color 0.2s ease !important;
  }
  .c-blog-list-row:hover > .wrapper > *:nth-child(3) {
    color: var(--gs-accent) !important;
  }
  @media (max-width: 768px) {
    .c-blog-list-row > .wrapper {
      grid-template-columns: 1fr !important;
      gap: var(--gs-spacing-100) !important;
      align-items: flex-start !important;
      padding: var(--gs-spacing-300) !important;
    }
    .c-blog-list-row > .wrapper > *:nth-child(3) {
      margin-top: 0.25rem !important;
    }
  }

  /* Logo Strip ribbon styling */
  .c-logo-strip > .wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--gs-spacing-500) !important;
  }
  .c-logo-strip > .wrapper > .gs-image-figure {
    width: auto !important;
    height: 1.75rem !important;
    opacity: 0.55 !important;
    transition: opacity 0.25s ease !important;
  }
  .c-logo-strip > .wrapper > .gs-image-figure:hover {
    opacity: 0.95 !important;
  }
  .c-logo-strip > .wrapper > .gs-image-figure img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
  }
}