/* Lobby DilMood's · fase 2 (pantalla quieta). Colores de marca: solo los dos azules, negro de marca, blanco y grises. */
@font-face { font-family: "Playfair"; src: url("assets/tipos/PlayfairDisplay-Variable.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/tipos/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --azul: #00699E;
  --azul-oscuro: #003554;
  --tinta: #2A2A2A;
  --blanco: #FFFFFF;
  --texto: var(--tinta);
  --texto-suave: rgba(42, 42, 42, .68);
  --vidrio-fondo: rgba(255, 255, 255, .22);
  --vidrio-borde: rgba(255, 255, 255, .55);
  --vidrio-borde-bajo: rgba(255, 255, 255, .18);
  --margen: clamp(16px, 2.2vw, 32px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --serif: "Playfair", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  height: 100dvh; overflow: hidden; background: #8fb3c4;
  font: 400 14px/1.45 var(--sans); color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- fondo: mesa de vidrio con el cielo reflejado (provisional) */
.fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.fondo__cielo {
  position: absolute; inset: -5%;
  background:
    radial-gradient(60% 35% at 70% 22%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(45% 30% at 25% 60%, rgba(255, 255, 255, .35), transparent 70%),
    radial-gradient(35% 25% at 85% 75%, rgba(255, 255, 255, .25), transparent 70%),
    linear-gradient(175deg, #7fa9c6 0%, #a9c7da 45%, #c9dbe4 70%, #a6bfca 100%);
  filter: saturate(.85) brightness(.92);
}
.fondo__brillo {   /* reflejo ancho que cruza el cristal */
  position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .04) 54%, transparent 60%);
}
.fondo__canto {    /* borde de la mesa: mas oscuro y con el tinte verdoso del cristal */
  position: absolute; inset: 0;
  box-shadow: inset 0 0 120px 30px rgba(40, 70, 72, .38), inset 0 0 16px 2px rgba(30, 60, 62, .35);
  background: linear-gradient(180deg, rgba(60, 110, 110, .10), rgba(60, 110, 110, 0) 30%, rgba(60, 110, 110, .12));
}

.fondo-gl { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.fondo-gl[hidden] { display: none; }

/* ---------------------------------------------------------------- fondo crema (provisional): la palabra pasa a grabado oscuro */
body.fondo-crema { background: #EFE7D8; }
.fondo-crema .fondo__cielo { background: #EFE7D8; filter: none; }
.fondo-crema .palabra { filter: brightness(0); opacity: .07; }
.fondo-crema { --vidrio-fondo: rgba(255, 255, 255, .34); --vidrio-borde-bajo: rgba(42, 42, 42, .10); }

/* ---------------------------------------------------------------- de noche: textos claros (el cielo lo decide, lobby.js) */
body { transition: color 600ms ease; }
body.noche {
  --texto: #FFFFFF; --texto-suave: rgba(255, 255, 255, .72);
  --vidrio-fondo: rgba(255, 255, 255, .10); --vidrio-borde: rgba(255, 255, 255, .38); --vidrio-borde-bajo: rgba(255, 255, 255, .10);
}
body.noche .boton--principal { background: var(--blanco); color: var(--tinta); }
body.noche .ficha__mood { color: #9cc6dc; }
body.noche .palabra { opacity: .18; }
body.noche .prenda__provisional { fill: rgba(150, 156, 162, .55); }
.panel, .abanico__tarjeta { --texto: var(--tinta); --texto-suave: rgba(42, 42, 42, .68); color: var(--tinta); }

/* ---------------------------------------------------------------- vidrio de verdad: reflejo que sigue al raton, canto con grosor */
.vidrio, .carpeta__frente {
  background-image:
    radial-gradient(circle at var(--lx, 30%) var(--ly, 0%), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 45%),
    linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
}
.carpeta__frente { position: absolute; }
.carpeta__frente::after {   /* grosor de la lamina: un canto claro abajo y una sombra fina */
  content: ""; position: absolute; left: 3px; right: 3px; bottom: -3px; height: 4px; border-radius: 0 0 12px 12px;
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .05)); pointer-events: none;
}
.carpeta__frente { -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(1.05); backdrop-filter: blur(22px) saturate(1.5) brightness(1.05); }

/* ---------------------------------------------------------------- palabra gigante detras de la prenda */
.palabra {
  position: fixed; z-index: 1; left: 50%; top: 46%; width: min(92vw, 1500px);
  transform: translate(-50%, -50%); opacity: .38; pointer-events: none; user-select: none;
}

/* ---------------------------------------------------------------- prenda (provisional hasta la N1 en 3D) */
.prenda { position: fixed; z-index: 2; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.prenda__provisional { width: min(34vw, 380px); height: auto; fill: rgba(120, 124, 128, .78); stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; filter: drop-shadow(0 24px 30px rgba(20, 40, 50, .28)); }
.prenda__nota { margin: 14px 0 0; font-size: 12px; letter-spacing: .02em; color: var(--texto-suave); }

/* N1 en 3D: la silueta provisional se va al cargar; la caja recibe el arrastre (el lienzo 3D no recibe raton) */
.prenda { pointer-events: auto; width: min(44vw, 620px); height: min(34vw, 470px); display: grid; place-items: center; touch-action: none; outline: none; }
.prenda--lista { cursor: grab; }
.prenda--agarrada { cursor: grabbing; }
.prenda--lista .prenda__provisional { display: none; }
.prenda--foto .prenda__provisional { display: none; }
.prenda--foto { background: url("assets/n1/n1-3.jpg") center / contain no-repeat; border-radius: 16px; }
.prenda:focus-visible { outline: 2px solid var(--azul); outline-offset: 6px; border-radius: 16px; }
.pista { transition: opacity 400ms var(--ease-out); }
.pista--vista { opacity: 0; }
@media (max-width: 720px) { .prenda { width: 86vw; height: 62vw; } }

/* ---------------------------------------------------------------- cuervos y N1 en 3D */
.escena { position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }

/* ---------------------------------------------------------------- vidrio de la interfaz */
.vidrio {
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--vidrio-borde-bajo); border-top-color: var(--vidrio-borde); border-left-color: rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px rgba(20, 45, 55, .12);
}

/* ---------------------------------------------------------------- arriba */
.arriba {
  position: fixed; z-index: 4; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--margen) + env(safe-area-inset-top)) var(--margen) 0;
}
.logo img { width: clamp(120px, 11vw, 168px); height: auto; }
.pastilla {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border-radius: 999px; cursor: pointer; font-weight: 500; font-size: 14px;
}

/* ---------------------------------------------------------------- abajo */
.abajo {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px;
  padding: 0 var(--margen) calc(var(--margen) + env(safe-area-inset-bottom));
}
.ficha { max-width: 380px; }
.ficha__etiqueta { margin: 0 0 10px; font-size: 12px; letter-spacing: .04em; color: var(--texto-suave); }
.ficha__etiqueta span { font-weight: 600; color: var(--texto); }
.ficha__frase { margin: 0; font: italic 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); letter-spacing: -.01em; }
.ficha__mood { margin: 10px 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--azul-oscuro); }
.ficha__botones { display: flex; gap: 10px; flex-wrap: wrap; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.boton--principal { background: var(--tinta); color: var(--blanco); }
.boton:focus-visible, .pastilla:focus-visible, .carpeta:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.sin-js { position: fixed; z-index: 50; left: 16px; right: 16px; top: 70px; margin: 0; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--tinta); font-size: 13px; }
.ficha__contador { margin: 10px 0 0; font-size: 12px; color: var(--texto-suave); }
.ficha__aviso { margin: 10px 0 0; font-size: 12px; color: var(--azul-oscuro); }

.pista { margin: 0; justify-self: center; font-size: 12px; color: var(--texto-suave); letter-spacing: .02em; }

/* ---------------------------------------------------------------- carpetas de vidrio (quietas en esta fase) */
.carpetas { justify-self: end; display: flex; gap: 18px; align-items: flex-end; }
.carpeta {
  position: relative; width: 132px; height: 112px; padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 600px;
}
.carpeta__trasera {   /* parte de atras con su pestana */
  position: absolute; inset: 10px 0 0 0; border-radius: 12px 12px 10px 10px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.carpeta__trasera::before {
  content: ""; position: absolute; top: -11px; left: 0; width: 46%; height: 14px;
  border-radius: 10px 14px 0 0; background: inherit; border: inherit; border-bottom: 0;
}
.carpeta__tarjetas { position: absolute; left: 12px; right: 12px; top: 14px; height: 70px; }
.tarjeta {
  position: absolute; left: 50%; top: 0; width: 64px; height: 80px; margin-left: -32px;
  border-radius: 8px; background: var(--blanco); box-shadow: 0 2px 8px rgba(20, 40, 50, .18);
  display: grid; place-items: center; padding: 8px; overflow: hidden;
}
.tarjeta img { max-height: 100%; width: auto; object-fit: contain; }
.tarjeta--vacia { background: rgba(255, 255, 255, .7); }
.carpeta__frente {  /* tapa delantera de vidrio */
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px; border-radius: 10px 10px 12px 12px;
  display: flex; align-items: flex-end; justify-content: space-between; padding: 0 12px 10px;
  transform-origin: 50% 100%;
}
.carpeta__nombre { font-size: 13px; font-weight: 600; }
.carpeta__cuenta { font-size: 11px; color: var(--texto-suave); }

/* ---------------------------------------------------------------- carpetas: asomar al pasar el raton (sin salir) */
.carpeta__frente { transition: transform 180ms var(--ease-out); }
.tarjeta { translate: 0 0; transition: translate 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .carpeta:hover .carpeta__frente { transform: rotateX(-12deg); transition-duration: 220ms; }
  .carpeta:hover .tarjeta { translate: 0 calc(-8px - var(--i, 0) * 4px); transition-duration: 220ms; transition-delay: calc(var(--i, 0) * 40ms); }
}
.carpeta:focus-visible .carpeta__frente { transform: rotateX(-12deg); }
.carpeta:focus-visible .tarjeta { translate: 0 calc(-8px - var(--i, 0) * 4px); }
.carpeta.carpeta--abierta .tarjeta { opacity: 0; transition: opacity 120ms ease; }

/* ---------------------------------------------------------------- abanico de tarjetas (al hacer clic) */
.abanico { position: fixed; inset: 0; z-index: 20; }
.abanico__fondo {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: default;
  background: rgba(20, 38, 48, .0); transition: background-color 250ms var(--ease-out);
}
.abanico--visible .abanico__fondo { background: rgba(20, 38, 48, .14); }
.abanico__cerrar { position: absolute; top: calc(var(--margen) + env(safe-area-inset-top)); right: var(--margen); z-index: 40; }
.abanico__tarjeta {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 12px 12px; border-radius: 14px; cursor: pointer; text-align: center;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 14px 34px rgba(15, 35, 45, .22);
  translate: var(--px, 0px) var(--py, 0px); scale: var(--sc, 1);
  transition: translate 160ms var(--ease-out), scale 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .abanico__tarjeta:hover { --py: -12px; --sc: 1.04; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 22px 44px rgba(15, 35, 45, .28); }
}
.abanico__tarjeta:focus-visible { --py: -12px; --sc: 1.04; outline: 2px solid var(--azul); outline-offset: 3px; }
.abanico__logo { flex: 1 1 0; position: relative; width: 100%; min-height: 0; }
.abanico__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.abanico__nombre { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--tinta); }

/* ---------------------------------------------------------------- paneles laterales apilados */
.velo {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: rgba(20, 38, 48, 0); transition: background-color 460ms var(--ease-out), backdrop-filter 460ms var(--ease-out);
}
.velo--visible {
  pointer-events: auto; background: rgba(20, 38, 48, .15);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pila { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(100vw, max(420px, 48vw)); pointer-events: none; }   /* casi la mitad de la pantalla (Dil: 45 a 50 %) */
.panel {
  position: absolute; inset: 0; pointer-events: auto; overflow: hidden auto; overscroll-behavior: contain;
  padding: calc(var(--margen) + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
  background: #f7f4ee;
  border-left: 1px solid rgba(42, 42, 42, .08);
  box-shadow: -18px 0 40px rgba(15, 35, 45, .12), 80px 0 0 #f7f4ee;   /* la segunda tapa el hueco de la derecha cuando entra con rebote */
  will-change: transform; touch-action: pan-y;
}
.panel--debajo { background: #ebe8e1; }
.panel__tira {    /* la tira del panel de debajo, con su flecha, para volver a el */
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border: 0; padding: 0; background: transparent;
  color: var(--texto-suave); font-size: 12px; cursor: pointer; display: none; z-index: 2;
}
.panel--debajo .panel__tira { display: block; }
.panel__cabeza { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 26px; }
.panel__volver { border: 0; background: none; padding: 8px 0; cursor: pointer; font-size: 12px; color: var(--texto-suave); }
.panel__cerrar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--tinta); color: var(--blanco); font-size: 12px; font-weight: 500; cursor: pointer;
}
.panel__titulo { margin: 0 0 22px; font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; }
.panel__cuerpo { display: flex; flex-direction: column; gap: 4px; }
.opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(42, 42, 42, .08);
  background: none; cursor: pointer; text-align: left; font-size: 16px;
}
.opcion > span:first-child { flex: 1; }
.opcion__detalle { font-size: 12px; color: var(--texto-suave); }
.opcion__flecha { color: var(--texto-suave); }
@media (hover: hover) and (pointer: fine) { .opcion:hover { color: var(--azul); } }
.opcion:focus-visible, .panel__cerrar:focus-visible, .panel__volver:focus-visible, .talla:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.panel__pie { display: flex; gap: 18px; margin-top: 28px; font-size: 13px; }
.panel__pie a { color: var(--texto); }
.panel__texto { margin: 6px 0 14px; font-size: 14px; color: var(--texto); }
.panel__texto--serif { font: italic 400 19px/1.35 var(--serif); }
.panel__etiqueta { margin: 10px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--azul-oscuro); }
.panel__dato { margin: 2px 0; font-size: 13px; color: var(--texto-suave); }
.panel__dato strong { color: var(--texto); font-weight: 600; }
.panel__acciones { margin-top: 18px; }
.panel__firma { margin-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.galeria img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.tallas { display: flex; gap: 8px; flex-wrap: wrap; }
.talla {
  min-width: 52px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; font-weight: 500;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(42, 42, 42, .18);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.talla[aria-checked="true"] { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.mood__logo { display: grid; place-items: center; padding: 22px; margin-bottom: 8px; border-radius: 14px; background: rgba(255, 255, 255, .7); }
.mood__logo img { max-height: 150px; width: auto; }
.frases { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.frases li { padding-left: 14px; border-left: 2px solid var(--azul); font-size: 14px; }
.manifiesto p { margin: 0 0 8px; font: 400 15px/1.45 var(--serif); }
.vacio { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .55); }
.vacio__titulo { margin: 0 0 4px; font-weight: 600; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pieza { margin: 0; } .pieza img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.pieza figcaption { font-size: 12px; margin-top: 4px; color: var(--texto-suave); }
/* cabecera: titulo y X en la misma linea, y el contenido empieza justo debajo */
.panel__cabeza { align-items: center; gap: 12px; min-height: 44px; margin-bottom: 16px; }
.panel__nombre { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.panel__nombre .panel__volver { padding: 2px 0 4px; }
.panel__nombre .panel__titulo { margin: 0; }
.panel__cerrar {
  flex: none; justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%;
  background: transparent; color: var(--tinta); font: 300 30px/1 var(--sans, system-ui), sans-serif;
  transition: background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .panel__cerrar:hover { background: rgba(42, 42, 42, .07); } }
/* SOLD: filas de fotos, una por prenda. La abierta ocupa algo mas de la mitad y las demas se reparten el resto, quepan
   las que quepan (3 a 6). La foto mide siempre lo que la abierta, centrada: al encogerse se recorta, no se aplasta */
.franjas { display: flex; flex-direction: column; gap: 5px; }   /* separaciones muy leves (Dil: la mitad) */
.franja { display: flex; gap: 2px; height: clamp(180px, 30vh, 300px); container-type: inline-size; }
.franja__foto {
  position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: #e2ded6; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: flex-grow 480ms cubic-bezier(0.77, 0, 0.175, 1);
}
.franja__foto[aria-pressed="true"] { flex-grow: calc((var(--n) - 1) * 1.25); cursor: default; }
.franja__foto img {
  position: absolute; top: 0; left: 50%; height: 100%; width: 56cqw; max-width: none; transform: translateX(-50%);
  object-fit: cover; user-select: none; pointer-events: none;
}
.franja__foto:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (max-width: 720px) { .franja { height: clamp(170px, 26vh, 240px); } }
@media (prefers-reduced-motion: reduce) { .franja__foto { transition-duration: 160ms; transition-timing-function: ease; } }

/* ---------------------------------------------------------------- movil */
@media (max-width: 720px) {
  .palabra { top: 38%; width: 120vw; }
  .prenda { top: 38%; }
  .prenda__provisional { width: 62vw; }
  .abajo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pista { display: none; }
  .carpetas { order: -1; justify-self: end; gap: 12px; }
  .carpeta { width: 104px; height: 92px; }
  .carpeta__frente { height: 60px; }
  .tarjeta { width: 56px; height: 70px; margin-left: -28px; }
  .ficha { max-width: none; }
  .ficha__frase { font-size: 22px; }
}

@media (max-width: 720px) {
  .panel { padding-left: 20px; padding-right: 20px; }
  .abanico__nombre { display: none; }
  .abanico__tarjeta { padding: 10px; }
  .panel__tira { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {   /* sin vuelos ni muelles: solo aparecer y desaparecer */
  .carpeta__frente, .tarjeta, .abanico__tarjeta { transition-duration: .01ms !important; }
  .carpeta:hover .carpeta__frente { transform: none; }
}

/* ---- N1 en 2D: la camiseta se dibuja en WebGL, dentro de la misma escena que la pintura (fondo.js, shader "mesa"), asi la pintura
   queda por encima. Este boton solo da la caja, el clic, el teclado y el texto para lectores. Si WebGL falla, se ven las fotos con fundido. */
.prenda--tarjeta { width: min(54vw, 640px); height: min(54vw, 640px); max-height: 74vh; aspect-ratio: 1; touch-action: manipulation; }
.prenda--tarjeta .tarjeta { all: unset; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.tarjeta:focus-visible { outline: 2px solid var(--azul); outline-offset: 6px; }
.tarjeta__flota, .tarjeta__giro { display: block; position: relative; width: 100%; height: 100%; }
.tarjeta__flota { animation: none; }   /* la prenda se queda quieta */
.tarjeta__cara { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; opacity: 0; }
.tarjeta[data-cara="frente"] .tarjeta__cara--frente, .tarjeta[data-cara="espalda"] .tarjeta__cara--espalda { opacity: 1; }
.tarjeta--gl .tarjeta__cara { opacity: 0 !important; }
.tarjeta--gl .tarjeta__flota { animation: none; }
@keyframes tarjeta-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 720px) { .prenda--tarjeta { width: 88vw; height: 88vw; max-height: 52vh; } }
@media (prefers-reduced-motion: reduce) { .tarjeta__flota { animation: none; } }

/* ---- cursor propio: el raton es una gota de pintura y deja rastro; se dibuja en un lienzo encima de todo (cursor.js). Solo con raton. */
.cursor-propio, .cursor-propio * { cursor: none !important; }
.cursor-propio input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .cursor-propio textarea, .cursor-propio [contenteditable="true"] { cursor: text !important; }
.cursor-pintura { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 10000; pointer-events: none; }

/* ---------------------------------------------------------------- carpetas v2: pintura detras del vidrio, tapa lechosa, pestana con escalon */
.carpeta { width: 188px; height: 160px; perspective: 700px; --alto: 160px;
  --fondo-carpeta:
    radial-gradient(60% 75% at 14% 18%, #0d86b8 0%, rgba(13, 134, 184, 0) 62%),
    radial-gradient(55% 70% at 88% 30%, #e9a98f 0%, rgba(233, 169, 143, 0) 60%),
    radial-gradient(70% 60% at 55% 95%, #003554 0%, rgba(0, 53, 84, 0) 70%),
    conic-gradient(from 210deg at 62% 48%, #00699E, #1aa3d6, #0a3f63, #6fb6d6, #00699E); }
/* la parte de atras y su pestana son UNA pieza: comparten el mismo degradado, medido desde lo alto de la pestana
   (la trasera lo ve desplazado 15 px hacia arriba y la pestana, que ocupa media anchura, a doble tamano) */
.carpeta__trasera {
  inset: 16px 0 0 0; border-radius: 6px 22px 16px 16px; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--fondo-carpeta); background-size: 100% calc(var(--alto) - 1px); background-position: 0 -15px; background-repeat: no-repeat;
  box-shadow: 0 10px 26px rgba(15, 45, 65, .22);
}
.carpeta__trasera::before {
  top: -15px; left: 0; width: 50%; height: 20px; border: 0; border-radius: 12px 26px 0 0;
  background: var(--fondo-carpeta); background-size: 200% calc(var(--alto) - 1px); background-position: 0 0; background-repeat: no-repeat;
}
.carpeta__tarjetas { left: 16px; right: 16px; top: 22px; height: 96px; }
.carpeta .tarjeta { width: 92px; height: 116px; margin-left: -46px; border-radius: 10px; padding: 10px; }
.carpeta__frente {
  height: 98px; border-radius: 16px 16px 16px 16px; align-items: flex-end; padding: 0 14px 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .78) 58%, rgba(255, 255, 255, .92) 100%);
  border: 1px solid rgba(255, 255, 255, .8); border-bottom-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -6px 18px rgba(255, 255, 255, .12);
}
.carpeta__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.carpeta__nombre { font-size: 14px; font-weight: 600; color: var(--tinta); }
.carpeta__cuenta { font: 500 10px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(42, 42, 42, .6); }
@media (hover: hover) and (pointer: fine) {
  .carpeta:hover .carpeta__frente { transform: rotateX(-16deg); }
  .carpeta:hover .tarjeta { translate: 0 calc(-12px - var(--i, 0) * 5px); }
}
.carpeta:focus-visible .carpeta__frente { transform: rotateX(-16deg); }
.carpeta:focus-visible .tarjeta { translate: 0 calc(-12px - var(--i, 0) * 5px); }
/* variante oscura: de noche */
body.noche .carpeta { --fondo-carpeta:
    radial-gradient(60% 75% at 14% 18%, #1a7fb0 0%, rgba(26, 127, 176, 0) 62%),
    radial-gradient(55% 70% at 88% 30%, #c4624a 0%, rgba(196, 98, 74, 0) 60%),
    radial-gradient(70% 60% at 55% 95%, #061a2b 0%, rgba(6, 26, 43, 0) 70%),
    conic-gradient(from 210deg at 62% 48%, #0a4d73, #1d8fbf, #06263d, #3d7f9f, #0a4d73); }
body.noche .carpeta__frente { background-image: linear-gradient(180deg, rgba(14, 22, 34, .12) 0%, rgba(14, 22, 34, .72) 58%, rgba(10, 16, 26, .9) 100%); border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
body.noche .carpeta__nombre { color: #fff; }
body.noche .carpeta__cuenta { color: rgba(255, 255, 255, .62); }
@media (max-width: 720px) {
  .carpeta { width: 140px; height: 120px; --alto: 120px; }
  .carpeta__frente { height: 74px; padding: 0 10px 10px; }
  .carpeta__tarjetas { top: 18px; height: 70px; }
  .carpeta .tarjeta { width: 66px; height: 84px; margin-left: -33px; }
}
.tinta-fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }   /* pintura del fondo: encima de la prenda (z 2), debajo de la interfaz (z 4) */

/* ---------------------------------------------------------------- v3: Menu y Reservar arriba a la derecha, sin textos abajo, prenda en el centro exacto */
.arriba { align-items: flex-start; }
.arriba__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.arriba__lado .ficha__aviso, .arriba__lado .ficha__contador { max-width: 240px; margin: 0; text-align: right; }
.abajo { display: flex; justify-content: flex-end; }
.palabra, .prenda { top: 50%; }
/* tarjetas dentro de la carpeta: repartidas a lo ancho (--f de 0 a 1, lo pone lobby.js) */
.carpeta .tarjeta { --w: 74px; width: var(--w); height: 94px; margin-left: calc(var(--w) / -2); left: calc(var(--w) / 2 + var(--f, .5) * (100% - var(--w))); }
.carpeta__frente { align-items: flex-end; justify-content: flex-start; }
.carpeta__nombre { font-size: 16px; letter-spacing: .01em; }
/* hundir la prenda: se aprieta rapido como tela y vuelve con un rebote corto */
.tarjeta__flota { transform-origin: 50% 55%; transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1), filter 420ms cubic-bezier(.23, 1, .32, 1); }
.tarjeta--hundida .tarjeta__flota { transform: translateY(3px) scale(.965, .955); filter: brightness(.94) contrast(1.04); transition-duration: 110ms; transition-timing-function: cubic-bezier(.23, 1, .32, 1); }
@media (max-width: 720px) {
  .palabra, .prenda { top: 50%; }
  .carpetas { gap: 10px; }
  .carpeta { width: 104px; height: 92px; --alto: 92px; }
  .carpeta__frente { height: 58px; padding: 0 10px 9px; }
  .carpeta__tarjetas { top: 14px; height: 56px; }
  .carpeta .tarjeta { --w: 46px; height: 58px; }
  .carpeta__nombre { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .tarjeta--hundida .tarjeta__flota { transform: none; } }
.prenda--tarjeta .tarjeta__cara--frente { opacity: 1; }   /* solo el frente: ya no se voltea */
.prenda--tarjeta { width: min(54vw, 640px, 74vh); height: min(54vw, 640px, 74vh); max-height: none; }   /* cuadrada siempre, para que el centro sea el centro */
@media (max-width: 720px) { .prenda--tarjeta { width: min(88vw, 56vh); height: min(88vw, 56vh); } }
/* tarjetas dentro de las carpetas: opacas, cinco, ocupando el ancho y con una sombra leve entre ellas */
.carpeta__tarjetas { left: 8px; right: 8px; }
.carpeta .tarjeta { --w: 64px; background: #fff; box-shadow: -3px 1px 6px rgba(20, 35, 45, .16), 0 1px 2px rgba(20, 35, 45, .12); }
.carpeta .tarjeta--vacia { background: #fbfaf7; }
@media (max-width: 720px) { .carpeta__tarjetas { left: 6px; right: 6px; } .carpeta .tarjeta { --w: 38px; } }
/* de grande a pequena: la primera delante (lobby.js pone scale y z-index); la sombra cae sobre las de detras */
.carpeta__tarjetas { isolation: isolate; }   /* su z-index se queda dentro: el vidrio sigue delante */
.carpeta .tarjeta { transform-origin: 50% 100%; box-shadow: 3px 1px 6px rgba(20, 35, 45, .16), 0 1px 2px rgba(20, 35, 45, .12); }
.carpeta__signo { margin-left: auto; font-size: 20px; font-weight: 500; line-height: 1; color: var(--tinta); }
body.noche .carpeta__signo { color: #fff; }
@media (max-width: 720px) { .carpeta__signo { font-size: 16px; } }
.carpeta .tarjeta { box-shadow: -3px 1px 6px rgba(20, 35, 45, .16), 0 1px 2px rgba(20, 35, 45, .12); }   /* la grande va a la derecha: la sombra cae a la izquierda */
.carpeta__frente::after { display: none; }   /* el canto de abajo asomaba como una linea suelta bajo la carpeta */
/* hundido (hundir.js): la sombra del hueco donde se pulsa, con un borde que brilla un poco; la opacidad la lleva el resorte */
.hundido {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0;
  background:
    radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(20, 30, 40, .17) 0, rgba(20, 30, 40, .06) calc(var(--hr, 24px) * .8), rgba(20, 30, 40, 0) calc(var(--hr, 24px) * 1.6)),
    radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(255, 255, 255, 0) calc(var(--hr, 24px) * 1.05), rgba(255, 255, 255, .13) calc(var(--hr, 24px) * 1.3), rgba(255, 255, 255, 0) calc(var(--hr, 24px) * 1.85));
}
/* los cuervos viven solo en el lobby: su lienzo va debajo de las tarjetas flotantes, el velo y los paneles (no recibe raton) */
.escena { z-index: 5; }
/* la tela en WebGL: sustituye a la imagen y al apreton de CSS */
.tarjeta__tela { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tarjeta--tela .tarjeta__cara { opacity: 0 !important; }
.tarjeta--tela.tarjeta--hundida .tarjeta__flota { transform: none; filter: none; }
/* ---------------------------------------------------------------- carpetas v3: las tarjetas como una baraja ancha
   La primera (--i 0) delante, mas baja y a la derecha; las de detras suben y se van a la izquierda, cada vez un poco
   mas pequenas y giradas al otro lado. Al pasar el raton suben en abanico, escalonadas. Cada una lleva cabecera y cuerpo. */
.carpeta__tarjetas { left: 12px; right: 12px; top: 20px; height: 120px; }
.carpeta .tarjeta {
  --w: 72%; width: var(--w); height: 104px; left: auto; margin-left: 0;
  right: calc(var(--i, 0) * (100% - var(--w)) / 4); top: calc(26px - var(--i, 0) * 4px);   /* de la derecha (la de delante) a la izquierda (la de atras): ocupan todo el ancho */
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 8px 9px; border-radius: 9px;
  transform: none; transform-origin: 50% 100%;
  scale: calc(1 - var(--i, 0) * .035); rotate: calc(1deg - var(--i, 0) * .8deg); translate: 0 0;
  transition: translate 260ms var(--ease-out), rotate 260ms var(--ease-out);
}
.tarjeta__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.tarjeta__titulo { font-size: 8.5px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta__meta { flex: none; font: 500 7px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; color: rgba(42, 42, 42, .5); }
.tarjeta__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.tarjeta__cuerpo img { flex: 1; min-height: 0; width: 100%; max-height: 100%; object-fit: contain; }
.tarjeta__raya { display: block; height: 4px; width: 100%; border-radius: 2px; background: rgba(42, 42, 42, .11); }
.tarjeta__cabeza .tarjeta__raya { height: 5px; background: rgba(42, 42, 42, .2); }
.tarjeta__raya--corta { width: 58%; }
.tarjeta__cuerpo .tarjeta__raya:nth-child(2) { width: 86%; }
@media (hover: hover) and (pointer: fine) {
  .carpeta:hover .tarjeta {
    /* suben un poco, en escalera (la de atras queda la mas alta), sin salirse de la carpeta */
    translate: calc(var(--i, 0) * -1.5px) calc(-16px + var(--i, 0) * 1.5px); rotate: calc(2deg - var(--i, 0) * 1.2deg);
    transition-duration: 300ms; transition-delay: calc(var(--i, 0) * 35ms);
  }
}
.carpeta:focus-visible .tarjeta { translate: calc(var(--i, 0) * -1.5px) calc(-16px + var(--i, 0) * 1.5px); rotate: calc(2deg - var(--i, 0) * 1.2deg); }
@media (max-width: 720px) {
  .carpeta__tarjetas { left: 7px; right: 7px; top: 13px; height: 70px; }
  .carpeta .tarjeta { --w: 70%; height: 60px; top: calc(14px - var(--i, 0) * 2.5px); padding: 5px 6px; gap: 4px; border-radius: 7px; }
  .tarjeta__titulo, .tarjeta__meta { display: none; }
  .tarjeta__raya { height: 3px; }
}
@media (prefers-reduced-motion: reduce) { .carpeta .tarjeta { transition: none; } }

/* ---------------------------------------------------------------- abrir y cerrar carpetas (ui.js, Dil 10-nov-2026)
   Al abrir, la tapa se echa atras y las tarjetas de dentro suben y se van mientras las grandes salen por arriba.
   Al cerrar, cuando las grandes ya han entrado, las de dentro bajan a su sitio una tras otra y la tapa rebota un poco. */
.carpeta.carpeta--abierta .carpeta__frente { transform: rotateX(-24deg); transition: transform 360ms var(--ease-out); }
.carpeta.carpeta--abierta .tarjeta {
  opacity: 0; translate: 0 -40px;
  transition: translate 380ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 30ms), opacity 240ms ease calc(80ms + var(--i, 0) * 30ms);
}
.carpeta.carpeta--volviendo .tarjeta {
  transition: translate 460ms var(--ease-out) calc(var(--i, 0) * 45ms), opacity 220ms ease calc(var(--i, 0) * 45ms), rotate 260ms var(--ease-out);
}
.logo { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .carpeta.carpeta--abierta .tarjeta { translate: none; transition: opacity 120ms ease; } }
/* fluidez (10-nov-2026): en una grafica integrada, desenfocar lo de detras mientras se mueve da tirones de 100 a 300 ms.
   Las tarjetas del abanico ya eran casi opacas (el desenfoque no se veia) y el velo solo tinta, sin desenfocar */
.abanico__tarjeta { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .94); }
/* desenfoque suave de lo de detras (Dil, 10-nov-2026): se nota el lobby, pero algo apagado. Un solo desenfoque a la vez:
   el del panel lateral, el de la hoja de abajo y el del abanico no se suman */
.velo { transition: background-color 460ms var(--ease-out), backdrop-filter 460ms var(--ease-out), -webkit-backdrop-filter 460ms var(--ease-out); }
.velo--visible { background: rgba(20, 38, 48, .2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.abanico--visible .abanico__fondo { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hoja__fondo { position: fixed; inset: 0; z-index: 27; pointer-events: none; background: rgba(20, 38, 48, .12); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity 300ms ease; }
body.con-panel .hoja__fondo { opacity: 0; }   /* con un panel abierto ya desenfoca el velo */
/* la X del abanico cae encima del boton Menu: con su propio fondo para taparlo */
.abanico__cerrar { background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(15, 35, 45, .16); }
@media (hover: hover) and (pointer: fine) { .abanico__cerrar:hover { background: #fff; } }
.abanico__cerrar { transition: opacity 200ms ease, background-color 150ms ease; }
.abanico:not(.abanico--visible) .abanico__cerrar { opacity: 0; }

/* ---------------------------------------------------------------- portada: al entrar, la pagina a lapiz sobre papel, pintada y lavada (portada.js).
   Tapa el boceto de carga. Si el script no llega, se va sola a los 12 s; sin JavaScript no sale. */
.portada { position: fixed; inset: 0; z-index: 9990; background: #f1ebdf; animation: portada-salida 600ms ease 12s forwards; }
.portada canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes portada-salida { to { opacity: 0; visibility: hidden; } }

/* ---------------------------------------------------------------- Disponibles (Dil, 10-nov-2026): abajo a la izquierda, con una flecha que flota,
   y una hoja que sube desde abajo (40 % de la pantalla; en el movil algo mas, porque la tira va a lo alto) */
.atajos { margin-right: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 2px; }
.atajo {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--texto);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.atajo[aria-expanded="true"] { opacity: .55; }
.atajos__flecha { display: inline-block; margin-left: 6px; font-size: 16px; color: var(--texto); animation: disponibles-flota 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes disponibles-flota { from { transform: translateY(3px); } to { transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) { .atajo { transition: opacity 160ms ease, transform 160ms ease; } .atajo:hover { opacity: .7; transform: translateY(-2px); } }
.atajo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 10px; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; height: 40vh; height: 40dvh; min-height: 280px;
  display: flex; flex-direction: column; padding: 14px var(--margen) calc(18px + env(safe-area-inset-bottom));
  background: #f7f4ee; color: var(--tinta); border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 40px rgba(15, 35, 45, .14);
}
/* la palabra de arriba es la mitad de pequena (como la X) y las fotos suben un poco (Dil, 10-nov-2026) */
.hoja { padding-top: 6px; }
.hoja .panel__cabeza { min-height: 32px; margin-bottom: 4px; }
.hoja .panel__titulo { margin: 0; font-size: 15px; letter-spacing: .01em; }
.hoja .panel__cerrar { width: 32px; height: 32px; font-size: 22px; }
.vitrina { flex: 1; min-height: 0; display: flex; gap: 2px; container-type: size; }
.vitrina__prenda {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: #e2ded6; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: flex-grow 480ms cubic-bezier(0.77, 0, 0.175, 1);
}
.vitrina__prenda[data-activa] { flex-grow: max(1, calc((var(--n) - 1) * 1.25)); }
.vitrina__prenda img {   /* la foto no se estira: se recorta (como en SOLD) */
  position: absolute; top: 0; left: 50%; height: 100%; width: 56cqw; max-width: none; transform: translateX(-50%);
  object-fit: cover; user-select: none; pointer-events: none;
}
.vitrina__prenda:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.franja__foto[aria-pressed="true"] { flex-grow: max(1, calc((var(--n) - 1) * 1.25)); }   /* una prenda con una sola foto no desaparece */
@media (max-width: 720px) {
  .hoja { height: 58vh; height: 58dvh; }
  .vitrina { flex-direction: column; }
  .vitrina__prenda img { top: 50%; left: 0; width: 100%; height: 56cqh; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { .atajos__flecha { animation: none; } .vitrina__prenda { transition-duration: 160ms; transition-timing-function: ease; } }
@media (max-width: 720px) { .atajos { order: -2; } .abajo .carpetas { margin-left: auto; } }   /* movil: los iconos a la izquierda y las carpetas a la derecha */

/* frase bajo el logo (Dil, 10-nov-2026) */
.logo__frase { margin: 8px 0 0; white-space: nowrap; font: italic 400 clamp(13px, 1.1vw, 15px)/1.3 var(--serif); letter-spacing: .005em; color: #fff; }   /* en blanco siempre, como el logo (Dil, 10-nov-2026) */
.logo { display: block; }
/* en movil la frase va en tres renglones: I'm an Artist / looking for Artist / to create Art.. */
@media (max-width: 720px) { .frase__l { display: block; } }

.azul-marca { color: var(--azul); font-weight: 600; }

/* PC: la hoja de abajo no ocupa todo el ancho: queda en la esquina izquierda, a la mitad de la pantalla menos un hueco
   hasta el panel lateral (que mide 48 vw), y 10 % mas alta para que las fotos se vean mas enteras (Dil, 10-nov-2026) */
@media (min-width: 721px) {
  .hoja { right: auto; width: calc(52vw - 20px); height: 50vh; height: 50dvh; border-radius: 18px 18px 0 0; }
  .vitrina__prenda img { width: 90cqw; }
}

/* con un panel abierto, la hoja queda igual por encima del velo: se puede pulsar otra prenda y cambian las fotos de la derecha */
@media (min-width: 721px) { .hoja { z-index: 32; } }

/* panel de una hoja: la primera foto grande y a su tamano, el resto en columnas de 1, 2 o 3 sin recortar (Dil, 10-nov-2026) */
.panel { container-type: inline-size; }
.galeria.galeria--real { display: block; column-count: 2; column-gap: 8px; margin-bottom: 10px; }
.galeria--real img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; border-radius: 10px; margin: 0 0 8px; break-inside: avoid; }
.galeria--real img:first-child { column-span: all; aspect-ratio: auto; }
@container (max-width: 340px) { .galeria.galeria--real { column-count: 1; } }
@container (min-width: 820px) { .galeria.galeria--real { column-count: 3; } }
/* en ese panel solo va la X, un poco mas pequena; la palabra se queda para lectores de pantalla */
.panel__titulo--oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel--solo-x .panel__cabeza { min-height: 34px; margin-bottom: 8px; }
.panel--solo-x .panel__cerrar { width: 34px; height: 34px; font-size: 24px; }

/* ---------------------------------------------------------------- tarjetas en 3D (carta3d.js, Dil, 10-nov-2026) */
.c3d {
  --r: 12px; --rx: 0deg; --ry: 0deg; position: relative; display: block; width: 100%; height: 100%;
  transform: perspective(760px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 300ms var(--ease-out);
}
.c3d__giro { position: absolute; inset: 0; transform-style: preserve-3d; animation: c3d-vaiven 7s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes c3d-vaiven { from { transform: rotateY(-3deg) rotateX(1deg); } to { transform: rotateY(3deg) rotateX(-1deg); } }
.c3d--fija .c3d__giro { animation: none; transform: rotateX(7deg) rotateY(-13deg); }
.c3d__capa { position: absolute; inset: 0; border-radius: var(--r); background: #d3cdc0; transform: translateZ(var(--z)); }
.c3d__capa--dorso { background: #e6e1d7; box-shadow: 0 4px 10px rgba(15, 35, 45, .10); }
.c3d__capa--frente { background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.c3d__logo { position: absolute; inset: 14% 9%; transform-style: preserve-3d; }
.c3d__logo--con-nombre { inset: 11% 9% 31%; }
.c3d__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: translateZ(var(--z)); user-select: none; pointer-events: none; }
.c3d__nombre {
  position: absolute; left: 8%; right: 8%; bottom: 7%; transform: translateZ(var(--z)); text-align: center;
  font: 600 9px/1.25 var(--sans); letter-spacing: .08em; color: var(--tinta); overflow-wrap: anywhere; pointer-events: none;
}
.c3d__rayas { position: absolute; left: 14%; right: 14%; top: 18%; display: flex; flex-direction: column; gap: 9%; transform: translateZ(var(--z)); }
.c3d__rayas i { display: block; height: 4px; margin-bottom: 8px; border-radius: 2px; background: rgba(42, 42, 42, .12); }
.c3d__rayas i:nth-child(1) { width: 58%; height: 5px; background: rgba(42, 42, 42, .2); } .c3d__rayas i:nth-child(3) { width: 70%; }
@media (prefers-reduced-motion: reduce) { .c3d__giro { animation: none; } }

/* abanico: la tarjeta de vidrio pasa a ser la losa 3D; el nombre va en su cara */
.abanico__tarjeta { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; display: block; }
@media (hover: hover) and (pointer: fine) { .abanico__tarjeta:hover { box-shadow: none; } }
.abanico__tarjeta .c3d { --r: 14px; }
@media (max-width: 720px) { .abanico__tarjeta .c3d__nombre { display: none; } .abanico__tarjeta .c3d__logo--con-nombre { inset: 14% 9%; } }

/* tarjetas dentro de las carpetas: la misma losa, mas fina y quieta */
.carpeta .tarjeta, .carpeta .tarjeta--vacia { background: none; box-shadow: none; padding: 0; overflow: visible; display: block; }
.carpeta .tarjeta .c3d { --r: 8px; transform: perspective(420px) rotateX(var(--rx)) rotateY(var(--ry)); }
.carpeta .tarjeta .c3d__nombre { display: none; }
.carpeta .tarjeta .c3d__logo--con-nombre { inset: 14% 9%; }

/* los otros 4 moods, abajo del panel de un mood: tarjetas 3D flotando */
.hermanos { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(42, 42, 42, .08); }
.hermanos__fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
.hermano {
  all: unset; box-sizing: border-box; display: block; cursor: pointer; aspect-ratio: 4 / 5.4; -webkit-tap-highlight-color: transparent;
  animation: hermano-flota 4.6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.9s);
  transition: scale 200ms var(--ease-out), translate 200ms var(--ease-out);
}
@keyframes hermano-flota { from { transform: translateY(1px); } to { transform: translateY(-2px); } }
@media (hover: hover) and (pointer: fine) { .hermano:hover { scale: 1.03; translate: 0 -2px; } }
.hermano:focus-visible { outline: 2px solid var(--azul); outline-offset: 6px; border-radius: 12px; }
@container (max-width: 330px) { .hermanos__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .hermano { animation: none; } }

/* al pulsar, un hundimiento corto en lo que se toca (receta de la skill MotionSites: :active scale .97) */
/* (sin .franja__foto ni .vitrina__prenda: esta lista les quitaba su flex-grow y el acordeon de BEFORE y de las hojas
   dejo de abrirse suave; Dil, 10-nov-2026) */
.atajo, .hermano, .pastilla, .boton, .opcion { transition-property: opacity, transform, translate, scale, background-color; }
.atajo:active, .hermano:active, .pastilla:active, .boton:active, .opcion:active { scale: .97; transition-duration: 90ms; }

/* "What is DilMood's": titulo con logo, frase, letras y las 5 tarjetas; en cada mood, el enlace de vuelta */
.panel__titulo .titulo-logo { display: inline-block; height: 28px; width: auto; vertical-align: -5px; margin-left: 4px; }
.marca__frase { margin: 4px 0 6px; font: italic 400 21px/1.3 var(--serif); }
.marca__letras { margin: 0 0 22px; font: italic 400 15px/1.4 var(--serif); color: var(--texto-suave); }
.hermanos__fila--todos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
@container (max-width: 470px) { .hermanos__fila--todos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.enlace-marca {
  display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 13px/1.2 var(--sans); letter-spacing: .01em; color: var(--azul); -webkit-tap-highlight-color: transparent;
}
.enlace-marca:hover { text-decoration: underline; text-underline-offset: 3px; }
.enlace-marca:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 4px; }

/* Reservar N1: boceto con medidas arriba, tallas con la diferencia de ancho y alto abajo (Dil, 10-nov-2026) */
.boceto-medidas { display: block; width: 100%; height: auto; margin: 0; border-radius: 12px; background: #e9e8e6; border: 1px solid #111; box-sizing: border-box; }
.panel__cuerpo { position: relative; }
.goteo { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.medidas { margin: 16px 0 4px; display: grid; gap: 8px; }
.medida { margin: 0; display: grid; grid-template-columns: 64px auto 1fr; align-items: baseline; gap: 10px; font-size: 14px; }
.medida__nombre { color: var(--texto-suave); }
.medida strong { font-weight: 600; }
.medida__cambio { font-size: 12.5px; color: var(--azul); }
.medida__cambio--igual { color: var(--texto-suave); }

.reserva { position: relative; display: grid; gap: 16px 22px; }
.reserva__boceto { margin: 0; }
.reserva__datos .panel__etiqueta:first-child { margin-top: 0; }
.reserva__acciones .panel__acciones { margin-top: 0; }
/* escritorio (el panel es un contenedor): boceto grande + Reservar debajo; a la derecha, tallas en columna y medidas en texto */
@container (min-width: 540px) {
  .reserva { grid-template-columns: minmax(0, 1fr) 132px; grid-template-areas: "boceto datos" "acciones datos"; align-items: start; }
  .reserva__boceto { grid-area: boceto; } .reserva__datos { grid-area: datos; } .reserva__acciones { grid-area: acciones; }
  .reserva__datos .tallas { flex-direction: column; flex-wrap: nowrap; }
  .reserva__datos .talla { width: 100%; }
  .reserva__datos .medidas { margin-top: 18px; gap: 14px; }
  .reserva__datos .medida { display: flex; flex-direction: column; gap: 2px; }
  .reserva__datos .medida strong { font-size: 18px; }
}
.goteo-aire { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 33; pointer-events: none; }   /* las gotas que caen, hasta abajo de la pantalla */
.panel__subtitulo { margin: 4px 0 0; font: italic 400 14px/1.3 var(--serif); color: var(--texto-suave); }   /* SoulMate: la linea pequena debajo del nombre */