@font-face {
  font-family: "Great Vibes";
  src: url("assets/great-vibes.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --gold: #e8b53c;
  --ink: #29464d;
  --muted: #657575;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse at 50% 30%, #fffdf8, #eeeae1);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
.reader-header { text-align: center; padding: 36px 20px 24px; }
.eyebrow { font-size: 10px; letter-spacing: .25em; color: var(--muted); }
.reader-header p { font: 22px Georgia, serif; margin: 12px 0 0; }
.reader { width: min(100% - 32px, 960px); margin: auto; }
.book {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4;
  box-shadow: 0 25px 55px #18343b30, 0 3px 7px #18343b35;
  border-radius: 2px;
  container-type: inline-size;
}
.page {
  --page-background: radial-gradient(ellipse at 28% 70%, #42657066, transparent 65%), linear-gradient(115deg, #254752, #1a3b47 75%, #15333d);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--page-background);
  border: 1px solid #4b6268;
}
[hidden] { display: none !important; }
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .065;
  background: url("assets/paper-grain.svg");
}
.cover { display: grid; grid-template-columns: 72% 28%; }
.cover-main, .cover-flap { position: relative; }
.cover-main::before, .cover-flap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/floral.svg") left bottom / 112% auto no-repeat;
  opacity: .19;
  pointer-events: none;
}
.cover-flap {
  border-left: 2px solid #102933;
  box-shadow: inset 4px 0 5px #081d2550, inset 6px 0 1px #76909535;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6.5%;
}
.cover-flap::before { background-size: auto 100%; background-position: 42% 50%; transform: rotate(180deg); opacity: .3; }
.book.page-turning:not(.paper-turning) { overflow: hidden; }
.book.paper-turning { z-index: 1; }
/* La hoja puede pasar sobre el marco sin crear desplazamiento horizontal. */
html:has(.paper-turning) { overflow-x: clip; }
.page-transition { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.paper-turn {
  overflow: visible;
  perspective: max(1500px, 430cqw);
  perspective-origin: 0 min(50%, 35cqw);
}
.paper-turn-shadow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #10293360, #10293320 24%, transparent 55%);
}
.turning-leaf {
  position: absolute;
  inset: 0 0 auto;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.leaf-panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.leaf-panel > .leaf-panel { left: 100%; }
.leaf-front, .leaf-back { position: absolute; inset: 0; backface-visibility: hidden; }
/* Un solape mínimo evita que se vea el fondo entre los tramos al girar. */
.leaf-panel:has(> .leaf-panel) > :is(.leaf-front, .leaf-back) { right: -1px; }
.leaf-front { overflow: hidden; }
.leaf-front > .page { position: absolute; top: 0; left: var(--leaf-offset); width: var(--leaf-width); }
.leaf-front::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: var(--leaf-offset);
  width: var(--leaf-width);
  background: linear-gradient(90deg, transparent 32%, #173d4914 60%, #fff7dc22 85%, #173d4926);
}
.leaf-back {
  transform: rotateY(180deg);
  background: linear-gradient(#f1e6c8c9, #f1e6c8c9), url("assets/paper-grain.svg"), #f1e6c8;
}
.cover.cover-turning {
  z-index: 2;
  overflow: visible;
  background: transparent;
  border-color: transparent;
  perspective: 1150px;
  perspective-origin: 72% 50%;
}
.cover-turning::after { content: none; }
.cover-turning .cover-main { background: var(--page-background) left / 138.889% 100%; }
.cover-turning .cover-flap {
  background: var(--page-background) right / 357.143% 100%;
  transform-origin: left center;
  backface-visibility: hidden;
}
.gold { color: var(--gold); text-shadow: 0 1px 0 #73521e, 0 0 12px #dcae3120; }
.university { position: relative; z-index: 1; text-align: center; padding-top: 9%; }
.university h1 { font: 400 6cqw/.96 "Great Vibes", "Brush Script MT", cursive; margin: 0; }
.university h1 span { display: block; }
.university h1 span:first-child { padding-left: 9%; }
.title-rule { display: flex; gap: 7px; align-items: center; justify-content: center; width: 68%; margin: 5px auto 2px; font-size: 2.5cqw; line-height: 1; }
.title-rule::before, .title-rule::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
.university p { font-size: 1.65cqw; font-weight: 700; margin: 0; }
.crest { position: relative; display: block; object-fit: contain; filter: drop-shadow(1px 2px 1px #071a2580); }
.crest-front { width: 33%; height: auto; margin: 5% auto 0; }
.degree { position: relative; width: 80%; border: 1px solid #d5a64ba0; padding: 7% 2% 6%; text-align: center; }
.degree h2 { margin: 0; font-size: 2.35cqw; line-height: 1.28; letter-spacing: .04em; }
.degree-rule { display: block; width: 75%; height: 1px; background: #d5a64b; margin: 9% auto 8%; }
.degree p { font-size: 2.1cqw; letter-spacing: .16em; margin: 0 0 4%; }
.degree strong { font-size: 3.9cqw; letter-spacing: .025em; }
.frame-ornament { position: absolute; left: 50%; transform: translateX(-50%); font-size: 3cqw; line-height: .65; background: #23434e; padding-inline: 5px; }
.frame-ornament-top { top: -3px; }
.frame-ornament-bottom { bottom: -3px; transform: translateX(-50%) rotate(180deg); }
.back-cover { display: grid; place-items: center; background: radial-gradient(ellipse at 26% 55%, #32617680, transparent 75%), #183e4e; }
.crest-back { width: 33%; max-height: 80%; }

/* Interiores: proporción de la tarjeta en escritorio, lectura ampliada en móvil. */
.introduction { background: #203f52; }
.graduation-photo { position: absolute; inset: 0; }
.graduation-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-diagonal { position: absolute; inset: 0; clip-path: polygon(0 0, 0 100%, 78% 100%); background: url("assets/floral.svg") left bottom / 70% auto no-repeat, linear-gradient(130deg, #26394b, #1a3f62); }
.crest-intro { position: absolute; width: 14%; left: 4.5%; top: 29%; }
.intro-copy { position: absolute; bottom: 5%; left: 4.5%; width: 58%; font-size: 1.65cqw; line-height: 1.35; }
.intro-copy h2, .intro-copy h3 { font-size: inherit; margin: 0; }
.intro-session { letter-spacing: .2em; margin: 0 0 1em; font-weight: 700; }
.intro-institution { font-weight: 700; margin: 0 0 1em; }
.intro-copy ul { list-style: none; padding: 0; margin: 0; font-weight: 700; }
.paper-page { display: grid; grid-template-columns: 7% 1fr; padding-right: 2%; background: linear-gradient(120deg, #123c5b, #0a426d); }
.page-rail { margin: 0; align-self: center; justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); color: #e5b42c; font-size: 2.4cqw; font-weight: 700; }
.paper-sheet { position: relative; margin-block: 1.8%; padding: 5% 7%; color: #232a28; background: radial-gradient(ellipse at 15% 20%, #dfcfa747, transparent 40%), radial-gradient(ellipse at 85% 75%, #d5bf8e33, transparent 40%), #f2eedc; border: 2px solid #d3a430; border-left-width: 4px; border-radius: 48% 0 0 48% / 4% 0 0 4%; text-align: center; }
.invitation-copy { display: flex; flex-direction: column; justify-content: center; gap: 2.5cqw; font-size: 1.85cqw; line-height: 1.45; }
.invitation-copy p { margin: 0; }
.careers { list-style: none; padding: 0; margin: 0; color: #0c4266; font-weight: 700; line-height: 1.35; }
.graduation-title { width: 65%; margin: -1cqw auto; padding: .7cqw 2cqw; border: 2px solid #d3a430; background: #0c4266; color: #edb72a; font-size: 2.7cqw; letter-spacing: .04em; clip-path: polygon(1.5% 0, 98.5% 0, 98.5% 8%, 100% 12%, 100% 88%, 98.5% 92%, 98.5% 100%, 1.5% 100%, 1.5% 92%, 0 88%, 0 12%, 1.5% 8%); }
.invitation-date { font-weight: 700; }
.mission-page { grid-template-columns: 1fr 7%; padding-right: 0; padding-left: 2%; }
.mission-page .page-rail { grid-column: 2; grid-row: 1; }
.mission-copy { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 5.5cqw; padding: 7% 10%; }
.mission-copy h3 { margin: 0 0 2cqw; color: #0c4266; font-size: 2.7cqw; }
.mission-copy p { font-size: 1.95cqw; line-height: 1.45; margin: 0; }
.thanks-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 6% 8% 4%; }
.thanks-copy p { margin: 0; font-size: 2.05cqw; line-height: 1.5; }
.graduation-illustration { display: block; width: 27%; height: auto; }
.program-page { grid-template-columns: 1fr 7%; padding-right: 0; padding-left: 2%; }
.program-page .page-rail { grid-column: 2; grid-row: 1; }
.program-copy { grid-column: 1; grid-row: 1; display: flex; align-items: center; padding: 5% 5.5%; text-align: left; }
.ceremony-program { width: 100%; margin: 0; padding-left: 1.6em; font-size: 1.75cqw; line-height: 1.45; }
.ceremony-program li { padding-left: .35em; margin-bottom: 1cqw; }
.ceremony-program li:last-child { margin-bottom: 0; }
.ceremony-program li::marker { font-weight: 700; }

.right-rail { grid-template-columns: 1fr 7%; padding-right: 0; padding-left: 2%; }
.right-rail .page-rail { grid-column: 2; grid-row: 1; }
.right-rail .paper-sheet { grid-column: 1; grid-row: 1; }
.mosaic-page .page-rail { font-size: 2.1cqw; }
.mosaic-sheet { display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding: 4% 4%; }
.portrait-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3cqw 2cqw; }
.graduate { margin: 0; min-width: 0; }
.portrait-frame { position: relative; width: 82%; aspect-ratio: 1 / 1.15; margin: 0 auto; overflow: hidden; border: 2px solid #8d884d; border-radius: 20% 12% 20% 12% / 12% 20% 12% 20%; outline: 1px solid #c6b874; outline-offset: 2px; background: #e6e2d0; }
.portrait-frame::after { content: ""; position: absolute; inset: 4px; border: 1px solid #a8a16b; border-radius: inherit; pointer-events: none; }
.portrait-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait-placeholder { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw; color: #6c756b; }
.portrait-placeholder > span { font: 3cqw Georgia, serif; }
.portrait-placeholder small { font-size: 1.1cqw; }
.graduate figcaption { font-size: 1.3cqw; line-height: 1.35; margin-top: 1cqw; overflow-wrap: anywhere; }
.name-pending { color: #6b6b5b; font-style: italic; }
.mosaic-five .portrait-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2cqw 1.5cqw; }
.mosaic-five .portrait-frame { width: 75%; aspect-ratio: 400 / 496; }
.mosaic-shared { grid-template-columns: 1fr; padding-inline: 2%; }
.mosaic-shared .mosaic-sheet { gap: max(30px, 4cqw); }
.mosaic-section h2 { margin: 0 auto max(16px, 2cqw); font-size: clamp(16px, 2.1cqw, 22px); }
.mosaic-section h2:not(.graduation-title) { color: #0c4266; }
.graduate-featured .portrait-frame { border-color: #a6761e; outline: 2px solid #ba8c33; outline-offset: 3px; }
.graduate-featured .portrait-frame::after { border-color: #efd18a; }
.graduate-featured figcaption { font-weight: 700; }
@media (width > 600px) {
  .mosaic-software-continuation .mosaic-sheet { padding-block: 3.2%; }
  .mosaic-software-continuation .portrait-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .mosaic-software-continuation .graduate { grid-column: span 2; }
  .mosaic-software-continuation .graduate:nth-child(11) { grid-column: 2 / span 2; }
  .mosaic-software .graduate-featured .portrait-frame { width: 81%; }
  .portrait-grid-centered .graduate:first-child { grid-column-start: 2; }
}
.mosaic-education .portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5cqw; }
.mosaic-education .portrait-frame { width: 80%; }
.education-signature { display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 4cqw auto; color: #124864; line-height: 1; }
.education-signature > span:first-child { font-size: 2.5cqw; align-self: start; }
.education-signature strong { font: italic 700 6.8cqw/1.1 Georgia, serif; letter-spacing: -.04em; }
.education-signature > span:last-child { font-size: 3.3cqw; align-self: end; border-top: 3px solid #bc2929; padding-top: .8cqw; }

.reader-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 28px; }
.reader-controls button {
  width: fit-content;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  border: 1px solid #bac1b8;
  border-radius: 30px;
  padding: 10px 18px;
  color: var(--ink);
  background: #ffffff70;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.reader-controls button:last-child { justify-self: end; }
.reader-controls button:hover:not(:disabled) { background: #fff; border-color: #667e79; }
.reader-controls button:disabled { opacity: .35; cursor: default; }
button:focus-visible { outline: 3px solid #a77921; outline-offset: 4px; }
#page-status { font-size: 12px; text-align: center; }
.reader-hint { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }
footer { padding: 30px 16px 22px; text-align: center; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.noscript-note { text-align: center; padding: 10px; }
@media (max-width: 600px) {
  .book.is-interior { aspect-ratio: auto; }
  .book.is-interior .page { height: auto; min-height: 520px; }
  .paper-page, .mission-page, .program-page { display: flex; flex-direction: column; padding: 0 9px 9px; }
  .page-rail { writing-mode: horizontal-tb; transform: none; font-size: 17px; letter-spacing: .09em; padding: 18px 10px 10px; }
  .paper-sheet { flex: 1; margin: 0; padding: 26px 20px; border-radius: 14px 1px 1px 14px; }
  .invitation-copy { font-size: 16px; gap: 22px; }
  .graduation-title { width: 100%; font-size: 22px; padding: 10px 8px; margin: 0; }
  .mission-copy { gap: 38px; padding-block: 36px; }
  .mission-copy h3 { font-size: 22px; margin-bottom: 18px; }
  .mission-copy p { font-size: 16px; line-height: 1.65; }
  .thanks-copy { gap: 28px; padding: 32px 22px; }
  .thanks-copy p { font-size: 16px; line-height: 1.65; }
  .graduation-illustration { width: 46%; max-width: 180px; }
  .program-copy { padding: 28px 16px; }
  .ceremony-program { font-size: 16px; line-height: 1.6; }
  .ceremony-program li { margin-bottom: 16px; }
  .desktop-break { display: none; }
  .book.is-interior .introduction { min-height: 680px; }
  .graduation-photo { bottom: 48%; }
  .graduation-photo > img { object-position: right top; }
  .intro-diagonal { clip-path: polygon(0 19%, 0 100%, 100% 100%, 100% 49%); background-size: 130% auto; }
  .crest-intro { width: 23%; top: 31%; left: 7%; }
  .intro-copy { left: 7%; width: 88%; bottom: 30px; font-size: 14px; line-height: 1.55; }
  .intro-session { letter-spacing: .16em; }
  .mosaic-page .page-rail { font-size: 16px; text-align: center; line-height: 1.5; }
  .mosaic-sheet { gap: 28px; padding: 28px 16px; }
  .mosaic-shared { padding-top: 9px; }
  .portrait-grid, .mosaic-five .portrait-grid, .mosaic-education .portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .portrait-frame, .mosaic-five .portrait-frame, .mosaic-education .portrait-frame { width: 90%; }
  .portrait-placeholder { gap: 8px; }
  .portrait-placeholder > span { font-size: 30px; }
  .portrait-placeholder small { font-size: 11px; }
  .graduate figcaption { font-size: 14px; margin-top: 10px; }
  .mosaic-five .graduate:last-child:nth-child(odd),
  .mosaic-education .graduate:last-child { grid-column: 1 / -1; width: calc((100% - 18px) / 2); justify-self: center; }
  .education-signature { margin: 10px auto; }
  .education-signature > span:first-child { font-size: 16px; }
  .education-signature strong { font-size: 38px; }
  .education-signature > span:last-child { font-size: 20px; padding-top: 5px; }
}
@media (max-width: 540px) {
  .reader-header { padding-top: 28px; padding-bottom: 30px; }
  .reader-header p { font-size: 20px; }
  .reader { width: calc(100% - 20px); }
  .reader-controls { margin-top: 22px; gap: 6px; }
  .reader-controls button { padding: 10px 12px; gap: 6px; font-size: 12px; }
  #page-status { font-size: 11px; }
}