@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("fonts/oswald-latin.woff2") format("woff2");
}

.juvenia-section {
  --j-red: #d7082f;
  --j-red-dark: #a90426;
  --j-ink: #15171b;
  --j-muted: #62666d;
  --j-line: #e8dfe2;
  --j-soft: #fff7f8;
  --j-teal: #16d5c6;
  --j-hero-h: clamp(320px, 46vw, 560px);
  --j-row-h: clamp(240px, 30vw, 420px);
  box-sizing: border-box;
  margin: 0;
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1rem, 5vw, 3rem);
  color: var(--j-ink);
  background: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}
.juvenia-section *, .juvenia-section *::before, .juvenia-section *::after { box-sizing: inherit; }
.juvenia-section__inner { max-width: 1160px; margin: 0 auto; }

/* ── 1 · Hero: texto + pestañas a la izquierda, pieza a la derecha ── */
.juvenia-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.juvenia-section__eyebrow {
  margin: 0 0 .8rem; color: var(--j-red); font: 700 .75rem/1.2 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
}
.juvenia-section__title {
  margin: 0; font: 700 clamp(2.2rem, 5vw, 4.2rem)/.98 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: -.025em; text-transform: uppercase;
}
.juvenia-section__title span { color: var(--j-red); }
.juvenia-section__rule { width: 78px; height: 5px; margin: 1.35rem 0 1.2rem; border: 0; background: var(--j-teal); }
.juvenia-section__lead { max-width: 52ch; margin: 0; color: var(--j-muted); font-size: clamp(1rem, 1.5vw, 1.12rem); }

/* Pestañas */
.juvenia-tabs { display: grid; gap: .5rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.juvenia-tab {
  display: grid; gap: .1rem; width: 100%;
  padding: .85rem 1.1rem;
  border: 1px solid var(--j-line); border-left: 4px solid transparent; border-radius: 12px;
  background: #fff; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.juvenia-tab:hover { background: var(--j-soft); transform: translateX(2px); }
.juvenia-tab:focus-visible { outline: 3px solid var(--j-teal); outline-offset: 2px; }
.juvenia-tab[aria-selected="true"] { border-color: rgba(215, 8, 47, .28); border-left-color: var(--j-red); background: var(--j-soft); }
.juvenia-tab__kicker { color: var(--j-red); font: 700 .68rem/1.2 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.juvenia-tab__title { font: 700 clamp(1.05rem, 1.8vw, 1.35rem)/1.12 "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; }

/* Escenario de la derecha */
.juvenia-hero__stage { min-height: var(--j-hero-h); }
.juvenia-panel[hidden] { display: none; }
.juvenia-panel__pieces { display: flex; flex-wrap: wrap; gap: clamp(.7rem, 1.6vw, 1.15rem); align-items: flex-start; }
.juvenia-piece { flex: 0 0 auto; width: calc(var(--ar) * var(--j-hero-h)); max-width: 100%; margin: 0; }
.juvenia-piece button { display: block; width: 100%; height: var(--j-hero-h); max-height: none; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #f2eef0; cursor: zoom-in; box-shadow: 0 14px 30px rgba(21, 23, 27, .14); }
.juvenia-piece img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.juvenia-panel__description { margin: 1rem 0 0; max-width: 46ch; color: var(--j-muted); font-size: .92rem; }

/* ── 2 · Galería: todas las piezas, misma altura ── */
.juvenia-galeria { margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--j-line); }
.juvenia-galeria__label { margin: 0 0 clamp(1.2rem, 3vw, 2rem); color: var(--j-red); font: 700 .75rem/1.2 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.juvenia-galeria__grid { display: flex; flex-wrap: wrap; gap: clamp(.8rem, 2vw, 1.35rem); align-items: flex-start; }
.juvenia-tile { flex: 0 0 auto; width: calc(var(--ar) * var(--j-row-h)); max-width: 100%; margin: 0; }
.juvenia-tile button { display: block; width: 100%; height: var(--j-row-h); padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #f2eef0; cursor: zoom-in; box-shadow: 0 8px 18px rgba(21, 23, 27, .12); }
.juvenia-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }

.juvenia-piece button:hover img, .juvenia-tile button:hover img { transform: scale(1.03); }
.juvenia-piece button:focus-visible, .juvenia-tile button:focus-visible { outline: 3px solid var(--j-teal); outline-offset: 4px; }

.juvenia-section__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 5rem); padding: 1.4rem 1.5rem; border-radius: 16px; color: var(--j-ink); background: #f4f4f5; }
.juvenia-section__footer p { margin: 0; font: 700 clamp(1.2rem, 2.5vw, 1.75rem)/1.1 "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; }
.juvenia-section__footer a { color: #fff; padding: .7rem 1.25rem; border-radius: 999px; background: #2699A6; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .2s ease; }
.juvenia-section__footer a:hover { background: #24A6A6; }

/* ── Visor a pantalla completa ── */
.juvenia-visor {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0; padding: 0; border: 0; background: #0a090c; color: #fff;
}
.juvenia-visor::backdrop { background: rgba(8, 7, 10, .94); }
.juvenia-visor__figure { display: grid; grid-template-rows: 1fr auto; gap: .9rem; width: 100%; height: 100%; margin: 0; padding: clamp(1rem, 3vw, 2.2rem); }
.juvenia-visor__image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.juvenia-visor__caption { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0; color: #d8d5d9; font-size: .9rem; text-align: center; }
.juvenia-visor__counter { color: #8d8990; font-variant-numeric: tabular-nums; }
.juvenia-visor__close, .juvenia-visor__nav {
  position: fixed; z-index: 2; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; font-size: 1.5rem; line-height: 1;
  transition: background .2s ease;
}
.juvenia-visor__close:hover, .juvenia-visor__nav:hover { background: var(--j-red, #d7082f); }
.juvenia-visor__close:focus-visible, .juvenia-visor__nav:focus-visible { outline: 3px solid #16d5c6; outline-offset: 2px; }
.juvenia-visor__close { top: 1rem; right: 1rem; }
.juvenia-visor__nav--prev { top: 50%; left: 1rem; transform: translateY(-50%); }
.juvenia-visor__nav--next { top: 50%; right: 1rem; transform: translateY(-50%); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .juvenia-section { --j-hero-h: clamp(280px, 62vw, 440px); --j-row-h: clamp(260px, 62vw, 360px); }
  .juvenia-hero { grid-template-columns: 1fr; }
  .juvenia-hero__stage { min-height: 0; }
  .juvenia-galeria__grid, .juvenia-panel__pieces { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .juvenia-piece img, .juvenia-tile img, .juvenia-tab { transition: none; }
}