/* Hilvana · tienda de ropa en Valencia (concepto WEBO). Editorial de moda: blanco óptico, negro y un solo golpe de rosa.
   El hilván (puntada larga discontinua) es el filete de la casa. Esquinas rectas en todo.
   Movimiento (6/10, editorial): el hilván cose la página puntada a puntada (momento firma, hilvana.js), primero bajo
   HILVANA y después en cada sección; en «Prendas» el hilo avanza con el scroll de una prenda a la siguiente.
   Lookbook revelado por máscaras, probador que se descorre como una cortina. Estados ocultos solo bajo html.mov. */

@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/conceptos/bodonimoda-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/conceptos/bodonimoda-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/conceptos/bodonimoda-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/assets/fonts/conceptos/albertsans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/assets/fonts/conceptos/albertsans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --blanco: #FAFAF8;
  --negro: #0E0E0E;
  --rosa: #FF3D7F;
  --gris: #8B8B8B;
  --gris-texto: #696969; /* el gris del encargo, oscurecido lo justo para leer texto pequeño (AA) */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-larga: cubic-bezier(.16, 1, .3, 1);
  --margen: clamp(16px, 3.4vw, 48px);
  --gap: clamp(12px, 1.7vw, 24px);
  --hilvan: linear-gradient(to right, currentColor 0 14px, transparent 14px 22px) left top / 22px 1.5px repeat-x;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

html { background: var(--blanco); scroll-behavior: smooth; scrollbar-color: #C9C9C6 var(--blanco); }
body { background: var(--blanco); color: var(--negro); font: 400 1rem/1.6 var(--sans); font-kerning: normal; }
::selection { background: var(--rosa); color: var(--negro); }
:focus-visible { outline: 2px solid var(--negro); outline-offset: 3px; }
em { font-style: italic; }

.saltar {
  position: absolute; left: 16px; top: 16px; z-index: 50;
  padding: 10px 16px; background: var(--negro); color: var(--blanco); text-decoration: none;
  transform: translateY(-160%);
}
.saltar:focus-visible { transform: none; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 0;
  font: 500 .9375rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--rosa { background: var(--rosa); color: var(--negro); }
.boton--linea { min-height: 40px; padding: 0 18px; color: var(--negro); box-shadow: inset 0 0 0 1px var(--negro); }
@media (hover: hover) and (pointer: fine) {
  .boton--rosa:hover { background: var(--negro); color: var(--blanco); }
  .boton--linea:hover { background: var(--negro); color: var(--blanco); }
  .barra__nav a:hover { text-decoration-color: var(--negro); }
}

/* Barra superior */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--margen);
}
.barra__nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.barra__nav a {
  font-size: .9375rem; font-weight: 500; text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color 200ms ease;
}

/* Portada de revista */
.portada { padding: 0 var(--margen); }
.cabecera-revista { margin: 0; font: 500 19.4vw/.8 var(--serif); letter-spacing: 0; }
.cabecera-revista__letras { display: flex; justify-content: space-between; padding: .03em .105em 0 0; margin-left: -.022em; }
.cabecera-revista__letras span { display: block; }
/* Ajuste óptico: la V y la A son diagonales y, al repartir el ancho, dejaban un hueco entre ellas */
.cabecera-revista__letras span:nth-child(4) { position: relative; left: .045em; }
.cabecera-revista__letras span:nth-child(5) { position: relative; left: -.035em; }
.portada__linea {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: clamp(10px, 1.4vw, 18px); padding-top: 12px;
  color: var(--negro);
  font-size: .875rem; font-weight: 500;
}
/* El hilván es un pseudoelemento: hilvana.js lo cose puntada a puntada moviendo --cosido (0px a 100 %) */
.portada__linea, .portada__lateral li, .prenda { position: relative; }
.portada__linea::before, .portada__lateral li::before, .prenda::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; pointer-events: none;
  background: var(--hilvan);
  clip-path: inset(0 calc(100% - var(--cosido, 100%)) 0 0);
}
.portada__linea em { font: italic 400 1.125rem/1 var(--serif); }

