@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --paper: #f7f5ef;
  --ink: #252523;
  --mix-muted: #5b5a54;
  --mix-panel: #eeece5;
  --mix-yellow: #efdaa1;
  --coral: #79551b;
  --piano-line: #d8d4c9;
  --piano-type: "Manrope", "Avenir Next", system-ui, sans-serif;
  --piano-display: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
}
body { font-family: var(--piano-type); }
header {
  width: 100%;
  padding: 19px max(5%, calc((100% - 1320px) / 2));
  background: #222323;
  border-bottom: 1px solid #ffffff24;
}
header .brand, footer .brand {
  font-family: var(--piano-display);
  font-weight: 700;
  letter-spacing: -.055em;
}
header .brand { color: #faf7ef; }
header .brand>span:first-child { font-style: normal; color: var(--mix-yellow); }
header .brand .author { color: #e4ded1 !important; }
header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: transparent;
  color: #faf7ef;
  border-radius: 0;
  padding: 6px 9px;
  font-weight: 700;
}
header nav a:hover, header nav a[aria-current="page"] {
  color: var(--mix-yellow);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.piano-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: clamp(390px, 40vw, 550px);
  border-radius: 0;
  background: #222323;
}
.piano-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.piano-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, #161717f5 0%, #161717d9 25%, #16171755 54%, transparent 75%);
  pointer-events: none;
}
.piano-hero .copy {
  padding: 40px max(5%, calc((100% - 1320px) / 2));
  color: #faf7ef;
}
.piano-hero .copy h1 {
  font: 700 clamp(38px, 6vw, 84px)/1.02 var(--piano-display);
  letter-spacing: -.055em;
  max-width: 8.5em;
  color: #faf7ef;
  text-wrap: initial;
}
.piano-hero .eyebrow { color: #eeeae0; }
.piano-hero .copy p { color: #faf7ef; max-width: 280px; }
.piano-hero .copy .button {
  min-height: 44px;
  border-radius: 0;
  color: var(--ink);
  background: var(--mix-yellow);
}
.piano-hero .copy .button:hover { background: #f5e4b7; }
.section h1, .section h2, .section h3, .bingo-embed summary {
  font-family: var(--piano-display);
  font-weight: 700;
}
.section .label, h2 em { color: #79551b; }
.cycle, .cycle:nth-child(2), .cycle:nth-child(3) {
  color: var(--ink);
  background: var(--mix-panel);
  border-top: 1px solid #a9a69c;
  border-radius: 0;
}
.cycle p, .cycle::before { color: var(--mix-muted); }
.cycle::after, .cycle:nth-child(n)::after {
  color: var(--ink);
  background: transparent;
}
.cycle:hover { background: #e5e2d8; filter: none; }
.featured { padding: 24px 0 36px; }
.featured h2 { font-size: clamp(23px, 3vw, 34px); }
.featured-list a {
  background: #eeece5;
  border-radius: 0;
  padding: 9px;
}
.featured-list a:hover { background: #e5e2d8; }
.featured-list span { color: var(--mix-muted); }
.catalog-controls, .teacher-tools, #sobre-mi, footer { border-color: var(--piano-line); }
.catalog-controls input, .catalog-controls select {
  color-scheme: light;
  background: #fcfaf5;
  border-color: #a9a69c;
}
.catalog-controls input::placeholder { color: var(--mix-muted); }
.resource-card, .resource-card:nth-child(n), .teacher-tool, .bingo-embed, .cast-badge-small {
  background: #fcfaf5;
  border: 1px solid var(--piano-line);
  border-radius: 0;
}
.cast-badge-small:hover { background: var(--mix-panel); }
.resource-card .pdf-preview, .bingo-art, .simon-art { background: var(--mix-panel); }
.resource-card a, .resource-actions .download, .tool-open {
  color: var(--ink);
  background: var(--mix-panel);
  border: 1px solid var(--piano-line);
  border-radius: 0;
}
.resource-card a:hover, .tool-open:hover { background: #e5e2d8; }
.simon-pads span { background: #767673; }
.simon-pads span:nth-child(2) { background: #c6af78; }
.simon-pads span:nth-child(3) { background: #a59c8e; }
.simon-pads span:nth-child(4) { background: #dfd9cb; }
.simon-pads span:nth-child(5) { background: #545652; }
footer .brand>span:first-child { color: #79551b; }
a:focus-visible, .cycle:focus-visible, summary:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible { outline-color: #79551b; }
header a:focus-visible, .piano-hero a:focus-visible { outline-color: var(--mix-yellow); }

@media (max-width: 760px) {
  header { gap: 8px; padding: 15px 5% 7px; }
  header nav { gap: 0 9px; }
  header nav a { padding-inline: 3px; }
  .piano-hero { grid-template-rows: auto auto; min-height: 0; }
  .piano-photo { position: relative; grid-row: 2; height: auto; aspect-ratio: 688 / 360; }
  .piano-hero::before { display: none; }
  .piano-hero .copy { grid-row: 1; padding: 29px 5% 24px; }
}

:root { --mix-yellow: #ffdf79; }


.gold-feature {
  background: var(--mix-yellow);
  color: var(--ink);
}
.gold-feature > div {
  width: min(1320px, 90%);
  margin-inline: auto;
  padding: 12px 0;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 3fr;
  align-items: center;
  gap: 10px 24px;
}
.gold-feature h2 {
  margin: 0;
  color: var(--ink);
  font: 700 clamp(18px, 2vw, 25px)/1.1 var(--piano-display);
  letter-spacing: -.035em;
}
.gold-feature .featured-list a {
  background: transparent;
  padding: 4px 7px;
}
.gold-feature .featured-list a:hover { background: #ffffff55; }
.gold-feature .featured-list span { color: #443718; }
@media (max-width: 760px) {

  .gold-feature > div { grid-template-columns: 1fr; gap: 5px; }
}

.teacher-tools .bingo-art {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  background: #f7f5ef;
}
.teacher-tools .bingo-art img { object-fit: contain; }

.teacher-tools .bingo-art {
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at 50% 110%, #4c4639, #242523 69%);
  border-bottom: 1px solid #bba263;
}
.teacher-tools .app-crop {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #f7f5ef;
  box-shadow: 0 12px 26px #0006, 0 0 0 1px #efdaa168;
}
.teacher-tools .app-crop img {
  position: absolute;
  max-width: none;
  height: auto;
  object-fit: initial;
}
.teacher-tools .app-crop-bingo {
  width: 84%;
  aspect-ratio: 1410 / 680;
}
.teacher-tools .app-crop-bingo img {
  width: 129.4%;
  left: -12.1%;
  top: -83.8%;
}
.teacher-tools .app-crop-simon {
  width: 41%;
  aspect-ratio: 610 / 604;
}
.teacher-tools .app-crop-simon img {
  width: 216.4%;
  left: -59.8%;
  top: -38.6%;
}

#herramientas.teacher-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
#herramientas > .tools-intro,
#herramientas > .bingo-embed {
  grid-column: 1 / -1;
}
@media (max-width: 760px) {
  #herramientas .tool-copy { padding: clamp(10px, 2.7vw, 20px); }
  #herramientas .tool-copy h3 { font-size: clamp(16px, 3.6vw, 23px); overflow-wrap: anywhere; }
  #herramientas .tool-open { padding-inline: 8px; gap: 5px; }
}

#sobre-mi .about-copy {
  max-width: 760px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.85;
}
#sobre-mi .about-copy p { margin: 0 0 22px; }
#sobre-mi .about-copy .about-lead {
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.45;
}

#sobre-mi .about-copy a {
  color: #79551b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#sobre-mi .sem-project {
  margin: 38px 0;
  padding: 28px 0;
  border-block: 1px solid var(--piano-line);
  max-width: 850px;
}
#sobre-mi .sem-project h2 { font-size: clamp(26px, 3vw, 34px); }
.sem-map { display: block; width: 100%; height: auto; margin: 20px 0; }
.sem-map path { fill: #e2ded3; stroke: #f7f5ef; stroke-width: 1.7; }
.sem-map a path { fill: #e9ca79; stroke: #6c5a32; stroke-width: 1.2; }
.sem-map a:hover path, .sem-map a:focus path { fill: #ffdc6a; stroke: #252523; stroke-width: 2.5; }
.sem-map text { fill: #252523; font: 600 13px var(--piano-type); pointer-events: none; }
.sem-map .map-muted { fill: #5b5a54; }
.sem-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.sem-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px; background: #eeece5; text-decoration: underline; text-underline-offset: 3px; }
.gem-cover { display: grid; place-items: center; aspect-ratio: 2 / 1; background: #252624; border-bottom: 1px solid #bba263; }
.gem-cover span { color: #ffdf79; font: 700 clamp(25px, 4vw, 45px) var(--piano-display); letter-spacing: -.05em; }

#sobre-mi.section {
  width: min(960px, calc(100% - 48px));
  margin-inline: auto;
}
#sobre-mi .about-copy,
#sobre-mi .sem-project {
  max-width: none;
}
#sobre-mi .about-copy {
  font-size: 17px;
  line-height: 1.85;
}
@media (max-width: 600px) {
  #sobre-mi.section { width: calc(100% - 32px); }
  #sobre-mi .about-copy { font-size: 16px; }
}

#herramientas.teacher-tools {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
#herramientas .tool-copy {
  padding: 16px;
}
#herramientas .tool-copy h3 {
  font-size: 22px;
  line-height: 1.15;
}
#herramientas .tool-copy p {
  font-size: 13px;
}
#herramientas .tool-open {
  padding: 10px 12px;
  gap: 8px;
}
.gem-cover span {
  font-size: clamp(23px, 2.5vw, 34px);
}
@media (max-width: 900px) {
  #herramientas.teacher-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 450px) {
  #herramientas .tool-copy { padding: 10px; }
  #herramientas .tool-copy h3 { font-size: 18px; }
}

header .brand {
  position: relative;
  padding-left: 59px;
  min-height: 48px;
}
header .brand-symbol {
  position: absolute;
  left: 0;
  top: -2px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
}

header .brand > span:not(.author) {
  color: var(--mix-yellow);
}

main p:not(.label):not(.meta):not(.resource-counts):not(.about-lead),
#sobre-mi .about-copy p:not(.about-lead) {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#sobre-mi .about-copy p:not(.about-lead),
#sobre-mi .sem-project > p:not(.small) {
  font-size: 17px;
  line-height: 1.85;
  margin: 0 0 22px;
}
@media (max-width: 600px) {
  #sobre-mi .about-copy p:not(.about-lead),
  #sobre-mi .sem-project > p:not(.small) {
    font-size: 16px;
  }
}

header .brand .author {
  text-align: center;
}

.area-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}
.area-filters button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #b6b0a2;
  background: #eeece5;
  color: var(--ink);
  font: 600 14px var(--piano-type);
  cursor: pointer;
}
.area-filters button[aria-pressed="true"] {
  background: var(--mix-yellow);
  border-color: #79551b;
}

.area-filters[hidden] { display: none; }
.ia-tutorials { border-top: 1px solid var(--piano-line); }
.ia-tutorials p { max-width: 760px; }

.figure-bank h1{font-size:clamp(32px,5vw,62px);line-height:1.1;max-width:900px}.figure-bank>p{max-width:800px}.figure-bank-intro{border-top:1px solid var(--piano-line)}.figure-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}.figure-card{padding:16px;border:1px solid var(--piano-line);border-radius:16px;min-width:0}.figure-preview{display:grid;place-items:center;background:#ddd;border-radius:10px;aspect-ratio:1}.figure-preview img{width:90%;height:90%;object-fit:contain}.figure-card h2{font-size:16px;letter-spacing:0;line-height:1.4;margin:16px 0;min-height:45px}.figure-card .button{font-size:12px;padding:10px 14px}@media(max-width:900px){.figure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.figure-grid{gap:10px}.figure-card{padding:10px}}

.video-preview,.video-player{width:100%;aspect-ratio:16/9;object-fit:cover;border:0;border-radius:10px}.figure-card>a.small{display:block;margin-top:12px}

.classroom-hero{background:#222323;color:#f7f5ef;padding:40px 4% 32px;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.35fr);align-items:center;gap:4%;max-width:1800px;margin:auto}.classroom-copy .eyebrow{color:#ffdf79;letter-spacing:3px;font-size:12px}.classroom-copy h1{font-size:clamp(52px,6vw,100px);line-height:1.06;letter-spacing:-4px;margin:30px 0}.classroom-copy h1 span{color:#ffdf79}.classroom-copy p{color:#d1d1cb;font-size:20px;line-height:1.6;text-align:left}.classroom-copy .button{margin-top:24px;background:#ffdf79;color:#222323}.classroom-mosaic{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(320px,35vw,550px)}.classroom-mosaic img{width:100%;height:100%;min-height:0;object-fit:cover}.classroom-mosaic img:first-child{grid-row:1/3}.classroom-slide[hidden]{display:none}.classroom-slide>p{color:#f7f5ef;font-size:17px;margin:20px 0 0;text-align:left}.classroom-controls{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.classroom-controls button{border:1px solid #ffffff55;color:#f7f5ef;background:transparent;border-radius:50%;width:44px;height:44px;cursor:pointer;margin-left:8px;font-size:24px}.classroom-dots button{font-size:13px;width:32px;height:32px;margin:0 10px 0 0}.classroom-dots button[aria-current=true]{background:#ffdf79;border-color:#ffdf79;color:#222323}.classroom-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.classroom-carousel{min-width:0;touch-action:pan-y}.classroom-controls button:focus-visible,.classroom-carousel:focus-visible{outline:3px solid #ffdf79;outline-offset:4px}@media(max-width:760px){.classroom-hero{grid-template-columns:1fr;gap:32px;padding:36px 5%}.classroom-copy h1{font-size:clamp(48px,10vw,76px);letter-spacing:-2px;margin:18px 0}.classroom-copy p{font-size:17px}.classroom-copy .button{margin-top:10px}.classroom-mosaic{height:360px;gap:8px}}@media(max-width:420px){.classroom-mosaic{height:285px}}@media(min-width:761px) and (max-height:800px){.classroom-mosaic{height:340px}.classroom-hero{padding-top:24px;padding-bottom:24px}.classroom-copy h1{font-size:64px;margin:20px 0}}

/* Extend the hero background across wide screens while keeping content centered. */
.classroom-hero{box-shadow:0 0 0 100vmax #222323;clip-path:inset(0 -100vmax)}

/* Contexto de las identificaciones DUA */
.catalog .dua-intro,#ciclos .dua-intro{max-width:850px;margin:0 0 28px}
.catalog .dua-intro p,#ciclos .dua-intro p{margin:0 0 12px;line-height:1.65}

.cycle-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.cycle-shortcuts a{display:flex;flex-direction:column;gap:8px;padding:22px;background:#eeece5;border:1px solid #d8d6cf;border-radius:12px;color:#252626;text-decoration:none;font-weight:700}.cycle-shortcuts a span{font-size:14px;font-weight:400}.cycle-shortcuts a:hover{background:#ffdf79}@media(max-width:600px){.cycle-shortcuts{grid-template-columns:1fr}}

/* Identificaciones DUA: códigos compactos y explicación accesible. */
.dua-labels{margin:14px 0}.dua-seals{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.dua-caption{font-size:12px;letter-spacing:.08em;color:#5c5e5b;margin-right:3px}.dua-representation{--dua-color:#87317c}.dua-expression{--dua-color:#19699d}.dua-engagement{--dua-color:#448b48}.resource-card .dua-seal,.teacher-tool .dua-seal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border:0;border-radius:50%;padding:0;background:var(--dua-color);color:#fff;font:700 20px/1 Arial,sans-serif;cursor:pointer;box-shadow:none}.dua-seal:focus-visible{outline:3px solid #252626;outline-offset:3px}.dua-detail{margin-top:12px;padding:14px 16px;border-left:4px solid var(--dua-color);background:#fff;text-align:left}.dua-detail[hidden]{display:none}.dua-detail-meta{display:block;font-size:12px;color:#5c5e5b;margin-bottom:5px}.dua-detail strong{display:block;font-size:15px;line-height:1.45}.resource-card .dua-detail p,.teacher-tool .dua-detail p{font-size:14px;line-height:1.55;margin:8px 0 0;text-align:left}.ai-disclosure{margin:10px 0;font-size:13px;text-align:left}.ai-disclosure summary{cursor:pointer;font-weight:700;color:#434641;padding:8px 0}.resource-card .ai-disclosure p{font-size:13px;line-height:1.55;text-align:left;margin:6px 0}

.evaluation-guide{margin:18px 0 24px;padding:15px 18px;border:1px solid #7775;font-size:14px}.evaluation-guide summary,.evaluation-functions summary{cursor:pointer}.evaluation-guide p{line-height:1.6;max-width:850px}.evaluation-functions{margin:8px 0 14px;width:100%;font-size:12px}.evaluation-caption{display:block;font-size:11px;letter-spacing:.04em;margin-bottom:7px;color:#5c5e5b}.evaluation-function-tags{display:flex;gap:6px;flex-wrap:wrap}.evaluation-function-tags span{padding:5px 8px;border:1px solid #7775;border-radius:6px}.evaluation-functions details{margin-top:9px}.resource-card .evaluation-functions p{font-size:13px;line-height:1.5;margin:8px 0 0;text-align:left}.teacher-tool .dua-labels{width:100%;margin:8px 0 18px}.teacher-tool .dua-detail{padding:12px;overflow-wrap:anywhere}.teacher-tool .dua-detail-meta{font-size:11px}.teacher-tool .dua-detail strong{font-size:13px}