/* Secciones compartidas: barra, piezas, armador, nosotras, pie */

/* ---------- barra ---------- */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px var(--gutter); font-size: 14px; letter-spacing: .01em; color: var(--tinta); transition: color .5s, background-color .5s, transform .7s var(--curva); }
.barra nav { display: flex; gap: clamp(16px, 2vw, 30px); }
.barra .der { justify-content: flex-end; }
.barra a { text-decoration: none; }
.barra nav a { position: relative; padding: 12px 0; }
.barra nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--curva); }
.barra nav a:hover::after { transform: none; transform-origin: left; }
.logo { display: block; width: clamp(118px, 10vw, 156px); aspect-ratio: 1715 / 414; background: currentColor; -webkit-mask: url(../img/logo.png) center / contain no-repeat; mask: url(../img/logo.png) center / contain no-repeat; }
.barra.sobre-foto { color: var(--hueso); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.barra.llena { color: var(--tinta); background: var(--beige); }
.barra.llena.oscura { color: var(--hueso); background: var(--cuero); }
.barra.oculta { transform: translateY(-100%); }

/* ---------- piezas ---------- */
.piezas { position: relative; padding: clamp(90px, 15vh, 170px) var(--gutter) clamp(80px, 12vh, 140px); background: var(--beige); }
.piezas-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24em); gap: 16px 40px; align-items: end; margin-bottom: clamp(26px, 5vh, 56px); }
.piezas-cab h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 80px); line-height: 1; margin: 0; }
.piezas-cab p { margin: 0; color: var(--tinta-2); }
.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.indice li { border-bottom: 1px solid var(--linea); }
.indice a { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: clamp(10px, 1.6vh, 18px) 0; text-decoration: none; transition: color .45s, padding .7s var(--curva); }
.indice .num { font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.indice .nom { font-family: var(--serif); font-size: clamp(36px, 5.6vw, 92px); line-height: 1.04; }
.indice small { font-size: 14px; color: var(--tinta-2); }
.indice .mini { display: none; }
@media (hover: hover) {
  .indice:hover a { color: rgba(34,26,20,.25); }
  .indice a:hover { color: var(--tinta); padding-left: 1.4vw; }
}
.flotante { position: fixed; left: 0; top: 0; margin: 0; width: clamp(220px, 19vw, 300px); aspect-ratio: 4 / 5; pointer-events: none; z-index: 15; overflow: hidden; clip-path: inset(50% 0 50% 0); transform: translate3d(var(--x, 0), var(--y, 0), 0); transition: clip-path .6s var(--curva-2); }
.flotante.ve { clip-path: inset(0); }
.flotante img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.2s var(--curva); }
.flotante.ve img { transform: none; }

/* ---------- armador sobre crema ---------- */
.armar { background: var(--crema); padding: clamp(90px, 14vh, 160px) var(--gutter) clamp(90px, 13vh, 150px); }
.armar .arm { --sup: var(--crema-2); --l: rgba(34,26,20,.17); }
.armar-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24em); gap: 16px 40px; align-items: end; margin-bottom: clamp(30px, 5vh, 56px); }
.armar-cab h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 100px); line-height: .95; margin: 0; }
.armar-cab p { margin: 0; color: var(--tinta-2); }

/* ---------- nosotras: recorrido horizontal ---------- */
.nosotras { background: var(--cuero); color: var(--hueso); }
.nos-escena { position: relative; overflow: hidden; padding: clamp(80px, 12vh, 130px) 0; }
.js .nos-pista.fija .nos-escena { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: 0; }
.nos-tira { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: clamp(22px, 3vw, 54px); align-items: center; will-change: transform; }
.nos-tira > li { flex: none; }
.nos-texto { width: min(40vw, 560px); padding-right: 3vw; }
.nos-texto h2 { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: .04em; margin: 0 0 22px; color: rgba(242,238,231,.6); }
.nos-texto .grande { font-family: var(--serif); font-size: clamp(28px, 2.7vw, 44px); line-height: 1.16; margin: 0 0 24px; }
.nos-texto p { margin: 0 0 14px; color: rgba(242,238,231,.72); max-width: 30em; }
.nos-texto .firma { font-family: var(--serif); font-size: 20px; color: var(--hueso); margin-top: 22px; }
.nos-foto figure { margin: 0; }
.nos-foto .marco { overflow: hidden; }
.nos-foto img { display: block; height: var(--alto, 60svh); width: auto; max-width: none; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--curva); }
.nos-foto.ve img { transform: none; }
.nos-foto figcaption { margin-top: 12px; display: flex; gap: 12px; font-size: 13px; color: rgba(242,238,231,.6); }
.nos-foto figcaption b { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--hueso); }
.nos-foto:nth-child(even) { align-self: flex-end; }
.nos-foto:nth-child(3n) { align-self: flex-start; }

/* ---------- pie ---------- */
.pie { background: var(--beige); padding: clamp(60px, 10vh, 110px) var(--gutter) 40px; }
.pie-arriba { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding-bottom: 50px; border-bottom: 1px solid var(--linea); }
.pie .logo { width: 170px; color: var(--tinta); }
.pie h3 { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--tinta-2); margin: 0 0 12px; letter-spacing: .03em; }
.pie p, .pie li { margin: 0 0 6px; font-size: 15px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie-abajo { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; font-size: 13px; color: var(--tinta-2); }

@media (max-width: 860px) {
  .barra { grid-template-columns: auto 1fr; }
  .barra .izq { display: none; }
  .barra .logo { order: -1; }
  .piezas-cab, .armar-cab { grid-template-columns: 1fr; }
  .indice a { grid-template-columns: 1fr auto; }
  .indice .num { display: none; }
  .indice .mini { display: block; grid-row: 1 / 3; grid-column: 2; width: 64px; aspect-ratio: 4 / 5; object-fit: cover; }
  .indice small { grid-column: 1; }
  .flotante { display: none; }
  .nos-tira { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: flex-start; }
  .nos-tira::-webkit-scrollbar { display: none; }
  .nos-tira > li { scroll-snap-align: start; }
  .nos-texto { width: 82vw; }
  .nos-foto img { height: 52svh; }
  .nos-foto:nth-child(n) { align-self: flex-start; }
  .pie-arriba { grid-template-columns: 1fr 1fr; }
}