.portada__cuerpo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(20px, 2.6vw, 36px);
}
.portada__titulares { grid-column: 1 / span 4; padding-top: 4px; }
.titular-grande {
  font: italic 400 clamp(2.6rem, 5vw, 4.75rem)/1.04 var(--serif); letter-spacing: -.015em;
  padding-bottom: .06em; text-wrap: balance;
}
.portada__entradilla { margin-top: clamp(16px, 2vw, 24px); max-width: 30ch; font-size: 1.0625rem; line-height: 1.55; }
.acciones { margin-top: clamp(24px, 3vw, 36px); }
/* Pantallas bajas: menos aire en la portada para que «Ver la colección» no quede bajo la etiqueta de concepto */
@media (min-width: 761px) and (max-height: 800px) {
  .portada__linea { margin-top: 8px; }
  .portada__cuerpo { margin-top: 14px; }
  .acciones { margin-top: 18px; }
  .portada__entradilla { margin-top: 12px; }
}

.slot { position: relative; overflow: hidden; margin: 0; }
.slot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .16; }
.slot--retrato {
  grid-column: 5 / span 5; aspect-ratio: 4 / 5;
  background:
    linear-gradient(118deg, transparent 30%, rgb(14 14 14 / .0) 42%, transparent 54%),
    repeating-linear-gradient(104deg, rgb(14 14 14 / 0) 0 52px, rgb(14 14 14 / .28) 84px, rgb(14 14 14 / 0) 122px),
    radial-gradient(ellipse 58% 44% at 36% 26%, #FF5A93 0%, rgb(255 61 127 / .7) 45%, transparent 75%),
    linear-gradient(118deg, #FF3D7F 0%, #E8326F 24%, #8E1D45 46%, #33101D 64%, #0E0E0E 82%);
}
/* Trama de semitono en los medios tonos, como una impresión a dos tintas */
.slot--retrato::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgb(14 14 14 / .6) 0 1px, transparent 1.5px) 0 0 / 5px 5px;
  -webkit-mask-image: linear-gradient(118deg, transparent 24%, #000 44%, #000 56%, transparent 74%);
  mask-image: linear-gradient(118deg, transparent 24%, #000 44%, #000 56%, transparent 74%);
}
.slot--retrato::after { opacity: .28; }

.portada__lateral { grid-column: 10 / span 3; align-self: start; }
.portada__lateral li {
  padding: 14px 0 22px; color: var(--negro);
  font: 400 clamp(1.125rem, 1.6vw, 1.5rem)/1.22 var(--serif); text-wrap: balance;
}
.portada__lateral li:first-child { padding-top: 0; }
.portada__lateral li:first-child::before { display: none; }
.lateral__grande { display: block; font-weight: 500; font-size: 1.7em; line-height: 1; margin-bottom: 6px; letter-spacing: -.01em; }

/* Entrada de la portada: CSS bajo html.mov (concepto.js) para que arranque con el primer pintado.
   Las letras de la cabecera suben desde su línea, una a una; los hilvanes los cose hilvana.js. */
html.mov .cabecera-revista__letras { animation: h-mascara 1500ms linear; }
html.mov .cabecera-revista__letras span { animation: h-letra 1150ms var(--ease-larga) backwards; }
html.mov .cabecera-revista__letras span:nth-child(2) { animation-delay: 55ms; }
html.mov .cabecera-revista__letras span:nth-child(3) { animation-delay: 110ms; }
html.mov .cabecera-revista__letras span:nth-child(4) { animation-delay: 165ms; }
html.mov .cabecera-revista__letras span:nth-child(5) { animation-delay: 220ms; }
html.mov .cabecera-revista__letras span:nth-child(6) { animation-delay: 275ms; }
html.mov .cabecera-revista__letras span:nth-child(7) { animation-delay: 330ms; }
html.mov :is(.portada__linea, .portada__lateral li, .tienda) { --cosido: 0px; }
html.mov .portada__linea > * { animation: aparece 700ms var(--ease) 1050ms backwards; }
html.mov .slot--retrato { animation: h-destapa 1500ms var(--ease-larga) 420ms backwards; }
html.mov .titular-grande { animation: h-sube 1100ms var(--ease-larga) 620ms backwards; }
html.mov :is(.portada__entradilla, .acciones) { animation: aparece 800ms var(--ease) 820ms backwards; }
html.mov .acciones { animation-delay: 900ms; }
html.mov .portada__lateral li { animation: h-funde 800ms ease 1200ms backwards; }
html.mov .portada__lateral li:nth-child(2) { animation-delay: 1320ms; }
html.mov .portada__lateral li:nth-child(3) { animation-delay: 1440ms; }
/* La máscara de las letras solo existe mientras suben: recorta por abajo, nunca por arriba */
@keyframes h-mascara { from, to { clip-path: inset(-1em -1em 0 -1em); } }
@keyframes h-letra { from { transform: translateY(105%); } to { transform: none; } }
@keyframes h-destapa { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes h-sube { from { clip-path: inset(0 -.2em 100% -.2em); transform: translateY(.35em); } to { clip-path: inset(0 -.2em -.2em -.2em); transform: none; } }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }
@keyframes h-funde { from { opacity: 0; } }

/* Máscaras de línea de SplitText (hilvana.js): aire abajo y a los lados para la cursiva de Bodoni */
.h-l-mask { padding: 0 .12em .16em; margin: 0 -.12em -.16em; }

/* Lookbook en mosaico */
.lookbook {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(80px, 9vw, 136px) var(--margen) clamp(56px, 6vw, 88px);
}
.lookbook__cabeza { grid-column: 7 / span 6; grid-row: 1; align-self: end; padding-bottom: clamp(24px, 4vw, 56px); }
.lookbook h2, .prendas h2 { font: 400 clamp(2.5rem, 5.4vw, 5rem)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.lookbook__cabeza p { margin-top: 18px; max-width: 34ch; }
.look { margin: 0; }
.look figcaption { margin-top: 12px; max-width: 38ch; font-size: .875rem; line-height: 1.45; color: var(--gris-texto); }
.look--a { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.look--b { grid-column: 7 / span 3; grid-row: 2; margin-top: clamp(32px, 5vw, 80px); }
.look--c { grid-column: 10 / span 3; grid-row: 2; align-self: end; }
.slot--paño {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse 60% 46% at 22% 12%, rgb(250 250 248 / .55), transparent 70%),
    repeating-linear-gradient(97deg, rgb(14 14 14 / 0) 0 64px, rgb(14 14 14 / .26) 96px, rgb(14 14 14 / 0) 140px),
    linear-gradient(90deg, transparent 30%, rgb(24 24 24 / .5) 44%, rgb(24 24 24 / .56) 58%, transparent 72%),
    linear-gradient(180deg, #A9A8A4 0%, #6E6D6A 52%, #2E2E2D 100%);
}
.slot--lino {
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%, rgb(255 255 255 / .9), transparent 70%),
    repeating-linear-gradient(78deg, rgb(255 255 255 / 0) 0 38px, rgb(255 255 255 / .55) 58px, rgb(255 255 255 / 0) 80px, rgb(14 14 14 / .06) 96px, rgb(255 255 255 / 0) 116px),
    linear-gradient(170deg, #F2F1ED 0%, #DAD9D4 64%, #C2C1BC 100%);
}
.slot--lino::after { opacity: .1; }
.slot--pana {
  aspect-ratio: 3 / 4.6;
  background:
    radial-gradient(ellipse 70% 50% at 70% 20%, rgb(255 255 255 / .16), transparent 70%),
    linear-gradient(105deg, rgb(255 255 255 / .1), transparent 40%, rgb(14 14 14 / .4)),
    repeating-linear-gradient(90deg, #3A3937 0 2px, #5C5A57 5px, #42413E 8px, #3A3937 9px);
}

/* Prendas: página de compras de revista, sin rejilla de tienda */
.prendas { padding: clamp(48px, 6vw, 88px) var(--margen) clamp(96px, 10vw, 152px); }
.prendas__entrada { margin-top: 18px; max-width: 46ch; font-size: 1.0625rem; }
.prendas__lista { margin-top: clamp(40px, 5vw, 72px); }
.prenda {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: clamp(20px, 3vw, 40px);
  width: fit-content; max-width: 100%;
  padding: 16px 0 clamp(22px, 2.6vw, 34px);
  color: var(--negro);
}
.prenda h3 { grid-column: 1; grid-row: 1; font: 400 clamp(2rem, 4.2vw, 3.6rem)/1.04 var(--serif); letter-spacing: -.015em; }
.prenda__nota { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; max-width: 34ch; color: var(--gris-texto); font-size: .9375rem; }
.prenda__precio { grid-column: 2; grid-row: 1; font: italic 400 clamp(1.25rem, 1.8vw, 1.625rem)/1 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap; }
.prenda--1 { margin-left: 0; }
.prenda--2 { margin-left: 34%; }
.prenda--3 { margin-left: 10%; }
.prenda--4 { margin-left: 46%; }

/* La tienda: contraportada en negro, un solo cambio de tinta en toda la página */
.tienda {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding: clamp(80px, 10vw, 144px) var(--margen);
  background: var(--negro); color: var(--blanco);
}
.tienda::before { content: ""; position: absolute; left: var(--margen); right: var(--margen); top: 28px; height: 2px; background: var(--hilvan); color: var(--rosa); background-size: 22px 2px; clip-path: inset(0 calc(100% - var(--cosido, 100%)) 0 0); }
.tienda :focus-visible { outline-color: var(--blanco); }
.tienda__texto { grid-column: 1 / span 6; padding-bottom: 8px; }
.tienda h2 { font: italic 400 clamp(3rem, 7.4vw, 6rem)/1.02 var(--serif); letter-spacing: -.02em; padding-bottom: .08em; }
.tienda__texto > p { margin-top: 24px; max-width: 40ch; font-size: 1.0625rem; color: rgb(250 250 248 / .82); }
.horario { margin-top: clamp(32px, 4vw, 48px); max-width: 460px; }
.horario div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-top: 1px solid rgb(250 250 248 / .2); }
.horario dt { color: rgb(250 250 248 / .7); font-size: .9375rem; }
.horario dd { margin: 0; text-align: right; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.slot--probador {
  grid-column: 8 / span 4; aspect-ratio: 4 / 5;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / .14), transparent 36%),
    linear-gradient(90deg, transparent 0 60%, #1A1A19 60.5%, #222221 100%),
    repeating-linear-gradient(90deg, #4B4A47 0, #7A7874 16px, #55534F 30px, #3E3D3A 44px),
    #2A2A29;
}
.slot--probador::after { opacity: .2; }

/* Pie */
.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px;
  padding: 36px var(--margen) 104px;
  background: var(--negro); color: rgb(250 250 248 / .7); font-size: .9375rem;
  border-top: 1px solid rgb(250 250 248 / .12);
}
.pie__marca { font: 500 2rem/1 var(--serif); color: var(--blanco); letter-spacing: .02em; }

/* Tabletas */
@media (max-width: 1024px) {
  .portada__titulares { grid-column: 1 / span 5; }
  .slot--retrato { grid-column: 6 / span 7; }
  .portada__lateral { grid-column: 1 / -1; display: flex; gap: var(--gap); margin-top: 40px; }
  .portada__lateral li, .portada__lateral li:first-child { flex: 1; padding-top: 14px; }
  .portada__lateral li:first-child::before { display: block; }
}

/* Móvil: una columna, la portada sigue siendo una portada */
@media (max-width: 760px) {
  .barra { justify-content: flex-end; padding-block: 10px; }
  .barra__nav { display: none; }
  .cabecera-revista { font-size: 19vw; }
  .portada__linea { padding-top: 10px; font-size: .8125rem; }
  .portada__linea em { font-size: 1rem; }
  .portada__cuerpo { grid-template-columns: 1fr; row-gap: 20px; margin-top: 16px; }
  .portada__titulares, .slot--retrato, .portada__lateral { grid-column: 1 / -1; }
  .slot--retrato { order: -1; aspect-ratio: 10 / 9; }
  .titular-grande { font-size: clamp(2.4rem, 11vw, 2.9rem); }
  .portada__lateral { flex-direction: column; gap: 0; margin-top: 32px; }

  .lookbook { grid-template-columns: 1fr; row-gap: 40px; }
  .lookbook__cabeza, .look--a, .look--b, .look--c { grid-column: 1 / -1; grid-row: auto; margin-top: 0; padding-bottom: 0; }
  .look--b { width: 78%; margin-left: auto; }
  .look--c { width: 64%; }

  .prenda, .prenda--2, .prenda--3, .prenda--4 { margin-left: 0; width: 100%; }
  .prenda--2, .prenda--4 { padding-left: 12%; }

  .tienda { grid-template-columns: 1fr; row-gap: 48px; padding-top: 80px; }
  .tienda__texto, .slot--probador { grid-column: 1 / -1; }
  .slot--probador { aspect-ratio: 4 / 3.4; }
  .horario div { flex-direction: column; gap: 2px; }
  .horario dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Móviles bajos: va al final para ganar a la regla móvil general */
@media (max-width: 760px) and (max-height: 760px) {
  .portada__cuerpo { margin-top: 8px; row-gap: 12px; }
  .acciones { margin-top: 16px; }
  .portada__entradilla { margin-top: 10px; }
}