/*
 * WapuOS - Blocks — Marcas
 *
 * Los valores que cambian por instancia se declaran como variables CSS
 * en el elemento raíz de cada bloque. Esta hoja contiene únicamente la
 * estructura compartida de los bloques de marcas.
 */

.wapu-brand-empty {
	padding: 2.5rem 1.5rem;
}

.wapu-brand-empty > div {
	display: grid;
	gap: 0.5rem;
	max-width: 45rem;
	margin: auto;
	padding: 1.5rem;
	border: 1px dashed var(--wb-surface-muted);
	border-radius: 1rem;
}

.wapu-brand-empty a {
	font-weight: 800;
}

/* blocks/marcas/wapu-brand-blocks-v1 — logo carousel */
.ws-bm-logo-grid {
          width:100%;
          margin:0;
          padding:clamp(3.5rem, 7vw, 6rem) clamp(1rem, 3vw, 2.25rem) clamp(3rem, 6vw, 5rem);
          background:var(--bm-bg);
          color:var(--bm-text);
          font-family:var(--bm-fb);
          box-sizing:border-box;
        }
        .ws-bm-logo-grid * { box-sizing:border-box; }
        .ws-bm-logo-grid .ws-bm-head {
          max-width:61.25rem;
          margin:0 auto clamp(2.625rem, 6vw, 4.75rem);
          text-align:center;
        }
        .ws-bm-logo-grid .ws-bm-eyebrow {
          margin:0 0 0.75rem;
          color:var(--bm-muted);
          font-size:0.8125rem;
          line-height:1.2;
          font-weight:800;
          letter-spacing:.18em;
          text-transform:uppercase;
        }
        .ws-bm-logo-grid .ws-bm-title {
          margin:0;
          font-family:var(--bm-fh);
          font-size:1.5rem;
          line-height:1.2;
          font-weight:700;
          letter-spacing:0;
        }
        .ws-bm-logo-grid .ws-bm-title span {
          position:relative;
          display:inline-block;
          padding-inline:.06em;
        }
        .ws-bm-logo-grid.has-underline .ws-bm-title span::after {
          content:"";
          position:absolute;
          left:46%;
          right:-2%;
          bottom:-.16em;
          height:.14em;
          border-bottom:0.375rem solid var(--wb-primary-soft);
          border-bottom-color:color-mix(in srgb, var(--bm-accent) 32%, var(--wb-primary-soft));
          border-radius:50%;
          transform:rotate(-4deg);
          pointer-events:none;
        }
        .ws-bm-logo-grid .ws-bm-subtitle {
          margin:1.125rem 0 0;
          color:var(--bm-muted);
          font-size:1rem;
          line-height:1.5;
        }
        .ws-bm-logo-grid .ws-bm-cta {
          margin-top:1.375rem;
          display:inline-flex;
        }
        .ws-bm-logo-grid .ws-bm-grid {
          display:flex;
          gap:clamp(1rem, 2vw, 1.75rem);
          max-width:111.25rem;
          margin:0 auto;
          padding:0.25rem 0.125rem 1.125rem;
          overflow-x:auto;
          overscroll-behavior-inline:contain;
          scroll-snap-type:x mandatory;
          scrollbar-width:thin;
          scrollbar-color:var(--bm-accent) transparent;
        }
        .ws-bm-logo-grid .ws-bm-card {
          flex:0 0 clamp(11.875rem, 19vw, 18.75rem);
          min-height:clamp(7.375rem, 8.4vw, 10rem);
          border-radius:0.875rem;
          background:var(--bm-card);
          display:flex;
          align-items:center;
          justify-content:center;
          padding:clamp(1.375rem, 3vw, 2.375rem);
          color:var(--bm-text);
          text-decoration:none;
          overflow:hidden;
          scroll-snap-align:start;
          transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
        }
        .ws-bm-logo-grid .ws-bm-card:hover {
          transform:translateY(-0.125rem);
          box-shadow:none;
        }
        .ws-bm-logo-grid a.ws-bm-card:focus-visible,
        .ws-bd-demo a:focus-visible,
        .wapu-brand-empty a:focus-visible {
          outline:0.1875rem solid var(--bm-accent, var(--bd-chip, currentColor));
          outline-offset:0.25rem;
        }
        .ws-bm-logo-grid .ws-bm-logo-media {
          display:flex;
          align-items:center;
          justify-content:center;
          width:100%;
          height:4.875rem;
        }
        .ws-bm-logo-grid .ws-bm-logo-media img {
          width:100%;
          height:100%;
          max-width:13.75rem;
          object-fit:contain;
          object-position:center;
        }
        .ws-bm-logo-grid .ws-bm-logo-wordmark {
          display:block;
          max-width:100%;
          color:var(--bm-muted);
          font-size:clamp(1.1875rem, 1.8vw, 2rem);
          line-height:1.05;
          font-weight:500;
          text-align:center;
          word-break:break-word;
        }
        @media (max-width: 45em) {
          .ws-bm-logo-grid { padding-inline:1rem; }
          .ws-bm-logo-grid .ws-bm-head { margin-bottom:1.875rem; }
          .ws-bm-logo-grid .ws-bm-grid { gap:0.75rem; }
          .ws-bm-logo-grid .ws-bm-card { flex-basis:min(76vw, 16.25rem); min-height:6.75rem; border-radius:0.75rem; padding:1.25rem; }
          .ws-bm-logo-grid.has-underline .ws-bm-title span::after { border-bottom-width:0.25rem; left:34%; right:0; }
        }
