@layer utilities {
  .hidden {
    display: none !important;
  }

  .block {
    display: block;
  }

  .inline-block {
    display: inline-block;
  }

  .inline {
    display: inline;
  }

  [x-cloak] {
    display: none !important;
  }

  .flex {
    display: flex;
  }

  .inline-flex {
    display: inline-flex;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-center {
    justify-content: center;
  }

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

  .justify-between {
    justify-content: space-between;
  }

  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .flex-none {
    flex: none;
  }

  .grow {
    flex-grow: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .sticky {
    position: sticky;
    top: 0;
  }

  .inset-0 {
    inset: 0;
  }

  .w-full {
    width: 100%;
  }

  .h-full {
    height: 100%;
  }

  .h-screen {
    height: 100vh;
    height: 100dvh;
  }

  .h-screen-80 {
    min-height: 85vh;
    min-height: 85dvh;
  }

  .mx-auto {
    margin-inline: auto;
  }
  .my-auto {
    margin-block: auto;
  }
  .ml-auto {
    margin-inline-start: auto;
  }
  .mr-auto {
    margin-inline-end: auto;
  }
  .mt-auto {
    margin-block-start: auto;
  }
  .mb-auto {
    margin-block-end: auto;
  }

  .max-w-xs {
    max-width: var(--gs-layout-narrow);
  }
  .max-w-sm {
    max-width: var(--gs-layout-max);
  }
  .max-w-md {
    max-width: var(--gs-layout-wide);
  }
  .max-w-lg {
    max-width: var(--gs-layout-full);
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-contain {
    object-fit: contain;
  }

  .text-center {
    text-align: center !important;
  }
  .text-center :is(h1, h2, h3, h4, h5, h6, p, span, a) {
    text-align: center !important;
    justify-content: center !important;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .italic {
    font-style: italic;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .opacity-none {
    opacity: var(--gs-opacity-none);
  }
  .opacity-xs {
    opacity: var(--gs-opacity-xs);
  }
  .opacity-sm {
    opacity: var(--gs-opacity-sm);
  }
  .opacity-md {
    opacity: var(--gs-opacity-md);
  }
  .opacity-lg {
    opacity: var(--gs-opacity-lg);
  }
  .opacity-xl {
    opacity: var(--gs-opacity-xl);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  }

  .pointer-events-none {
    pointer-events: none;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .sr-only {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .text-size-xs {
    font-size: var(--gs-size-xs);
  }
  .text-size-s {
    font-size: var(--gs-size-s);
  }
  .text-size-sm {
    font-size: var(--gs-size-s);
  }
  .text-size-m {
    font-size: var(--gs-size-m);
  }
  .text-size-md {
    font-size: var(--gs-size-m);
  }
  .text-size-l {
    font-size: var(--gs-size-l);
  }
  .text-size-lg {
    font-size: var(--gs-size-l);
  }
  .text-size-xl {
    font-size: var(--gs-size-xl);
  }
  .text-size-2xl {
    font-size: var(--gs-size-2xl);
  }

  .text-color-xs {
    color: var(--gs-surface);
  }
  .text-color-sm {
    color: var(--gs-brand);
  }
  .text-color-md {
    color: var(--gs-accent);
  }
  .text-color-lg {
    color: var(--gs-color-inverse);
  }
  .text-on-xs {
    color: var(--gs-text-main);
  }
  .text-on-sm {
    color: var(--gs-brand-on);
  }
  .text-on-md {
    color: var(--gs-accent-on);
  }
  .text-on-lg {
    color: var(--gs-color-inverse-on);
  }

  .bg-xs {
    background-color: var(--gs-surface);
  }
  .bg-sm {
    background-color: var(--gs-brand);
  }
  .bg-md {
    background-color: var(--gs-accent);
  }
  .bg-lg {
    background-color: var(--gs-color-inverse);
  }

  .pad-sec-y {
    padding-block: var(--gs-padding-section);
  }
  .pad-sec-sm {
    padding-block: var(--gs-fluid-lg);
  }
  .pad-sec-md {
    padding-block: var(--gs-fluid-xl);
  }
  .pad-sec-lg {
    padding-block: var(--gs-fluid-2xl);
  }
  .pad-sec-xl {
    padding-block: var(--gs-fluid-3xl);
  }

  .z-xs {
    z-index: var(--gs-z-xs);
  }

  .z-sm {
    z-index: var(--gs-z-sm);
  }

  .z-md {
    z-index: var(--gs-z-md);
  }

  .z-lg {
    z-index: var(--gs-z-lg);
  }

  .font-xs {
    font-weight: var(--gs-font-weight-xs);
  }
  .font-sm {
    font-weight: var(--gs-font-weight-sm);
  }
  .font-md {
    font-weight: var(--gs-font-weight-md);
  }
  .font-lg {
    font-weight: var(--gs-font-weight-lg);
  }
  .font-xl {
    font-weight: var(--gs-font-weight-xl);
  }

  .leading-xs {
    line-height: var(--gs-leading-xs);
  }
  .leading-sm {
    line-height: var(--gs-leading-sm);
  }
  .leading-md {
    line-height: var(--gs-leading-md);
  }
  .leading-lg {
    line-height: var(--gs-leading-lg);
  }
  .leading-xl {
    line-height: var(--gs-leading-xl);
  }

  .rounded-xs {
    border-radius: var(--gs-rad-xs);
  }
  .rounded-sm {
    border-radius: var(--gs-rad-sm);
  }
  .rounded-md {
    border-radius: var(--gs-rad-md);
  }
  .rounded-lg {
    border-radius: var(--gs-rad-lg);
  }
  .rounded-xl {
    border-radius: var(--gs-rad-xl);
  }
  .rounded-none {
    border-radius: 0;
  }

  .border {
    border: var(--gs-stroke-xs) solid var(--gs-border);
  }
  .border-2 {
    border: var(--gs-stroke-sm) solid var(--gs-border);
  }
  .border-none {
    border: none;
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-xs {
    border-color: var(--gs-border);
  }
  .border-sm {
    border-color: var(--gs-border);
  }
  .border-md {
    border-color: var(--gs-border);
  }
  .border-lg {
    border-color: var(--gs-border);
  }

  .shadow-xs {
    box-shadow: var(--gs-depth-xs);
  }
  .shadow-sm {
    box-shadow: var(--gs-depth-sm);
  }
  .shadow-md {
    box-shadow: var(--gs-depth-md);
  }
  .shadow-lg {
    box-shadow: var(--gs-depth-lg);
  }
  .shadow-xl {
    box-shadow: var(--gs-depth-xl);
  }

  .transition-all {
    transition: all var(--gs-duration-fast) var(--gs-motion-snappy);
  }
  .transition-composite {
    transition: var(--gs-motion-composite);
  }
  .duration-xs {
    transition-duration: var(--gs-duration-xs);
  }
  .duration-sm {
    transition-duration: var(--gs-duration-fast);
  }
  .duration-md {
    transition-duration: var(--gs-duration-flow);
  }
  .duration-lg {
    transition-duration: var(--gs-duration-lg);
  }
  .ease-md {
    transition-timing-function: var(--gs-motion-snappy);
  }

  .text-justify {
    text-align: justify;
  }

  .gap-xs {
    gap: var(--gs-pad-xs);
  }
  .gap-sm {
    gap: var(--gs-pad-sm);
  }
  .gap-md {
    gap: var(--gs-pad-md);
  }
  .gap-lg {
    gap: var(--gs-pad-lg);
  }
  .gap-xl {
    gap: var(--gs-pad-xl);
  }

  @media (max-width: 767px) {
    .hidden-m {
      display: none !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .hidden-t {
      display: none !important;
    }
  }

  @media (min-width: 1025px) {
    .hidden-d {
      display: none !important;
    }
  }

  /* NUEVAS UTILIDADES DE SINCRONIZACIÓN Y COMPLETITUD */
  .font-bold {
    font-weight: var(--gs-font-weight-lg);
  }

  .font-body {
    font-family: var(--gs-font-family-body);
  }
  .font-heading {
    font-family: var(--gs-font-family-heading);
  }
  .font-mono {
    font-family: var(--gs-font-family-mono);
  }

  .rounded-round {
    border-radius: var(--gs-radius-pill);
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Paddings */
  .pad-xs { padding: var(--gs-pad-xs); }
  .pad-sm { padding: var(--gs-pad-sm); }
  .pad-md { padding: var(--gs-pad-md); }
  .pad-lg { padding: var(--gs-pad-lg); }
  .pad-xl { padding: var(--gs-pad-xl); }

  .pad-y-xs { padding-block: var(--gs-pad-xs); }
  .pad-y-sm { padding-block: var(--gs-pad-sm); }
  .pad-y-md { padding-block: var(--gs-pad-md); }
  .pad-y-lg { padding-block: var(--gs-pad-lg); }
  .pad-y-xl { padding-block: var(--gs-pad-xl); }

  .pad-x-xs { padding-inline: var(--gs-pad-xs); }
  .pad-x-sm { padding-inline: var(--gs-pad-sm); }
  .pad-x-md { padding-inline: var(--gs-pad-md); }
  .pad-x-lg { padding-inline: var(--gs-pad-lg); }
  .pad-x-xl { padding-inline: var(--gs-pad-xl); }

  /* =========================================================================
     Typography Role Utilities (CUBE CSS — Utilities layer)
     Hero sections, section titles, and descriptive text.
     These are reusable across any section — not tied to Hero specifically.
     ========================================================================= */

  /* Biggest display/hero title. Used via class="hero-title" in Hero JSONs. */
  .hero-title {
    font-family: var(--gs-font-family-heading);
    font-size: var(--gs-font-2xl);
    font-weight: var(--gs-font-weight-heading);
    line-height: var(--gs-leading-xs);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  /* Muted description text. Used via class="hero-desc" in Hero JSONs. */
  .hero-desc {
    color: var(--gs-text-muted);
    font-size: var(--gs-font-m);
    font-weight: var(--gs-weight-regular);
    max-width: 55ch;
    text-wrap: pretty;
  }

  /* Generic section headline — use instead of hero-title outside hero context */
  .text-display {
    font-family: var(--gs-font-family-heading);
    font-size: var(--gs-font-2xl);
    font-weight: var(--gs-font-weight-heading);
    line-height: var(--gs-leading-xs);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  /* Section subtitle */
  .text-headline {
    font-family: var(--gs-font-family-heading);
    font-size: var(--gs-font-xl);
    font-weight: var(--gs-font-weight-heading);
    line-height: var(--gs-line-height-heading);
    text-wrap: balance;
  }

  /* Eyebrow / overline / label text */
  .text-eyebrow {
    font-size: var(--gs-font-s);
    font-weight: var(--gs-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gs-text-muted);
  }

  /* Muted body copy */
  .text-muted {
    color: var(--gs-text-muted);
  }

  /* Light/tertiary text */
  .text-light {
    color: var(--gs-text-light);
  }

  /* Balance text wrapping for headings */
  .text-balance {
    text-wrap: balance;
  }

  /* Pretty text wrapping for body copy */
  .text-pretty {
    text-wrap: pretty;
  }

  .grid-bg-glow {
    position: relative;
    background-color: var(--gs-surface);
  }
  .grid-bg-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: 
      linear-gradient(to right, color-mix(in oklch, var(--gs-border) 15%, transparent) 0.0625rem, transparent 0.0625rem),
      linear-gradient(to bottom, color-mix(in oklch, var(--gs-border) 15%, transparent) 0.0625rem, transparent 0.0625rem);
    background-size: 2.5rem 2.5rem;
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
    z-index: 0;
  }

  /* ── Marquee slider logos (logo-color-mask) ───────────────────────── */
  /* logo items: 3.5rem height matching the demo */
  .logo-color-mask .gs-image-figure,
  .logo-color-mask .embla__container .gs-image-figure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: auto;
    max-width: 10rem;
    flex-shrink: 0;
  }
  .logo-color-mask .gs-image-wrap {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: auto !important;
    overflow: visible !important;
  }
  .logo-color-mask img,
  .logo-color-mask svg,
  .logo-color-mask .gs-image,
  .logo-color-mask .gs-picture img {
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    opacity: 0.55 !important;
    /* Kill GS_Image grayscale design control completely */
    filter: none !important;
    /* Coral transition: GPU-only properties, 150ms ease-out */
    transition: opacity 150ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1)),
                transform 150ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1)) !important;
  }
  /* Kill GS_Image hairline border (inner glow) inside logo mask */
  .logo-color-mask .gs-image-figure::after {
    display: none !important;
    content: none !important;
  }
  /* Kill GS_Image dimming overlay background inside logo mask */
  .logo-color-mask .gs-image-figure::before {
    display: none !important;
    content: none !important;
  }
  .logo-color-mask .gs-slider .embla__container > *:hover img,
  .logo-color-mask .gs-slider .embla__container > *:hover .gs-image,
  .logo-color-mask .gs-slider .embla__container > *:hover .gs-picture img {
    opacity: 1 !important;
    transform: scale(1.1) !important;
  }

  /* GS_Slider (preset-2 ticker) inside .logo-color-mask */
  /* IMPORTANT: mask goes on the WRAPPER, not on .gs-slider — Embla needs
     overflow:hidden on .embla__viewport to calculate scroll bounds correctly.
     Moving the mask here lets Embla work normally. */
  .logo-color-mask {
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }
  .logo-color-mask .gs-slider {
    position: relative;
    width: 100%;
    padding: var(--gs-pad-lg, 1.5rem) 0;
  }
  /* Allow overflow on the slider elements so hover scaling doesn't get clipped.
     Only the parent .logo-color-mask wrapper controls the layout limits. */
  .logo-color-mask .gs-slider,
  .logo-color-mask .gs-slider .embla__viewport,
  .logo-color-mask .gs-slider .embla__container {
    overflow: visible !important;
  }
  /* Each slide: strip out preset-2's background/border/filter for logos,
     and center the logo image within each slide. Let overflow bleed out. */
  .logo-color-mask .gs-slider .embla__container > * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
    overflow: visible !important;
  }
  /* Ensure the image-figure and wrapper allow overflow to prevent clipping during hover transform: scale */
  .logo-color-mask .gs-slider .gs-image-figure,
  .logo-color-mask .gs-slider .gs-image-wrap {
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Override GS_Image's hardcoded .object-cover class on img tags */
  .logo-color-mask img.object-cover,
  .logo-color-mask .gs-image.object-cover {
    object-fit: contain !important;
  }

  /* ── Logo Grid Cards (logo-grid-card) ────────────────────────────── */
  /* Faithful 1:1 port from logo_sections_demo/style.css .logo-card    */
  .logo-grid-card {
    position: relative;
    /* Transparent bg like the demo — not a semi-opaque surface */
    background-color: transparent;
    border: 0.0625rem solid var(--gs-border, oklch(30% 0 0));
    border-radius: var(--gs-radius-md, 0.75rem);
    /* Use min-height instead of aspect-ratio so the card doesn't collapse */
    min-height: 10rem;
    padding: var(--gs-pad-lg, 1.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--gs-pad-sm, 0.5rem) !important;
    overflow: hidden;
    cursor: pointer;
    /* Coordinated (coral) transition — same timing as image wrapper below */
    transition: border-color 200ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1)),
                transform 200ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1)),
                background-color 200ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1));
  }

  /* Ultra-subtle halo: 0.08 opacity, matching demo */
  .logo-grid-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 0%, var(--gs-text, oklch(98% 0 0)) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 200ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1));
    pointer-events: none;
    z-index: 0;
  }

  .logo-grid-card:hover {
    border-color: var(--gs-border-hover, oklch(45% 0 0));
    transform: translateY(-0.25rem);
    background-color: color-mix(in oklch, var(--gs-surface) 30%, transparent);
  }
  .logo-grid-card:hover::before {
    opacity: 0.08;
  }

  /* All direct children above the z-index of the halo */
  .logo-grid-card > * {
    position: relative;
    z-index: 1;
  }

  /* Override GS_Card's media-container rule (default.css):
     .gs-image-figure (first-child media) inherits width:100%, aspect-ratio:16/9, object-fit:cover
     — all must be undone for logo cards where image must stay small and centered */
  .logo-grid-card > :first-child:not(.gs-layout):is([class*="gs-image"], :has(> [class*="gs-image"])) {
    width: auto !important;
    flex-shrink: unset !important;
    overflow: visible !important;
    aspect-ratio: unset !important;
  }
  .logo-grid-card > :first-child:not(.gs-layout):is([class*="gs-image"], :has(> [class*="gs-image"])) img {
    width: auto !important;
    aspect-ratio: unset !important;
    object-fit: contain !important;
    height: auto !important;
  }

  /* Override GS_Card's body-child rule (default.css line 77):
     the label span (2nd child) gets padding:--gs-pad-md and flex:1 which inflates card height.
     The label is absolute-positioned, so it shouldn't contribute to flow height. */
  .logo-grid-card > :nth-child(2) {
    padding: 0 !important;
    flex: unset !important;
    gap: 0 !important;
    display: block !important;
  }
  .logo-grid-card .logo-card-label {
    position: absolute !important;
    flex: unset !important;
    padding: 0 !important;
  }

  /* Brand label — absolute top-left, mono font, muted */
  .logo-grid-card .logo-card-label {
    position: absolute;
    top: var(--gs-pad-md, 1rem);
    left: var(--gs-pad-md, 1rem);
    font-family: var(--gs-font-family-mono, monospace);
    font-size: 0.65rem;
    color: var(--gs-text-muted);
    z-index: 2;
    padding: 0 !important;
    transition: color 200ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1));
  }
  .logo-grid-card:hover .logo-card-label {
    color: var(--gs-text);
  }

  /* Image figure acts as the logo-card-img wrapper from the demo:
     max-width 80%, max-height 3.75rem (≈ 60px), opacity 0.6 at rest.
     Neutralize ALL GS_Card default padding/sizing that conflicts. */
  .logo-grid-card .gs-image-figure {
    max-width: 80% !important;
    max-height: 3.75rem !important;
    width: auto !important;
    height: auto !important;
    flex: unset !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.6;
    /* Coral: same 150ms ease-out as the logo item in the demo */
    transition: opacity 150ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1)),
                transform 150ms var(--gs-ease-out, cubic-bezier(0.2,0.8,0.2,1));
  }
  .logo-grid-card:hover .gs-image-figure {
    opacity: 1;
    transform: scale(1.05);
  }

  .logo-grid-card .gs-image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    width: auto !important;
    max-height: 3.75rem !important;
  }

  /* The img itself: monocromo blanco, object-contain */
  .logo-grid-card img {
    max-height: 3.75rem !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1);
    display: block;
  }
  /* Override GS_Image's hardcoded .object-cover class */
  .logo-grid-card img.object-cover,
  .logo-grid-card .gs-image.object-cover {
    object-fit: contain !important;
  }

  /* Neutralize GS_Card body-child padding on the second child (text label) */
  .logo-grid-card > :nth-child(2) {
    padding: 0 !important;
  }

}