/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-ground: #F5F6F7;
    --color-panel: #FFFFFF;
    --color-tint: #EDF0F3;
    --color-line: #DCE0E5;
    --color-line-strong: #C8CED6;
    --color-ink: #13171C;
    --color-ink-soft: #333A44;
    --color-muted: #58616D;
    --color-muted-2: #4A535F;
    --color-accent: #1B4D7A;
    --color-accent-dark: #123A5C;
    --color-conector: #AEB7C2;
    --color-oscuro-etiqueta: #8F99A6;
    --color-oscuro-texto: #B4BCC6;
    --color-oscuro-linea: #2B333D;
    --color-oscuro-linea-2: #343C47;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .static {
    position: static;
  }
  .hidden {
    display: none;
  }
  .bg-ground {
    background-color: var(--color-ground);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-ink {
    color: var(--color-ink);
  }
}
:root {
  --alto-nav: 56px;
  --lateral: clamp(16px, 5vw, 40px);
  --sep: clamp(56px, 8vw, 96px);
}
html {
  scroll-padding-top: var(--alto-nav);
}
body {
  margin: 0;
  line-height: 1.55;
}
img, video {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--color-accent);
}
a:hover {
  color: var(--color-accent-dark);
}
a:focus-visible, video:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.contenedor {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--lateral);
}
.paso-scroll {
  display: block;
  height: 0;
}
.fondo {
  display: none;
}
.flechas {
  display: none;
}
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pausa {
  display: none;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--color-line-strong);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: rgb(255 255 255 / 0.7);
}
.pausa:hover {
  border-color: var(--color-ink);
}
.pausa:has(.pausa-casilla:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.pausa-casilla {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.pausa-reanudar {
  display: none;
}
.pausa-icono {
  display: none;
}
.pausa:has(.pausa-casilla:checked) .pausa-pausar {
  display: none;
}
.pausa:has(.pausa-casilla:checked) .pausa-reanudar {
  display: inline;
}
.indicacion, .hud {
  display: none;
}
.pie-seccion {
  display: none;
}
.caso-panel-etapa {
  display: flex;
  min-width: 0;
}
.etiqueta-repetida {
  display: none;
}
.caso-panel-etapa > .caso-panel {
  flex: 1;
}
.pie-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.saltar {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 50;
  background: var(--color-ink);
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
}
.saltar:focus {
  top: 8px;
  color: #fff;
}
.rotulo {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
h1, h2, h3 {
  text-wrap: balance;
}
h1 {
  margin: 0 0 16px;
  font-size: clamp(2.25rem, 1.2rem + 4.5vw, 3.875rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.03em;
}
h2 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.375rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
}
h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.bajada-seccion {
  margin: 0 0 44px;
  max-width: 40em;
  font-size: 17px;
  color: var(--color-muted);
}
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-line);
}
.nav-interior {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}
.nav-marca {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--color-ink);
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li a {
  display: inline-block;
  padding-block: 6px;
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-muted);
}
.nav li a:hover {
  color: var(--color-ink);
}
.barra-progreso {
  display: none;
  height: 3px;
  background: var(--color-accent);
}
.hero {
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-line);
}
.hero-grid {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 56px);
  padding-block: clamp(40px, 8vw, 96px) clamp(40px, 6vw, 80px);
}
.hero-ubicacion {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.rotativa {
  display: grid;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
  font-weight: 500;
  color: var(--color-accent);
  min-height: 32px;
}
.rotativa li {
  grid-area: 1 / 1;
}
.rotativa li:not(:first-child) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-bajada {
  margin: 0 0 32px;
  max-width: 24em;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.boton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 3px;
}
.boton-principal {
  background: var(--color-ink);
  color: #fff;
}
.boton-principal:hover {
  background: #000;
  color: #fff;
}
.boton-secundario {
  background: var(--color-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.boton-secundario:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.ficha {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  min-width: 0;
}
.ficha img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--color-line);
}
.ficha-datos {
  --g: 16px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--g);
  background: var(--color-panel);
}
.ficha-lista {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--g);
}
.ficha dt {
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ficha dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
.ficha-enlaces {
  display: flex;
  gap: 18px;
  padding-top: 4px;
  font-size: 15px;
  font-weight: 500;
}
.ficha-enlaces a {
  display: inline-block;
  padding-block: 4px;
}
.ficha-enlaces a, .contacto-enlaces a, .caso-enlace {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.metricas {
  background: var(--color-tint);
  border-bottom: 1px solid var(--color-line);
}
.metricas-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 36px;
  margin: 0 auto;
  padding-block: 48px;
  padding-inline: var(--lateral);
  list-style: none;
}
.metricas-grid li {
  text-align: center;
}
.metrica-valor {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.metrica-detalle {
  margin: 0 auto;
  max-width: 18em;
  text-wrap: balance;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-muted-2);
}
.sobre-mi {
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-line);
}
.sobre-mi .contenedor {
  padding-block: clamp(40px, 6vw, 64px);
}
.sobre-mi p:not(.rotulo) {
  margin: 0;
  max-width: 36em;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: #22282F;
}
.sobre-mi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.sobre-mi-foto {
  margin: 0;
}
.sobre-mi-foto img {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 35% 22%;
  border: 1px solid var(--color-line);
}
@media (min-width: 700px) {
  .sobre-mi-grid {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 230px);
    gap: 36px;
  }
  .sobre-mi-foto {
    order: 2;
    justify-self: end;
  }
}
.casos {
  padding-block: var(--sep) 0;
}
.casos-lista {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso-marco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
}
.caso-panel {
  min-width: 0;
  padding: 24px var(--lateral);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.caso-panel-claro {
  background: var(--color-tint);
}
.caso-panel-oscuro {
  background: var(--color-ink);
  color: #fff;
}
.caso-panel-fijo {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}
.caso-cuerpo {
  min-width: 0;
  padding: clamp(24px, 4vw, 40px) var(--lateral);
  padding-inline: clamp(16px, 4vw, 40px);
}
.caso-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
}
.caso-cabecera h3 {
  flex: 1 1 14em;
  min-width: 0;
}
.caso-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.caso-numero {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
}
.caso-estado {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted-2);
  border: 1px solid var(--color-line);
  padding: 3px 8px;
}
.caso-enlace {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 24px;
}
.caso-bloques {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 26px;
}
.etiqueta {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.caso-bloques p:not(.etiqueta), .caso-bloques ol {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--color-ink-soft);
}
.caso-bloques p:last-child, .caso-bloques ol:last-child {
  margin-bottom: 0;
}
.caso-bloques ol {
  padding-left: 20px;
}
.caso-bloques li {
  margin-bottom: 4px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.chips li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted-2);
  border: 1px solid var(--color-line);
  padding: 5px 10px;
}
.panel-rotulo {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-oscuro-etiqueta);
}
.cmp-etq {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-oscuro-etiqueta);
}
.cmp-valor {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.cmp-detalle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--color-oscuro-texto);
}
.cmp-linea {
  height: 1px;
  background: var(--color-oscuro-linea-2);
}
.diagrama {
  margin: 0;
}
.dg-fila {
  display: grid;
  gap: 12px;
}
.dg-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dg-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dg-caja {
  background: var(--color-panel);
  border: 1px solid var(--color-line-strong);
  padding: 12px 8px;
  text-align: center;
  min-width: 0;
}
.dg-caja p {
  margin: 0;
}
.dg-titulo {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.dg-detalle {
  margin-top: 2px !important;
  font-size: 11px;
  color: var(--color-muted);
}
.dg-centro {
  max-width: 280px;
  margin: 0 auto;
  background: var(--color-ink);
  padding: 14px 12px;
  text-align: center;
}
.dg-centro p {
  margin: 0;
}
.dg-centro .dg-titulo {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.dg-centro .dg-detalle {
  font-size: 12px;
  color: var(--color-oscuro-texto);
}
.dg-union, .dg-reparto {
  position: relative;
  height: 34px;
}
.dg-union {
  background: linear-gradient(var(--color-conector), var(--color-conector)) 50% 17px / 1px 17px no-repeat;
}
.dg-union::before {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0;
  height: 17px;
  border: 1px solid var(--color-conector);
  border-top: 0;
}
.dg-reparto {
  background: linear-gradient(var(--color-conector), var(--color-conector)) 50% 0 / 1px 100% no-repeat;
}
.dg-reparto::before {
  content: "";
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 17px;
  bottom: 0;
  border: 1px solid var(--color-conector);
  border-bottom: 0;
}
.diagrama figcaption, .panel-epigrafe {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
}
.panel-epigrafe {
  margin: 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.caso-panel-oscuro .panel-epigrafe {
  color: var(--color-oscuro-etiqueta);
}
.panel-media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line-strong);
}
.caso-panel-oscuro .panel-media {
  border-color: var(--color-oscuro-linea-2);
}
.panel-captura {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-accent);
  text-decoration: none;
  cursor: zoom-in;
}
.panel-ampliar {
  font-size: 13px;
  font-weight: 500;
}
.panel-captura:hover .panel-ampliar {
  text-decoration: underline;
}
.panel-captura:hover .panel-media {
  border-color: var(--color-accent);
}
.docencia {
  margin-top: var(--sep);
  background: var(--color-panel);
  border-block: 1px solid var(--color-line);
}
.docencia-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  padding-block: clamp(48px, 7vw, 88px);
}
.docencia-texto p:not(.rotulo) {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--color-ink-soft);
}
.docencia-texto strong {
  font-weight: 600;
}
.docencia-foto {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
}
.docencia-foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  border: 1px solid var(--color-line);
}
.docencia-foto figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.docencia-metricas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.docencia-metricas li {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  padding: 20px 22px;
}
.dm-valor {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
}
.dm-detalle {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted-2);
}
.metodo {
  background: var(--color-panel);
  color: var(--color-ink);
  border-block: 1px solid var(--color-line);
}
.metodo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: clamp(48px, 7vw, 88px);
}
.metodo h2 {
  max-width: 16em;
}
.metodo-bajada {
  margin: 0;
  font-size: 18px;
  color: var(--color-ink-soft);
  max-width: 38em;
}
.metodo-pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.paso-numero {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.paso h3 {
  margin: 0 0 8px;
  font-size: 19px;
}
.paso p:not(.paso-numero) {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.stack {
  padding-block: var(--sep);
}
.stack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.stack-tarjeta {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  padding: clamp(22px, 3vw, 30px);
}
.stack-tarjeta h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.stack-tarjeta > p {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--color-muted);
}
.stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stack-items li {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-tint);
  padding: 7px 12px;
}
.contacto {
  background: var(--color-panel);
  border-top: 1px solid var(--color-line);
}
.contacto .contenedor {
  padding-block: var(--sep);
}
.contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.contacto-texto p:not(.rotulo) {
  margin: 0 0 20px;
  max-width: 30em;
  font-size: 17px;
  color: var(--color-ink-soft);
}
.contacto .contacto-enlaces {
  margin: 0;
  font-size: 15px;
  color: var(--color-muted);
}
.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  padding: clamp(20px, 3vw, 32px);
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.campo label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.campo input, .campo textarea {
  min-height: 48px;
  padding: 0 14px;
  box-sizing: border-box;
  width: 100%;
  font: 15px var(--font-sans);
  color: var(--color-ink);
  background: var(--color-panel);
  border: 1px solid var(--color-line-strong);
  border-radius: 3px;
}
.campo textarea {
  padding-block: 12px;
  resize: vertical;
}
.campo input:focus-visible, .campo textarea:focus-visible, .formulario button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.formulario button {
  border: 0;
  cursor: pointer;
  justify-content: center;
  align-self: start;
}
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 900px) {
  .contacto-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
}
.pie {
  background: var(--color-ink);
  color: #D4D9DF;
  border-top: 1px solid var(--color-oscuro-linea);
}
.pie .contenedor {
  padding-block: 36px;
}
.pie p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
@media (max-width: 699px) {
  .metricas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 36px;
  }
  .nav li a {
    font-size: 13px;
  }
  .nav ul {
    gap: 0 16px;
  }
}
@media (min-width: 700px) {
  .stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metodo-pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .caso-marco {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .caso-panel {
    padding: 32px 28px;
    border-bottom: 0;
    border-right: 1px solid var(--color-line);
  }
  .docencia-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "texto foto" "metricas foto";
    row-gap: 0;
  }
  .docencia-texto {
    grid-area: texto;
  }
  .docencia-foto {
    grid-area: foto;
    align-self: center;
  }
  .docencia-metricas {
    grid-area: metricas;
  }
  .metodo-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
  }
  .metodo-pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .paso {
    padding-block: 28px;
    border-top: 1px solid var(--color-line);
  }
  .paso:first-child {
    padding-top: 0;
    border-top: 0;
  }
}
.gracias {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px clamp(16px, 5vw, 40px);
  box-sizing: border-box;
}
.gracias-tarjeta {
  max-width: 520px;
  padding: clamp(24px, 5vw, 40px);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 4px;
}
.gracias-tarjeta h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 12px;
}
.gracias-tarjeta p {
  color: var(--color-ink-soft);
  margin: 0 0 24px;
}
@media print {
  .nav {
    position: static !important;
  }
  .barra-progreso, .saltar {
    display: none !important;
  }
  .caso, .docencia, .metodo {
    break-inside: avoid;
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }
  body {
    background-image: none !important;
  }
  .rotativa li:not(:first-child) {
    display: none !important;
  }
  .rotativa li {
    opacity: 1 !important;
  }
  .paso-scroll, .paso-cola, .hud, .pie-seccion, .fondo, .flechas, .pausa {
    display: none !important;
  }
  .pie-nombre {
    display: block !important;
  }
  .contacto {
    min-height: 0 !important;
    background: none !important;
    padding: 0 !important;
  }
  .capa {
    position: static !important;
    opacity: 1 !important;
    translate: none !important;
  }
  .etapa {
    opacity: 1 !important;
    translate: none !important;
  }
  .pie {
    position: static !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .pausa {
    display: inline-flex;
  }
  body:has(.pausa-casilla:checked) .fondo video {
    display: none;
  }
  body:has(.pausa-casilla:checked) .fondo--video {
    opacity: 1;
  }
  body:has(.pausa-casilla:checked) .fondo--video::before {
    display: block;
    animation: none;
    transform: none;
    translate: none;
  }
  body:has(.pausa-casilla:checked) .rotativa li {
    animation: none;
  }
  body:has(.pausa-casilla:checked) .rotativa li:not(:first-child) {
    visibility: hidden;
  }
  @keyframes rotar {
    0% {
      opacity: 0;
    }
    3% {
      opacity: 1;
    }
    22% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  .rotativa li:not(:first-child) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .rotativa li {
    animation: rotar calc(var(--n) * 2.8s) linear infinite backwards;
    animation-delay: calc(var(--i) * 2.8s);
  }
  @supports (animation-timeline: scroll()) {
    @keyframes progreso {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }
    @keyframes entrar {
      from {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      to {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
    }
    @keyframes salir {
      from {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      to {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx1 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      40%, 60% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx2 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      20%, 80% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx3 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      13.333%, 86.667% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx4 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      10%, 90% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx5 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      8%, 92% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx6 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      6.667%, 93.333% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx7 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      5.714%, 94.286% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx8 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      5%, 95% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx9 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      4.444%, 95.556% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx10 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      4%, 96% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx11 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      3.636%, 96.364% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx12 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      3.333%, 96.667% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx13 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      3.077%, 96.923% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx14 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      2.857%, 97.143% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx15 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      2.667%, 97.333% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx16 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      2.5%, 97.5% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx17 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      2.353%, 97.647% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx18 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      2.222%, 97.778% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx19 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      2.105%, 97.895% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx20 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      2%, 98% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx21 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.905%, 98.095% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx22 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.818%, 98.182% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx23 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.739%, 98.261% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx24 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.667%, 98.333% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx25 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.6%, 98.4% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx26 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.538%, 98.462% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx27 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.481%, 98.519% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx28 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.429%, 98.571% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx29 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.379%, 98.621% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx30 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.333%, 98.667% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx31 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.29%, 98.71% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx32 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.25%, 98.75% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx33 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.212%, 98.788% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx34 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.176%, 98.824% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx35 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.143%, 98.857% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx36 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.111%, 98.889% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx37 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.081%, 98.919% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx38 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.053%, 98.947% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx39 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1.026%, 98.974% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx40 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      1%, 99% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx41 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      0.976%, 99.024% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx42 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      0.952%, 99.048% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx43 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      0.93%, 99.07% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx44 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      0.909%, 99.091% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes fx45 {
      0% {
        opacity: 0;
        z-index: 0;
        translate: 0 18px;
      }
      0.889%, 99.111% {
        opacity: 1;
        z-index: 2;
        translate: 0 0;
      }
      100% {
        opacity: 0;
        z-index: 0;
        translate: 0 -18px;
      }
    }
    @keyframes marca-activa {
      from, to {
        background: var(--color-accent);
        transform: scaleY(2.2);
      }
    }
    @keyframes encendido {
      from, to {
        opacity: 1;
      }
    }
    @keyframes flecha-visible {
      from, to {
        visibility: visible;
        opacity: 1;
      }
    }
    .barra-progreso {
      display: block;
      transform-origin: 0 50%;
      animation-name: progreso;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }
    @media (min-height: 640px) {
      :root {
        --paso: 20svh;
        --alto-nav: 56px;
        --alto-pie: 40px;
        --escenario: calc(100svh - var(--alto-nav) - var(--alto-pie));
        --fundido: calc(var(--paso) * 0.4);
      }
      html {
        scroll-snap-type: y mandatory;
        scroll-padding-top: 0;
      }
      body {
        background-color: var(--color-ground);
      }
      .fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
        perspective: 900px;
      }
      .fondo::before {
        content: "";
        position: absolute;
        inset: -30%;
        background-image: linear-gradient(rgb(19 23 28 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(19 23 28 / 0.06) 1px, transparent 1px);
        background-size: 40px 40px;
        transform-origin: 50% 50%;
        will-change: transform;
        animation: fondo-mecer 26s ease-in-out infinite alternate, fondo-avanzar 14s linear infinite;
      }
      @keyframes fondo-mecer {
        0% {
          transform: rotateX(14deg) rotateY(-9deg) rotateZ(-0.8deg);
        }
        50% {
          transform: rotateX(-8deg) rotateY(6deg) rotateZ(0.5deg);
        }
        100% {
          transform: rotateX(11deg) rotateY(9deg) rotateZ(-0.4deg);
        }
      }
      @keyframes fondo-avanzar {
        from {
          translate: 0 0;
        }
        to {
          translate: 40px 40px;
        }
      }
      .fondo--video {
        opacity: 0.1;
      }
      .fondo--video::before {
        display: none;
      }
      .fondo video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }
      .contacto {
        background: transparent;
      }
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }
      .nav-interior {
        padding-block: 10px;
      }
      .pie {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        height: var(--alto-pie);
        display: flex;
        align-items: center;
      }
      .pie .contenedor {
        padding-block: 0;
        width: 100%;
        box-sizing: border-box;
      }
      .pie-nombre {
        display: none;
      }
      .pie-seccion {
        display: grid;
        margin: 0;
        min-width: 0;
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .pie-seccion span, .tick {
        --desde: var(--d-desde);
        --hasta: var(--d-hasta);
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: none;
        animation-timeline: scroll(root block);
        animation-range: calc((var(--desde) - 0.5) * var(--paso)) calc((var(--hasta) + 0.5) * var(--paso));
      }
      .pie-seccion span {
        grid-area: 1 / 1;
        opacity: 0;
        white-space: nowrap;
        animation-name: encendido;
      }
      .hud {
        display: flex;
        gap: 6px;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .tick {
        width: 16px;
        height: 3px;
        background: #4A535F;
        animation-name: marca-activa;
      }
      .paso-scroll {
        height: var(--paso);
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
      .paso-cola {
        display: block;
        height: calc(100svh - var(--paso));
      }
      .casos {
        padding: 0;
      }
      .casos-lista {
        gap: 0;
      }
      .capa {
        --desde: var(--d-desde);
        --hasta: var(--d-hasta);
        --fx: var(--d-fx);
        position: fixed;
        left: 0;
        right: 0;
        top: var(--alto-nav);
        bottom: var(--alto-pie);
        z-index: 0;
        margin: 0;
        display: grid;
        align-content: center;
        background: transparent;
        border: 0;
        opacity: 0;
        animation-name: entrar, salir;
        animation-duration: 1ms, 1ms;
        animation-timing-function: linear, linear;
        animation-fill-mode: forwards, forwards;
        animation-timeline: scroll(root block), scroll(root block);
        animation-range: calc((var(--desde) - 0.5) * var(--paso)) calc((var(--desde) - 0.5) * var(--paso) + var(--fundido)), calc((var(--hasta) + 0.5) * var(--paso) - var(--fundido)) calc((var(--hasta) + 0.5) * var(--paso));
      }
      @supports (-webkit-touch-callout: none) {
        .capa {
          animation-name: var(--fx);
          animation-duration: 1ms;
          animation-timing-function: linear;
          animation-fill-mode: both;
          animation-timeline: scroll(root block);
          animation-range: calc((var(--desde) - 0.5) * var(--paso)) calc((var(--hasta) + 0.5) * var(--paso));
        }
      }
      .capa:has(:focus-visible), .etapa:has(:focus-visible), .bloque:has(:focus-visible) {
        opacity: 1 !important;
        translate: none !important;
        z-index: 10 !important;
      }
      body:has(.capa :focus-visible) .capa:not(:has(:focus-visible)) {
        opacity: 0 !important;
      }
      .capa:has(.etapa :focus-visible) .etapa:not(:has(:focus-visible)) {
        opacity: 0 !important;
      }
      .flechas {
        display: block;
        position: fixed;
        z-index: 25;
      }
      .flecha-grupo {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        gap: 8px;
        visibility: hidden;
        opacity: 0;
        animation-name: flecha-visible;
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: none;
        animation-timeline: scroll(root block);
        animation-range: calc((var(--desde) - 0.5) * var(--paso)) calc((var(--hasta) + 0.5) * var(--paso));
      }
      .flecha {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 44px;
        height: 44px;
        padding: 0 14px;
        box-sizing: border-box;
        border-radius: 3px;
        text-decoration: none;
        color: var(--color-ink);
        font-family: var(--font-mono);
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        background: rgb(255 255 255 / 0.82);
        border: 1px solid var(--color-line-strong);
        box-shadow: 0 2px 10px rgb(19 23 28 / 0.08);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
      }
      .flecha:hover {
        color: var(--color-ink);
        border-color: var(--color-ink);
      }
      .flecha:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
      }
      .flecha span[aria-hidden] {
        font-family: var(--font-sans);
        font-size: 18px;
        line-height: 1;
      }
      :root {
        --vidrio: rgb(255 255 255 / 0.78);
        --vidrio-borde: rgb(220 224 229 / 0.85);
        --vidrio-tinte: rgb(237 240 243 / 0.72);
        --desenfoque: blur(10px) saturate(1.05);
      }
      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        :root {
          --vidrio: rgb(255 255 255 / 0.95);
          --vidrio-tinte: rgb(237 240 243 / 0.95);
        }
      }
      .hero, .presentacion, .docencia, .metodo, .stack, .metricas, .sobre-mi {
        background: transparent;
        border: 0;
      }
      .hero-grid {
        padding-block: 0;
      }
      :root {
        --ancho-tarjeta: min(1120px, calc(100% - 2 * var(--lateral)));
      }
      .presentacion-marco, .docencia-grid, .metodo-grid {
        width: var(--ancho-tarjeta);
        margin-inline: auto;
        box-sizing: border-box;
      }
      .presentacion-marco, .docencia-grid, .metodo-grid, .caso-marco, .stack-tarjeta, .ficha, .formulario {
        background: var(--vidrio);
        border: 1px solid var(--vidrio-borde);
        -webkit-backdrop-filter: var(--desenfoque);
        backdrop-filter: var(--desenfoque);
      }
      .ficha-datos {
        background: transparent;
      }
      .caso-panel-claro {
        background: var(--vidrio-tinte);
      }
      .campo input, .campo textarea {
        background: rgb(255 255 255 / 0.9);
      }
      .presentacion-marco {
        padding-block: 32px;
      }
      .presentacion .metricas-grid {
        padding-block: 0 24px;
      }
      .presentacion .sobre-mi .contenedor {
        padding-block: 24px 0;
        border-top: 1px solid var(--color-line);
        width: calc(100% - 2 * var(--lateral));
        padding-inline: 0;
      }
      .docencia {
        margin: 0;
      }
      .docencia-grid {
        padding: 32px;
      }
      .metodo-grid {
        padding: 40px;
      }
      .nav, .pie {
        background: rgb(255 255 255 / 0.55);
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
      }
      .nav {
        border-bottom-color: var(--vidrio-borde);
      }
      .pie {
        color: var(--color-ink);
        border-top: 1px solid var(--vidrio-borde);
      }
      .tick {
        background: var(--color-line-strong);
      }
      .stack {
        padding: 0;
      }
      .stack-interior .bajada-seccion {
        margin-bottom: 28px;
      }
      .contacto {
        position: relative;
        z-index: 5;
        min-height: calc(100svh - var(--alto-nav));
        box-sizing: border-box;
        display: grid;
        align-content: center;
        padding: 24px 0 calc(var(--alto-pie) + 24px);
        scroll-snap-align: start;
        scroll-margin-top: var(--alto-nav);
        border-top: 1px solid var(--color-line);
      }
      .contacto .contenedor {
        padding-block: 0;
      }
      .fin-pagina {
        display: block;
        height: 0;
        scroll-snap-align: end;
      }
    }
    @media (min-height: 640px) and (min-width: 1100px) {
      .paso-scroll:not(.en-d) {
        height: 0;
        scroll-snap-align: none;
      }
      .tick:not(.en-d) {
        display: none;
      }
      .flechas {
        right: max(12px, calc((100vw - 1120px) / 2 - 76px));
        bottom: calc(var(--alto-pie) + 16px);
      }
      .flecha-grupo {
        flex-direction: column;
        align-items: flex-end;
      }
      .flecha-grupo:not(.modo-d) {
        display: none;
      }
      .flecha-grupo:has(.flecha-deslizar) {
        position: fixed;
        right: auto;
        left: max(var(--lateral), calc(50% - 560px + var(--lateral)));
        bottom: calc(var(--alto-pie) + 16px);
        align-items: flex-start;
      }
      .ficha {
        justify-self: end;
        width: 100%;
        max-width: calc((var(--escenario) - 297px) * 1.2);
        min-width: min(392px, 100%);
      }
      .ficha img {
        max-height: calc(var(--escenario) - 297px);
        object-position: 50% 0;
      }
      .ficha-datos {
        --g: 12px;
        padding: 18px 26px;
      }
      @media (max-height: 700px) {
        .ficha {
          max-width: calc((var(--escenario) - 261px) * 1.2);
          min-width: min(372px, 100%);
        }
        .ficha img {
          max-height: calc(var(--escenario) - 261px);
        }
        .ficha-datos {
          --g: 8px;
          padding: 14px 24px;
        }
      }
      .hero-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      }
      .sobre-mi-foto img {
        max-height: calc(var(--escenario) - 250px);
        width: auto;
        max-width: 100%;
      }
      .casos-cabecera {
        align-content: start;
        padding-top: 16px;
      }
      .casos-cabecera .contenedor {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 18px;
      }
      .casos-cabecera .rotulo {
        margin: 0;
      }
      .casos-cabecera h2 {
        font-size: 1.5rem;
        margin: 0;
      }
      .casos-cabecera .bajada-seccion {
        margin: 0;
        font-size: 15px;
        flex-basis: 100%;
      }
      .caso {
        align-content: center;
        padding-top: 92px;
        padding-bottom: 16px;
      }
      .caso-marco {
        width: var(--ancho-tarjeta);
        margin-inline: auto;
        box-sizing: border-box;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      }
      .caso-marco:has(.panel-captura) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      }
      .caso-cuerpo {
        padding-block: 26px;
      }
      .caso-cabecera {
        margin-bottom: 16px;
      }
      .caso-bloques {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "p q" "r q";
        gap: 16px 32px;
        align-items: start;
        margin-bottom: 0;
      }
      .bloque-1 {
        grid-area: p;
      }
      .bloque-2 {
        grid-area: q;
      }
      .bloque-3 {
        grid-area: r;
      }
      .bloque p:not(.etiqueta), .bloque ol {
        font-size: 14.5px;
        line-height: 1.5;
      }
      .chips {
        margin-top: 12px;
        padding-top: 12px;
        gap: 6px;
      }
      .chips li {
        font-size: 11.5px;
        padding: 4px 8px;
      }
      .panel-media {
        max-height: calc(var(--escenario) - 200px);
        width: auto;
        max-width: 100%;
        margin-inline: auto;
      }
      .docencia-foto img {
        max-height: calc(var(--escenario) - 150px);
      }
      .docencia-metricas {
        margin-top: 20px;
      }
      .metodo-pasos {
        gap: 0;
      }
      .stack-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;
      }
      .contacto-grid {
        gap: 56px;
      }
      @media (max-height: 782px) {
        .caso {
          padding-top: 66px;
        }
        .caso-cuerpo {
          padding-block: 10px;
        }
        .caso-cabecera {
          margin-bottom: 10px;
        }
        .bloque p:not(.etiqueta), .bloque ol {
          line-height: 1.4;
          margin-bottom: 4px;
        }
        .chips {
          margin-top: 8px;
          padding-top: 8px;
        }
        .caso-panel {
          padding-block: 12px;
        }
      }
      @media (max-height: 820px) {
        .hero-bajada {
          margin-bottom: 20px;
        }
        .caso {
          padding-top: 76px;
        }
        .casos-cabecera {
          padding-top: 10px;
        }
        .caso-cuerpo {
          padding-block: 20px;
        }
        .caso-panel {
          padding-block: 20px;
        }
        .stack-interior .bajada-seccion {
          margin-bottom: 16px;
        }
        .stack h2 {
          margin-bottom: 8px;
        }
        .bloque p:not(.etiqueta), .bloque ol {
          font-size: 13.5px;
          line-height: 1.45;
          margin-bottom: 6px;
        }
        .docencia-grid {
          padding: 24px;
        }
        .docencia-texto p:not(.rotulo) {
          font-size: 15px;
          margin-bottom: 10px;
        }
        .docencia-metricas li {
          padding: 12px 16px;
        }
        .presentacion-marco {
          padding-block: 24px;
        }
        .metodo-grid {
          padding: 28px;
        }
        .paso {
          padding-block: 14px;
        }
        .stack-tarjeta {
          padding: 18px;
        }
        .stack-tarjeta > p {
          margin-bottom: 12px;
        }
        .stack-items li {
          font-size: 12px;
          padding: 5px 9px;
        }
      }
      @media (max-height: 769px), (max-width: 1199px) and (max-height: 920px) {
        .paso-scroll.en-n {
          height: var(--paso);
          scroll-snap-align: start;
        }
        .paso-scroll:not(.en-n) {
          height: 0;
          scroll-snap-align: none;
        }
        .tick.en-n {
          display: block;
        }
        .tick:not(.en-n) {
          display: none;
        }
        .flecha-grupo.modo-n {
          display: flex;
        }
        .flecha-grupo:not(.modo-n) {
          display: none;
        }
        .capa, .pie-seccion span, .tick {
          --desde: var(--n-desde);
          --hasta: var(--n-hasta);
          --fx: var(--n-fx);
        }
        .caso {
          align-content: center;
          padding-top: 70px;
          padding-bottom: 10px;
        }
        .caso-cuerpo {
          padding-block: 20px;
          justify-content: start;
        }
        .caso-cabecera {
          margin-bottom: 12px;
        }
        .caso-bloques {
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas: none;
        }
        .bloque-1, .bloque-2, .bloque-3 {
          grid-area: 1 / 1;
          opacity: 0;
          animation-name: entrar, salir;
          animation-duration: 1ms, 1ms;
          animation-timing-function: linear, linear;
          animation-fill-mode: forwards, forwards;
          animation-timeline: scroll(root block), scroll(root block);
          animation-range: calc((var(--n-desde) - 0.5) * var(--paso)) calc((var(--n-desde) - 0.5) * var(--paso) + var(--fundido)), calc((var(--n-hasta) + 0.5) * var(--paso) - var(--fundido)) calc((var(--n-hasta) + 0.5) * var(--paso));
        }
        @supports (-webkit-touch-callout: none) {
          .bloque-1, .bloque-2, .bloque-3 {
            animation-name: var(--n-fx);
            animation-duration: 1ms;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: scroll(root block);
            animation-range: calc((var(--n-desde) - 0.5) * var(--paso)) calc((var(--n-hasta) + 0.5) * var(--paso));
          }
        }
        .bloque {
          pointer-events: none;
        }
        .bloque p:not(.etiqueta), .bloque ol {
          font-size: 15px;
          line-height: 1.5;
          margin-bottom: 8px;
        }
        .caso-panel {
          padding: 16px 22px;
        }
        .dg-union, .dg-reparto {
          height: 26px;
        }
        .dg-caja {
          padding-block: 8px;
        }
        .diagrama figcaption {
          margin-top: 12px;
        }
        @media (max-height: 740px) {
          .docencia-grid {
            padding: 18px 24px;
          }
          .docencia-texto h2 {
            font-size: 1.625rem;
            margin-bottom: 10px;
          }
          .docencia-texto p:not(.rotulo) {
            font-size: 14px;
            margin-bottom: 8px;
          }
          .docencia-foto img {
            max-height: calc(var(--escenario) - 120px);
          }
          .docencia-metricas {
            margin-top: 12px;
            gap: 8px;
          }
          .dm-valor {
            font-size: 21px;
          }
          .stack h2 {
            font-size: 1.625rem;
          }
          .stack-tarjeta {
            padding: 14px;
          }
          .stack-tarjeta h3 {
            font-size: 16px;
          }
          .stack-items {
            gap: 6px;
          }
          .stack-items li {
            font-size: 11.5px;
            padding: 4px 8px;
          }
        }
      }
    }
    @media (min-height: 640px) and (max-width: 1099px) {
      :root {
        --alto-pie: 34px;
      }
      .caso-marco {
        grid-template-columns: minmax(0, 1fr);
      }
      .caso-panel {
        border-right: 0;
      }
      .docencia-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
      }
      .caso-marco, .docencia-grid, .presentacion-marco, .metodo-grid {
        max-width: 760px;
      }
      .capa, .pie-seccion span, .tick {
        --desde: var(--m-desde);
        --hasta: var(--m-hasta);
        --fx: var(--m-fx);
      }
      :root {
        --alto-pie: 52px;
      }
      .hud {
        display: none;
      }
      .pie-seccion {
        font-size: 11px;
        letter-spacing: 0.05em;
      }
      .pie-interior {
        justify-content: flex-start;
        gap: 12px;
      }
      .flechas {
        right: var(--lateral);
        bottom: 4px;
      }
      .flecha-grupo {
        flex-direction: row;
      }
      .flecha-grupo:not(.modo-m) {
        display: none;
      }
      @media (max-width: 479px) {
        .pausa {
          width: 32px;
          padding: 0;
          justify-content: center;
          flex-shrink: 0;
        }
        .pausa-pausar, .pausa-reanudar {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
        .pausa-icono {
          display: block;
          width: 10px;
          height: 12px;
          box-sizing: border-box;
          border-inline: 3px solid currentColor;
        }
        .pausa:has(.pausa-casilla:checked) .pausa-icono {
          border: 0;
          width: 10px;
          height: 12px;
          background: currentColor;
          clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
      }
      @media (max-width: 359px) {
        .pie-interior {
          gap: 8px;
        }
        .flecha {
          padding-inline: 10px;
          gap: 8px;
        }
      }
      .etapa {
        --desde: var(--m-desde);
        --hasta: var(--m-hasta);
        --fx: var(--m-fx);
        opacity: 0;
        animation-name: entrar, salir;
        animation-duration: 1ms, 1ms;
        animation-timing-function: linear, linear;
        animation-fill-mode: forwards, forwards;
        animation-timeline: scroll(root block), scroll(root block);
        animation-range: calc((var(--desde) - 0.5) * var(--paso)) calc((var(--desde) - 0.5) * var(--paso) + var(--fundido)), calc((var(--hasta) + 0.5) * var(--paso) - var(--fundido)) calc((var(--hasta) + 0.5) * var(--paso));
      }
      @supports (-webkit-touch-callout: none) {
        .etapa {
          animation-name: var(--fx);
          animation-duration: 1ms;
          animation-timing-function: linear;
          animation-fill-mode: both;
          animation-timeline: scroll(root block);
          animation-range: calc((var(--desde) - 0.5) * var(--paso)) calc((var(--hasta) + 0.5) * var(--paso));
        }
      }
      .hero-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .hero-texto, .ficha {
        grid-area: 1 / 1;
        align-self: center;
      }
      .ficha img {
        max-height: calc(var(--escenario) - 290px);
      }
      .casos-cabecera {
        align-content: center;
      }
      .caso {
        padding-block: 12px;
      }
      .caso-marco {
        grid-template-rows: auto auto auto;
        width: calc(100% - 2 * var(--lateral));
        margin-inline: auto;
        box-sizing: border-box;
      }
      .caso-cuerpo, .caso-bloques {
        display: contents;
      }
      .caso-cabecera {
        grid-row: 1;
        grid-column: 1;
        margin: 0;
        padding: 14px var(--lateral) 8px;
      }
      .caso-panel-etapa {
        grid-row: 2;
        grid-column: 1;
      }
      .bloque-1 {
        grid-row: 3;
        grid-column: 1;
      }
      .bloque-2, .bloque-3, .bloque-1.bloque-aparte {
        grid-row: 2 / 4;
        grid-column: 1;
        align-self: start;
      }
      .bloque-2 {
        display: grid;
      }
      .bloque-2 > .parte {
        grid-area: 1 / 1;
      }
      .etiqueta-repetida {
        display: block;
      }
      .bloque {
        padding: 8px var(--lateral) 18px;
        pointer-events: none;
      }
      .caso-panel {
        padding-block: 16px;
        border: 0;
      }
      .panel-media {
        max-height: 32svh;
        width: auto;
        max-width: 100%;
        margin-inline: auto;
      }
      .bloque p:not(.etiqueta), .bloque ol {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 8px;
      }
      .chips {
        margin-top: 12px;
        padding-top: 12px;
        gap: 6px;
      }
      .chips li {
        padding: 4px 8px;
        font-size: 11.5px;
      }
      .docencia-grid {
        padding: 20px;
        gap: 16px;
      }
      .docencia-texto {
        grid-row: 1 / 3;
        grid-column: 1;
        align-self: center;
      }
      .docencia-foto {
        grid-row: 1;
        grid-column: 1;
      }
      .docencia-metricas {
        grid-row: 2;
        grid-column: 1;
        margin: 0;
      }
      .docencia-foto img {
        max-height: 34svh;
      }
      .docencia-texto p:not(.rotulo) {
        font-size: 15px;
      }
      .metodo-grid {
        padding: 22px;
        gap: 14px;
      }
      .metodo h2 {
        font-size: 1.5rem;
        margin-bottom: 6px;
      }
      .metodo-bajada {
        font-size: 14px;
        line-height: 1.4;
      }
      .metodo-pasos {
        gap: 0;
      }
      .paso {
        padding-block: 9px;
        border-top: 1px solid var(--color-line);
      }
      .paso:first-child {
        border-top: 0;
        padding-top: 0;
      }
      .paso h3 {
        font-size: 16px;
        margin-bottom: 3px;
      }
      .paso p:not(.paso-numero) {
        font-size: 13.5px;
        line-height: 1.4;
      }
      .stack-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .stack-tarjeta {
        grid-area: 1 / 1;
        padding: 18px;
      }
      .presentacion-marco {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 20px var(--lateral);
      }
      .presentacion .metricas, .presentacion .sobre-mi, .presentacion .sobre-mi-grid {
        display: contents;
      }
      .presentacion .metricas-grid {
        grid-row: 1;
        grid-column: 1;
        padding-inline: 0;
      }
      .sobre-mi-foto {
        grid-row: 2;
        grid-column: 1;
        justify-self: center;
      }
      .sobre-mi-foto img {
        max-height: 36svh;
        width: auto;
        max-width: 100%;
      }
      .sobre-mi-texto {
        grid-row: 1 / 3;
        grid-column: 1;
        align-self: center;
      }
      .presentacion-marco {
        padding-block: 20px;
      }
      .presentacion .metricas-grid {
        gap: 14px 18px;
        padding-bottom: 16px;
      }
      .presentacion .metrica-valor {
        font-size: 1.5rem;
        margin-bottom: 2px;
      }
      .presentacion .metrica-detalle {
        font-size: 13px;
        line-height: 1.3;
      }
      .presentacion .sobre-mi .contenedor {
        padding-top: 16px;
      }
      .presentacion .sobre-mi p:not(.rotulo) {
        font-size: 14.5px;
        line-height: 1.45;
      }
      @media (max-height: 760px) {
        .ficha img {
          max-height: calc(var(--escenario) - 300px);
        }
        .ficha-datos {
          --g: 10px;
          padding: 16px 20px;
        }
        .caso {
          padding-block: 6px;
        }
        .caso-cabecera {
          padding-block: 10px 4px;
        }
        .caso-cabecera h3 {
          font-size: 1.125rem;
        }
        .bloque {
          padding-block: 4px 12px;
        }
        .bloque p:not(.etiqueta), .bloque ol {
          font-size: 13.5px;
          line-height: 1.42;
          margin-bottom: 6px;
        }
        .caso-panel {
          padding-block: 12px;
        }
        .presentacion-marco {
          padding-block: 14px;
        }
        .presentacion .metricas-grid {
          gap: 10px 16px;
          padding-bottom: 12px;
        }
        .presentacion .metrica-valor {
          font-size: 1.375rem;
        }
        .presentacion .metrica-detalle {
          font-size: 12.5px;
        }
        .presentacion .sobre-mi .contenedor {
          padding-top: 12px;
        }
        .presentacion .sobre-mi .rotulo {
          margin-bottom: 6px;
        }
        .presentacion .sobre-mi p:not(.rotulo) {
          font-size: 14px;
          line-height: 1.42;
        }
        .docencia-grid {
          padding: 16px;
          gap: 12px;
        }
        .docencia-foto img {
          max-height: 26svh;
        }
        .docencia-metricas {
          gap: 8px;
        }
        .docencia-metricas li {
          padding: 10px 14px;
        }
        .dm-valor {
          font-size: 20px;
        }
        .dm-detalle {
          font-size: 12px;
        }
        .docencia-texto h2 {
          font-size: 1.5rem;
        }
        .metodo-grid {
          padding: 18px;
          gap: 10px;
        }
        .metodo h2 {
          font-size: 1.375rem;
        }
        .metodo .rotulo {
          margin-bottom: 4px;
        }
        .metodo-bajada {
          font-size: 13.5px;
        }
        .paso {
          padding-block: 7px;
        }
        .paso-numero {
          margin-bottom: 2px;
        }
        .paso h3 {
          font-size: 15px;
          margin-bottom: 2px;
        }
        .paso p:not(.paso-numero) {
          font-size: 13px;
        }
        .stack h2 {
          font-size: 1.5rem;
        }
        .stack-interior .bajada-seccion {
          margin-bottom: 12px;
          font-size: 15px;
        }
        .stack-tarjeta {
          padding: 14px;
        }
        .stack-tarjeta > p {
          margin-bottom: 10px;
        }
        .stack-items {
          gap: 6px;
        }
        .stack-items li {
          font-size: 12px;
          padding: 5px 8px;
        }
      }
      @media (max-width: 359px) {
        .caso {
          padding-block: 2px;
        }
        .caso-cabecera {
          padding-block: 8px 2px;
        }
        .caso-cabecera h3 {
          font-size: 1.0625rem;
        }
        .bloque {
          padding-block: 2px 10px;
        }
        .bloque p:not(.etiqueta), .bloque ol {
          font-size: 13px;
          line-height: 1.4;
          margin-bottom: 5px;
        }
        .caso-panel {
          padding-block: 10px;
        }
        .metodo-grid {
          padding: 16px;
          gap: 8px;
        }
        .paso {
          padding-block: 5px;
        }
        .dg-union, .dg-reparto {
          height: 20px;
        }
        .dg-caja {
          padding-block: 6px;
        }
        .diagrama figcaption {
          margin-top: 8px;
        }
      }
      @media (max-width: 374px) {
        .dg-caja {
          padding-inline: 3px;
        }
        .dg-3 {
          gap: 6px;
        }
        .dg-titulo {
          font-size: 11px;
        }
        .dg-detalle {
          font-size: 10.5px;
        }
      }
    }
    @media (min-height: 640px) and (max-width: 599px) {
      .nav-marca {
        display: none;
      }
      .nav-interior {
        justify-content: center;
      }
      .nav ul {
        gap: 0 14px;
      }
    }
    @media (min-height: 640px) and (max-width: 359px) {
      .nav ul {
        gap: 0 9px;
      }
      .nav a {
        font-size: 13px;
      }
    }
  }
}