@container wapu-block-preview (max-width: 45em){
          .ws-bm-logo-grid { padding-inline:1rem; }
          .ws-bm-logo-grid .ws-bm-head { margin-bottom:1.875rem; }
          .ws-bm-logo-grid .ws-bm-grid { gap:0.75rem; }
          .ws-bm-logo-grid .ws-bm-card { flex-basis:min(76vw, 16.25rem); min-height:6.75rem; border-radius:0.75rem; padding:1.25rem; }
          .ws-bm-logo-grid.has-underline .ws-bm-title span::after { border-bottom-width:0.25rem; left:34%; right:0; }
        }


/* blocks/marcas/wapu-brand-blocks-v1 — editorial directory */
.ws-bd-demo {
          --bd-radius-xl: 2.125rem;
          --bd-radius-lg: 1.625rem;
          --bd-radius-pill: 62.4375rem;
          --bd-max: 90rem;
          --bd-gutter: clamp(1.25rem, 3vw, 3rem);
          width: 100%;
          margin: 0;
          max-width: none;
          padding: 3.25rem 0 4.5rem;
          background: var(--bd-bg);
          color: var(--bd-text);
          font-family: var(--bd-fb);
          box-sizing: border-box;
        }
        .ws-bd-demo * { box-sizing: border-box; }
        .ws-bd-demo img { display:block; width:100%; height:100%; object-fit:cover; }
        .ws-bd-demo .ws-bd-head {
          text-align:center;
          margin:0 auto 2.75rem;
          max-width:47.5rem;
          padding-inline: var(--bd-gutter);
        }
        .ws-bd-demo .ws-bd-eyebrow {
          margin:0 0 0.5rem; font-size:0.875rem; line-height:1.4; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:0;
        }
        .ws-bd-demo .ws-bd-title {
          margin:0; font-family:var(--bd-fh); font-size:1.5rem; line-height:1.2; letter-spacing:0; font-weight:700; opacity:0;
        }
        .ws-bd-demo .ws-bd-subtitle {
          margin:1rem 0 0; display:block; font-size:1rem; line-height:1.5; font-weight:400; opacity:0;
        }
        .ws-bd-demo .ws-bd-cta {
          display:inline-flex; align-items:center; justify-content:center; margin-top:1.75rem; min-height:2.625rem; padding:0 1.375rem;
          border-radius:var(--bd-radius-pill); background:var(--wapu-button-bg,var(--bd-chip)); color:var(--wapu-button-text,var(--bd-cta-text)); font-size:1rem; font-weight:500;
          text-decoration:underline; text-underline-offset:0.25rem; text-decoration-thickness:1.5px; opacity:0;
        }
        .ws-bd-demo .ws-bd-grid {
          display:grid;
          grid-template-columns:repeat(6,minmax(0,1fr));
          gap:1.125rem 0.75rem;
          align-items:end;
          width:min(100%, var(--bd-max));
          margin:0 auto;
          padding-inline: var(--bd-gutter);
          grid-template-areas:
            "brand1 image2 brand3 image4 brand5 image6"
            "image1 image2 image3 image4 image5 image6"
            "image1 brand2 image3 brand4 image5 brand6";
        }
        .ws-bd-demo .ws-bd-brand {
          width:100%;
          display:flex;
          align-items:center;
          justify-content:center;
          text-align:center;
          text-decoration:none;
          color:inherit;
          opacity:0;
        }
        .ws-bd-demo .ws-bd-brand-media {
          display:flex;
          align-items:center;
          justify-content:center;
          width:100%;
          min-height:5.5rem;
          padding:0 0.375rem;
        }
        .ws-bd-demo .ws-bd-brand-media img {
          width:100%;
          height:auto;
          max-width:100%;
          max-height:5.5rem;
          object-fit:contain;
          object-position:center center;
          transform:scale(1.14);
          transform-origin:center center;
        }
        .ws-bd-demo .ws-bd-brand-wordmark {
          display:block;
          width:100%;
          font-size:clamp(1.25rem, 2.2vw, 2rem);
          line-height:1;
          letter-spacing: 0;
          font-weight:700;
          color:var(--bd-text);
          white-space:nowrap;
          text-transform:none;
        }
        .ws-bd-demo .ws-bd-brand-wordmark.is-serif {
          font-family:var(--pg-style-heading,var(--pg-style-heading,Georgia,serif));
          font-size:clamp(1.375rem, 2.4vw, 2.25rem);
          font-style:italic;
          font-weight:600;
        }
        .ws-bd-demo .ws-bd-brand-wordmark.is-wide {
          font-size:clamp(1.125rem, 2vw, 1.75rem);
          letter-spacing:.14em;
          text-transform:uppercase;
        }
        .ws-bd-demo .ws-bd-brand-wordmark.is-bottom {
          font-size:clamp(1rem, 1.8vw, 1.5rem);
          line-height:1;
          letter-spacing:.08em;
          text-transform:uppercase;
        }
        .ws-bd-demo .ws-bd-brand-wordmark.is-lower {
          font-size:clamp(1.25rem, 2.2vw, 2rem);
          letter-spacing: 0;
          text-transform:lowercase;
        }
        .ws-bd-demo .ws-bd-brand--1 { grid-area: brand1; align-self:end; padding-bottom: 0.5rem; }
        .ws-bd-demo .ws-bd-brand--2 { grid-area: brand2; align-self:start; padding-top: 0.75rem; }
        .ws-bd-demo .ws-bd-brand--3 { grid-area: brand3; align-self:end; padding-bottom: 0.5rem; }
        .ws-bd-demo .ws-bd-brand--4 { grid-area: brand4; align-self:start; padding-top: 0.75rem; }
        .ws-bd-demo .ws-bd-brand--5 { grid-area: brand5; align-self:end; padding-bottom: 0.5rem; }
        .ws-bd-demo .ws-bd-brand--6 { grid-area: brand6; align-self:start; padding-top: 0.75rem; }
        .ws-bd-demo .ws-bd-item { width:100%; opacity:0; text-decoration:none; color:inherit; }
        .ws-bd-demo .ws-bd-card {
          display:block; overflow:hidden; border-radius:var(--bd-radius-xl); background:var(--bd-card); aspect-ratio:.76; box-shadow:0 1px 0 var(--wb-text);
        }
        .ws-bd-demo .ws-bd-item--1 { grid-area:image1; }
        .ws-bd-demo .ws-bd-item--2 { grid-area:image2; }
        .ws-bd-demo .ws-bd-item--3 { grid-area:image3; }
        .ws-bd-demo .ws-bd-item--4 { grid-area:image4; }
        .ws-bd-demo .ws-bd-item--5 { grid-area:image5; }
        .ws-bd-demo .ws-bd-item--6 { grid-area:image6; }

        .ws-bd-demo .ws-bd-eyebrow,
        .ws-bd-demo .ws-bd-title,
        .ws-bd-demo .ws-bd-subtitle,
        .ws-bd-demo .ws-bd-cta,
        .ws-bd-demo .ws-bd-brand,
        .ws-bd-demo .ws-bd-item {
          opacity:0;
        }
        .ws-bd-demo.is-inview .ws-bd-eyebrow,
        .ws-bd-demo.is-inview .ws-bd-title,
        .ws-bd-demo.is-inview .ws-bd-subtitle,
        .ws-bd-demo.is-inview .ws-bd-cta,
        .ws-bd-demo.is-inview .ws-bd-brand,
        .ws-bd-demo.is-inview .ws-bd-item {
          animation-fill-mode:both;
          animation-duration:1.35s;
          animation-timing-function:cubic-bezier(.22,1,.36,1);
        }
        .ws-bd-demo.is-inview .ws-bd-eyebrow { animation-name: wsBdTextUp; animation-delay:.08s; }
        .ws-bd-demo.is-inview .ws-bd-title { animation-name: wsBdTextUp; animation-delay:.22s; }
        .ws-bd-demo.is-inview .ws-bd-subtitle { animation-name: wsBdTextUp; animation-delay:.38s; }
        .ws-bd-demo.is-inview .ws-bd-cta { animation-name: wsBdTextUp; animation-delay:.54s; }

        .ws-bd-demo.is-inview .ws-bd-brand--1,
        .ws-bd-demo.is-inview .ws-bd-brand--3,
        .ws-bd-demo.is-inview .ws-bd-brand--5 { animation-name: wsBdDropDown; }
        .ws-bd-demo.is-inview .ws-bd-brand--2,
        .ws-bd-demo.is-inview .ws-bd-brand--4,
        .ws-bd-demo.is-inview .ws-bd-brand--6 { animation-name: wsBdTextUp; }

        .ws-bd-demo.is-inview .ws-bd-item--1,
        .ws-bd-demo.is-inview .ws-bd-item--3,
        .ws-bd-demo.is-inview .ws-bd-item--5 { animation-name: wsBdRiseUp; }
        .ws-bd-demo.is-inview .ws-bd-item--2,
        .ws-bd-demo.is-inview .ws-bd-item--4,
        .ws-bd-demo.is-inview .ws-bd-item--6 { animation-name: wsBdDropDown; }

        .ws-bd-demo.is-inview .ws-bd-brand--1 { animation-delay:.72s; }
        .ws-bd-demo.is-inview .ws-bd-item--1 { animation-delay:.90s; }
        .ws-bd-demo.is-inview .ws-bd-item--2 { animation-delay:1.02s; }
        .ws-bd-demo.is-inview .ws-bd-brand--2 { animation-delay:1.14s; }
        .ws-bd-demo.is-inview .ws-bd-brand--3 { animation-delay:1.26s; }
        .ws-bd-demo.is-inview .ws-bd-item--3 { animation-delay:1.42s; }
        .ws-bd-demo.is-inview .ws-bd-item--4 { animation-delay:1.54s; }
        .ws-bd-demo.is-inview .ws-bd-brand--4 { animation-delay:1.66s; }
        .ws-bd-demo.is-inview .ws-bd-brand--5 { animation-delay:1.78s; }
        .ws-bd-demo.is-inview .ws-bd-item--5 { animation-delay:1.94s; }
        .ws-bd-demo.is-inview .ws-bd-item--6 { animation-delay:2.06s; }
        .ws-bd-demo.is-inview .ws-bd-brand--6 { animation-delay:2.18s; }

        @keyframes wsBdTextUp {
          from { opacity:0; transform:translate3d(0, 1.75rem, 0); }
          to   { opacity:1; transform:translate3d(0, 0, 0); }
        }
        @keyframes wsBdDropDown {
          from { opacity:0; transform:translate3d(0, -3.5rem, 0) scale(.98); }
          to   { opacity:1; transform:translate3d(0, 0, 0) scale(1); }
        }
        @keyframes wsBdRiseUp {
          from { opacity:0; transform:translate3d(0, 3.5rem, 0) scale(.98); }
          to   { opacity:1; transform:translate3d(0, 0, 0) scale(1); }
        }

        @media (max-width: 73.75em) {
          .ws-bd-demo .ws-bd-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.375rem 1.125rem;
            grid-template-areas:
              "brand1 image2"
              "image1 brand2"
              "brand3 image4"
              "image3 brand4"
              "brand5 image6"
              "image5 brand6";
            align-items: center;
          }
          .ws-bd-demo .ws-bd-brand-wordmark,
          .ws-bd-demo .ws-bd-brand-media { white-space: normal; }
        }
