@layer components {
  .studio-bento {
    padding-block: clamp(2.5rem, 4.5vw, 4.5rem) 0;
  }
  .studio-bento-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(420px, 1fr) minmax(320px, 1fr);
    gap: clamp(.5rem, 1vw, 1rem);
    min-height: 780px;
  }
  .studio-bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: clamp(12px, 1.5vw, 22px);
    background: color-mix(in srgb, var(--muted-surface) 28%, var(--surface));
  }
  .studio-bento-tall {
    grid-row: 1 / 3;
    gap: clamp(1.2rem, 2vw, 2rem);
    padding: clamp(.9rem, 1.25vw, 1.2rem);
  }
  .bento-photo { overflow: hidden; min-width: 0; min-height: 0; }
  .bento-photo > img { width: 100%; height: 100%; object-fit: cover; }
  .bento-craft-photo { flex: 1 1 auto; min-height: 250px; border-radius: clamp(10px, 1.2vw, 16px); }
  /* Oculta la franja negra que trae new1.jpeg en su borde inferior. */
  .bento-craft-photo > img { transform: scale(1.02); }
  .bento-copy { min-width: 0; text-align: center; }
  .studio-bento-grid .bento-copy > :is(h2, h3, p) { margin-inline: auto; }
  .bento-kicker { margin-bottom: .85rem; color: var(--brand-deep); font-size: .6rem; line-height: 1.5; letter-spacing: .03em; }
  .studio-bento :is(h2, h3) { font: 500 clamp(1.16rem, 1.8vw, 1.7rem)/1.18 var(--font); letter-spacing: -.045em; text-wrap: balance; }
  .bento-description { margin-top: .85rem; max-width: 29rem; color: var(--brand-deep); font-size: clamp(.75rem, .95vw, .85rem); line-height: 1.6; }
  .bento-collaboration { overflow: visible; z-index: 2; }
  .bento-collaboration-photo { position: relative; flex: 1 1 auto; min-height: 155px; overflow: clip; border-radius: inherit; }
  .bento-collaboration-photo > img { position: absolute; top: 50%; left: 50%; width: 95%; max-width: none; height: auto; object-fit: contain; transform: translate(-50%, -50%) rotate(-90deg); pointer-events: none; }
  .bento-collaboration > .bento-copy { position: relative; padding: clamp(1.1rem, 1.8vw, 1.8rem) 4.5rem clamp(1.1rem, 1.8vw, 1.8rem) clamp(1.1rem, 1.8vw, 1.8rem); }
  .bento-vine { position: absolute; right: 0; top: 42%; width: 74px; height: calc(58% + 105px); overflow: visible; pointer-events: none; }
  .bento-vine-stem { fill: none; stroke: url(#bento-vine-stem-fade); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .bento-vine-branches { fill: none; stroke: var(--brand-deep); stroke-width: 1; stroke-linecap: round; opacity: .75; vector-effect: non-scaling-stroke; }
  .bento-collaboration .bento-kicker { margin-bottom: .65rem; }
  .bento-trend { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .bento-trend > .bento-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1rem, 1.6vw, 1.6rem); }
  .bento-trend .bento-kicker { margin-bottom: .6rem; }
  .studio-bento .bento-stat { font-size: clamp(2.5rem, 4.2vw, 4.2rem); line-height: 1; letter-spacing: -.06em; }
  .bento-stat > span:last-child { font-size: .65em; }
  .bento-stat .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .bento-trend .bento-description { margin-top: .65rem; font-size: .7rem; line-height: 1.55; }
  .bento-strategy-photo > img { object-position: 45% center; }
  .bento-source { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .35rem; color: var(--brand-deep); font-size: .6rem; line-height: 1.4; }
  .studio-bento-wide { display: grid; grid-column: 2 / 4; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .studio-bento-wide > .bento-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 2.3vw, 2.3rem); }
  .studio-bento-wide h3 { max-width: 18rem; font-size: clamp(1.3rem, 2.1vw, 2rem); }
  .bento-disciplines { margin-top: 1.25rem; color: var(--brand-deep); font-size: .6rem; line-height: 1.6; }
  /* Oculta las franjas negras incorporadas en los bordes de new4.jpeg. */
  .bento-nature-photo > img { object-position: 68% center; transform: scale(1.035); }
  @media (max-width: 900px) {
    .studio-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(340px, auto)) minmax(280px, auto); min-height: 0; aspect-ratio: auto; }
    .studio-bento-tall { grid-column: 1; grid-row: 1 / 3; }
    .studio-bento-wide { grid-column: 1 / 3; }
    .bento-craft-photo { min-height: 220px; }
  }
  @media (max-width: 600px) {
    .studio-bento-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: .75rem; }
    .studio-bento-tall, .studio-bento-wide { grid-column: auto; grid-row: auto; }
    .studio-bento-tall { padding: 1rem; gap: 1.4rem; }
    .bento-craft-photo { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
    .studio-bento :is(h2, h3) { font-size: 1.4rem; }
    .bento-collaboration-photo { flex: none; height: auto; aspect-ratio: 1.35; min-height: 0; }
    .bento-collaboration > .bento-copy { padding: 1.25rem 4.25rem 1.25rem 1.25rem; }
    .bento-vine { width: 64px; height: calc(58% + 80px); }
    .bento-trend { min-height: 285px; }
    .bento-trend > .bento-copy { padding: 1.25rem; }
    .studio-bento .bento-stat { font-size: 3.5rem; }
    .studio-bento-wide { grid-template-columns: minmax(0, 1fr); }
    .studio-bento-wide > .bento-copy { padding: 1.5rem; }
    .bento-nature-photo { height: 220px; }
  }
  .testimonials {
    padding-block: clamp(3.5rem, 6.5vw, 6.5rem) clamp(2rem, 3vw, 3rem);
  }
  .testimonials-heading {
    margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
    text-align: center;
  }
  .testimonials-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 1.15rem;
    padding: .4rem 1.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted-surface) 28%, var(--surface));
    color: var(--brand-deep);
    font-size: .6rem;
    line-height: 1.3;
    letter-spacing: .045em;
  }
  .testimonials-heading h2 {
    font: 500 clamp(1.75rem, 3vw, 3rem)/1.18 var(--font);
    letter-spacing: -.05em;
  }
  .testimonials-heading > p:last-child {
    margin: .85rem auto 0;
    max-width: 38rem;
    color: var(--brand-deep);
    font-size: clamp(.7rem, .95vw, .88rem);
    line-height: 1.65;
  }
  .testimonials-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * clamp(.65rem, 1.25vw, 1.25rem)) / 4);
    gap: clamp(.65rem, 1.25vw, 1.25rem);
    min-width: 0;
    padding-bottom: .25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .testimonials-track::-webkit-scrollbar { display: none; }
  .testimonials-track:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 6px;
    border-radius: 16px;
  }
  .testimonial-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    min-height: clamp(240px, 23vw, 320px);
    margin: 0;
    padding: clamp(1rem, 1.8vw, 1.8rem);
    border-radius: clamp(12px, 1.5vw, 22px);
    background: #fff;
    scroll-snap-align: start;
    overflow-wrap: anywhere;
  }
  .testimonial-card blockquote {
    margin: 0;
    font-size: clamp(.74rem, .95vw, .88rem);
    line-height: 1.65;
  }
  .testimonial-card figcaption {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
  }
  .testimonial-avatar {
    display: block;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ink);
  }
  .testimonial-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .testimonial-person { display: grid; gap: .2rem; min-width: 0; }
  .testimonial-name { font-size: clamp(.64rem, .8vw, .75rem); line-height: 1.4; }
  .testimonial-role { color: var(--brand-deep); font-size: clamp(.6rem, .7vw, .68rem); line-height: 1.4; }
  .testimonials-controls {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.5rem;
  }
  .testimonials-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--muted-surface) 28%, var(--surface));
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
  }
  .testimonials-control:disabled { opacity: .4; cursor: default; }
  .testimonials-control:not(:disabled):hover { background: var(--ink); color: var(--surface); }
  @media (max-width: 1050px) {
    .testimonials-track {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - clamp(.65rem, 1.25vw, 1.25rem)) / 2);
    }
    .testimonial-card { min-height: 280px; }
  }
  @media (max-width: 600px) {
    .testimonials-track { grid-auto-columns: 86%; }
    .testimonial-card { min-height: 260px; }
    .testimonials-heading > p:last-child br { display: none; }
  }
  @media print {
    .studio-bento { padding: 1rem; }
    .studio-bento-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; min-height: 0; aspect-ratio: auto; }
    .studio-bento-card { grid-row: auto; grid-column: auto; break-inside: avoid; }
    .bento-photo { max-height: 180px; }
    .testimonials { padding: 1rem; }
    .testimonials-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .testimonial-card { min-height: 200px; break-inside: avoid; }
    .testimonials-controls { display: none; }
  }
}