/* Portfolio de Matu Strauss — capa propia del proyecto, fuera de las capas del sistema.
   Todo valor sale de los Tokens y Alias del sistema; los únicos colores escritos a mano
   son los de la marca (logo) y las muestras de los diagramas. */

/* ---------------------------------------------------------------- Utilidades */
.skip-link {
  position: absolute; inset-inline-start: var(--ms-spacing_16); inset-block-start: var(--ms-spacing_8);
  z-index: 10; transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-list, .case-facts, .layers { list-style: none; margin: 0; padding: 0; }
.hl { color: var(--ms-color_mainContent); }
strong { font-weight: var(--ms-typographyWeight_600); }

/* ---------------------------------------------------------------- Logo
   El isotipo conserva sus colores de marca; el nombre sigue al Modo y al Contraste alto. */
.brand { display: inline-flex; align-items: center; color: inherit; border-radius: var(--ms-radiusRole_action); }
.logo { display: block; block-size: var(--ms-spacing_28); inline-size: auto; }
.logo-word { fill: #F3144A; }
/* Logo del encabezado: se eleva en hover y foco (sube y proyecta sombra, como motionTransition_elevation) */
.site-brand .logo { transition: transform var(--ms-motionDuration_fast) var(--ms-motionBezier_easeOut), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_easeOut); }
.site-brand:is(:hover, :focus-visible) .logo { transform: translateY(-2px); filter: drop-shadow(0 6px 6px color-mix(in oklab, var(--ms-color_dark) 22%, transparent)); }
@media (prefers-reduced-motion: reduce) { .site-brand:is(:hover, :focus-visible) .logo { transform: none; } }
:root[data-ms-motion="reduce"] .site-brand:is(:hover, :focus-visible) .logo { transform: none; }
:root[data-ms-mode="dark"] .logo-word, :root[data-ms-high-contrast] .logo-word { fill: var(--ms-color_content); }
@media (prefers-contrast: more) { .logo-word { fill: var(--ms-color_content); } }

/* ---------------------------------------------------------------- Encabezado
   Desde layoutSpace_expanded se ve la navegación completa; por debajo, un Button abre el menú. */
.site-burger { display: none; }
@container (max-width: 59.99rem) {
  .site-nav, .site-lang, .site-mode { display: none; }
  .site-burger { display: inline-flex; }
}

/* Menú móvil: <dialog> modal nativo con la estructura de Sidebar y un Nav menu adentro. */
.site-menu {
  position: fixed; inset-block: 0; inset-inline: auto 0; margin: 0; padding: 0;
  inline-size: min(100%, 22rem); block-size: 100dvh; max-inline-size: 100%; max-block-size: 100dvh;
  border: 0; border-inline-start: var(--ms-stroke_1) solid var(--ms-color_border_neutral, var(--ms-color_border)); border-radius: 0;
  /* Divisiones neutras, como el borde del encabezado (border_neutral también cumple 3:1) */
  --ms-color_border: var(--ms-color_border_neutral);
  /* Ítems más grandes que en un Sidebar de escritorio: el Alias del Nav menu, ajustado solo aquí */
  --ms-navMenuItemTextStyle_family: var(--ms-textStyle_titleM_family);
  --ms-navMenuItemTextStyle_size: var(--ms-textStyle_titleM_size);
  --ms-navMenuItemTextStyle_lineHeight: var(--ms-textStyle_titleM_lineHeight);
  --ms-navMenuItemTextStyle_weight: var(--ms-textStyle_titleM_weight);
}
.site-menu:not([open]) { display: none; }
.site-menu::backdrop { background: rgb(0 0 0 / 0.45); }
.site-menu[open] { animation: menu-in var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut); }
@keyframes menu-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .site-menu[open] { animation: none; } }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-texture {
  position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 36%, #000 80%), linear-gradient(to bottom, #000 45%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 36%, #000 80%), linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-composite: intersect;
}
.hero-texture .tx-lines path { fill: none; stroke: var(--ms-color_mainContent); stroke-opacity: 0.13; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-texture .tx-guides :is(circle, path) { fill: none; stroke: var(--ms-color_mainContent); stroke-opacity: 0.22; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-texture .tx-nodes circle { fill: var(--ms-color_mainContent); fill-opacity: 0.32; }
.hero-texture .tx-probe circle { fill: none; stroke: var(--ms-color_mainContent); stroke-opacity: 0.3; stroke-width: 1; vector-effect: non-scaling-stroke; }
:root[data-ms-high-contrast] .hero-texture { display: none; }
@media (prefers-contrast: more) { .hero-texture { display: none; } }
.hero h1 { margin: 0; }
.hero h1 .line { display: block; }

/* ---------------------------------------------------------------- Secciones */
.section-head { margin-inline: auto; max-inline-size: 48rem; }

.browser {
  display: block; margin: 0; overflow: hidden;
  border: var(--ms-stroke_1) solid var(--ms-color_border_neutral, var(--ms-color_border));
  border-radius: var(--ms-radiusRole_media);
  background: var(--ms-color_mantle);
}
.browser-bar {
  display: flex; align-items: center; gap: var(--ms-spacing_8);
  padding: var(--ms-spacing_8) var(--ms-spacing_12);
  border-block-end: var(--ms-stroke_1) solid var(--ms-color_border_neutral, var(--ms-color_border));
  background: var(--ms-color_canvas);
}
.browser-dots { display: flex; gap: var(--ms-spacing_4); }
.browser-dots span { inline-size: var(--ms-spacing_8); block-size: var(--ms-spacing_8); border-radius: var(--ms-radius_full); background: var(--ms-color_border_neutral, var(--ms-color_border)); }
.browser img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1463 / 746; object-fit: cover; }

.case-facts dt { margin-block-start: var(--ms-spacing_16); letter-spacing: 0.06em; }
.case-facts dt:first-child { margin-block-start: 0; }
.case-facts dd { margin: 0; }
.layers li + li { margin-block-start: var(--ms-spacing_12); }

/* Diagramas: SVG con los colores del Tema, así siguen el Modo y el Contraste alto. */
.diagram {
  margin: 0; padding: var(--ms-spacing_24);
  box-sizing: border-box; inline-size: 100%; min-inline-size: 0;
  border: var(--ms-stroke_1) solid var(--ms-color_border_neutral, var(--ms-color_border));
  border-radius: var(--ms-radiusRole_container);
  background: var(--ms-color_mantle);
}
.diagram svg { display: block; inline-size: 100%; block-size: auto; }
.diagram figcaption { margin-block-start: var(--ms-spacing_16); }
.diagram text { font-family: var(--ms-typographyFamily_sans), sans-serif; fill: var(--ms-color_content); font-size: 14px; }
.diagram .t-h { font-family: var(--ms-typographyFamily_slab), sans-serif; font-weight: 400; font-size: 18px; }
.diagram .t-s { font-size: 13px; }
.diagram .box { fill: var(--ms-color_canvas); stroke: var(--ms-color_border_neutral, var(--ms-color_border)); stroke-width: 1; rx: 6px; }
.diagram .box-main { fill: var(--ms-color_canvas); stroke: var(--ms-color_mainContent); stroke-width: 2; rx: 6px; }
.diagram .swatch { rx: 4px; }
.diagram .line { stroke: var(--ms-color_border_neutral, var(--ms-color_border)); stroke-width: 1.5; fill: none; }
.diagram .accent { stroke: var(--ms-color_mainContent); stroke-width: 2; fill: none; }
.diagram .dashed { stroke-dasharray: 5 4; }
.diagram .on-tile { fill: #2c0006; }
.diagram .edge { stroke: var(--ms-color_border_neutral, var(--ms-color_border)); stroke-width: 1; }
/* En pantallas angostas el diagrama se desplaza en horizontal para que el texto siga legible. */
.diagram-scroll { overflow-x: auto; }
.diagram-scroll svg { min-inline-size: 32rem; }

/* ---------------------------------------------------------------- Cards de otros proyectos
   Hover y foco: la Card toma el fondo mantle (blanco sobre mantleHigh) y la captura se acerca. */
.project-card { transition: background-color var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut); }
.project-card .browser img { transition: transform var(--ms-motionDuration_slow) var(--ms-motionBezier_easeOut); }
.project-card:is(:hover, :focus-within) { background-color: var(--ms-color_mantle); }
.project-card:is(:hover, :focus-within) .browser img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .project-card:is(:hover, :focus-within) .browser img { transform: none; }
}
:root[data-ms-motion="reduce"] .project-card:is(:hover, :focus-within) .browser img { transform: none; }

/* ---------------------------------------------------------------- Footer */
.footer-contact { max-inline-size: 30rem; }