/* =========================================================================
   Instituto Culinario Danieli — Páginas interiores
   Extiende css/styles.css (tokens, tipografías, .eyebrow, .display, .lead,
   .btn, header y footer). Aquí sólo viven los bloques propios de interiores.

   Sistema:
   - Móvil / tablet (< 960px): medidas en px y clamp().
   - Escritorio (>= 960px): misma unidad proporcional que la home,
     var(--u) = 1px de la referencia de 1024 px, acotada con clamp() en los
     textos largos para que a 1440 px la lectura siga siendo cómoda.
   - El ancho de contenido (.wrap = 952u) coincide con el del header y el pie.
   ========================================================================= */

.interior {
  --sec: clamp(46px, 9.5vw, 78px);   /* ritmo vertical entre secciones */
  --wrap-w: 760px;
  --fs-h2: clamp(31px, 8.4vw, 44px);
  --fs-h3: clamp(21px, 5vw, 26px);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11.5px;
  --hairline: #eef1f3;
  --wash: linear-gradient(90deg, #e9e7e7, #efeeee);
  --pad-in: 20px;                    /* relleno interior de cajas y bandas */
}

.wrap {
  width: 100%;
  max-width: var(--wrap-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.interior .sec { padding-block: var(--sec); }
.interior .lead { font-size: var(--fs-body); line-height: 1.6; }

/* Encabezado de sección compartido */
.sec-head { max-width: 30em; }
.sec-head h2 { margin-top: 12px; font-size: var(--fs-h2); line-height: .96; }
.sec-head .lead { margin-top: 16px; }

/* ---------- Ruta de navegación ---------- */
.crumbs { padding-top: 14px; font-size: var(--fs-micro); color: var(--soft); letter-spacing: -.005em; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 9px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 9px; color: #c3cbd2; }
.crumbs a { color: var(--soft); transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--nav); }

/* ---------- Hero interior ---------- */
.ph { display: flex; flex-direction: column; }
.ph-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e9ebec; }
.ph-photo picture { display: contents; }
.ph-photo img { width: 100%; height: 100%; object-fit: cover; }
.ph-photo::after {
  content: "";
  position: absolute; inset: auto 0 0;
  height: 26%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.ph-copy { padding: 16px var(--gutter) 0; }
.ph-copy .lead a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.ph-copy .lead a:hover { color: var(--navy); }
.ph .eyebrow { font-size: 10.5px; letter-spacing: .3em; }
.ph h1 { margin-top: 15px; font-size: clamp(38px, 10.6vw, 56px); line-height: .9; }
.ph .lead { margin-top: 17px; max-width: 30em; color: var(--text); }

/* ---------- Franja de cifras ---------- */
.pstats { padding-top: clamp(26px, 6vw, 40px); }
.pstats ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pstats li { padding: 18px 4px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.pstats li:nth-child(odd) { border-right: 1px solid var(--line); }
.pstats b {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 32;
  font-weight: 400;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.pstats span {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 12;
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4a5b69;
}

/* ---------- Introducción ---------- */
.pintro-grid { display: grid; gap: 26px; }
.pintro h2 { margin-top: 12px; font-size: var(--fs-h2); line-height: .96; }
.pintro-fig { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: #e9ebec; }
.pintro-fig img { width: 100%; height: 100%; object-fit: cover; }
.pintro-body p { color: var(--text); font-size: var(--fs-body); line-height: 1.65; }
.pintro-body p + p { margin-top: 15px; }
.pintro-body p { max-width: 34em; }
.pintro-body p:first-child { color: var(--ink); font-size: calc(var(--fs-body) + 1px); }

/* ---------- Pilares ---------- */
.pillars { display: grid; grid-template-columns: 1fr; column-gap: clamp(26px, 4vw, 56px); margin-top: 30px; }
.pillar { padding: 20px 0 22px; border-top: 1px solid var(--line); }
.pillar svg { width: 28px; height: 28px; stroke-width: 1.35; color: var(--navy); }
.pillar h3 { margin-top: 13px; font-size: 15px; font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
.pillar p { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }

.pnotes { display: grid; margin-top: 34px; background: var(--wash); }
.pnote { display: flex; gap: 16px; padding: 22px var(--pad-in); }
.pnote + .pnote { border-top: 1px solid rgba(28, 56, 71, .1); }
.pnote svg { width: 26px; height: 26px; stroke-width: 1.4; color: var(--navy); margin-top: 1px; }
.pnote h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 12;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #213d50;
}
.pband { margin: 40px 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: #e9ebec; }
.pband picture { display: contents; }
.pband img { width: 100%; height: 100%; object-fit: cover; }

.pnote p { margin-top: 7px; font-size: var(--fs-small); line-height: 1.5; color: #4f5d6a; }

/* ---------- Plan: navegación por cuatrimestres ---------- */
.steps-label {
  margin-top: 30px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 12;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--soft);
}
.steps { display: flex; margin-top: 12px; border-bottom: 1px solid var(--line); }
.step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  padding: 6px 0 13px;
  font-size: 12px;
  letter-spacing: .02em;
  color: #8e99a3;
  transition: color .2s;
}
.step::after {
  content: "";
  position: absolute; left: 18%; right: 18%; bottom: -1px;
  height: 1.6px;
  background: var(--navy);
  transform: scaleX(0);
  transition: transform .2s, opacity .2s;
}
.step:hover, .step.is-current { color: var(--ink); }
.step.is-current::after { transform: scaleX(1); }
.step.is-final { color: var(--navy); }

/* ---------- Plan: cuatrimestres ---------- */
.quarters { margin-top: 34px; }
.q { border-top: 1px solid var(--line); scroll-margin-top: 78px; }
.q:last-of-type { border-bottom: 1px solid var(--line); }
.q-sum {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 15px;
  padding: 17px 0 18px;
  cursor: pointer;
  list-style: none;
}
.q-sum::-webkit-details-marker { display: none; }
.q-num {
  grid-row: 1 / 3;
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.04em;
  color: #b7c0c8;
  transition: color .2s;
}
.q-name { grid-column: 2; font-size: 16px; letter-spacing: -.015em; color: var(--ink); }
.q-meta { grid-column: 2; margin-top: 3px; font-size: var(--fs-micro); color: var(--soft); letter-spacing: -.005em; }
.q-chev {
  grid-column: 3; grid-row: 1 / 3;
  width: 20px; height: 20px;
  stroke-width: 1.7;
  color: var(--nav);
  transition: transform .25s, color .2s;
}
.q-sum:hover .q-num, .q[open] .q-num { color: var(--navy); }
.q-sum:hover .q-chev { color: var(--ink); }
.q[open] .q-chev { transform: rotate(180deg); }
.q-sum:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

.q-panel { padding-bottom: 12px; }
.q[open] .q-panel { animation: q-in .3s ease both; }
@keyframes q-in { from { opacity: 0; transform: translateY(-5px); } }

.subjects { display: grid; grid-template-columns: 1fr; column-gap: clamp(26px, 4vw, 54px); }
.subject { padding: 11px 0 12px; border-top: 1px solid var(--hairline); }
.s-name { display: block; font-size: 14.5px; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); }
a.s-name { color: var(--navy); text-decoration: underline; text-decoration-color: #c5ced5; text-underline-offset: 3px; transition: text-decoration-color .2s; }
a.s-name:hover { text-decoration-color: var(--navy); }
.s-meta { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: var(--soft); letter-spacing: .005em; }

/* ---------- Optativas ---------- */
.optativas { display: grid; margin-top: 34px; border: 1px solid var(--line); scroll-margin-top: 78px; }
.opt-fig { margin: 0; overflow: hidden; aspect-ratio: 5 / 4; background: #e9ebec; }
.opt-fig img { width: 100%; height: 100%; object-fit: cover; }
.opt-body { padding: 26px var(--pad-in) 28px; }
.optativas h3 { margin-top: 10px; font-size: var(--fs-h3); line-height: 1.05; }
.opt-body > p { margin-top: 12px; max-width: 46em; font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
.opt-list { display: grid; grid-template-columns: 1fr; column-gap: clamp(22px, 4vw, 48px); margin-top: 20px; }
.opt-list li {
  display: flex; align-items: baseline; gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  letter-spacing: -.012em;
  color: var(--ink);
}
.opt-list li::before { content: ""; flex: none; width: 9px; height: 1px; background: var(--navy); transform: translateY(-4px); }
.opt-note { margin-top: 18px; font-size: var(--fs-micro); color: var(--soft); }

/* ---------- Noveno cuatrimestre ---------- */
.q9 { scroll-margin-top: 78px; }
.q9-band { background: var(--navy); color: #fff; }
.q9-grid { display: grid; }
.q9-fig { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; background: #16303e; }
.q9-fig img { width: 100%; height: 100%; object-fit: cover; }
.q9-copy { padding: clamp(30px, 7vw, 46px) var(--gutter) clamp(34px, 8vw, 52px); }
.q9-num {
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: clamp(46px, 13vw, 70px);
  line-height: .8;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .3);
}
.q9 .eyebrow { margin-top: 14px; font-size: 10px; letter-spacing: .24em; color: rgba(255, 255, 255, .62); }
.q9 h3 { margin-top: 12px; font-size: clamp(28px, 7.4vw, 40px); line-height: .98; color: #fff; }
.q9-hours { margin-top: 12px; font-size: var(--fs-small); letter-spacing: .02em; color: rgba(255, 255, 255, .8); }
.q9-text { margin-top: 16px; max-width: 38em; font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* ---------- Destinos de prácticas ---------- */
.dest-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 24px 30px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
}
.dest-pais { padding-top: 14px; border-top: 1px solid var(--line); }
.dest-nombre {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
}
.dest-bandera {
  flex: none;
  width: 24px; height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(14, 36, 51, .18);
}
.dest-casas { margin-top: 10px; list-style: none; padding: 0; }
.dest-casas li { padding: 7px 0; border-top: 1px solid var(--hairline); }
.dest-casas li:first-child { padding-top: 0; border-top: 0; }
.dc-n { display: block; font-size: var(--fs-small); line-height: 1.35; color: var(--text); }
.dc-l { display: block; margin-top: 1px; font-size: var(--fs-micro); line-height: 1.35; color: var(--soft); }
.dest-nota {
  margin-top: 26px; padding-top: 16px;
  max-width: 52em;
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro); line-height: 1.55;
  color: var(--soft);
}

/* ---------- Requisitos ---------- */
.req-grid { display: grid; gap: 28px; }
.req-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--ink);
}
.req-list > li:last-child { border-bottom: 1px solid var(--line); }
.req-list svg { width: 19px; height: 19px; stroke-width: 1.8; color: var(--navy); margin-top: 2px; }
.req-sub { margin-top: 10px; }
.req-sub li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: var(--fs-small); color: var(--muted); }
.req-sub li::before { content: ""; flex: none; width: 8px; height: 1px; background: #aab4bc; transform: translateY(-4px); }
.req-note { margin-top: 26px; font-size: var(--fs-small); line-height: 1.55; color: var(--soft); }

/* ---------- CTA final ---------- */
.pcta-band { background: var(--navy); color: #fff; padding: clamp(42px, 9vw, 76px) 0; text-align: center; }
.pcta .eyebrow { color: rgba(255, 255, 255, .62); font-size: 10px; letter-spacing: .28em; }
.pcta h2 { margin-top: 15px; font-size: clamp(32px, 8.8vw, 46px); line-height: .96; color: #fff; text-wrap: balance; }
.pcta p { margin: 17px auto 0; max-width: 34em; font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, .74); }
.pcta .actions { justify-content: center; margin-top: 28px; }

.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-light:hover { background: transparent; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

@media (max-width: 599.98px) {
  .pcta .actions .btn { flex: 1 1 100%; }
}

/* =========================================================================
   TABLET (600 – 959px)
   ========================================================================= */
@media (min-width: 600px) {
  .interior { --fs-body: 15.5px; --fs-small: 13.5px; --pad-in: 28px; }
  .q, .optativas, .q9 { scroll-margin-top: 86px; }
  .ph-photo { aspect-ratio: 2.1; }
  .ph-photo img { object-position: 46% 50%; }
  .ph-copy { padding-top: 22px; }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstats ul { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .pstats li { border-bottom: 0; }
  .pstats li:nth-child(odd) { border-right: 0; }
  .pstats li:not(:last-child) { border-right: 1px solid var(--line); }
  .pintro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); column-gap: 38px; align-items: start; }
  .pintro-head { grid-area: 1 / 1; }
  .pintro-body { grid-area: 2 / 1; }
  .pintro-fig { grid-area: 1 / 2 / 3 / 3; }
  .pband { margin-top: 48px; }
  .opt-fig { aspect-ratio: 4 / 3; }
  .opt-body { padding: 30px 30px 32px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pnote + .pnote { border-top: 0; border-left: 1px solid rgba(28, 56, 71, .1); }
  .subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .req-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 44px; align-items: start; }
  .req-head { grid-area: 1 / 1; }
  .req-list { grid-area: 1 / 2 / 3 / 3; }
  .req-note { grid-area: 2 / 1; margin-top: 0; }
}

/* ---------- Tablet ancha: la banda y el 9.º ya admiten composición partida ---------- */
@media (min-width: 768px) {
  .dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pband { aspect-ratio: 2.6; }
  .q9-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .q9-copy { grid-area: 1 / 1; padding: 44px 34px 48px var(--gutter); align-self: center; }
  .q9-fig { grid-area: 1 / 2; aspect-ratio: auto; height: 100%; }
}

/* =========================================================================
   ESCRITORIO (>= 960px) — misma unidad proporcional que la home
   ========================================================================= */
@media (min-width: 960px) {
  .interior {
    --sec: clamp(60px, calc(var(--u) * 72), 104px);
    --wrap-w: none;
    --fs-h2: clamp(33px, calc(var(--u) * 40), 56px);
    --fs-h3: clamp(21px, calc(var(--u) * 25), 34px);
    --fs-body: clamp(14px, calc(var(--u) * 13.4), 18px);
    --fs-small: clamp(12.5px, calc(var(--u) * 12), 16px);
    --fs-micro: clamp(11px, calc(var(--u) * 10.6), 14px);
    --pad-in: calc(var(--u) * 36);
  }
  .wrap { width: calc(var(--u) * 952); max-width: none; padding-inline: 0; }
  .q, .optativas, .q9 { scroll-margin-top: calc(var(--u) * 96); }
  .dest { scroll-margin-top: calc(var(--u) * 96); }
  .dest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 30) calc(var(--u) * 32); margin-top: calc(var(--u) * 34); }
  .dest-nombre { font-size: clamp(13.5px, calc(var(--u) * 13.6), 18px); }
  .dest-bandera { width: calc(var(--u) * 25); height: calc(var(--u) * 16.7); min-width: 22px; min-height: 15px; }

  /* Ruta */
  .crumbs { padding-top: calc(var(--u) * 16); }

  /* Hero: banda panorámica a sangre (2.45:1), copy sobre velo blanco lateral */
  .ph { display: block; position: relative; aspect-ratio: 2.45; }
  .ph-photo { position: absolute; inset: 0; aspect-ratio: auto; }
  .ph-photo::after {
    inset: 0; height: auto;
    background: linear-gradient(90deg,
      rgba(255,255,255,.94) 0%, rgba(255,255,255,.91) 14%, rgba(255,255,255,.74) 24%,
      rgba(255,255,255,.34) 33%, rgba(255,255,255,.07) 43%, rgba(255,255,255,0) 51%);
  }
  .ph-copy {
    position: relative; z-index: 2;
    width: calc(var(--u) * 952);
    margin-inline: auto;
    padding: clamp(40px, calc(var(--u) * 54), 78px) 0 0;
  }
  .ph .eyebrow { font-size: clamp(10px, calc(var(--u) * 10.6), 13px); letter-spacing: .3em; }
  .ph h1 { margin-top: calc(var(--u) * 18); font-size: clamp(44px, calc(var(--u) * 56), 78px); line-height: .88; }
  .ph .lead { margin-top: calc(var(--u) * 17); width: calc(var(--u) * 282); max-width: none; }

  /* Cifras */
  .pstats { padding-top: clamp(30px, calc(var(--u) * 38), 56px); }
  .pstats ul { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .pstats li { padding: calc(var(--u) * 22) 0 calc(var(--u) * 24); border-bottom: 0; }
  .pstats li:nth-child(odd) { border-right: 0; }
  .pstats li:not(:last-child) { border-right: 1px solid var(--line); }
  .pstats b { font-size: clamp(28px, calc(var(--u) * 33), 46px); }
  .pstats span { margin-top: calc(var(--u) * 9); font-size: clamp(9px, calc(var(--u) * 9.6), 12px); }

  /* Introducción */
  .pintro-grid { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 318); column-gap: calc(var(--u) * 72); row-gap: calc(var(--u) * 26); }
  .pband { margin-top: calc(var(--u) * 58); aspect-ratio: 2.6; }
  .pintro-body p + p { margin-top: calc(var(--u) * 16); }
  .pintro-body p { max-width: 32em; }

  /* Pilares */
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(var(--u) * 36); }
  .pillar { padding: calc(var(--u) * 24) 0 calc(var(--u) * 28); }
  .pillar svg { width: clamp(26px, calc(var(--u) * 29), 38px); height: clamp(26px, calc(var(--u) * 29), 38px); stroke-width: 1.4; }
  .pillar h3 { margin-top: calc(var(--u) * 15); font-size: clamp(14px, calc(var(--u) * 14.4), 19px); }
  .pillar p { margin-top: calc(var(--u) * 7); font-size: var(--fs-small); }
  .pnotes { margin-top: calc(var(--u) * 42); }
  .pnote { padding: calc(var(--u) * 26) calc(var(--u) * 30); gap: calc(var(--u) * 18); }
  .pnote svg { width: clamp(24px, calc(var(--u) * 26), 34px); height: clamp(24px, calc(var(--u) * 26), 34px); }
  .pnote h3 { font-size: clamp(10px, calc(var(--u) * 10.6), 13px); }

  /* Navegación por cuatrimestres */
  .steps-label { margin-top: calc(var(--u) * 38); font-size: clamp(9.5px, calc(var(--u) * 10), 12px); }
  .steps { margin-top: calc(var(--u) * 14); }
  .step { padding: calc(var(--u) * 8) 0 calc(var(--u) * 15); font-size: clamp(11px, calc(var(--u) * 11.6), 15px); }
  .step::after { left: 40%; right: 40%; }
  .step:hover::after { transform: scaleX(1); opacity: .3; }
  .step.is-current::after { opacity: 1; }

  /* Cuatrimestres */
  .quarters { margin-top: calc(var(--u) * 40); }
  .q-sum {
    grid-template-columns: calc(var(--u) * 54) minmax(0, 1fr) auto calc(var(--u) * 30);
    column-gap: 0;
    padding: calc(var(--u) * 21) 0 calc(var(--u) * 22);
  }
  .q-num { grid-row: auto; font-size: clamp(24px, calc(var(--u) * 29), 40px); }
  .q-name { grid-column: 2; font-size: clamp(16px, calc(var(--u) * 17.5), 24px); }
  .q-meta { grid-column: 3; grid-row: auto; margin-top: 0; padding-right: calc(var(--u) * 6); text-align: right; }
  .q-chev { grid-column: 4; grid-row: auto; justify-self: end; width: clamp(18px, calc(var(--u) * 19), 25px); height: clamp(18px, calc(var(--u) * 19), 25px); }
  .q-panel { padding: 0 0 calc(var(--u) * 18) calc(var(--u) * 54); }
  .subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--u) * 44); }
  .subject { padding: calc(var(--u) * 13) 0 calc(var(--u) * 14); }
  .s-name { font-size: clamp(14px, calc(var(--u) * 14.2), 19px); }
  .s-meta { margin-top: calc(var(--u) * 5); font-size: clamp(11px, calc(var(--u) * 11.2), 14.5px); }

  /* Optativas */
  .optativas { grid-template-columns: calc(var(--u) * 344) minmax(0, 1fr); margin-top: calc(var(--u) * 42); }
  .opt-fig { aspect-ratio: auto; height: 100%; }
  .pband { aspect-ratio: 2.6; }
  .opt-body { padding: calc(var(--u) * 34) var(--pad-in) calc(var(--u) * 36); }
  .opt-body > p { margin-top: calc(var(--u) * 14); }
  .opt-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--u) * 40); margin-top: calc(var(--u) * 24); }
  .opt-list li { padding: calc(var(--u) * 12) 0; font-size: clamp(13.5px, calc(var(--u) * 13.6), 18px); }
  .opt-note { margin-top: calc(var(--u) * 22); }

  /* Noveno cuatrimestre: banda partida navy + fotografía a sangre */
  .q9-grid { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 470); }
  .q9-copy {
    grid-area: 1 / 1;
    align-self: center;
    padding: clamp(48px, calc(var(--u) * 66), 96px) calc(var(--u) * 56) clamp(48px, calc(var(--u) * 66), 96px) calc(var(--u) * 36);
  }
  .q9-fig { grid-area: 1 / 2; aspect-ratio: auto; height: 100%; }
  .q9-num { font-size: clamp(56px, calc(var(--u) * 80), 112px); }
  .q9 .eyebrow { margin-top: calc(var(--u) * 16); }
  .q9 h3 { margin-top: calc(var(--u) * 13); font-size: clamp(30px, calc(var(--u) * 38), 52px); }
  .q9-hours { margin-top: calc(var(--u) * 13); }
  .q9-text { margin-top: calc(var(--u) * 18); max-width: 34em; }

  /* Requisitos */
  .req-grid { grid-template-columns: calc(var(--u) * 340) minmax(0, 1fr); column-gap: calc(var(--u) * 72); row-gap: calc(var(--u) * 26); }
  .req-list > li { padding: calc(var(--u) * 17) 0 calc(var(--u) * 18); gap: calc(var(--u) * 16); font-size: clamp(14px, calc(var(--u) * 14.6), 19px); }
  .req-list svg { width: clamp(17px, calc(var(--u) * 18), 23px); height: clamp(17px, calc(var(--u) * 18), 23px); }

  /* CTA */
  .pcta-band { padding-block: clamp(56px, calc(var(--u) * 78), 112px); }
  .pcta .eyebrow { font-size: clamp(9.5px, calc(var(--u) * 10), 13px); }
  .pcta h2 { margin-top: calc(var(--u) * 16); font-size: clamp(34px, calc(var(--u) * 44), 62px); }
  .pcta p { margin-top: calc(var(--u) * 18); }
  .pcta .actions { margin-top: calc(var(--u) * 30); gap: calc(var(--u) * 15); }
  .pcta .actions .btn { min-width: calc(var(--u) * 176); }
}

@media (prefers-reduced-motion: reduce) {
  .q[open] .q-panel { animation: none; }
  .step::after, .q-chev, .q-num, .crumbs a { transition: none; }
}