@container wapu-block-preview (max-width: 73.75em){
          .ws-bd-demo .ws-bd-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.375rem 1.125rem;
            grid-template-areas:
              "brand1 image2"
              "image1 brand2"
              "brand3 image4"
              "image3 brand4"
              "brand5 image6"
              "image5 brand6";
            align-items: center;
          }
          .ws-bd-demo .ws-bd-brand-wordmark,
          .ws-bd-demo .ws-bd-brand-media { white-space: normal; }
        }


        @media (max-width: 45em) {
          .ws-bd-demo { padding: 2rem 0 2.5rem; }
          .ws-bd-demo .ws-bd-head { margin-bottom: 1.5rem; max-width: 100%; padding-inline: 1.25rem; }
          .ws-bd-demo .ws-bd-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: center;
            gap: 1rem;
            padding-inline: 1.25rem;
            grid-template-areas:
              "brand1 image2"
              "image1 brand2"
              "brand3 image4"
              "image3 brand4"
              "brand5 image6"
              "image5 brand6";
          }
          .ws-bd-demo .ws-bd-card { border-radius: var(--bd-radius-lg); aspect-ratio: .92; }
          .ws-bd-demo .ws-bd-brand--1 {
            justify-self:center;
            align-self:center;
            padding-bottom:0;
          }
          .ws-bd-demo .ws-bd-item--1 {
            align-self:center;
          }
          .ws-bd-demo .ws-bd-brand--2 {
            align-self:center;
            justify-self:center;
            padding-top:0;
          }
          .ws-bd-demo .ws-bd-title { font-size:1.5rem; }
          .ws-bd-demo .ws-bd-eyebrow { font-size:0.875rem; letter-spacing:.12em; }
          .ws-bd-demo .ws-bd-subtitle { font-size: 0.9375rem; margin-top: 1rem; }
          .ws-bd-demo .ws-bd-cta { min-height: 2.5rem; padding: 0 1.25rem; font-size: 0.9375rem; margin-top: 1.25rem; }
          .ws-bd-demo .ws-bd-brand-media { min-height: 3.5rem; }
          .ws-bd-demo .ws-bd-brand-media img { max-height: 3.375rem; }
          .ws-bd-demo .ws-bd-brand-wordmark { font-size:clamp(1.125rem, 6vw, 1.75rem); line-height:1; }
          .ws-bd-demo .ws-bd-brand--2 .ws-bd-brand-wordmark,
          .ws-bd-demo .ws-bd-brand--2 .ws-bd-brand-media { max-width: 100%; }
        }
