:root {
  --panel-ink:#203438;
  --jade:#96d7b1;
  --ochre:#f2c568;
  --lilac:#c7bbed;
  --paper:#f8f6ee;
}
.do-frame{width:min(100%,1120px)}
.do-header{background:#fffdf7;border-color:#ccd2c8}
.do-mast{gap:20px;padding:11px 0 7px}
.do-brand{color:var(--panel-ink)}
.do-personal{display:inline-flex;align-items:center;margin-left:auto;min-height:44px;font-size:.88rem}
.do-personal[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;border:0}
.do-sign{padding-left:16px;border-left:1px solid #cad2c9}
.do-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:3px 0 13px}
.do-nav a,.do-nav a:last-child{display:flex;justify-content:center;gap:9px;margin:0;border:1.5px solid #9aaba1;border-bottom:2px solid #758b80;border-radius:9px;min-height:45px;padding:5px 10px;color:var(--panel-ink);font-size:.96rem;text-decoration:none;background:#fcfcf5;box-shadow:0 2px 0 #c4cec3}
.do-nav img{width:34px;height:32px;object-fit:contain}
.do-nav a[aria-current="page"]{background:var(--nav-color);border:2px solid var(--panel-ink);box-shadow:inset 0 -2px 0 #263e392b}
.do-nav [data-nav="voces"]{--nav-color:#c8ead5}.do-nav [data-nav="pares"]{--nav-color:#fae1a7}.do-nav [data-nav="atlas"]{--nav-color:#e1d8f6}
.do-frame>main{padding-top:27px}
main .welcome-title{margin:0 0 18px;font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08}
.portal-deck{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:17px}
.press{--lip:#263b36;display:block;position:relative;min-width:0;text-decoration:none;color:var(--panel-ink);border:2px solid var(--panel-ink);border-radius:16px;box-shadow:0 4px 0 var(--lip);transition:transform .13s ease,box-shadow .13s ease}
.portal{overflow:hidden}
.portal-copy{padding:18px 22px}
.portal-copy h2,.sleeve-body h2,.mode-copy h2{font:900 clamp(1.45rem,2.7vw,2.2rem)/1.1 TonSerif,Georgia,serif;letter-spacing:-.045em;margin:0 0 8px}
.portal-copy p{font-size:1rem;line-height:1.42;max-width:45ch}
.portal-action{display:inline-flex;align-items:center;gap:.7em;margin-top:15px;font-size:.88rem;font-weight:730}
.portal-action b,.pad-arrow{display:inline-grid;place-items:center;border:1.5px solid currentColor;border-radius:50%;height:25px;width:25px;font:700 1rem/1 "Segoe UI",sans-serif}
.portal-voices{grid-row:1 / 3;display:flex;flex-direction:column;background:#174c43;color:#fffdf4}
.cassette-stage,.mode-picture{position:relative;isolation:isolate;overflow:hidden;background-color:#9cd9b8;background-image:radial-gradient(#34675248 .85px,transparent 1px);background-size:8px 8px}
.cassette-stage:after{content:"";position:absolute;inset:auto -16% -80% 54%;aspect-ratio:1;border:1px solid #294f4238;border-radius:50%;box-shadow:0 0 0 10px #9dd9b9,0 0 0 11px #294f4238,0 0 0 21px #9dd9b9,0 0 0 22px #294f4238;z-index:-1}
.cassette-stage{display:grid;place-items:center;flex:1;min-height:140px;border-bottom:2px solid var(--panel-ink)}
.cassette-stage img{width:min(91%,490px);height:167px;object-fit:contain}
.portal-voices .portal-copy{padding:18px 24px 22px}.portal-voices h2{font-size:clamp(2rem,3.4vw,2.8rem)}.portal-voices .portal-action{color:#ccefd8}
.portal-pairs,.portal-atlas{display:grid;grid-template-columns:minmax(64px,105px) 1fr;gap:12px;align-items:center;padding:16px 19px}
.portal-pairs{background:#f6d58c}.portal-atlas{background:#dfd5f1}
.portal-pairs .portal-copy,.portal-atlas .portal-copy{padding:0}.portal>.section-icon{width:100%;height:auto}
.quick-story{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:17px 0;padding:12px 16px;background:#fffef8;border:1.5px solid #a8b9aa;border-radius:10px;color:#244c43;text-decoration:none}
.quick-story div{display:grid}.quick-story small,.record-meta{font-size:.79rem;font-weight:650;color:#456259}.quick-story strong{font-size:1.05rem}.quick-story span{font-weight:700;white-space:nowrap}
.section-heading{display:flex;align-items:center;gap:21px;padding:19px 25px;margin:0 0 20px;border:1.5px solid var(--panel-ink);border-radius:14px;background:#deefe2}
.tone-pares.section-heading{background:#f8e5b9}.tone-atlas.section-heading{background:#e8e0f5}
.section-heading>.section-icon{width:76px;height:76px;flex:none}.section-heading h1{font-size:clamp(2.05rem,4.2vw,3.25rem);margin:0 0 4px}.section-heading p{max-width:76ch;line-height:1.45}
.catalog-filter{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end}
.catalog-filter fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:5px}
.catalog-filter legend,.catalog-filter label{font-size:.83rem;font-weight:680;color:#344c45}
.catalog-filter legend{margin:0 0 4px;padding:0}.catalog-filter label{display:grid;gap:4px}.catalog-search{flex:1;min-width:min(185px,100%)}
.level-switch button,.catalog-filter select,.catalog-filter input{padding:6px 11px;min-height:42px;border:1px solid #8d9e93;background:#fffef8;color:#243a34;border-radius:7px;font-size:.92rem;min-width:0}
.level-switch button{font-weight:650;min-width:42px}.level-switch button[aria-pressed=true]{background:#234e43;color:white;border-color:#234e43;box-shadow:inset 0 -2px #0c332b}
.catalog-count{font-size:.9rem;font-weight:650;color:#466057;margin:18px 0 10px}
.sleeve-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:17px;margin:0 0 17px}
.record-sleeve{display:flex;flex-direction:column;background:#fffef8;overflow:hidden;--lip:#82998a}
.sleeve-scene{position:relative;aspect-ratio:2.15;background:#cbdfcc;border-bottom:1.5px solid var(--panel-ink)}.sleeve-scene img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.sleeve-scene .sleeve-level{position:absolute;bottom:9px;left:12px;background:#fffdf1;border:1px solid var(--panel-ink);border-radius:5px;padding:1px 8px;font-weight:750;font-size:.82rem}
.sleeve-body{display:flex;flex:1;flex-direction:column;padding:16px 18px;align-items:flex-start;gap:6px}.sleeve-body h2{font-size:clamp(1.3rem,2.1vw,1.72rem);margin:0}.sleeve-body>p:not(.record-meta){line-height:1.42;font-size:.95rem}.sleeve-body strong{padding-top:11px;margin-top:auto;color:#185349}.sleeve-body b{margin-left:4px}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 22px}
.mode-pad{overflow:hidden;background:#fffaf0;--lip:#9a8253}
.mode-picture{background-color:#f5d989;background-image:radial-gradient(#9f721d54 .85px,transparent 1px);border-bottom:1.5px solid var(--panel-ink);display:grid;place-items:center;min-height:135px}
.mode-pad:nth-child(2) .mode-picture{background-color:#f6e3ad}
.tile-stack{display:flex;align-items:center;justify-content:center;padding:14px;gap:10px}
.tile-stack i{display:grid;place-items:center;font:900 clamp(1.5rem,3vw,2rem)/1 TonSerif,Georgia,serif;letter-spacing:-.05em;flex:none;width:max-content;min-width:74px;padding-inline:.36em;white-space:nowrap;height:64px;background:#fff7d5;border:2.5px solid #28393b;box-shadow:0 5px 0 #28393b;border-radius:10px;transform:rotate(-6deg);color:#27373b}
.tile-stack i:nth-child(2){background:#eaa343;transform:translateY(4px) rotate(7deg)}.mixed i:first-child{transform:rotate(-12deg) translateY(5px)}.mixed i:nth-child(2){z-index:1;transform:translateY(-4px) rotate(1deg)}.mixed i:nth-child(3){transform:rotate(11deg) translateY(7px)}
.mode-copy{padding:18px 56px 20px 20px}.mode-copy h2{font-size:clamp(1.5rem,2.5vw,2.05rem)}.mode-copy p{font-size:.96rem;line-height:1.4}.pad-arrow{position:absolute;bottom:20px;right:17px}
.pair-setup .do-resource{border:1.5px solid #9a947d}.pair-setup .do-resource:has(input:checked){border-color:#674e1d;background:#fff2ce;box-shadow:0 3px #9a8253}.do-radio{min-height:44px;cursor:pointer}.do-radio input{accent-color:#685116}
.do-resources .press{--lip:#87819c;border-radius:13px}.do-resources .do-atlas-card{display:flex;background:#39364f;color:white}.do-resources .do-atlas-card strong{color:#f4dfa1}
.resource-mark{font:800 1.13rem/1.1 Georgia,serif;color:#4c405f;background:#e9e2f2;display:inline-grid;place-items:center;min-width:42px;height:31px;padding:3px 7px;border-radius:5px;border:1px solid #9789ab;margin-bottom:12px}
.do-resource h2{margin:0 0 6px}.do-resource p{line-height:1.45}.do-resource.press strong{color:#514365}
.press:focus-visible,.do-nav a:focus-visible,.quick-story:focus-visible,.level-switch button:focus-visible{outline:3px solid #a34800;outline-offset:3px}
@media(hover:hover){.press:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--lip)}.do-nav a:hover{background:var(--nav-color);text-decoration:none}.quick-story:hover strong{text-decoration:underline}}
.press:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lip)}.do-nav a:active{transform:translateY(2px);box-shadow:inset 0 1px 2px #697b6d}
#clear-catalog[hidden]{display:none}
@media(max-width:740px){.portal-pairs,.portal-atlas{grid-template-columns:61px 1fr;gap:10px;padding:15px}.portal-copy h2{font-size:1.75rem}.do-nav{gap:7px}}
@media(max-width:650px){
 .do-frame{padding-inline:15px}.do-mast{gap:9px;padding:5px 0 6px}.do-sign{padding-left:9px}.do-personal{font-size:.8rem}
 .do-nav{gap:5px;padding:0 0 10px}.do-nav a,.do-nav a:last-child{display:flex;flex-direction:column;gap:2px;min-height:57px;padding:3px 2px;font-size:clamp(.72rem,3.2vw,.85rem);line-height:1.22;white-space:nowrap}.do-nav img{width:28px;height:27px}
 .do-frame>main{padding-top:18px}main .welcome-title{font-size:clamp(1.8rem,7.7vw,2.5rem);margin-bottom:13px}
 .portal-deck{grid-template-columns:1fr;grid-template-rows:auto;gap:11px}.portal-voices{grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) 30%}.portal-voices .portal-copy{grid-column:1;grid-row:1;padding:15px 3px 16px 15px}.portal-voices h2{font-size:1.72rem}
 .cassette-stage{grid-column:2;grid-row:1;min-height:0;border:0;border-left:2px solid var(--panel-ink)}.cassette-stage img{height:auto;width:155%;max-width:none;transform:rotate(-13deg)}
 .portal-pairs,.portal-atlas{grid-template-columns:62px 1fr;padding:12px 14px;gap:13px}.portal-copy h2{font-size:1.4rem;margin-bottom:4px}.portal-copy p{font-size:.88rem;line-height:1.35}.portal-action{margin-top:8px;font-size:.8rem;gap:7px}.portal-action b{width:20px;height:20px;font-size:.86rem}
 .quick-story{margin:14px 0;padding:10px 12px;font-size:.9rem}.section-heading{gap:12px;padding:13px;margin-bottom:15px}.section-heading>.section-icon{width:47px;height:47px}.section-heading h1{font-size:clamp(1.65rem,7.1vw,2.1rem)}.section-heading p{font-size:.88rem}
 .catalog-filter{gap:8px 10px}.catalog-filter fieldset{width:100%}.catalog-filter select{max-width:130px}.catalog-search{min-width:130px}.catalog-count{margin-top:12px}
 .sleeve-grid{grid-template-columns:1fr;gap:12px}.record-sleeve{display:grid;grid-template-columns:29% minmax(0,1fr);border-radius:10px}.sleeve-scene{aspect-ratio:auto;border-bottom:0;border-right:1.5px solid var(--panel-ink)}.sleeve-scene .sleeve-level{bottom:7px;left:6px;font-size:.72rem}.sleeve-body{padding:11px 12px;gap:4px}.sleeve-body h2{font-size:1.23rem}.sleeve-body>p:not(.record-meta){font-size:.84rem;line-height:1.33}.sleeve-body strong{font-size:.86rem;padding-top:3px}.sleeve-body small,.record-meta{font-size:.73rem}
 .mode-grid{grid-template-columns:1fr;gap:13px}.mode-pad{display:grid;grid-template-columns:34% 1fr}.mode-picture{min-height:110px;border-bottom:0;border-right:1.5px solid var(--panel-ink)}.tile-stack{width:100%;flex-wrap:wrap;gap:10px 5px;padding:6px 4px}.tile-stack i{min-width:2.5em;height:2.25em;font-size:clamp(.78rem,3.1vw,1rem);border-width:1.5px;border-radius:5px;box-shadow:0 3px #28393b}.mode-copy{padding:13px 14px}.mode-copy h2{font-size:1.25rem}.mode-copy p{font-size:.85rem}.pad-arrow{position:static;margin-top:7px;width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){.press,.do-nav a{transition:none}.press:hover,.press:active,.do-nav a:active{transform:none}}

@media(min-width:900px){.sleeve-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.catalog-filter select{max-width:100%;min-width:145px}}

.catalog-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0 12px}
.catalog-tools .catalog-count{margin:0;text-align:end}
.literature-toggle{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 11px;border:1px solid #866957;border-radius:8px;background:#fffaf0;color:#5c3e32;box-shadow:0 2px #b4a08a;line-height:1.15;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.literature-icon{width:19px;height:19px;flex:none}
.literature-toggle i{display:grid;place-items:center;width:15px;height:15px;margin-inline-start:3px;border:1.5px solid currentColor;border-radius:4px}
.literature-toggle[aria-pressed=true]{color:#fff5d9;background:#634537;border-color:#4b342c;box-shadow:0 2px #443129}
.literature-toggle[aria-pressed=true] i{background:#ffdf96;color:#624333;border-color:#ffdf96}
.literature-toggle[aria-pressed=true] i:before{content:"";width:7px;height:4px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.literature-toggle:focus-visible{outline:3px solid #a34800;outline-offset:3px}
.literature-toggle:active{transform:translateY(1px);box-shadow:none}
@media(hover:hover){.literature-toggle:not([aria-pressed=true]):hover{background:#f6ead5}}
/* Cut the bookmark at the outer paper edge, including the two-pixel rim. */
.literature-ribbon-cut{position:absolute;inset:-2px;clip-path:var(--paper-edge);z-index:1;pointer-events:none}
.literature-ribbon{position:absolute;inset-block-start:0;inset-inline-end:14px;display:inline-flex;align-items:center;gap:6px;padding:9px 9px 9px;color:#fff3d8;background:#614034;border-radius:0 0 4px 4px;border:1px solid #412e28;border-top:0;box-shadow:0 2px 0 #d6b47e;font-size:.78rem;font-weight:750;line-height:1}
.literature-ribbon .literature-icon{width:16px;height:16px}
.sleeve-author{font:700 1.04rem/1.16 TonSerif,Georgia,serif;color:#754934;margin:0 0 2px}
/* The link owns the hit area and focus ring. Only the printed sheet is cut. */
.record-sleeve.literary-sleeve {
  --paper-edge: polygon(0 8px, 4px 3px, 7% 1px, 11% 3px, 24% 1px, 29% 2px, 44% 0, 61% 2px, 72% 1px, 86% 2px,
    calc(100% - 7px) 0, 100% 5px, calc(100% - 1px) 24%, 100% 36%, calc(100% - 3px) 39%, calc(100% - 1px) 42%, 100% 66%,
    calc(100% - 2px) 79%, 100% 89%, calc(100% - 2px) calc(100% - 9px), calc(100% - 10px) calc(100% - 1px),
    93% calc(100% - 2px), 86% 100%, 82% calc(100% - 3px), 72% calc(100% - 1px), 65% calc(100% - 2px),
    51% 100%, 46% calc(100% - 3px), 42% calc(100% - 1px), 30% 100%, 24% calc(100% - 2px),
    16% calc(100% - 1px), 9% calc(100% - 3px), 5px calc(100% - 1px), 0 calc(100% - 5px),
    2px 82%, 0 75%, 2px 62%, 1px 49%, 3px 44%, 0 41%, 1px 23%);
  --paper-shadow: 3px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: transparent;
  border-color: transparent;
  border-radius: 5px;
  overflow: visible;
  box-shadow: none;
  filter: drop-shadow(0 var(--paper-shadow) 0 #9a8369);
}
.literary-sleeve::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: #76553a;
  clip-path: var(--paper-edge);
}
.literature-sheet {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  clip-path: var(--paper-edge);
  background-color: #f1e0b9;
  background-image:
    linear-gradient(102deg, rgb(255 248 221 / 45%), rgb(255 249 230 / 78%) 28%, rgb(255 248 224 / 68%) 74%, rgb(245 224 178 / 46%)),
    url("assets/papel-literatura.avif");
  background-position: center;
  background-size: 100% 100%, 158% 158%;
  background-repeat: no-repeat;
}
.literary-sleeve .sleeve-scene {border-color: #79593e}
.literary-sleeve .record-meta {color: #554c3e}
.literary-sleeve .sleeve-author {color: #68412e}
.literary-sleeve .literature-ribbon {
  background: #59392e;
  color: #fff6da;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
@media (hover:hover) {
  .record-sleeve.literary-sleeve:hover {--paper-shadow: 5px}
}
.record-sleeve.literary-sleeve:active {--paper-shadow: 1px}
@media (max-width:650px) {
  .literature-sheet {
    display: grid;
    grid-template-columns: 33% minmax(0,1fr);
  }
  .literary-sleeve .literature-ribbon {
    padding-inline: 5px;
    letter-spacing: .035em;
  }
}
@media (forced-colors:active) {
  .record-sleeve.literary-sleeve {border-color: LinkText; filter:none}
  .literature-sheet {clip-path:none; background:Canvas}
  .literature-ribbon-cut {clip-path:inset(2px)}
}
@media(max-width:650px){
 .catalog-tools{margin:12px 0 10px}
 .record-sleeve{grid-template-columns:33% minmax(0,1fr)}
 .sleeve-scene img{object-position:43% center}
 .literature-ribbon{inset-inline:2px auto;max-width:calc(33% - 3px);gap:3px;padding:12px 4px 5px;border-inline-start:0;font-size:.65rem;border-radius:0 0 4px 0}
 .literature-ribbon .literature-icon{width:12px;height:12px}
 .sleeve-author{font-size:.94rem}
}
@media(max-width:370px){.catalog-search{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.literature-toggle:active{transform:none}}

/* Voces y relatos: la cinta pasa por ambos lados del casete. */
giro-cinta{display:block;position:relative;width:min(100%,334px);aspect-ratio:2;grid-area:1/1;isolation:isolate;pointer-events:none}
.cassette-stage giro-cinta .carcasa,.cassette-stage giro-cinta .tramo{position:absolute;display:block;max-width:none;height:auto;transform:none;filter:none}
.cassette-stage giro-cinta .carcasa{width:110%;left:-5%;top:1.3%}
giro-cinta .plano{position:absolute;width:96%;aspect-ratio:1;left:3.01575%;top:-35.35228%;transform-origin:center;transform:matrix(0.8672774,0.0956314,-0.0286741,0.1626187,0,0)}
giro-cinta .delante{clip-path:inset(50% 0 0)}
.cassette-stage giro-cinta .tramo{inset:0;width:100%;height:100%}
.cassette-stage:after{display:none}
@media(max-width:650px){.cassette-stage giro-cinta{width:120%;max-width:none;transform:rotate(-5deg)}}