.tryonSection {
  padding: 9rem 5vw;
  background: #ecece8;
  color: var(--black);
}

.tryonIntro {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 7vw;
  align-items: end;
  margin-bottom: 4rem;
}

.tryonIntro .sectionIndex { margin-bottom: 3rem; }
.tryonIntro h2 { margin: 0; font-family: "Archivo Black", sans-serif; font-size: clamp(3.5rem, 6vw, 7rem); line-height: .89; letter-spacing: -.055em; text-transform: uppercase; }
.tryonIntro h2 span { color: transparent; -webkit-text-stroke: 1.5px var(--black); }
.tryonIntro > p { margin: 0 0 .5rem; color: #565652; line-height: 1.7; }
.tryonWorkspace { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 690px; background: var(--black); }
.tryonWorkspace.logoDropActive::after { content: "SOLTÁ TU LOGO PARA CARGARLO"; position: absolute; z-index: 6; inset: 10px; display: grid; place-items: center; border: 2px dashed var(--red); background: rgba(8, 8, 8, .84); color: #fff; font-family: "Archivo Black", sans-serif; font-size: clamp(1rem, 2vw, 1.8rem); letter-spacing: .04em; pointer-events: none; }
.tryonControls { padding: 2rem; background: #f7f7f4; border: 1px solid #c5c5c0; }
.tryonStep { display: flex; gap: 14px; padding-bottom: 1.3rem; border-bottom: 1px solid #c5c5c0; }
.tryonStep.compact { margin-top: 2.2rem; }
.tryonStep > span { color: var(--red); font-size: .62rem; font-weight: 800; }
.tryonStep div { display: grid; gap: 5px; }
.tryonStep strong { font-size: .77rem; text-transform: uppercase; letter-spacing: .08em; }
.tryonStep small { color: #777; font-size: .62rem; line-height: 1.45; }
.uploadButton { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding: 14px 15px; background: var(--black); color: #fff; font-size: .7rem; font-weight: 800; cursor: pointer; transition: background .2s; }
.uploadButton:hover { background: var(--red); }
.uploadButton span { color: var(--red); font-size: 1rem; }
.uploadButton:hover span { color: #fff; }
.logoLibrary { display: grid; gap: 6px; max-height: 164px; margin-top: 9px; overflow-y: auto; scrollbar-width: thin; }
.logoLibrary[hidden] { display: none; }
.logoLibraryItem { display: grid; grid-template-columns: minmax(0, 1fr) 30px; min-height: 48px; border: 1px solid #c4c4bf; background: #fff; transition: border-color .18s, box-shadow .18s; }
.logoLibraryItem.active { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.logoLibrarySelect { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 4px 8px 4px 4px; border: 0; background: transparent; color: #222; text-align: left; cursor: pointer; }
.logoLibrarySelect img { width: 38px; height: 38px; border: 1px solid #ddd; background: #eee; object-fit: contain; }
.logoLibrarySelect span { overflow: hidden; font-size: .58rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.logoLibraryRemove { display: grid; place-items: center; border: 0; border-left: 1px solid #ddd; background: transparent; color: #777; font-size: 1.15rem; cursor: pointer; transition: background .18s, color .18s; }
.logoLibraryRemove:hover { background: var(--red); color: #fff; }
.shirtColors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 1rem; }
.shirtColor { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 1px solid #c4c4bf; background: transparent; font-size: .63rem; cursor: pointer; }
.shirtColor i { width: 15px; height: 15px; border-radius: 50%; background: var(--swatch); border: 1px solid #999; }
.shirtColor.active { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.sizeControl { display: flex; justify-content: space-between; margin: 1.2rem 0 .5rem; color: #555; font-size: .65rem; }
.sizeRange { width: 100%; accent-color: var(--red); }
.logoSideControl { display: grid; gap: 7px; margin-top: 1.2rem; color: #555; font-size: .65rem; }
.logoSideButtons, .rotationQuickActions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.logoSideButtons button, .rotationQuickActions button { min-height: 36px; border: 1px solid #aaa; background: transparent; color: #333; font-size: .61rem; font-weight: 800; cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
.logoSideButtons button:hover, .rotationQuickActions button:hover { border-color: var(--black); }
.logoSideButtons button.active { border-color: var(--black); background: var(--black); color: #fff; }
.rotationQuickActions { grid-template-columns: repeat(3, 1fr); margin-top: 7px; }
.rotationQuickActions button { font-size: .85rem; }
.rotationQuickActions button span { font-size: .58rem; }
.rotationQuickActions button.active { border-color: var(--black); background: var(--black); color: #fff; }
.tryonActions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.tryonActions button { padding: 11px 6px; border: 1px solid #aaa; background: transparent; font-size: .61rem; font-weight: 800; cursor: pointer; }
.tryonActions button:hover:not(:disabled) { border-color: var(--black); }
.tryonActions button:disabled { color: #aaa; cursor: not-allowed; }
.tryonStatus { margin: 1.2rem 0 0; color: #777; font-size: .59rem; line-height: 1.45; }
.tryonStatus.error { color: var(--red); }
.tryonStage { position: relative; min-width: 0; min-height: 690px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #444 0, #202020 38%, #090909 76%); touch-action: none; cursor: grab; transition: background .28s ease; }
.tryonStage[data-theme="light"] { background: radial-gradient(circle at 50% 42%, #fff 0, #e4e4df 45%, #c9c9c4 100%); }
.tryonStage.dragging { cursor: grabbing; }
#shirtCanvas { display: block; width: 100%; height: 100%; outline: none; }
.garmentPicker { position: absolute; z-index: 3; top: 20px; left: 50%; display: flex; gap: 6px; padding: 5px; border: 1px solid #3f3f3f; background: rgba(8,8,8,.84); transform: translateX(-50%); backdrop-filter: blur(8px); }
.garmentPicker button { display: grid; place-items: center; width: 55px; height: 48px; padding: 3px; border: 1px solid #3e3e3e; background: #171717; color: #aaa; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.garmentPicker button:hover { color: #fff; border-color: #777; }
.garmentPicker button.active { border-color: var(--red); background: #211113; color: #fff; box-shadow: inset 0 0 0 1px var(--red); }
.garmentPicker svg { width: 25px; height: 25px; fill: currentColor; }
.garmentPicker svg .detail { fill: none; stroke: #0b0b0b; stroke-width: 1.4; }
.garmentPicker span { font-size: .47rem; font-weight: 800; line-height: 1; }
.capDevelopmentNotice { position: absolute; z-index: 3; top: 75px; left: 50%; display: none; width: min(240px, calc(100% - 32px)); margin: 0; padding: 7px 10px; border: 1px solid #3f3f3f; background: rgba(8,8,8,.84); color: #c9c9c9; font-size: .54rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; transform: translateX(-50%); backdrop-filter: blur(8px); }
.tryonStage[data-garment="cap"] .capDevelopmentNotice { display: block; }
.stageBadge { position: absolute; z-index: 2; top: 24px; left: 24px; display: grid; gap: 3px; color: #fff; pointer-events: none; }
.stageBadge span { font-family: "Archivo Black", sans-serif; font-size: .95rem; }
.stageBadge b { color: var(--red); font-size: .54rem; letter-spacing: .12em; }
.stageThemeToggle { position: absolute; z-index: 3; top: 22px; right: 22px; display: flex; padding: 4px; border: 1px solid #3f3f3f; background: rgba(8,8,8,.84); backdrop-filter: blur(8px); }
.stageThemeToggle button { min-width: 58px; padding: 8px 9px; border: 0; background: transparent; color: #aaa; font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.stageThemeToggle button.active { background: #fff; color: #111; }
.tryonStage[data-theme="light"] .stageBadge { color: #111; }
.tryonStage[data-theme="light"] .stageThemeToggle { border-color: #aaa; background: rgba(255,255,255,.76); }
.tryonStage[data-theme="light"] .stageThemeToggle button { color: #555; }
.tryonStage[data-theme="light"] .stageThemeToggle button.active { background: #111; color: #fff; }
.tryonStage[data-theme="light"] .stageHint { color: #555; }
.tryonStage[data-theme="light"] .stageHint > span { border-color: #777; color: #111; }
.tryonStage[data-theme="light"] .stageHint b { color: #111; }
.stageHint { position: absolute; z-index: 2; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 12px; color: #aaa; pointer-events: none; }
.stageHint > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #666; border-radius: 50%; color: #fff; }
.stageHint p { margin: 0; font-size: .59rem; line-height: 1.5; }
.stageHint b { color: #fff; }
.tryonBusy { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: 13px; background: rgba(8, 8, 8, .56); color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease; backdrop-filter: blur(2px); }
.tryonBusy.active { opacity: 1; visibility: visible; }
.tryonBusy i { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--red); border-radius: 50%; animation: tryonSpin .72s linear infinite; }
@keyframes tryonSpin { to { transform: rotate(360deg); } }
.tryonFallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; color: #fff; text-align: center; }
.tryonFallback[hidden] { display: none; }

@media (max-width: 960px) {
  .tryonSection { padding: 6rem 24px; }
  .tryonIntro { grid-template-columns: 1fr; gap: 1.5rem; }
  .tryonIntro > p { max-width: 520px; }
  .tryonWorkspace { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .tryonIntro h2 { font-size: clamp(3.2rem, 14vw, 5.5rem); }
  .tryonWorkspace { grid-template-columns: 1fr; }
  .tryonControls { order: 2; }
  .tryonStage { min-height: 520px; }
}

@media (max-width: 600px) {
  .garmentPicker { top: 62px; }
  .capDevelopmentNotice { top: 112px; }
}

@media (max-width: 480px) {
  .tryonSection { padding: 5rem 20px; }
  .tryonIntro h2 { font-size: 3.15rem; }
  .tryonStage { min-height: 460px; }
  .stageBadge { top: 17px; left: 17px; }
  .stageThemeToggle { top: 14px; right: 12px; }
  .stageThemeToggle button { min-width: 48px; padding: 7px 6px; font-size: .46rem; }
  .garmentPicker { top: 62px; width: calc(100% - 24px); justify-content: center; }
  .garmentPicker button { width: 18%; }
  .garmentPicker span { display: none; }
  .capDevelopmentNotice { top: 112px; }
  .stageHint { right: 17px; bottom: 15px; }
}