@container wapu-block-preview (max-width: 45em){
          .ws-bd-demo { padding: 2rem 0 2.5rem; }
          .ws-bd-demo .ws-bd-head { margin-bottom: 1.5rem; max-width: 100%; padding-inline: 1.25rem; }
          .ws-bd-demo .ws-bd-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: center;
            gap: 1rem;
            padding-inline: 1.25rem;
            grid-template-areas:
              "brand1 image2"
              "image1 brand2"
              "brand3 image4"
              "image3 brand4"
              "brand5 image6"
              "image5 brand6";
          }
          .ws-bd-demo .ws-bd-card { border-radius: var(--bd-radius-lg); aspect-ratio: .92; }
          .ws-bd-demo .ws-bd-brand--1 {
            justify-self:center;
            align-self:center;
            padding-bottom:0;
          }
          .ws-bd-demo .ws-bd-item--1 {
            align-self:center;
          }
          .ws-bd-demo .ws-bd-brand--2 {
            align-self:center;
            justify-self:center;
            padding-top:0;
          }
          .ws-bd-demo .ws-bd-title { font-size:1.5rem; }
          .ws-bd-demo .ws-bd-eyebrow { font-size:0.875rem; letter-spacing:.12em; }
          .ws-bd-demo .ws-bd-subtitle { font-size: 0.9375rem; margin-top: 1rem; }
          .ws-bd-demo .ws-bd-cta { min-height: 2.5rem; padding: 0 1.25rem; font-size: 0.9375rem; margin-top: 1.25rem; }
          .ws-bd-demo .ws-bd-brand-media { min-height: 3.5rem; }
          .ws-bd-demo .ws-bd-brand-media img { max-height: 3.375rem; }
          .ws-bd-demo .ws-bd-brand-wordmark { font-size:clamp(1.125rem, 6vw, 1.75rem); line-height:1; }
          .ws-bd-demo .ws-bd-brand--2 .ws-bd-brand-wordmark,
          .ws-bd-demo .ws-bd-brand--2 .ws-bd-brand-media { max-width: 100%; }
        }


        @media (prefers-reduced-motion: reduce) {
          .ws-bd-demo .ws-bd-eyebrow,
          .ws-bd-demo .ws-bd-title,
          .ws-bd-demo .ws-bd-subtitle,
          .ws-bd-demo .ws-bd-cta,
          .ws-bd-demo .ws-bd-brand,
          .ws-bd-demo .ws-bd-item {
            animation:none;
            opacity:1;
          }
        }

/* 8.0 · Carrusel de logos canónico */
.ws-bm-logo-grid .ws-bm-carousel{
  width:min(100%,111.25rem);
  margin:0 auto;
}
.ws-bm-logo-grid .ws-bm-carousel .wapu-carousel__track{
  padding:0.25rem 0.125rem 1.125rem;
}
.ws-bm-logo-grid .ws-bm-slide{
  flex:0 0 clamp(11.875rem,19vw,18.75rem);
  min-width:11.875rem;
}
.ws-bm-logo-grid .ws-bm-slide .ws-bm-card{
  width:100%;
  min-height:clamp(7.375rem,8.4vw,10rem);
  scroll-snap-align:unset;
}
@media (max-width:45em){
  .ws-bm-logo-grid .ws-bm-slide{flex-basis:min(76vw,16.25rem);min-width:min(76vw,16.25rem)}
  .ws-bm-logo-grid .ws-bm-slide .ws-bm-card{min-height:6.75rem}
}
@container wapu-block-preview (max-width:45em){
  .ws-bm-logo-grid .ws-bm-slide{flex-basis:min(76vw,16.25rem);min-width:min(76vw,16.25rem)}
  .ws-bm-logo-grid .ws-bm-slide .ws-bm-card{min-height:6.75rem}
}