/* =====================================================================
   Sistema visual · Manual de marca "Dr. Álvaro Caviedes" (v1.4) + ampliación web (9-oct-2026)
   - Paleta: Marfil/Bruma/Arena (60 %) · Teal Profundo/Tinta/Teal Medio (30 %) · Latón (≤10 %, solo gráficos).
   - Ampliación web (ver marca/NOTAS-PARA-EL-MANUAL.md): Arena línea #D8CDB8, Latón firme #9A7444 (marcas con significado
     sobre claro, ≥3:1) y, en oscuro, Teal Claro #8EC2C5 (acciones) + Teal Bruma #A9CFD0 (enlaces; ya está en el logo oscuro).
   - Tipografía: Jost (títulos, etiquetas, interfaz) + Source Serif 4 (texto corrido). Alojadas en /assets/fonts (sin terceros: LGPD).
   - Contraste medido (WCAG 2.x): texto ≥ 12:1, secundario ≥ 6,6:1, enlaces y etiquetas ≥ 5:1, botones ≥ 7,7:1,
     contornos de controles ≥ 3:1, bordes de tarjeta ≈ 1,5:1 (no son controles: basta con que se vean).
   ===================================================================== */

@font-face { font-family: "Jost"; src: url("../assets/fonts/jost-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-italic-var.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root { /* CLARO */
  color-scheme: light;
  --bg: #F7F4EE;              /* Marfil: fondo base */
  --surface: #FFFFFF;         /* tarjetas (1,10:1 sobre Marfil: la separación la dan borde y sombra) */
  --border: #D8CDB8;          /* Arena línea: borde de tarjetas (1,57:1 sobre blanco; Arena #E7DFD0 daba 1,32:1) */
  --border-soft: #E7DFD0;     /* Arena: divisiones internas */
  --border-strong: #7D9391;   /* contorno de controles (3,2:1) */
  --text: #062A30;            /* Tinta · 13,9:1 */
  --muted: #3F5B5F;           /* 6,7:1 */
  --primary: #0B4A52;         /* Teal Profundo: acciones · 9,0:1 con Marfil */
  --primary-hover: #062A30;
  --primary-ink: #F7F4EE;
  --heading: #0B4A52;
  --link: #236E75;            /* Teal Medio · 5,4:1 */
  --label: #236E75;
  --brass: #B98F58;           /* Latón: filetes, puntos, guiños (decorativo) */
  --brass-strong: #85633A;    /* Latón firme: marca con significado sobre claro (≈5,4:1 sobre blanco; antes #9A7444, 4,2:1) */
  --icon-accent: #B98F58;     /* guiño de los iconos */
  --soft: #E7F1F0;            /* Bruma suave: burbujas de iconos, chips */
  --deep: #0B4A52;            /* banda teal */
  --deep-ink: #F7F4EE;
  --deep-accent: #CDAA72;
  --trace: .3;
  --bgtrace: .13;             /* capnografía de fondo (al abrir una página o un desplegable) */
  --shadow: 0 1px 2px rgba(6, 42, 48, .06), 0 8px 24px rgba(6, 42, 48, .07);
  --shadow-hover: 0 2px 4px rgba(6, 42, 48, .07), 0 14px 32px rgba(6, 42, 48, .11);
  --show-light: block; --show-dark: none;
  --font-ui: "Jost", Arial, "Helvetica Neue", sans-serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --measure: 74rem;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --date-col: 8.5rem;
}
/* Modo oscuro: fondo casi neutro con tinte teal mínimo; elevación por luminosidad (fondo 1,0 → tarjeta 1,18:1 → burbuja 1,3:1);
   el color de acción es un teal claro de la marca (no el latón): así el oscuro se lee como la misma marca que el claro.
   El latón claro queda para etiquetas pequeñas, filetes, puntos y guiños. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { /* OSCURO (automático) */
    color-scheme: dark;
    --bg: #0F1618; --surface: #1A2629; --border: #33444A; --border-soft: #26353A; --border-strong: #7A9397;
    --text: #E8E5DE; --heading: #E8E5DE; --muted: #B5C0C0;
    --primary: #8EC2C5; --primary-hover: #A9CFD0; --primary-ink: #062A30;
    --link: #A9CFD0; --label: #CDAA72; --brass: #CDAA72; --brass-strong: #CDAA72; --icon-accent: #CDAA72;
    --soft: #1E3135; --deep: #0C3B42; --trace: .3; --bgtrace: .16;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .18); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .28);
    --show-light: none; --show-dark: block;
  }
}
:root[data-theme="dark"] { /* OSCURO (elegido con el botón) */
  color-scheme: dark;
  --bg: #0F1618; --surface: #1A2629; --border: #33444A; --border-soft: #26353A; --border-strong: #7A9397;
  --text: #E8E5DE; --heading: #E8E5DE; --muted: #B5C0C0;
  --primary: #8EC2C5; --primary-hover: #A9CFD0; --primary-ink: #062A30;
  --link: #A9CFD0; --label: #CDAA72; --brass: #CDAA72; --brass-strong: #CDAA72; --icon-accent: #CDAA72;
  --soft: #1E3135; --deep: #0C3B42; --trace: .3; --bgtrace: .16;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .18); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .28);
  --show-light: none; --show-dark: block;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-align: left; }
img { max-width: 100%; }
a { color: var(--link); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; text-underline-offset: 3px; } }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
main, .footer { position: relative; z-index: 1; }
h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 500; color: var(--heading); }
.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--primary); color: var(--primary-ink); padding: 10px 16px; border-radius: var(--r-sm); font-family: var(--font-ui); }
.skip:focus { left: 8px; }

/* Iconos: trazo principal en el color del texto y UN guiño (.acc) en latón, como el símbolo (manual: Iconografía) */
svg.i { width: 1.2em; height: 1.2em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; }
svg.i .acc { stroke: var(--icon-accent); }
.btn svg.i .acc, .topbar svg.i .acc, .totop svg.i .acc, .more svg.i .acc, .textlink svg.i .acc, .card__go svg.i .acc, .pager svg.i .acc, .cite svg.i .acc { stroke: currentColor; }

/* Etiqueta: Jost 500, MAYÚSCULAS, tracking +20 %, Teal Medio (Latón claro en oscuro) */
.entry__date { font-family: var(--font-ui); font-weight: 500; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.label, .crumbs { font-family: var(--font-ui); font-weight: 500; font-size: .88rem; letter-spacing: .02em; color: var(--label); }
.fillet { display: block; width: 36px; height: 2px; background: var(--brass); border: 0; margin: 14px 0; }

/* ---------- Barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); }
.topbar .wrap { max-width: 80rem; }
.topbar__inner { display: flex; align-items: center; gap: 10px; height: 60px; }
.brand { display: flex; align-items: center; flex: none; min-height: 44px; border-radius: 6px; }
.brand img { height: 32px; width: auto; }
.brand__l { display: var(--show-light); }
.brand__d { display: var(--show-dark); }
.topbar__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar #themeBtn { display: none; }
.topnav { display: none; align-items: center; gap: 2px; margin-left: 18px; }
.topnav a, .menu__nav a { font-family: var(--font-ui); color: var(--muted); font-size: .98rem; font-weight: 500; padding: 8px 12px; border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) { .topnav a:hover, .menu__nav a:hover { color: var(--primary); background: var(--soft); text-decoration: none; } }
.topnav a[aria-current="page"] { color: var(--heading); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }
.topnav a.navcta { margin-left: 8px; background: var(--primary); color: var(--primary-ink); border-radius: var(--r-pill); padding: 8px 18px; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .topnav a.navcta:hover { background: var(--primary-hover); color: var(--primary-ink); } }

/* Menú (teléfono y tableta): lista de una columna, con tema y CV al final */
.menu { border-top: 1px solid var(--border-soft); background: var(--surface); padding: 8px 16px 18px; box-shadow: var(--shadow); max-height: calc(100vh - 60px); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__nav { display: grid; gap: 2px; }
.menu__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 12px; font-size: 1.1rem; color: var(--text); }
.menu__nav a[aria-current="page"] { background: var(--soft); color: var(--heading); box-shadow: inset 3px 0 0 var(--brass); }
.menu__tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.menu__tools .btn { flex: 1 1 auto; min-height: 46px; }

.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); }
.lang button { font-family: var(--font-ui); font-size: .8rem; font-weight: 600; letter-spacing: .06em; min-width: 44px; min-height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .lang button:hover { color: var(--text); } }
.lang button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { border-color: var(--primary); color: var(--primary); } }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; font-family: var(--font-ui); font-size: 1rem; font-weight: 500; letter-spacing: .01em; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
.btn { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease, background-color 160ms ease; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; } }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-ink); } }
.btn .i { transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .btn:hover .i-arrow { transform: translateX(3px); } }
.actions { display: grid; gap: 10px; margin-top: 24px; }
.orcid { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #A6CE39; color: #062A30; font-family: var(--font-ui); font-size: .62rem; font-weight: 700; flex: none; }

.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); }
@media (hover: hover) and (pointer: fine) { .social a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; } }
.social .i { font-size: 1.15rem; }

/* ---------- Hero (inicio) ---------- */
.hero { position: relative; padding: 24px 0 72px; display: grid; gap: 22px; overflow: hidden; }
.hero__copy { position: relative; z-index: 1; }
.hero h1 { margin: 12px 0 0; font-size: clamp(2rem, 7.2vw, 3.7rem); line-height: 1.08; letter-spacing: .005em; }
.hero__title { margin: 12px 0 0; font-family: var(--font-ui); font-size: 1.15rem; font-weight: 500; color: var(--text); }
.hero__tag { margin: 16px 0 0; max-width: 38rem; font-size: 1.08rem; }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 16px 6px 12px; border-radius: var(--r-pill); background: var(--soft); border: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--text); }
.status::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 25%, transparent); }
.hero__visual { order: -1; position: relative; margin: 4px auto 0; width: min(190px, 52vw); aspect-ratio: 1; display: grid; place-items: center; }
.hero__photo { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; height: auto; border: 5px solid var(--surface); box-shadow: 0 0 0 2px var(--brass), var(--shadow); }
.trace { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; width: 100%; color: var(--primary); opacity: var(--trace); pointer-events: none; }



/* ---------- Bloques de la portada ---------- */
.block { margin-top: 64px; }
.block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 22px; }
.block__head h2 { margin: 8px 0 0; font-size: clamp(1.6rem, 4.6vw, 2.3rem); line-height: 1.15; }
.block__head .label { margin: 0; }
.lead-text { margin: 0; max-width: 44rem; font-size: 1.12rem; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-ui); font-weight: 500; font-size: 1.02rem; }
@media (hover: hover) and (pointer: fine) { .textlink:hover .i-arrow { transform: translateX(3px); } }
.textlink .i-arrow { transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }


.band { position: relative; overflow: hidden; margin-top: 64px; padding: 32px 20px 56px; border-radius: var(--r-lg); background: var(--deep); color: var(--deep-ink); }
.band h2 { margin: 0; color: var(--deep-ink); font-size: clamp(1.6rem, 4.4vw, 2.2rem); line-height: 1.2; }
.band .label { color: var(--deep-accent); }
.band .fillet { background: var(--deep-accent); }
.band p { margin: 0; max-width: 40rem; font-size: 1.08rem; color: var(--deep-ink); }
.band .btn { background: transparent; border-color: color-mix(in srgb, var(--deep-ink) 55%, transparent); color: var(--deep-ink); }
@media (hover: hover) and (pointer: fine) { .band .btn:hover { border-color: var(--deep-ink); background: color-mix(in srgb, var(--deep-ink) 10%, transparent); } }
.band .btn--primary { background: var(--deep-ink); border-color: var(--deep-ink); color: #062A30; } /* Marfil + Tinta: 13,9:1 (antes Latón claro) */
@media (hover: hover) and (pointer: fine) { .band .btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #062A30; } }
.band .btn--primary .i .acc { stroke: #9A7444; }
.trace--live { display: block; }
.hero .trace--live { height: 72px; }
.band .trace--live { height: 44px; }
.band .trace { color: var(--deep-accent); opacity: .25; }
.band > * { position: relative; z-index: 1; }
.band > .trace { position: absolute; z-index: 0; }

/* Capnografía de fondo: muy tenue, aparece al llegar a una página o al abrir un desplegable y se desvanece sola */
.bgtrace { position: fixed; left: 0; right: 0; top: 0; height: 150px; z-index: 0; pointer-events: none; opacity: 0; color: var(--primary); transition: opacity 400ms ease; }
.bgtrace.on { opacity: var(--bgtrace); transition: opacity 600ms cubic-bezier(.23, 1, .32, 1); }
.bgtrace canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
:root[data-theme="dark"] .bgtrace { color: var(--deep-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bgtrace { color: var(--deep-accent); } }

/* ---------- Cabecera de páginas interiores ---------- */
.pagehead { position: relative; padding: 26px 0 4px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .88rem; }
.crumbs a { color: var(--label); }
.crumbs .sep { opacity: .6; }
.pagehead h1 { margin: 12px 0 0; font-size: clamp(2rem, 6.4vw, 3.2rem); line-height: 1.1; letter-spacing: .005em; }
.pagehead__lead { margin: 0; max-width: 40rem; font-size: 1.12rem; color: var(--muted); }

/* Página interior: contenido + columna lateral fija (desde 1000 px) */
.page__grid { display: grid; gap: 40px; margin-top: 36px; }
.page__main > .section:first-child { margin-top: 0; }
.page__main { min-width: 0; }
.page__aside { display: none; }
.ficha { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); }
.ficha__who { display: flex; align-items: center; gap: 12px; }
.ficha__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--brass); }
.ficha__name { margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: 1rem; line-height: 1.25; color: var(--heading); }
.ficha__role { margin: 2px 0 0; font-family: var(--font-ui); font-size: .84rem; color: var(--muted); line-height: 1.3; }
.ficha .status, .profile .status { display: flex; margin-top: 14px; padding: 8px 12px; border-radius: 12px; font-size: .84rem; line-height: 1.35; text-align: left; }
.ficha .btn { width: 100%; margin-top: 10px; min-height: 44px; font-size: .95rem; }
.ficha .btn:first-of-type { margin-top: 16px; }
.toc { margin-top: 22px; padding-left: 4px; }
.toc .label { margin: 0 0 8px; font-size: .84rem; }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--border); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-family: var(--font-ui); font-size: .9rem; line-height: 1.35; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--primary); text-decoration: none; } }
.toc a.on { color: var(--heading); border-left-color: var(--brass); }
.toc .toc__sub a { padding-left: 26px; font-size: .84rem; }

/* ---------- Secciones ---------- */
.page { padding-bottom: 8px; }
.section { margin-top: 36px; }
.section + .section { margin-top: 64px; }
.section__head { margin-bottom: 20px; }
.section h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 1.95rem); line-height: 1.2; }
.section__head .fillet { margin: 12px 0 0; }
.section__intro { margin: 12px 0 0; max-width: 40rem; color: var(--muted); }
.summary { margin: 0; max-width: 42rem; font-size: 1.12rem; line-height: 1.65; }
.prose { max-width: 42rem; }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin: 0; }
.quote { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--brass); max-width: 40rem; font-style: italic; font-size: 1.15rem; line-height: 1.55; color: var(--heading); }
.quote p { margin: 0 0 12px; }
.quote p:last-child { margin: 0; }

/* Desplegables ("Saber más") */
.more { margin-top: 12px; }
.more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; color: var(--link); font-family: var(--font-ui); font-size: 1rem; font-weight: 500; cursor: pointer; list-style: none; user-select: none; }
.more > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .more > summary:hover { text-decoration: underline; text-underline-offset: 3px; } }
.more > summary .i, .cgroup > summary .i { transition: transform .2s; }
.more[open] > summary .i { transform: rotate(180deg); }
.more__body { margin-top: 4px; padding: 16px 18px; border-left: 2px solid var(--brass); background: var(--soft); border-radius: 0 12px 12px 0; font-size: 1rem; max-width: 44rem; }
.more--sm { margin-top: 4px; }
.more--sm > summary { font-size: .95rem; }
.certview img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--border-strong); border-radius: 10px; }
.certview .entry__links { margin-top: 6px; }

/* Línea de tiempo (teléfono: fecha encima; desde 720 px: fecha en su propia columna) */
.timeline { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; max-width: 52rem; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--border-strong); opacity: .55; }
.tl { position: relative; padding: 0 0 32px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: -26px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--primary); }
.tl:first-child::before { background: var(--brass-strong); border-color: var(--brass-strong); }
.entry__date { margin: 0; font-size: .78rem; font-variant-numeric: tabular-nums; }
.entry__date:empty { display: none; }
.entry__title { margin: 6px 0 0; font-size: 1.22rem; line-height: 1.3; }
.entry__sub { margin: 3px 0 0; color: var(--muted); font-family: var(--font-ui); font-size: .98rem; }
.entry__note { margin: 10px 0 0; font-size: 1rem; }
.entry ul { margin: 10px 0 0; padding-left: 1.15rem; }
.entry li { margin: 8px 0; font-size: 1rem; }
.entry li::marker { color: var(--brass); }
.entry li > b.lead { font-family: var(--font-ui); font-weight: 500; font-size: 1.02em; color: var(--heading); }
.entry__links { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.entry__link { display: inline-flex; align-items: center; min-height: 40px; font-family: var(--font-ui); font-size: .95rem; font-weight: 500; }
.tag { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: var(--r-pill); background: var(--soft); color: var(--heading); font-family: var(--font-ui); font-size: .76rem; font-weight: 500; vertical-align: 3px; white-space: nowrap; }
.tag--ok { background: transparent; border: 1px solid var(--border-strong); }
.tag--old { background: transparent; border: 1px dashed currentColor; color: var(--muted); }
.rot + .rot { margin-top: 16px; }
.rot h4 { margin: 0 0 4px; font-size: 1.05rem; }
.rot ul { margin: 0; padding-left: 1.15rem; }

/* Publicaciones (formato académico: revista en cursiva, rol, DOI y "Copiar cita") */
.pubs { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.pub { padding: 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.pub__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.badge { padding: 2px 12px; border-radius: var(--r-pill); background: var(--soft); color: var(--heading); font-family: var(--font-ui); font-size: .78rem; font-weight: 500; }
.badge--review { background: color-mix(in srgb, var(--brass) 20%, var(--surface)); color: var(--text); }
.pub__date { font-family: var(--font-ui); font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pub h3 { margin: 0; font-size: 1.2rem; line-height: 1.35; }
.pub__venue { margin: 6px 0 0; color: var(--muted); font-family: var(--font-text); font-size: 1rem; }
.pub__venue i { color: var(--text); }
.pub__role { margin: 10px 0 0; font-size: .98rem; }
.pub__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
.cite { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: transparent; color: var(--text); font-family: var(--font-ui); font-size: .9rem; font-weight: 500; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .cite:hover { border-color: var(--primary); color: var(--primary); } }
.cite[data-done] { border-color: var(--primary); color: var(--primary); }
.pub .more__body { background: var(--soft); }
.authors { margin: 0 0 10px; font-size: .96rem; color: var(--muted); }
.authors strong { color: var(--text); }

/* Certificados */
.cgroup { border: 1px solid var(--border); border-radius: var(--r-md); margin-top: 12px; background: var(--surface); max-width: 52rem; }
.cgroup:first-child { margin-top: 0; }
.cgroup > summary { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 16px; font-family: var(--font-ui); font-size: 1.06rem; font-weight: 500; color: var(--heading); cursor: pointer; list-style: none; }
.cgroup > summary::-webkit-details-marker { display: none; }
.cgroup > summary .count { margin-left: auto; padding: 1px 11px; border-radius: var(--r-pill); background: var(--soft); color: var(--heading); font-size: .82rem; }
.cgroup > summary .i { color: var(--muted); }
.cgroup[open] > summary .i { transform: rotate(180deg); }
.cgroup__body { padding: 8px 16px 22px 20px; }
.cgroup__note { margin: 6px 0 18px; padding-left: 14px; border-left: 2px solid var(--border); color: var(--muted); font-size: 1rem; }
.docsnote { margin: 22px 0 0; max-width: 52rem; padding: 14px 18px; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: .96rem; }

/* Habilidades e idiomas */
.skills__name { margin-bottom: 12px; font-family: var(--font-ui); font-size: 1.1rem; font-weight: 500; color: var(--heading); }
.langs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.langs li { display: grid; gap: 2px; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.langs b { font-family: var(--font-ui); font-weight: 500; font-size: 1.15rem; color: var(--heading); }
.langs span { color: var(--muted); font-size: 1rem; }


/* Tarjeta de perfil (sobre mí): retrato 4:5 (la portada conserva el círculo) */
.about { display: grid; gap: 28px; margin-top: 32px; }
.about > div > .section:first-child { margin-top: 0; }
.page__grid--solo .about { margin-top: 0; }
.profile { padding: 18px 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); text-align: center; align-self: start; }
.profile__photo { display: block; width: 100%; max-width: 260px; margin: 0 auto; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--border), inset 0 0 0 1px rgba(0,0,0,.04); }
.profile__frame { position: relative; max-width: 260px; margin: 0 auto; }
.profile__frame::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--brass); }
.profile h2 { margin: 18px 0 0; font-size: 1.35rem; line-height: 1.25; }
.profile__role { margin: 6px 0 0; font-family: var(--font-ui); color: var(--label); font-weight: 500; }
.profile__loc { margin: 4px 0 0; color: var(--muted); font-family: var(--font-ui); font-size: .98rem; }
.profile .social { justify-content: center; }

/* Contacto */
.contact { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.contact a, .contact button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: 1.02rem; font-weight: 500; text-align: left; word-break: break-word; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .contact a:hover, .contact button:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; } }
.contact .i { color: var(--heading); font-size: 1.35rem; }

/* Navegación entre páginas */
.pager { display: grid; gap: 12px; margin-top: 64px; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
@media (hover: hover) and (pointer: fine) { .pager a:hover { border-color: var(--primary); text-decoration: none; } }
.pager .label { margin: 0; font-size: .86rem; }
.pager strong { font-family: var(--font-ui); font-weight: 500; font-size: 1.25rem; color: var(--heading); display: inline-flex; align-items: center; gap: 10px; }
.pager .next { text-align: right; align-items: flex-end; }
.pager .prev .i-arrow { transform: rotate(180deg); }

/* Pie */
.footer { margin-top: 72px; padding: 40px 0 36px; border-top: 1px solid var(--border-soft); color: var(--muted); font-family: var(--font-ui); font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.footer__brand { grid-column: 1 / -1; }
.footer__brand img { height: 40px; width: auto; }
.footer__brand p { margin: 12px 0 0; max-width: 22rem; }
.footer__h { margin: 0 0 10px; font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--heading); }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); word-break: break-word; }
@media (hover: hover) and (pointer: fine) { .footer li a:hover { color: var(--primary); } }
.footer__small { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: .88rem; }

.totop { position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 15; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 50%; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); box-shadow: var(--shadow); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.totop[hidden] { display: none; }

/* Aparición al desplazar (solo si JS lo activa y no hay reduced-motion) */
.js-reveal .reveal { opacity: 0; transform: translateY(8px); transition: opacity 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---------- Tableta y escritorio ---------- */
@media (min-width: 560px) {
  .actions { display: flex; flex-wrap: wrap; gap: 12px; }
}
@media (min-width: 720px) {
  body { font-size: 1.125rem; }
  .wrap { padding: 0 32px; }
  .topbar__inner { height: 68px; gap: 14px; }
  .brand img { height: 38px; }
  .topbar #themeBtn { display: inline-grid; }
  .menu .menu__theme { display: none; }
  .hero { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; padding: 56px 0 100px; }
  .hero__visual { order: 0; margin: 0 auto; width: 100%; max-width: 320px; justify-self: end; }
  .hero__title { font-size: 1.25rem; }
  .hero__tag { font-size: 1.15rem; }
  .hero .trace--live { height: 84px; }
  .lead-text { font-size: 1.2rem; }
  

  .band { margin-top: 80px; padding: 52px 56px 76px; }
  .band .trace--live { height: 56px; }
  .pagehead { padding-top: 40px; }
  .section { margin-top: 44px; }
  .page__grid { margin-top: 44px; }
  .section + .section { margin-top: 72px; }
  .contact { grid-template-columns: 1fr 1fr; }
  .langs { grid-template-columns: repeat(3, 1fr); }
  .about { grid-template-columns: 280px 1fr; gap: 56px; margin-top: 44px; }
  .about .profile { position: sticky; top: 92px; }
  .profile__photo { max-width: none; }
  .profile__frame { max-width: none; }
  .pager { grid-template-columns: 1fr 1fr; margin-top: 80px; }
  .pager a:only-child.next { grid-column: 2; }
  .footer { margin-top: 88px; padding: 44px 0 40px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
  .footer__brand { grid-column: auto; }
  .pub { padding: 24px; }
  .cgroup > summary { padding: 0 20px; min-height: 60px; font-size: 1.1rem; }
  .cgroup__body { padding: 10px 20px 24px 22px; }

  /* Fecha en su propia columna, a la izquierda de la línea */
  .timeline { padding-left: 0; }
  .timeline::before { left: calc(var(--date-col) + 18px); }
  .tl { display: grid; grid-template-columns: var(--date-col) minmax(0, 1fr); column-gap: 44px; }
  .tl > * { grid-column: 2; }
  .tl > .entry__date { grid-column: 1; grid-row: 1 / span 12; padding-top: 3px; text-align: right; line-height: 1.5; }
  .tl::before { left: calc(var(--date-col) + 12px); }
  .tl > .entry__title { margin-top: 0; }
  .cgroup .timeline { --date-col: 7.2rem; }
}
@media (min-width: 1000px) {


  .page__grid { grid-template-columns: minmax(0, 1fr) 17rem; gap: 64px; align-items: start; }
  .page__aside { display: block; position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; padding-bottom: 8px; }
  .page__grid--solo { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1040px) {
  .topnav { display: flex; }
  .menubtn { display: none; }
  .menu { display: none !important; }
  .tabsbar { display: none; }
}
@media (min-width: 1040px) and (max-width: 1180px) {
  .topnav { margin-left: 10px; gap: 0; }
  .topnav a { padding: 8px 9px; font-size: .92rem; }
  .topnav a.navcta { margin-left: 4px; padding: 8px 14px; }
}
@media (max-width: 380px) {
  .topbar__inner, .topbar__tools { gap: 6px; }
  .brand img { height: 28px; }
  .iconbtn { width: 44px; height: 44px; }
}

/* ---------- Impresión ---------- */
@media print {
  :root:root:root { --bg: #fff; --surface: #fff; --soft: #f5f5f5; --border: #ccc; --text: #111; --muted: #444; --primary: #0B4A52; --link: #0B4A52; --shadow: none; --show-light: block; --show-dark: none; }
  @page { size: A4; margin: 14mm; }
  body { font-size: 11pt; }
  .topbar, .totop, .skip, .more > summary .i, .trace, .bgtrace, .pager, .actions, .social, .page__aside, .cite, .art, .trail__svg, .pleth, .doors, .close, .tof { display: none !important; }
  .page__grid { display: block; }
  .more[open] > summary, .more > summary { display: none; }
  .more__body { display: block; }
  .band { background: none; color: #111; border: 1px solid #ccc; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn .i, .textlink .i-arrow, .more > summary .i, .cgroup > summary .i { transition: none; }
  .btn:active { transform: none; }
  .bgtrace { display: none; }
}

/* Historial de emisiones anteriores de un certificado (renovaciones) */
.history { list-style: none; margin: 4px 0 0; padding: 0 0 0 18px; border-left: 1px dashed var(--border-strong); }
.history__item { position: relative; padding: 2px 0 14px; }
.history__item:last-child { padding-bottom: 2px; }
.history__item::before { content: ""; position: absolute; left: -23px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--muted); }
.history__date { margin: 0; color: var(--muted); font-family: var(--font-ui); font-size: .9rem; }
.history__date .tag { margin-left: 8px; vertical-align: 1px; }
.history__title { margin: 2px 0 0; color: var(--heading); font-family: var(--font-ui); font-size: 1rem; font-weight: 500; }
.history .entry__sub { font-size: .92rem; }

/* =====================================================================
   Rediseño 20-oct-2026 (propuestas 1 + 3): puertas, «Ahora», trayectoria con línea que respira, figuras en línea ligadas al scroll,
   certificados con vista previa, cierre común. Todo con los tokens de arriba (claro y oscuro). Movimiento: solo transform, opacity y
   trazo SVG; entradas con --ease-out; todo queda dibujado y quieto con prefers-reduced-motion o sin soporte.
   ===================================================================== */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1); }

/* Puertas (mismo sitio, mismo enlace: la puerta cambia el énfasis) */
.doors { margin-top: 8px; }
.doors__pick { margin: 0 0 12px; font-family: var(--font-ui); font-weight: 500; color: var(--muted); }
.doors__row { display: grid; gap: 12px; }
.door { display: grid; gap: 4px; min-height: 44px; padding: 18px 20px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out); }
.door__t { font-family: var(--font-ui); font-weight: 500; font-size: 1.15rem; color: var(--heading); }
.door__d { color: var(--muted); font-size: 1rem; }
.door.is-on { background: var(--soft); border-color: var(--primary); box-shadow: inset 4px 0 0 var(--brass); }
.door:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .door:hover { border-color: var(--primary); } }
.doors__mode { margin-top: 10px; background: none; border: 0; cursor: pointer; padding: 0; }
@media (min-width: 720px) { .doors__row { grid-template-columns: 1fr 1fr; } }

/* Ahora (fechado) */
.now { margin-top: 44px; }
.now__h { margin: 0 0 12px; font-size: 1.4rem; }
.now__h time { font-family: var(--font-ui); font-weight: 400; color: var(--muted); }
.now ul { display: grid; gap: 8px; max-width: 46rem; margin: 0; padding: 0; list-style: none; }
.now li { position: relative; padding-left: 20px; }
.now__k { font-weight: 600; }
.now li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--brass); }

/* Cifras reales en una frase */
.facts { display: grid; gap: 10px; max-width: 60rem; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.facts p { margin: 0; }
.facts__line { font-size: 1.15rem; line-height: 1.75; }
.facts__line b { font-family: var(--font-ui); font-weight: 500; color: var(--heading); font-variant-numeric: tabular-nums; }
.facts .dot { display: inline-block; margin: 0 .55em; color: var(--brass-strong); }
.facts__langs, .facts__creds { font-family: var(--font-ui); color: var(--muted); font-size: 1rem; }
.facts__creds { font-size: .94rem; }
.why { margin-top: 64px; }
.why .block__head { margin-bottom: 14px; }

/* Trayectoria: una línea que respira y pasa por cada hito */
.story-home { margin-top: 72px; }
.trail { position: relative; max-width: 52rem; padding-left: 84px; }
.trail__svg { position: absolute; left: 0; top: 0; width: 56px; overflow: visible; color: var(--primary); }
.trail__svg path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: .6; }
.trail__list { display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
.trail__item { position: relative; }
.trail__item::before { content: ""; position: absolute; left: -77px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brass-strong); }
.trail__item h3 { margin: 6px 0 0; font-size: 1.25rem; line-height: 1.3; }
.trail__item h3 a { color: inherit; }
.trail__item p:not(.entry__date) { margin: 4px 0 0; max-width: 40rem; color: var(--muted); }

/* Figuras en línea (Sobre mí): cada tramo es una fila con el texto y su figura al lado; se traza al pasar por la pantalla */
.story { position: relative; display: grid; gap: 24px 56px; align-items: center; padding-block: 40px; border-top: 1px solid var(--border-soft); }
.story .text { max-width: 40rem; }
.story .text h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 4vw, 1.95rem); line-height: 1.2; }
.story .text p { margin: 0 0 1.1em; }
.art { display: grid; place-items: center; pointer-events: none; }
.art svg { display: block; width: auto; max-width: 100%; height: 240px; overflow: visible; }
.art .ln { fill: none; stroke: var(--primary); stroke-width: 1.1; stroke-linecap: butt; stroke-linejoin: round; }
.art .sf { stroke: var(--link); stroke-opacity: .55; stroke-width: .9; }
.art .ac { stroke: var(--brass); stroke-width: 1.3; }
.art .dot { fill: var(--brass); stroke: none; }
.fxd { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.fxo { transform-box: view-box; transform-origin: 200px 150px; transform: rotate(var(--r1, 0deg)); }
@media (min-width: 820px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); }
  .story--b { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); }
  .story--b .art { order: -1; }
  .art svg { height: 380px; }
  .story--b .art svg { height: 320px; }
}
@media (prefers-reduced-motion: no-preference) {
  .story--b .rings { transform-box: view-box; transform-origin: 50% 50%; animation: breathe 4.3s var(--ease-io) infinite alternate; animation-play-state: paused; }
  .story--b.is-live .rings { animation-play-state: running; }
}
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.012); } }

.pair { max-width: 36rem; }
.pair__k { margin: 0; font-family: var(--font-ui); font-size: .9rem; font-weight: 500; color: var(--label); }
.pair__k--next::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--brass); }
.pair__v { margin: 2px 0 12px; font-size: 1.08rem; }
.lede { align-self: center; }
.lede .quote { margin: 0; }

.principles { margin-top: 72px; max-width: 46rem; }
.principles h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 1.95rem); }
.principles ul { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.principles li { font-size: clamp(1.5rem, 4.4vw, 2.1rem); line-height: 1.25; color: var(--heading); }
.principles li:nth-child(2) { padding-left: clamp(0px, 6vw, 56px); }   /* asimetría deliberada */
.principles li:nth-child(3) { padding-left: clamp(0px, 12vw, 112px); }

.hobbies-sec { margin-top: 64px; }
.hobbies { display: grid; gap: 14px 40px; max-width: 52rem; margin: 0; padding: 0; list-style: none; }
.hobby h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem; }
.hobby h3 .i { color: var(--muted); }
.hobby p { margin: 2px 0 0 calc(1.2em + 10px); color: var(--muted); font-size: .98rem; }
@media (min-width: 720px) { .hobbies { grid-template-columns: 1fr 1fr; } }

.notebook { margin-top: 72px; }
.notebook h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 1.95rem); }
.notebook__intro { margin: 6px 0 0; color: var(--muted); }
.notebook__grid { display: grid; gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.piece figure { margin: 0; }
.piece img { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: var(--soft); }
.piece figcaption { margin-top: 6px; font-family: var(--font-ui); font-size: .92rem; color: var(--muted); }
.piece figcaption b { color: var(--text); font-weight: 500; }
.piece figcaption span { display: block; }
@media (min-width: 720px) {
  .notebook__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .notebook__grid .piece:first-child { grid-column: span 2; }
}

/* Margen: notas que explican lo que solo se entiende desde Ecuador o Brasil */
.gloss { max-width: 40rem; margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--brass); font-family: var(--font-ui); font-size: .92rem; font-style: italic; line-height: 1.5; color: var(--muted); }
.langs .gloss { margin-top: 8px; }
.langs__note { max-width: 46rem; margin: 16px 0 0; color: var(--muted); }
.skills__name { margin-bottom: 10px; }
.skilllist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.skilllist li { position: relative; padding-left: 16px; font-family: var(--font-ui); font-size: 1rem; }
.skilllist li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1.5px; background: var(--brass); }
.skills .more { margin-top: 6px; }

/* Certificados: salud y práctica profesional (con vista previa) y formación complementaria */
.certs__split { max-width: 46rem; margin: 0 0 24px; color: var(--muted); }
.track + .track { margin-top: 56px; }
.track__head { display: flex; align-items: center; gap: 12px; }
.track__head h3 { margin: 0; font-size: 1.4rem; }
.track__head .count, .cgroup > summary .count { padding: 1px 11px; border-radius: var(--r-pill); background: var(--soft); color: var(--heading); font-family: var(--font-ui); font-size: .85rem; }
.track__note { max-width: 44rem; margin: 6px 0 16px; color: var(--muted); }
.track .cgroup { max-width: none; }
.ctiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ctile { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.ctile__link { display: block; }
.ctile__media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); color: var(--muted); }
.ctile__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ctile__body { display: grid; gap: 4px; align-content: start; padding: 14px 16px 16px; }
.ctile__t { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.ctile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.ctile__tags .tag { margin-left: 0; }
.ctile .more { margin-top: 2px; }

/* Cierre común de las páginas interiores */
.close { max-width: 46rem; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.close__t { margin: 0 0 14px; font-family: var(--font-ui); font-size: 1.5rem; font-weight: 500; color: var(--heading); }
.close__row { display: flex; flex-wrap: wrap; gap: 10px; }
.close__cv, .close__upd { margin: 14px 0 0; font-family: var(--font-ui); color: var(--muted); }
.close__cv a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 500; }
.band__cv { margin-top: 20px; font-family: var(--font-ui); color: var(--deep-ink); }
.band .band__cv a { display: inline-block; padding: 10px 4px; font-weight: 500; color: var(--deep-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Separadores de pletismografía y bucle flujo-volumen (se trazan una vez) */
.pleth { display: block; width: 11rem; height: auto; margin: 12px 0 0; }
.pleth path { fill: none; stroke: var(--brass-strong); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* Índice: tren de cuatro (4 puntos que se encienden al avanzar la página) */
.tof { display: flex; gap: 8px; margin: 0 0 14px 4px; }
.tof i { width: 8px; height: 8px; border-radius: 50%; background: var(--brass-strong); opacity: .28; transform: scale(.8); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.tof i.on { opacity: 1; transform: none; }

/* Modo artículo (opcional, apagado en cv.modes.article) */
.paper__sheet { max-width: 46rem; margin: 0 auto; padding: 24px 0 40px; }
.paper__head h1 { margin: 18px 0 6px; font-family: var(--font-text); font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; }
.paper__aff { margin: 2px 0; font-family: var(--font-ui); color: var(--muted); }
.paper__abs { margin-top: 28px; padding: 18px 0 12px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.paper__abs h2 { margin: 0 0 10px; font-size: 1.15rem; }
.paper__abs p { margin: 0 0 12px; }
.paper__kw { font-size: .98rem; }
.paper__fig { margin: 28px 0 0; }
.trace.paper__trace { position: relative; display: block; height: 90px; opacity: .8; }
.paper__fig figcaption { margin-top: 8px; font-family: var(--font-ui); font-size: .92rem; color: var(--muted); }
.paper__notes { margin-top: 22px; font-family: var(--font-ui); font-size: .9rem; color: var(--muted); }
.paper__notes p { margin: 6px 0; }
.paper__cv { margin-top: 24px; }
.i-back { transform: rotate(180deg); }

/* ---------- Movimiento ligado al scroll (CSS scroll-driven; sin soporte = estado final, y respaldo en JS) ---------- */
@keyframes fx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-open { from { transform: rotate(var(--r0)); } to { transform: rotate(var(--r1)); } }
@keyframes fx-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-on { 0%, 85% { opacity: .28; transform: scale(.8); } 100% { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story { view-timeline: --story block; }
    .story .fxd { animation: fx-draw linear both; animation-timeline: --story; animation-range: cover calc(8% + var(--a) * .5) cover calc(8% + var(--b) * .5); }
    .story .fxf { animation: fx-fade linear both; animation-timeline: --story; animation-range: cover calc(8% + var(--a) * .5) cover calc(8% + var(--b) * .5); }
    .story .fxo { animation: fx-open linear both; animation-timeline: --story; animation-range: cover calc(8% + var(--a) * .5) cover calc(8% + var(--b) * .5); }
    .trail { view-timeline: --trail block; }
    .trail .fxd { animation: fx-draw linear both; animation-timeline: --trail; animation-range: cover 5% cover 70%; }
    .trail__item::before { animation: fx-fade linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    .pleth .fxd { animation: fx-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .endcycle .fxd { animation: fx-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    body[data-page="experience"] .timeline, body[data-page="education"] .timeline { view-timeline: --tl block; }
    body[data-page="experience"] .timeline::before, body[data-page="education"] .timeline::before { transform-origin: top; animation: fx-grow linear both; animation-timeline: --tl; animation-range: entry 0% cover 85%; }
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topbar { border-bottom-color: transparent; }
    .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-soft); opacity: 0; animation: fx-fade linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
    .tof i { transition: none; animation: fx-on linear both; animation-timeline: scroll(root); }
    .tof i:nth-child(1) { animation-range: 0% 25%; }
    .tof i:nth-child(2) { animation-range: 25% 50%; }
    .tof i:nth-child(3) { animation-range: 50% 75%; }
    .tof i:nth-child(4) { animation-range: 75% 100%; }
  }
}
@media (prefers-reduced-motion: reduce) { .tof { display: none; } }

/* Cambio de idioma: barrido de borrado de capnógrafo (320 ms); cambio de puerta o de modo: fundido breve */
@media (prefers-reduced-motion: no-preference) {
  :root[data-vt="sweep"]::view-transition-old(root) { animation: none; }
  :root[data-vt="sweep"]::view-transition-new(root) { animation: vt-sweep 320ms var(--ease-io) both; }
  :root[data-vt="fade"]::view-transition-group(root) { animation-duration: 250ms; }
}
@keyframes vt-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.ctile__cat { margin: 0 0 2px; font-family: var(--font-ui); font-size: .84rem; font-weight: 500; color: var(--label); }
.langs li { align-content: start; }

/* Ajustes tras la revisión (objetivos táctiles ≥ 44 px, repetición de miniaturas en móvil, huecos) */
@media (max-width: 359px) { .lang button { min-width: 40px; } }
.trail__item h3 a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.close__cv a, .band .band__cv a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.facts .dot { color: var(--muted); }

/* ---------- Correcciones del 20-oct (2.ª ronda) ---------- */
/* Pestañas visibles bajo la barra en pantallas estrechas */
.tabsbar { display: flex; gap: 4px; overflow-x: auto; padding: 0 max(12px, env(safe-area-inset-left, 0px)) 8px; scrollbar-width: none; border-top: 1px solid var(--border-soft); }
.tabsbar::-webkit-scrollbar { display: none; }
.tabsbar a { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: .96rem; font-weight: 500; white-space: nowrap; color: var(--muted); }
.tabsbar a[aria-current="page"] { background: var(--soft); color: var(--heading); box-shadow: inset 0 -2px 0 var(--brass); }
@media (hover: hover) and (pointer: fine) { .tabsbar a:hover { color: var(--primary); text-decoration: none; } }
@media (max-width: 959px) { html { scroll-padding-top: 132px; } .about .profile { top: 128px; } }

/* Ir directo a */
.hero__tag2 { margin: 10px 0 0; max-width: 38rem; color: var(--muted); font-size: 1rem; }
.explore { margin-top: 8px; }
.explore__h { margin: 0 0 6px; font-size: 1.4rem; }
.explore__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.explore__list li { border-bottom: 1px solid var(--border); }
.explore__list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; min-height: 64px; padding: 14px 4px; color: var(--text); }
.explore__t { grid-column: 1; font-family: var(--font-ui); font-weight: 500; font-size: 1.25rem; color: var(--heading); }
.explore__d { grid-column: 1; color: var(--muted); font-size: 1rem; }
.explore__list .i-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--link); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .explore__list a:hover { background: var(--soft); text-decoration: none; } .explore__list a:hover .i-arrow { transform: translateX(4px); } }
@media (min-width: 820px) {
  .explore__list a { grid-template-columns: 13rem 1fr auto; }
  .explore__t, .explore__d { grid-column: auto; }
  .explore__list .i-arrow { grid-column: 3; grid-row: auto; }
}
.now { margin-top: 36px; }

/* Certificados de salud: miniatura visible junto a cada entrada de la línea de tiempo */
.centry__thumb { display: block; width: min(100%, 220px); margin-top: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--soft); }
.centry__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }
@media (min-width: 900px) {
  .tl--thumb { grid-template-columns: var(--date-col) minmax(0, 1fr) 200px; }
  .tl--thumb > .centry__thumb { grid-column: 3; grid-row: 1 / span 6; margin-top: 0; width: 200px; }
}

/* Habilidades: todo a la vista, con las principales arriba */
.skilltop { max-width: 52rem; margin-bottom: 36px; padding: 18px 22px; background: var(--soft); border-radius: var(--r-md); }
.skilltop__h { margin: 0 0 10px; font-family: var(--font-ui); font-weight: 500; font-size: 1.05rem; color: var(--heading); }
.skilltop .skilllist { gap: 6px 32px; }
@media (min-width: 720px) { .skilltop .skilllist { grid-template-columns: 1fr 1fr; } }

/* Publicaciones: portada con formato de primera página de un artículo */
.paper__sheet--cover { max-width: 52rem; margin: 0 0 48px; padding: 8px 0 8px; }
.paper__sheet--cover .paper__head h2 { margin: 0 0 6px; font-family: var(--font-text); font-weight: 600; font-size: clamp(1.6rem, 4.4vw, 2.2rem); line-height: 1.15; }
.paper__abs h3 { margin: 0 0 10px; font-size: 1.15rem; }

/* Ciclo respiratorio de cierre: un guiño muy difuminado al final de cada página */
.endcycle { margin-top: 56px; color: var(--primary); opacity: .17; filter: blur(.6px); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.endcycle svg { display: block; width: 100%; height: auto; }
.endcycle path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media print { .endcycle, .tabsbar { display: none !important; } }
@media (min-width: 1040px) { .tabsbar { display: none; } }

/* ---------- 3.ª ronda (20-oct): silueta, fondos con scroll, certificados en columnas, publicaciones como revista ---------- */
.explore { margin-top: 64px; }

/* Silueta torácica tras la cita de Sobre mí: líneas muy finas, un solo guiño de latón (el corazón); se traza al cargar */
.lede { position: relative; align-self: stretch; display: grid; align-items: center; min-height: 260px; }
.silh { position: absolute; inset: 0 0 0 auto; width: min(100%, 420px); display: grid; place-items: center end; pointer-events: none; opacity: .2; }
.silh svg { display: block; width: auto; max-width: 100%; height: min(100%, 420px); overflow: visible; }
.silh .ln { fill: none; stroke: var(--primary); stroke-width: 1.1; stroke-linejoin: round; }
.silh .sf { stroke: var(--link); stroke-opacity: .6; stroke-width: .9; }
.silh .ac { fill: none; stroke: var(--brass); stroke-width: 1.6; stroke-linejoin: round; }
.lede .quote { position: relative; z-index: 1; max-width: 34rem; }
@media (prefers-reduced-motion: no-preference) {
  .silh .fxd { animation: fx-draw 2.4s var(--ease-out) both; animation-delay: var(--d, 0s); }
}
@media (max-width: 819px) { .silh { opacity: .1; } }

/* Fondos con scroll, muy difuminados, detrás del texto: nunca compiten con la lectura */
.bgdeco { position: fixed; z-index: -1; pointer-events: none; overflow: hidden; }
.bgwave { left: 0; right: 0; top: 42vh; height: 300px; opacity: .08; filter: blur(2.5px); color: var(--primary); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.bgwave svg { display: block; width: 240vw; height: 300px; }
.bgwave path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.bgseal { right: -190px; top: 50%; width: 560px; height: 560px; margin-top: -280px; opacity: .1; filter: blur(.6px); color: var(--primary); }
.bgseal svg { display: block; width: 100%; height: 100%; }
.bgseal circle { fill: none; stroke: currentColor; stroke-width: 1.1; }
.bgseal .ticks { stroke-width: 7; stroke-dasharray: 1.2 10.4; stroke-opacity: .8; }
.bgseal .soft { stroke-opacity: .6; stroke-dasharray: 2 6; }
.bgseal .dot { fill: var(--brass); stroke: none; }
@media (max-width: 719px) { .bgseal { width: 380px; height: 380px; margin-top: -190px; right: -170px; opacity: .08; } }
@keyframes wave-shift { from { transform: translateX(0); } to { transform: translateX(-100vw); } }
@keyframes seal-spin { from { transform: rotate(0deg); } to { transform: rotate(140deg); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bgwave svg { animation: wave-shift linear both; animation-timeline: scroll(root); }
    .bgseal svg { animation: seal-spin linear both; animation-timeline: scroll(root); }
  }
}
@media print { .bgdeco, .silh { display: none !important; } }

/* Sobre mí: la figura de la vía aérea (alta) y la de la glotis (circular) con tamaños propios */
@media (min-width: 820px) {
  .story--c .art svg { height: 470px; }
  .story--b .art svg { height: 340px; }
}
.story--c .art svg { height: 320px; }
.pair + .pair { margin-top: 36px; }

/* Formación: certificados destacados = solo la miniatura; botón al resto */
.ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ftile { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--muted); transition: transform 200ms var(--ease-out), border-color 160ms ease; }
.ftile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (hover: hover) and (pointer: fine) { .ftile:hover { transform: translateY(-2px); border-color: var(--primary); text-decoration: none; } }
.featured__more { margin-top: 22px; }

/* Certificados de salud: ya desplegados, con el área como título; 2 columnas en pantallas anchas */
.tgroups { column-count: 1; column-gap: 28px; }
.tgroup { break-inside: avoid; margin: 0 0 24px; padding: 16px 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.tgroup__h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.1rem; }
.tgroup__h .count { margin-left: auto; padding: 1px 11px; border-radius: var(--r-pill); background: var(--soft); color: var(--heading); font-family: var(--font-ui); font-size: .85rem; font-weight: 400; }
.tgroup .timeline { --date-col: 0px; padding-left: 22px; }
.tgroup .timeline::before { left: 6px; }
.tgroup .tl { display: block; padding-bottom: 26px; }
.tgroup .tl::before { left: -22px; }
.tgroup .tl > .entry__date { text-align: left; padding-top: 0; }
.tgroup .tl--thumb { display: block; }
.tgroup .centry__thumb { width: min(100%, 250px); margin-top: 10px; }
@media (min-width: 760px) { .tgroups { column-count: 2; } }
.track--health { max-width: none; }

/* Publicaciones: primera página de revista (franja de revista y DOI, barra de tipo, título en sans, autores con puntos medios, resumen en caja) */
.pubs { gap: 28px; max-width: 54rem; }
.jart { padding: 20px 22px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.jart__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 20px; padding-bottom: 10px; border-bottom: 2px solid var(--heading); font-family: var(--font-ui); font-size: .95rem; color: var(--text); }
.jart__journal { font-weight: 500; }
.jart__doi { font-size: .9rem; word-break: break-all; }
.jart__type { display: inline-block; margin: 18px 0 0; padding: 4px 16px 4px 12px; background: var(--soft); border-left: 3px solid var(--brass); font-family: var(--font-ui); font-size: .84rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--heading); }
.jart__title { margin: 14px 0 10px; font-family: var(--font-ui); font-weight: 600; font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.2; color: var(--heading); }
.jart--cover .jart__title { font-size: clamp(1.6rem, 4.4vw, 2.3rem); }
.jart__authors { margin: 0; font-family: var(--font-ui); font-size: 1.02rem; line-height: 1.5; }
.jart__authors b { font-weight: 600; color: var(--heading); }
.jart__dates { margin: 10px 0 0; font-family: var(--font-ui); font-size: .92rem; color: var(--muted); }
.jart__role { margin: 6px 0 0; font-family: var(--font-ui); font-size: .92rem; color: var(--muted); }
.jart__abs { margin-top: 18px; padding: 14px 18px 4px; background: var(--soft); border-radius: var(--r-sm); }
.jart__abs h3, .jart__abs h4 { margin: 0 0 6px; font-size: 1.05rem; }
.jart__abs p { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; }
.jart__kw { margin: 14px 0 0; font-size: .98rem; }
.jart__kw b { font-family: var(--font-ui); font-weight: 600; margin-right: 6px; }
.jart .pub__links { margin-top: 14px; }
.jart--cover .paper__fig { margin-top: 20px; }

/* Habilidades: columnas que se acomodan solas, sin huecos */
.skills { display: block; column-count: 1; column-gap: 56px; }
.skills > div { break-inside: avoid; margin-bottom: 30px; }
@media (min-width: 720px) { .skills { column-count: 2; } }

/* ---------- 4.ª ronda (20-oct): pulmones lentos, glotis rotulada, tráquea larga, dial, libro, pluma, portada de publicaciones ---------- */
/* Silueta: más grande y lenta (la duración --dur la calcula el JS según lo que tarda en leerse la cita) */
.lede { min-height: 520px; }
.silh { width: min(100%, 620px); opacity: .2; }
.silh svg { height: min(100%, 540px); }
@media (prefers-reduced-motion: no-preference) {
  .silh .fxd { animation: fx-draw calc(var(--dur, 10s) * var(--l, .4)) var(--ease-io) both; animation-delay: calc(var(--dur, 10s) * var(--f, 0)); }
}

/* Glotis rotulada (Por qué anestesiología) */
@media (min-width: 820px) { .story--b { grid-template-columns: minmax(260px, 500px) minmax(0, 1fr); } }
.story--b .art svg { width: 100%; height: auto; max-height: 380px; }
.art .lbl { fill: var(--muted); stroke: none; font-family: var(--font-ui); font-size: 14px; }
.story--b .rings { transform-origin: 190px 200px; }

/* Tráquea larga: acompaña a «Lo hecho y lo que sigue» y a «Cómo trabajo» de principio a fin */
.story--long { align-items: stretch; }
.story--long .art--long { position: absolute; inset: 0 0 0 auto; width: 220px; opacity: .14; pointer-events: none; display: block; }
.story--long .art--long svg { position: absolute; right: -40px; top: 0; width: 220px; height: 100%; max-width: none; }
.story--long .principles { margin-top: 56px; max-width: none; }
@media (min-width: 820px) {
  .story--long { grid-template-columns: minmax(0, 1fr) 240px; }
  .story--long .art--long { position: relative; inset: auto; opacity: 1; width: auto; grid-column: 2; align-self: stretch; }
  .story--long .art--long svg { left: 0; right: auto; }
}

/* Experiencia: la onda, más difuminada */
.bgwave { opacity: .1; filter: blur(6px); }

/* Certificados: dial de vaporizador de sevoflurano visto desde arriba (la perilla gira con el scroll) */
.bgseal circle { fill: none; stroke: currentColor; stroke-width: 1.1; }
.bgseal .arc, .bgseal .maj, .bgseal .min { fill: none; stroke: currentColor; stroke-linecap: butt; }
.bgseal .arc { stroke-width: 1; stroke-opacity: .7; }
.bgseal .maj { stroke-width: 2.4; }
.bgseal .min { stroke-width: 1.2; stroke-opacity: .7; }
.bgseal .nums text { fill: currentColor; stroke: none; font-family: var(--font-ui); font-size: 15px; text-anchor: middle; }
.bgseal .grip { stroke-width: 10; stroke-dasharray: 1.6 7.6; stroke-opacity: .55; }
.bgseal .soft { stroke-opacity: .6; stroke-dasharray: none; }
.bgseal .knob { transform-origin: 200px 200px; transform-box: view-box; transform: rotate(35deg); }
.bgseal .knob path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.bgseal .knob .tip { fill: var(--brass); stroke: none; }
.bgseal .dot { fill: var(--brass); stroke: none; }
@keyframes dial-turn { from { transform: rotate(-140deg); } to { transform: rotate(140deg); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bgseal svg { animation: none; }
    .bgseal .knob { animation: dial-turn linear both; animation-timeline: scroll(root); }
  }
}

/* Formación: libro abierto cuyas páginas pasan con el scroll */
.bgbook { right: -140px; top: 50%; width: 700px; height: 467px; margin-top: -233px; opacity: .1; filter: blur(.9px); color: var(--primary); }
.bgbook svg { display: block; width: 100%; height: 100%; }
.bgbook path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.bgbook .pg { fill: var(--bg); }
.bgbook .tx { stroke-opacity: .55; stroke-width: 1; }
.bgbook .spine { stroke-width: 1.6; }
.bgbook .rib { stroke: var(--brass); stroke-width: 2.2; }
.bookpage { transform-origin: 300px 200px; transform-box: view-box; }
@keyframes book-flip { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bookpage { animation: book-flip linear both; animation-timeline: scroll(root); animation-range: calc(var(--i) * 30%) calc(var(--i) * 30% + 28%); }
  }
}
@media (max-width: 719px) { .bgbook { width: 460px; height: 307px; margin-top: -153px; right: -150px; opacity: .08; } }

/* Publicaciones: la cabecera es la identidad de la página (sin caja) y encierra, con su regla de latón, a las tarjetas de cada artículo */
.jmast { margin: 0 0 8px; }
.jmast .jart__top { border-bottom-width: 4px; }
.jmast__title { margin: 14px 0 12px; font-family: var(--font-ui); font-weight: 600; font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: 1.08; letter-spacing: -.005em; color: var(--heading); }
.jmast__abs { margin-top: 22px; padding: 16px 0 4px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.jmast__abs h3 { margin: 0 0 10px; font-size: 1.1rem; }
.jmast__cols p { margin: 0 0 12px; break-inside: avoid; }
@media (min-width: 820px) { .jmast__cols { column-count: 2; column-gap: 40px; } }
.pubs { --pad: 18px; position: relative; max-width: 56rem; margin-top: 34px; padding-left: var(--pad); border-left: 2px solid var(--brass); }
.pubs > li { position: relative; }
.pubs > li::before { content: ""; position: absolute; left: calc(-1 * var(--pad) - 7px); top: 28px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brass); }
@media (min-width: 720px) { .pubs { --pad: 28px; } }

.footer__credit { max-width: 60rem; margin: 8px 0 0; font-family: var(--font-ui); font-size: .88rem; color: var(--muted); }

/* ---------- Última ronda (20-oct) ---------- */
/* Cuadro de contacto: ligeramente traslúcido para que se vean los fondos animados sin dejar de destacar */
.ficha { background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border-color: color-mix(in srgb, var(--border) 80%, transparent); }
.ficha .btn:not(.btn--primary) { background: color-mix(in srgb, var(--surface) 60%, transparent); }

/* Glotis: los nombres anatómicos aparecen al pasar el ratón (o al tocar) */
.art .hot { pointer-events: all; outline: none; }
.art .hot .hit { fill: none; stroke: transparent; stroke-width: 26; stroke-linecap: round; pointer-events: stroke; }
.art .hot .tipline, .art .hot .tip { opacity: 0; transition: opacity 160ms ease; }
.art .hot .tipline { fill: none; stroke: var(--brass); stroke-width: 1.1; }
.art .hot .tip { fill: var(--heading); stroke: none; font-family: var(--font-ui); font-size: 15px; font-weight: 500; }
.art .hot:hover .tipline, .art .hot:hover .tip, .art .hot:focus .tipline, .art .hot:focus .tip, .art .hot:active .tipline, .art .hot:active .tip { opacity: 1; }
.story--b .art { pointer-events: auto; }
.story--b .art svg { width: 100%; height: auto; max-height: 380px; }

/* Libro: la página que pasa va por DELANTE (la primera queda arriba de la pila, se levanta y se desvanece al caer a la izquierda) */
@keyframes book-flip {
  0% { transform: scaleX(1) translateY(0); opacity: 1; }
  50% { transform: scaleX(.02) translateY(-16px); opacity: 1; }
  92% { transform: scaleX(-1) translateY(0); opacity: 1; }
  100% { transform: scaleX(-1) translateY(0); opacity: 0; }
}

/* Publicaciones: pluma con tintero a la derecha; sin trazo, se mueve en el sitio al hacer scroll */
.bgquill { right: max(10px, calc((100vw - 74rem) / 2 - 70px)); bottom: 18px; width: 230px; height: 326px; opacity: .17; filter: blur(.4px); color: var(--primary); overflow: visible; }
.bgquill svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bgquill path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bgquill .sf { stroke-width: 1.4; stroke-opacity: .7; }
.bgquill .ink { fill: var(--brass); fill-opacity: .55; stroke: none; }
.bgquill .quill { transform-origin: 186px 266px; transform-box: view-box; }
@keyframes quill-write { 0% { transform: rotate(-6deg); } 20% { transform: rotate(5deg) translateY(-3px); } 40% { transform: rotate(-5deg); } 60% { transform: rotate(6deg) translateY(-3px); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(5deg); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .bgquill .quill { animation: quill-write linear both; animation-timeline: scroll(root); } }
}
@media (max-width: 999px) { .bgquill { display: none; } }

/* Habilidades: cerebro de línea con tres engranajes de latón que giran con el scroll */
.bgbrain { right: -50px; top: 38%; width: 460px; height: 338px; margin-top: -169px; opacity: .13; filter: blur(.5px); color: var(--primary); }
.bgbrain svg { display: block; width: 100%; height: 100%; }
.bgbrain path, .bgbrain circle { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.bgbrain .sf { stroke-opacity: .65; }
.bgbrain .gears path, .bgbrain .gears circle { stroke: var(--brass); stroke-width: 1.6; }
.bgbrain .gear { transform-box: view-box; }
@keyframes gear-turn { from { transform: rotate(0deg); } to { transform: rotate(var(--turn)); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .bgbrain .gear { animation: gear-turn linear both; animation-timeline: scroll(root); } }
}
@media (max-width: 719px) { .bgbrain { width: 320px; height: 235px; margin-top: -118px; right: -90px; opacity: .08; } }

.silh .ac.body { fill: var(--bg); }

/* =====================================================================
   21-oct-2026 · Fondos más legibles (trazo más grueso, más presencia en oscuro), ficha translúcida y teléfono
   ===================================================================== */
/* Presencia de los fondos por tema: en oscuro el teal claro sobre casi negro necesita más opacidad para leerse igual */
:root { --deco: .15; --deco-wave: .2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --deco: .24; --deco-wave: .3; } }
:root[data-theme="dark"] { --deco: .24; --deco-wave: .3; }

/* Experiencia: capnograma realista a pantalla completa desde el inicio; solo avanza con el scroll */
.bgwave { inset: 0; top: 0; height: auto; opacity: var(--deco-wave); filter: none; -webkit-mask-image: none; mask-image: none; }
.bgwave svg { position: absolute; left: 0; top: 22vh; width: 300vw; height: 56vh; }
.bgwave path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.bgwave .co2 { stroke-width: 3.2px; }
.bgwave .ref { stroke-width: 1px; stroke-opacity: .45; }
.bgwave .dash { stroke-dasharray: 6 10; }
@keyframes wave-shift { from { transform: translateX(0); } to { transform: translateX(-200vw); } }
@media (max-width: 719px) { .bgwave { opacity: calc(var(--deco-wave) * .75); } .bgwave svg { top: 30vh; height: 40vh; } .bgwave .co2 { stroke-width: 2.6px; } }

/* Formación: libro más grande y de trazo más firme */
.bgbook { right: -150px; width: 920px; height: 613px; margin-top: -306px; opacity: var(--deco); filter: none; }
.bgbook path { stroke-width: 2; }
.bgbook .tx { stroke-width: 1.6; stroke-opacity: .6; }
.bgbook .spine { stroke-width: 2.6; }
.bgbook .rib { stroke-width: 3.2; }
@media (max-width: 719px) { .bgbook { right: auto; left: calc(50% - 300px); width: 600px; height: 400px; margin-top: -200px; opacity: calc(var(--deco) * .8); } }

/* Certificados: dial con trazo más grueso */
.bgseal { opacity: var(--deco); filter: none; }
.bgseal circle { stroke-width: 2; }
.bgseal .arc { stroke-width: 1.8; }
.bgseal .maj { stroke-width: 3.6; }
.bgseal .min { stroke-width: 2; }
.bgseal .nums text { font-size: 17px; font-weight: 500; }
.bgseal .knob path { stroke-width: 2.6; }
@media (max-width: 719px) { .bgseal { width: 440px; height: 440px; margin-top: -220px; right: -150px; opacity: calc(var(--deco) * .8); } }

/* Publicaciones: pluma más firme; en el teléfono, pequeña abajo a la derecha */
.bgquill { opacity: calc(var(--deco) + .04); filter: none; }
.bgquill path { stroke-width: 2.8; }
.bgquill .sf { stroke-width: 2; }
@media (max-width: 999px) { .bgquill { display: block; right: 6px; bottom: 10px; width: 150px; height: 212px; opacity: calc(var(--deco) * .8); } }

/* Habilidades: cerebro de vista lateral; los engranajes tapan las líneas que pasan por detrás */
.bgbrain { opacity: calc(var(--deco) * .8); filter: none; }
.bgbrain path, .bgbrain circle { stroke-width: 2.2; }
.bgbrain .sf { stroke-width: 1.7; stroke-opacity: .7; }
.bgbrain .gears path, .bgbrain .gears circle { stroke-width: 2.4; }
.bgbrain .gear > path { fill: var(--bg); }
@media (max-width: 719px) { .bgbrain { width: 340px; height: 250px; margin-top: -125px; right: -90px; top: 36%; opacity: calc(var(--deco) * .7); } }

/* Ciclo de cierre y silueta torácica: un poco más gruesos y visibles en oscuro */
.endcycle { opacity: calc(var(--deco) + .04); filter: none; }
.endcycle path { stroke-width: 2.2; }
.silh .ln { stroke-width: 1.6; }
.silh .sf { stroke-width: 1.3; }
.silh .ac { stroke-width: 2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .silh { opacity: .3; } }
:root[data-theme="dark"] .silh { opacity: .3; }

/* Ficha (nombre, disponibilidad, CV, contacto): translúcida para que se intuya el fondo, pero con borde y sombra que la hacen resaltar */
.ficha { background: color-mix(in srgb, var(--surface) 55%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-color: var(--border); box-shadow: var(--shadow-hover); }
.ficha .btn:not(.btn--primary) { background: color-mix(in srgb, var(--surface) 70%, transparent); }

/* ---------- Teléfono (guías: áreas táctiles ≥ 44 px, sin hover pegado, áreas seguras, sin scroll horizontal) ---------- */
html { -webkit-tap-highlight-color: transparent; overflow-x: clip; }
a, button, summary, [role="button"] { touch-action: manipulation; }
.btn, .lang button, .iconbtn, .tabsbar a, .menu__nav a, .pager a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tabsbar a:active, .menu__nav a:active, .explore__list a:active, .pager a:active { background: var(--soft); }
.menu { max-height: calc(100dvh - 60px); overscroll-behavior: contain; }
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.footer { padding-bottom: max(36px, env(safe-area-inset-bottom, 0px)); }

@media (max-width: 559px) {
  /* Pie: el correo no se parte a la mitad; las páginas en dos columnas y el contacto debajo, a todo el ancho */
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .footer__grid > div:nth-child(2) ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer li a { word-break: normal; overflow-wrap: anywhere; }
  /* Formación: certificados destacados de dos en dos */
  .ftiles { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 819px) {
  /* Sobre mí: sin el hueco alto antes de la cita; la silueta queda detrás, centrada */
  .lede { min-height: 0; padding-block: 24px; }
  .silh { inset: 0; width: 100%; place-items: center; }
  .silh svg { height: 100%; max-height: 420px; }
  /* La tráquea larga se montaba sobre el texto: en el teléfono se oculta (el bloque ya tiene su separador) */
  .story--long .art--long { display: none; }
  .story { padding-block: 32px; }
  .story--b .art svg { max-height: 300px; }
}
/* El cuadro final de Inicio ya no lleva capnografía: sin el espacio que le reservaba */
.band { padding-bottom: 36px; }
@media (min-width: 720px) { .band { padding-bottom: 52px; } }
@media (max-width: 819px) { .lede { min-height: 360px; } }
/* Miga de pan: área táctil de 44 px sin cambiar cómo se ve */
.crumbs a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }

/* ---------- 21-oct-2026 (2.ª ronda) ---------- */
/* Experiencia: la onda sola (sin líneas de referencia), algo más difuminada */
.bgwave { opacity: calc(var(--deco-wave) * .85); filter: blur(1.6px); }
/* Certificados: dial más grande y más a la izquierda (más visible en un portátil) */
@media (min-width: 720px) { .bgseal { right: -110px; width: 700px; height: 700px; margin-top: -350px; } }
/* Formación: libro algo más pequeño */
@media (min-width: 720px) { .bgbook { right: -130px; width: 780px; height: 520px; margin-top: -260px; } }
/* Cuadros translúcidos en Certificados, Publicaciones y Habilidades: siguen enmarcando cada elemento, pero dejan ver el fondo animado */
.tgroup, .cgroup, .jart, .pub, .langs li { background: color-mix(in srgb, var(--surface) 58%, transparent); border-color: var(--border); }
.jart__abs, .skilltop { background: color-mix(in srgb, var(--soft) 62%, transparent); }
.tgroup__h .count { background: color-mix(in srgb, var(--soft) 70%, transparent); }

/* ---------- 21-oct-2026 (3.ª ronda) ---------- */
/* Cuadros de Certificados, Publicaciones y Habilidades: un poco menos translúcidos */
.tgroup, .cgroup, .jart, .pub, .langs li { background: color-mix(in srgb, var(--surface) 74%, transparent); }
.jart__abs, .skilltop { background: color-mix(in srgb, var(--soft) 78%, transparent); }
/* Cerebro: líneas más finas (los engranajes no cambian) */
.bgbrain .brain path { stroke-width: 1.5; }
.bgbrain .brain .sf { stroke-width: 1.1; }
/* Experiencia: capnograma más bajo y con más respiraciones por pantalla (como un monitor), más sutil */
.bgwave { opacity: calc(var(--deco-wave) * .7); filter: blur(2.4px); }
.bgwave svg { top: 30vh; height: 42vh; }
.bgwave .co2 { stroke-width: 3px; }
@media (max-width: 719px) { .bgwave { opacity: calc(var(--deco-wave) * .6); } .bgwave svg { top: 34vh; height: 30vh; } .bgwave .co2 { stroke-width: 2.4px; } }

/* Teléfono: navegación inferior como en una app (Inicio · Sobre mí · Experiencia · Formación · Más) */
.appbar { display: none; }
@media (max-width: 719px) {
  .tabsbar, .menubtn { display: none !important; }
  html { scroll-padding-top: 76px; }
  .about .profile { top: 76px; }
  /* sin desenfoque en la barra superior: así la hoja de «Más» se fija a la pantalla */
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 96%, transparent); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .appbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    padding: 6px max(6px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px));
    background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid var(--border-soft); }
  .appbar a, .appbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 0 2px;
    border: 0; background: none; color: var(--muted); font-family: var(--font-ui); font-size: .72rem; font-weight: 500; line-height: 1.1; text-decoration: none; cursor: pointer;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; transition: transform 140ms var(--ease-out); }
  .appbar a:active, .appbar button:active { transform: scale(.94); }
  .appbar__ic { display: grid; place-items: center; width: 54px; height: 30px; border-radius: var(--r-pill); transition: background-color 180ms ease; }
  .appbar .i { width: 22px; height: 22px; }
  .appbar__t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appbar [aria-current="page"], .appbar .is-on, .appbar [aria-expanded="true"] { color: var(--heading); }
  .appbar [aria-current="page"] .appbar__ic, .appbar .is-on .appbar__ic, .appbar [aria-expanded="true"] .appbar__ic { background: var(--soft); box-shadow: inset 0 -2px 0 var(--brass); }
  /* «Más»: el menú sube como una hoja sobre la barra */
  .menu { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 29;
    max-height: calc(100dvh - 160px); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 -8px 32px rgba(6, 42, 48, .16); }
  .totop { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: sheet-up 220ms var(--ease-out) both; }
}
@keyframes sheet-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media print { .appbar { display: none !important; } }
@media (max-width: 719px) { .menu__nav a:nth-child(-n+4) { display: none; } }   /* «Más» muestra solo lo que no está en la barra */
/* Barra inferior con ventana deslizante: Inicio y «Más» más estrechos, más sitio para los nombres largos; la hoja oculta lo que ya está en la barra */
@media (max-width: 719px) {
  .appbar { grid-template-columns: .82fr 1.12fr 1.12fr 1.12fr .82fr; }
  .menu__nav a:nth-child(-n+4) { display: flex; }
  .menu__nav a.in-bar { display: none; }
}

/* =====================================================================
   Rediseño de la portada tras la evaluación heurística (25-oct-2026)
   Monitor de datos clave · «¿Qué es esta onda?» · «Tres decisiones» · «Ideas que defiendo por escrito» · pie con fondo propio
   ===================================================================== */

/* Pie con fondo propio: las ilustraciones fijas de fondo (cerebro, dial) ya no se ven a través del pie (heurística 8) */
.footer { background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }

button.textlink { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; text-align: left; }

/* Teléfono: la foto se achica para que los datos clave queden sobre el pliegue */
@media (max-width: 719px) {
  .hero { padding-top: 12px; gap: 10px; }
  .hero__visual { width: 92px; margin: 0; justify-self: start; }
  .hero__photo { border-width: 3px; }
  .hero h1 { margin-top: 4px; }
}

/* ---------- Monitor de signos (portada) ----------
   Se adapta a SU propio ancho (consultas de contenedor), no al de la pantalla: igual de bien en la columna del escritorio,
   en tableta y en teléfono. Colores = paleta de la marca. Variantes: b (por defecto: claro/oscuro según el tema), a (pantalla oscura), c (franja). */
.hero__copy { min-width: 0; }
.vmon-wrap { margin-top: 22px; max-width: 40rem; min-width: 0; container-type: inline-size; container-name: vmon; }
.vmon { --scr: var(--surface); --ink: var(--text); --dim: var(--muted); --grid: var(--border-soft);
  --c1: var(--primary); --c2: var(--brass-strong); --c3: var(--heading); --c4: var(--link); --c5: var(--heading);
  --ecg: var(--primary); --pl: var(--link); --co2: var(--brass-strong);
  font-family: var(--font-ui); color: var(--ink); background: var(--scr); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.vmon--a { --scr: #062A30; --ink: #F7F4EE; --dim: #8FA5A6; --grid: rgba(220, 235, 233, .1); --c1: #8EC2C5; --c2: #CDAA72; --c3: #DCEBE9; --c4: #A9CFD0; --c5: #F7F4EE;
  --ecg: #8EC2C5; --pl: #A9CFD0; --co2: #CDAA72; border-color: #0B4A52; }
.vmon__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--grid); color: var(--dim); }
.vmon__id { white-space: nowrap; }
.vmon__alarm { flex: 1 1 auto; min-width: 0; color: var(--c2); font-weight: 500; }   /* nunca se corta: si no cabe, pasa a otra línea */
.vmon__alarm::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) { .vmon__alarm::before { animation: mon-beat 1.1s ease-in-out infinite; } }
@keyframes mon-beat { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.vmon__clock { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Rejilla: a la izquierda las tres ondas (ECG, pletismografía, CO₂), a la derecha un parámetro grande por onda, abajo los demás */
.vmon__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 34%);
  grid-template-areas: "ecg p1" "pl p2" "co2 p3" "p4 p5"; }
.vmon__ch { position: relative; height: 64px; border-bottom: 1px solid var(--grid); border-right: 1px solid var(--grid); overflow: hidden; }
.vmon__lab { position: absolute; left: 10px; top: 5px; font-size: .68rem; letter-spacing: .06em; z-index: 1; }
.vmon__ch--ecg .vmon__lab { color: var(--ecg); }
.vmon__ch--pl .vmon__lab { color: var(--pl); }
.vmon__ch--co2 .vmon__lab { color: var(--co2); }
.vmon .trace { position: absolute; left: 0; right: 0; top: 18px; bottom: auto; width: 100%; height: calc(100% - 22px); opacity: 1; color: var(--co2); }
.vmon__wave { position: absolute; left: 0; top: 18px; width: 100%; height: calc(100% - 24px); overflow: hidden; }
.vmon__wave path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.vmon__wave--ecg path { stroke: var(--ecg); }
.vmon__wave--pl path { stroke: var(--pl); }
@media (prefers-reduced-motion: no-preference) { .vmon.is-on .vmon__run { animation: wave-run 4.8s linear infinite; } }
@keyframes wave-run { to { transform: translateX(-360px); } }
.vmon__p { display: grid; align-content: center; gap: 1px; padding: 7px 12px; color: var(--ink); border-bottom: 1px solid var(--grid); min-height: 44px; min-width: 0; }
.vmon__p:hover { text-decoration: none; background: var(--soft); }
.vmon--a .vmon__p:hover { background: rgba(220, 235, 233, .06); }
.vmon__p:focus-visible { outline-offset: -3px; }
.vmon__k { display: flex; justify-content: flex-start; align-items: baseline; gap: 8px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pc); }
.vmon__u { text-transform: none; letter-spacing: 0; color: var(--dim); }
.vmon__v { font-size: 1.85rem; font-weight: 500; line-height: 1.05; color: var(--pc); font-variant-numeric: tabular-nums; }
.vmon__s { font-size: .78rem; color: var(--dim); line-height: 1.3; }
.vmon .c1 { --pc: var(--c1); } .vmon .c2 { --pc: var(--c2); } .vmon .c3 { --pc: var(--c3); } .vmon .c4 { --pc: var(--c4); } .vmon .c5 { --pc: var(--c5); }
.vmon__p[style*="p4"] { border-right: 1px solid var(--grid); }
.vmon__foot { margin: 0; padding: 7px 12px 8px; font-size: .72rem; color: var(--dim); letter-spacing: .02em; }
.vmon.is-boot .vmon__body, .vmon.is-boot .vmon__foot { opacity: .15; }
.vmon .vmon__body, .vmon .vmon__foot { transition: opacity 420ms ease-out; }
.vmon__pick { margin: 8px 0 0; font-family: var(--font-ui); font-size: .85rem; color: var(--muted); }
/* c: franja de parámetros, sin ondas */
.vmon--c { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; }
.vmon--c .vmon__ch { display: none; }
.vmon--c .vmon__body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "p1 p2" "p3 p4" "p5 p5"; }
.vmon--c .vmon__p:hover { background: none; }
/* Contenedor estrecho (teléfonos, ~ menos de 400 px): sin la etiqueta del equipo, ondas más bajas y parámetros más compactos */
@container vmon (max-width: 420px) {
  .vmon__id { display: none; }
  .vmon__body { grid-template-columns: minmax(0, 1fr) minmax(7.2rem, 40%); }
  .vmon__ch { height: 56px; }
  .vmon__v { font-size: 1.5rem; }
  .vmon__p { padding: 6px 10px; }
  .vmon__s { font-size: .74rem; }
}
/* Muy estrecho (menos de 300 px): las ondas ocupan todo el ancho y los parámetros pasan a dos columnas debajo */
@container vmon (max-width: 300px) {
  .vmon__body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ecg ecg" "pl pl" "co2 co2" "p1 p2" "p3 p4" "p5 p5"; }
  .vmon__ch { border-right: 0; height: 48px; }
  .vmon__p[style*="p1"], .vmon__p[style*="p3"] { border-right: 1px solid var(--grid); }
  .vmon__p[style*="p4"] { border-right: 0; }
}

/* ---------- Fondo en bucle de la portada (en prueba) ---------- */
.bgloop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  --k0: color-mix(in srgb, var(--primary) 34%, transparent); --k1: color-mix(in srgb, var(--link) 30%, transparent); --k2: color-mix(in srgb, var(--brass) 34%, transparent); }
.bgloop span { position: absolute; left: var(--x); top: var(--y); display: block; border-radius: 50%; will-change: transform, opacity; }
.bgloop span[style*="--c:0"] { --k: var(--k0); } .bgloop span[style*="--c:1"] { --k: var(--k1); } .bgloop span[style*="--c:2"] { --k: var(--k2); }
/* Vapor: bocanadas que nacen abajo, suben, se ensanchan y se disuelven */
.bgloop--vapor span { top: auto; bottom: -22vh; width: calc(26vmax * var(--s)); height: calc(20vmax * var(--s)); margin-left: calc(-13vmax * var(--s));
  background: radial-gradient(closest-side, var(--k), transparent); filter: blur(28px); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .bgloop--vapor span { animation: vapor-rise calc(24s * var(--t)) linear var(--d) infinite; } }
@keyframes vapor-rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 60% { opacity: .55; }
  100% { transform: translate(6vw, -125vh) scale(1.6); opacity: 0; } }
/* Gotas: pequeñas, difusas, caen despacio con un leve vaivén */
.bgloop--gotas span { top: -12vh; width: calc(26px * var(--s)); height: calc(34px * var(--s)); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 40% 35%, var(--k), transparent 72%); filter: blur(3px); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .bgloop--gotas span { animation: drop-fall calc(28s * var(--t)) linear var(--d) infinite; } }
@keyframes drop-fall { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(1.5vw, 60vh); } 90% { opacity: .7; }
  100% { transform: translate(-1vw, 125vh); opacity: 0; } }
/* Alvéolos: burbujas suaves en racimos que se inflan y desinflan (≈ 10 respiraciones por minuto) */
.bgloop--alveolos span { width: calc(13vmax * var(--s)); height: calc(13vmax * var(--s)); margin: calc(-6.5vmax * var(--s)) 0 0 calc(-6.5vmax * var(--s));
  background: radial-gradient(closest-side, transparent 55%, var(--k) 78%, transparent); filter: blur(6px); opacity: .75; }
@media (prefers-reduced-motion: no-preference) { .bgloop--alveolos span { animation: alv-breathe calc(6s * var(--t)) ease-in-out var(--d) infinite alternate; } }
@keyframes alv-breathe { from { transform: scale(.82); opacity: .45; } to { transform: scale(1.12); opacity: .9; } }
/* Marea: grandes manchas de color que van y vienen */
.bgloop--marea span { width: calc(60vmax * var(--s)); height: calc(42vmax * var(--s)); margin: calc(-21vmax * var(--s)) 0 0 calc(-30vmax * var(--s));
  background: radial-gradient(closest-side, var(--k), transparent); filter: blur(50px); opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .bgloop--marea span { animation: tide calc(30s * var(--t)) ease-in-out var(--d) infinite alternate; } }
@keyframes tide { 0% { transform: translate(-8vw, -4vh) scale(.9); } 50% { transform: translate(6vw, 5vh) scale(1.15); } 100% { transform: translate(10vw, -6vh) scale(1); } }
.bgloop__pick { position: fixed; right: 16px; bottom: 16px; z-index: 32; display: flex; gap: 12px; margin: 0; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font: 500 .85rem var(--font-ui); }
@media (max-width: 719px) { .bgloop__pick { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 8px; } }
@media print { .bgloop { display: none !important; } }

/* ---------- Ideas que defiendo por escrito: citas de libro ---------- */
.quotes { max-width: 52rem; }
.quotes__h { margin: 0; font-size: clamp(1.6rem, 4.6vw, 2.3rem); line-height: 1.15; }
.quotes__lead { margin: 6px 0 8px; color: var(--muted); }
.bquote { position: relative; margin: 40px 0 0; padding-left: clamp(28px, 6vw, 64px); }
.bquote::before { content: "“"; position: absolute; left: 0; top: -.18em; font-family: var(--font-text); font-size: clamp(3.4rem, 9vw, 5rem); line-height: 1; color: var(--brass); }
.bquote blockquote { margin: 0; }
.bquote blockquote p { margin: 0; font-family: var(--font-text); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 3.2vw, 1.6rem); line-height: 1.45; color: var(--heading); text-wrap: pretty; }
.bquote blockquote a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 260ms var(--ease-out, ease-out); }
@media (hover: hover) and (pointer: fine) { .bquote blockquote a:hover { background-size: 100% 1px; text-decoration: none; } }
.bquote figcaption { margin-top: 12px; font-family: var(--font-ui); font-size: .92rem; color: var(--muted); }
.bquote cite { font-style: italic; }
.bquote__more { display: flex; width: max-content; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; }

/* ---------- Tres decisiones: discreto, al final ---------- */
.casewrap { max-width: 52rem; }
.case { margin-top: 4px; padding: 22px 20px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow); }
@media (min-width: 720px) { .case { padding: 28px 30px 22px; } }
.case__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 10px; border-radius: var(--r-pill); background: var(--soft); border: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: .82rem; font-weight: 500; color: var(--label); }
.case__badge .i { width: 15px; height: 15px; }
.case__h { margin: 6px 0 0; font-size: clamp(1.35rem, 3.6vw, 1.7rem); }
.case__intro { margin: 8px 0 16px; max-width: 44rem; color: var(--muted); }
.case__stage { padding: 16px 0 20px; min-height: 180px; display: flex; flex-direction: column; gap: 12px; }
.case__stage > * { margin: 0; }
.case__stage :focus { outline: none; }
.case__stage :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.case__scene { font-size: 1.08rem; max-width: 40rem; }
.case__q { font-family: var(--font-ui); font-weight: 500; font-size: 1.1rem; color: var(--heading); max-width: 40rem; }
.case__count { font-family: var(--font-ui); font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--label); }
.case__opts { display: grid; gap: 8px; }
@media (min-width: 720px) { .case__opts { grid-template-columns: 1fr 1fr; } }
.case__opt { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px 14px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: transparent; color: var(--text); font: 400 .98rem/1.4 var(--font-ui); cursor: pointer; transition: border-color 160ms, background 160ms; }
@media (hover: hover) and (pointer: fine) { .case__opt:not(:disabled):hover { border-color: var(--primary); background: var(--soft); } }
.case__opt:disabled { cursor: default; opacity: .55; }
.case__opt.is-best { opacity: 1; border-color: var(--primary); background: var(--soft); }
.case__opt.is-other { opacity: 1; border-style: dashed; }
.case__letter { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: .74rem; color: var(--brass-strong); }
.case__opt.is-best .case__letter { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.case__why { padding: 10px 14px; border-left: 2px solid var(--brass); }
.case__why.is-ok { border-left-color: var(--primary); }
.case__why p { margin: 0; max-width: 44rem; }
.case__verdict { font-family: var(--font-ui); font-weight: 500; color: var(--heading); margin-bottom: 4px !important; }
.case__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.case__endh { font-size: 1.2rem; color: var(--heading); }
.case__end { max-width: 44rem; }
.case__note { margin: 10px 0 0; font-family: var(--font-ui); font-size: .84rem; color: var(--muted); }

/* ---------- Comentarios del autor ---------- */
.anote { position: relative; z-index: 2; margin: 14px 0; max-width: 40rem; padding: 12px 14px 12px 16px; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: var(--shadow); font-family: var(--font-ui); }
.anote__k { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: .92rem; color: var(--heading); }
.anote__n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brass); color: #062A30; font-size: .72rem; }
.anote__x { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .anote { animation: anote-in 260ms ease-out both; } }
@keyframes anote-in { from { opacity: 0; transform: translateY(4px); } }
.authorpill { position: fixed; left: 16px; bottom: 16px; z-index: 31; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--brass); background: var(--surface); color: var(--heading); font: 500 .9rem var(--font-ui); box-shadow: var(--shadow); cursor: pointer; }
.authorpill .i .acc { stroke: var(--brass); }
.authorpill__x { font-size: 1.1rem; line-height: 1; color: var(--muted); }
@media (max-width: 719px) { .authorpill { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 12px; } }
@media print { .anote, .authorpill { display: none !important; } }
.footer__made { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 18px 0 0; font-size: 1rem; }
.footer__made a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.footer__author { font-size: 1rem; }

/* ---------- Cómo hice esta web ---------- */
.mk-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: 44rem; }
.mk-list li::marker { color: var(--brass-strong); }
.mk-sw { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; font-family: var(--font-ui); font-size: .85rem; }
.mk-sw li { display: grid; gap: 2px; }
.mk-sw__c { display: block; height: 56px; border-radius: var(--r-sm); border: 1px solid var(--border); margin-bottom: 6px; }
.mk-sw b { font-weight: 500; color: var(--heading); }
.mk-sw span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-type { display: grid; gap: 8px; margin-top: 22px; }
.mk-type p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; color: var(--heading); }
.mk-type__ui { font-family: var(--font-ui); font-size: 1.6rem; font-weight: 500; }
.mk-type__tx { font-family: var(--font-text); font-size: 1.6rem; }
.mk-type span { font-size: 1rem; color: var(--muted); }
/* Agradecimiento al final de «Cómo hice esta web»: epígrafe con la cita de libro de la portada y texto de lectura */
.mk-thanks .bquote { margin-top: 8px; max-width: 40rem; }
.mk-thanks__lead { margin: 32px 0 14px; color: var(--heading); font-weight: 500; }
.mk-thanks__p { margin: 0 0 14px; max-width: 44rem; text-wrap: pretty; }
.mk-thanks__p:last-child { margin-bottom: 0; }
.mk-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.mk-fig { margin: 0; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.mk-fig figcaption { padding: 10px 14px 12px; font-family: var(--font-ui); font-size: .9rem; color: var(--muted); border-top: 1px solid var(--border-soft); }
.mk-fig__art { position: relative; height: 190px; display: grid; place-items: center; padding: 16px; overflow: hidden; color: var(--primary); }
.mk-fig__art.bgwave, .mk-fig__art.bgbook, .mk-fig__art.bgseal, .mk-fig__art.bgquill, .mk-fig__art.bgbrain {
  position: relative; inset: auto; left: auto; right: auto; top: auto; width: auto; height: 190px; margin: 0; opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; z-index: auto; }
.mk-fig__art svg { width: 100%; height: 100%; max-height: 158px; }
.mk-fig__art.bgwave { justify-items: start; }
.mk-fig__art.bgwave svg { position: static; top: auto; width: 900px; max-width: none; height: 110px; max-height: none; animation: none; }
.mk-fig__art.bgwave .co2 { stroke-width: 1.6px; }
.mk-fig__art.art svg { height: 158px; }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 46rem; }
.mk-steps li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.mk-steps .entry__date { margin: 0; }
@media (max-width: 519px) { .mk-steps li { grid-template-columns: 1fr; gap: 2px; } }
/* Tableta y ventanas medianas (720–1023 px): foto más pequeña y título proporcional, para que el nombre y el monitor respiren */
@media (min-width: 720px) and (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; }
  .hero h1 { font-size: clamp(2.3rem, 5.2vw, 3rem); }
  .hero__visual { max-width: 210px; align-self: start; margin-top: 16px; }
}
/* Barra del monitor: una sola fila; la disponibilidad se reparte en dos líneas si no cabe y la hora queda siempre a la derecha */
.vmon__bar { flex-wrap: nowrap; align-items: center; }
.vmon__alarm { white-space: normal; line-height: 1.35; }
.vmon__clock { flex: none; }
@container vmon (max-width: 560px) { .vmon__id { display: none; } }

/* «Un médico que quiere crecer sirviendo a las personas»: misma disposición que «Cómo trabajo» en Sobre mí */
.why .block__head { align-items: flex-end; }
.why__lines { display: grid; gap: 6px; margin: 0 !important; font-family: var(--font-text); font-weight: 400; font-size: clamp(1.5rem, 4.4vw, 2.1rem) !important; line-height: 1.25 !important; color: var(--heading); }
.why__lines span:nth-child(2) { padding-left: clamp(0px, 6vw, 56px); }
.why__lines span:nth-child(3) { padding-left: clamp(0px, 12vw, 112px); }

/* Mini monitor del caso: signos grandes y ondas en vivo a la frecuencia del paciente */
.case__mon { display: grid; gap: 12px 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); }
@media (min-width: 640px) { .case__mon { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.case__vitals { display: flex; flex-wrap: wrap; gap: 6px 26px; }
@media (min-width: 640px) { .case__vitals { flex-direction: column; gap: 6px; } }
.case__vital { margin: 0; display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 6px; align-items: baseline; }
.case__vk { grid-column: 1 / -1; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case__vv { font-size: clamp(1.9rem, 5vw, 2.4rem); font-weight: 500; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.case__vu { font-size: .82rem; color: var(--muted); }
.case__vital.is-alarm .case__vv, .case__vital.is-alarm .case__vk { color: var(--brass-strong); }
.case__waves { display: grid; gap: 4px; min-width: 0; }
.case__lane { position: relative; height: 58px; overflow: hidden; border-bottom: 1px dashed var(--border-soft); }
.case__lane:last-child { border-bottom: 0; }
.case__lane > span { position: absolute; left: 0; top: 2px; font-size: .68rem; letter-spacing: .06em; color: var(--muted); }
.case__lane--ecg > span { color: var(--primary); }
.case__lane--pl > span { color: var(--link); }
.case__lane .vmon__wave { top: 16px; height: calc(100% - 20px); }
.case__lane--ecg path { stroke: var(--primary); stroke-width: 1.6; }
.case__lane--pl path { stroke: var(--link); stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) { .case__waves .vmon__run { animation: wave-run calc(var(--beat, .8s) * 6) linear infinite; } }
@media print { .casewrap { display: none !important; } }
/* Ajustes tras verlos: gotas más grandes y suaves (no motas); marea más presente */
.bgloop--gotas span { width: calc(46px * var(--s)); height: calc(60px * var(--s)); filter: blur(7px); }
.bgloop--marea { --k0: color-mix(in srgb, var(--primary) 52%, transparent); --k1: color-mix(in srgb, var(--link) 46%, transparent); --k2: color-mix(in srgb, var(--brass) 50%, transparent); }
/* Vapor un poco más tenue (25-oct, tras verlo sobre los textos) */
.bgloop--vapor { --k0: color-mix(in srgb, var(--primary) 26%, transparent); --k1: color-mix(in srgb, var(--link) 22%, transparent); --k2: color-mix(in srgb, var(--brass) 26%, transparent); }
/* Caso: pregunta y opciones algo más grandes; signos y ondas algo más contenidos, para que todo quede en equilibrio */
.case__q { font-size: clamp(1.15rem, 2.6vw, 1.3rem); line-height: 1.4; }
.case__opt { font-size: 1.04rem; padding: 14px 16px; }
.case__count { font-size: .88rem; }
.case__why p { font-size: 1.04rem; }
.case__vv { font-size: clamp(1.6rem, 4vw, 2rem); }
.case__lane { height: 48px; }

/* ---------- Héroe equilibrado (26-oct-2026) ----------
   El héroe ya no es una columna con la foto al lado: cada pieza (cabecera, foto, oferta, botones, monitor) va a su zona.
   Teléfono: foto junto al nombre, oferta, botones y monitor. Desde 720 px («ficha»): nombre y oferta a la izquierda,
   foto grande a la derecha a la misma altura y el monitor a todo el ancho debajo (se probó también la foto sobre el monitor: lo apretaba). */
.hero { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 0;
  grid-template-areas: "photo head" "lede lede" "cta cta" "mon mon"; align-items: center; }
.hero > * { position: relative; z-index: 1; min-width: 0; }
.hero > .trace { position: absolute; z-index: 0; }
.hero__head { grid-area: head; }
.hero__head h1 { margin: 0; font-size: clamp(1.75rem, 7.4vw, 2.3rem); line-height: 1.08; text-wrap: balance; }
.hero__head .hero__title { margin: 8px 0 0; font-size: 1.02rem; line-height: 1.35; }
.hero__visual { grid-area: photo; order: 0; width: 104px; margin: 0; align-self: center; justify-self: start; }
.hero__photo { border-width: 3px; }
.hero__lede { grid-area: lede; margin-top: 18px; }
.hero__lede .hero__tag { margin: 0; text-wrap: pretty; }
.hero__lede .hero__tag2 { text-wrap: pretty; }
.hero__cta { grid-area: cta; margin-top: 20px; }
.hero > .vmon-wrap { grid-area: mon; margin-top: 26px; max-width: none; }

@media (min-width: 720px) {
  .hero { column-gap: 40px; padding: 48px 0 96px; }
  .hero__head h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
  .hero__head .hero__title { margin-top: 12px; font-size: 1.25rem; }
  .hero__photo { border-width: 5px; }
  .hero { grid-template-columns: minmax(0, 1fr) clamp(220px, 30vw, 380px);
    grid-template-areas: "head photo" "lede photo" "cta photo" "mon mon"; align-items: start; }
  .hero .hero__visual { width: 100%; max-width: none; align-self: center; justify-self: end; }
  .hero .hero__head { align-self: end; }
  .hero > .vmon-wrap { margin-top: 44px; }
}
@media (min-width: 1024px) {
  .hero { column-gap: 64px; padding-top: 64px; }
  .hero .hero__lede { max-width: 38rem; }
}

/* Monitor ancho (franja bajo el héroe): ondas a la izquierda y los cinco parámetros en dos columnas a la derecha */
@container vmon (min-width: 760px) {
  .vmon__body { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    grid-template-areas: "ecg p1 p2" "pl p3 p4" "co2 p5 p5"; }
  .vmon__ch { height: 76px; }
  .vmon__p { border-right: 1px solid var(--grid); padding: 8px 16px; }
  .vmon__p[style*="p2"], .vmon__p[style*="p4"], .vmon__p[style*="p5"] { border-right: 0; }
  .vmon__v { font-size: 2.1rem; }
}

/* Revisión de 9 perfiles (26-oct-2026): legibilidad y foco */
.vmon__lab, .vmon__k { font-size: .75rem; }
.vmon__alarm { color: var(--ink); }
.vmon__alarm::before { background: var(--c2); }
@container vmon (max-width: 420px) { .vmon__where { display: none; } }
.band :focus-visible { outline-color: var(--deep-accent); }
/* Una sola escala para los títulos de sección de la portada (la frase escalonada de «por qué» conserva su tamaño propio) */
:root { --h2: clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem); }
.wrap > .block .block__head h2, .now__h, .explore__h, .case__h, .quotes__h, .band h2 { font-size: var(--h2) !important; line-height: 1.18; }
.why__more { margin-top: 10px; }
.hero__more { align-self: center; }
@media (max-width: 719px) { .hero__more { justify-self: center; } }

/* Pausa de animaciones: botón en la barra del monitor (área táctil de 44 px sin agrandar la barra) */
.vmon__pause { position: relative; flex: none; margin: -12px -6px -12px auto; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; color: var(--dim); cursor: pointer; border-radius: 8px; }
.vmon__pause + .vmon__clock { margin-left: 0; }
.vmon__pause span { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.vmon__pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; border-right: 0; }
@media (hover: hover) and (pointer: fine) { .vmon__pause:hover { color: var(--ink); } }
.vmon__pause:focus-visible { outline-offset: -6px; }
.motion-paused .vmon__run, .motion-paused .case__waves *, .motion-paused .vmon__alarm::before,
.motion-paused .bgloop span, .motion-paused .bgloop * { animation-play-state: paused !important; }

/* Monitor en teléfono (contenedor estrecho): sin la pletismografía; quedan ECG y capnograma (la firma del sitio) y los cinco datos */
@container vmon (max-width: 420px) {
  .vmon__ch--pl { display: none; }
  .vmon__body { grid-template-areas: "ecg p1" "co2 p2" "p3 p4" "p5 p5"; }
  .vmon__p[style*="p3"] { border-right: 1px solid var(--grid); }
  .vmon__p[style*="p4"] { border-right: 0; }
}
/* Retrato en oscuro: algo menos de brillo para que no «se encienda» sobre el fondo */
:root[data-theme="dark"] .hero__photo { filter: brightness(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__photo { filter: brightness(.9); } }
/* La barra inferior del teléfono no tapa lo que recibe el foco */
@media (max-width: 719px) { html { scroll-padding-bottom: 84px; } }
/* Sin el capnograma de fondo del héroe ya no hace falta reservarle espacio abajo */
.hero { padding-bottom: 8px; }
@media (min-width: 720px) { .hero { padding-bottom: 16px; } }
/* Reloj de Quito: la etiqueta de zona horaria se oculta cuando el monitor es estrecho */
.vmon__tz { color: var(--dim); }
.vmon__time { color: var(--ink); }
@container vmon (max-width: 560px) { .vmon__tz { display: none; } }

/* Ondas del monitor con proporción fija: cada latido ocupa --ppb px, sin estirarse con el ancho del monitor */
.vmon { --ppb: 40px; }
.vmon .vmon__wave--long { width: calc(24 * var(--ppb)); max-width: none; }
.vmon__wave--resp path { stroke: var(--c3); }
.vmon__ch--resp .vmon__lab { color: var(--c3); }
.vmon .c6 { --pc: var(--c1); }
.vmon__ch--resp, .vmon__p.c6 { display: none; }
@container vmon (max-width: 420px) { .vmon { --ppb: 32px; } }
@container vmon (min-width: 760px) { .vmon { --ppb: 46px; } }
/* Monitor muy ancho: cuarta onda (respiración) y sexto dato; los parámetros en tres columnas para que el texto no domine a las ondas */
@container vmon (min-width: 980px) {
  .vmon__ch--resp, .vmon__p.c6 { display: grid; }
  .vmon__ch--resp { display: block; }
  .vmon__body { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    grid-template-areas: "ecg p1 p2 p3" "pl p1 p2 p3" "co2 p4 p5 p6" "resp p4 p5 p6"; }
  .vmon__ch { height: 62px; }
  .vmon__p { border-right: 1px solid var(--grid) !important; }
  .vmon__p[style*="p3"], .vmon__p[style*="p6"] { border-right: 0 !important; }
  .vmon__p[style*="p4"], .vmon__p[style*="p5"], .vmon__p[style*="p6"] { border-bottom: 0; }
  .vmon__ch--resp { border-bottom: 0; }
}
/* Vapor más difuminado y sutil (25-oct-2026): más desenfoque, menos color y bocanadas un poco más grandes y suaves */
.bgloop--vapor { --k0: color-mix(in srgb, var(--primary) 18%, transparent); --k1: color-mix(in srgb, var(--link) 15%, transparent); --k2: color-mix(in srgb, var(--brass) 18%, transparent); }
.bgloop--vapor span { filter: blur(48px); width: calc(32vmax * var(--s)); height: calc(24vmax * var(--s)); margin-left: calc(-16vmax * var(--s)); }
@keyframes vapor-rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .7; } 60% { opacity: .4; }
  100% { transform: translate(6vw, -125vh) scale(1.7); opacity: 0; } }
/* Menú superior entre 1100 y 1199 px: «Sobre mí» se partía en dos líneas */
.topnav a { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1199px) { .topnav { margin-left: 10px; gap: 0; } .topnav a { padding: 8px 10px; font-size: .95rem; } }
/* Monitor muy ancho: más espacio para las ondas y cifras algo menores, para que el texto no domine */
@container vmon (min-width: 980px) {
  .vmon__body { grid-template-columns: minmax(0, 2.3fr) repeat(3, minmax(0, 1fr)); }
  .vmon__v { font-size: 1.8rem; }
  .vmon__p { padding: 8px 14px; }
  .vmon__wave path { stroke-width: 1.6; }
  .vmon { --ppb: 50px; }
}
/* Retícula editorial de la portada desde 1024 px (25-oct-2026): rótulo fijo a la izquierda y contenido a la derecha, alineado con el héroe */
@media (min-width: 1024px) {
  .cols2 > .now, .cols2 > .story-home, .cols2 > .quotes, .cols2 > .casewrap, .cols2 > .explore {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: 56px; align-items: start; }
  .cols2 > :is(.now, .story-home, .quotes, .casewrap, .explore) > :first-child { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: 100px; margin-top: 0; }
  .cols2 > :is(.now, .story-home, .quotes, .casewrap, .explore) > :not(:first-child) { grid-column: 2; }
}
@media (min-width: 1024px) {
  .cols2 > .casewrap > .case__badge { grid-row: 1; position: static; align-self: start; }
  .cols2 > .casewrap > .case__h { grid-column: 1; grid-row: 2; align-self: start; margin-top: 10px; }
  .cols2 > .casewrap > .case__intro { grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
  /* «Por qué»: todo en la columna del contenido, para que los bloques empiecen en el mismo borde */
  .cols2 > .why { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: 56px; }
  .cols2 > .why > * { grid-column: 2; }
  .cols2 > .quotes .bquote, .cols2 > .quotes ol, .cols2 > .quotes ul { max-width: none; }
}
@media (min-width: 1024px) { .cols2 > .quotes, .cols2 > .casewrap, .cols2 > .now, .cols2 > .explore { max-width: none; } .cols2 > .quotes .bquote { max-width: 46rem; } }
@media (min-width: 1040px) and (max-width: 1180px) { .topnav a { padding: 8px 6px; font-size: .86rem; } .topnav a.navcta { padding: 8px 11px; } }

/* Retícula editorial más equilibrada (25-oct-2026, consenso de dos diseñadores): el rótulo se mide por su contenido (11–12rem),
   no por una fracción de la caja; el texto empieza al 25–34 % de la pantalla (antes 33–39 %) y el héroe no cambia */
@media (min-width: 1024px) {
  .cols2 > :is(.now, .story-home, .quotes, .casewrap, .explore, .why) { grid-template-columns: 11rem minmax(0, 50rem); column-gap: 2.5rem; justify-content: start; }
  .cols2 > .why > p { max-width: 44rem; }
  .cols2 > .casewrap > .case__badge { grid-column: 2; grid-row: 1; position: static; align-self: start; justify-self: start; margin-bottom: 14px; }
  .cols2 > .casewrap > .case__h { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 0; position: sticky; top: 100px; }
  .cols2 > .casewrap > .case__intro { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1280px) { .cols2 > :is(.now, .story-home, .quotes, .casewrap, .explore, .why) { grid-template-columns: 12rem minmax(0, 50rem); column-gap: 3rem; } }
@media (min-width: 1600px) { .cols2 > :is(.now, .story-home, .quotes, .casewrap, .explore, .why) { grid-template-columns: 12rem minmax(0, 52rem); column-gap: 3.5rem; } }
/* Rótulos de una línea en lo habitual («Mi trayectoria») sin volver a empujar el contenido: 14rem desde 1280 px */
@media (min-width: 1280px) { .cols2 > :is(.now, .story-home, .quotes, .casewrap, .explore, .why) { grid-template-columns: 14rem minmax(0, 50rem); column-gap: 3rem; } }
@media (min-width: 1600px) { .cols2 > :is(.now, .story-home, .quotes, .casewrap, .explore, .why) { grid-template-columns: 14rem minmax(0, 52rem); column-gap: 3.5rem; } }

/* ---------- Habilidades: constelación (28-oct-2026) ----------
   Lista a la izquierda y constelación fija a la derecha en escritorio ancho (gráfico «pegajoso»); arriba de la lista en pantallas estrechas.
   Cada viñeta es un punto del color de su grupo y se ilumina cuando su estrella está encendida. */
.skgx__intro { max-width: 44rem; margin: 0 0 22px; }
.skgx__lead { margin: 0 0 10px; }
.skgx__where { margin: 0; font-family: var(--font-ui); font-size: .95rem; color: var(--muted); }
.skgx__where a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.skgx__wide { display: none; }
.skgx__back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; font-family: var(--font-ui); font-size: .92rem; font-weight: 500; }
#lista-habilidades, #mapa-habilidades { scroll-margin-top: 84px; }
#lista-habilidades:focus, #mapa-habilidades:focus { outline: none; }
@media (min-width: 900px) { .skgx__wide { display: inline; } .skgx__narrow, .skgx__back { display: none; } }
.skgx { display: block; }
/* El mapa se queda fijo arriba mientras se baja por la lista y vuelve a su sitio al subir (posición `top` calculada en JS con la altura de la cabecera) */
.skgx__fig { position: sticky; top: 72px; z-index: 3; margin: 0 0 20px; padding: 6px 0 10px; min-width: 0; background: var(--bg); }
/* Sin marco ni fondo: la constelación flota sobre la página y sus bordes se desvanecen (máscara), como un cielo abierto */
.skgx__stage { position: relative; }
.skgx__cv { -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 58%, transparent 100%); }
@media (max-width: 719px) { .skgx__cv { -webkit-mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 58%, transparent 100%); } }
.skgx__cv { display: block; width: 100%; height: clamp(260px, 42svh, 440px); touch-action: pan-y; cursor: grab; }
.skgx__cv.is-grab { cursor: grabbing; }
.skgx__ctl { position: absolute; right: max(10px, env(safe-area-inset-right)); top: 10px; display: flex; gap: 6px; }
.skgx__btn { min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--heading); font-family: var(--font-ui); font-size: 1.15rem; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .skgx__btn:hover { border-color: var(--primary); } }
.skgx__hint { margin: 8px 0 0; font-family: var(--font-ui); font-size: .8rem; color: var(--muted); transition: color 200ms var(--ease-out, ease-out); }
.skgx__hint.is-flash { color: var(--heading); }
.skgx__info { margin: 6px 0 0; min-height: 3.2em; font-family: var(--font-ui); font-size: .92rem; line-height: 1.5; }
.skgx__info b { font-weight: 500; color: var(--heading); }
.skgx [data-sk] { border-radius: 4px; transition: background-color 160ms var(--ease-out, ease-out), color 160ms var(--ease-out, ease-out); }
.skgx .skilllist li[style]::before { width: 6px; height: 6px; border-radius: 50%; top: .62em; background: var(--gc); }
.skgx .skills__name[style]::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 50%; background: var(--gc); vertical-align: .02em; }
.skgx .is-lit { color: var(--heading); background: color-mix(in srgb, var(--gc, var(--brass)) 16%, transparent); }
@media (hover: hover) and (pointer: fine) { .skgx:not(.skgx--nograph) [data-sk]:hover { color: var(--heading); background: color-mix(in srgb, var(--gc, var(--brass)) 16%, transparent); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skgx .skilllist li[style]::before, :root:not([data-theme="light"]) .skgx .skills__name[style]::before { background: var(--gc-d); }
  :root:not([data-theme="light"]) .skgx .is-lit { background: color-mix(in srgb, var(--gc-d, var(--brass)) 20%, transparent); }
}
:root[data-theme="dark"] .skgx .skilllist li[style]::before, :root[data-theme="dark"] .skgx .skills__name[style]::before { background: var(--gc-d); }
:root[data-theme="dark"] .skgx .is-lit { background: color-mix(in srgb, var(--gc-d, var(--brass)) 20%, transparent); }
@media (min-width: 900px) {
  .skgx { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 40px; align-items: start; }
  .skgx__list { grid-column: 1; grid-row: 1; }
  .skgx__fig { grid-column: 2; grid-row: 1; margin: 0; padding: 0; background: none; }
  .skgx__cv { height: min(760px, calc(100vh - 170px)); }
  .skgx .skills { column-count: 1; }
  .skgx .skilltop .skilllist { grid-template-columns: 1fr; }
}

.skgx .skills__name[tabindex]:focus-visible, .skgx__btn:focus-visible, .skgx__where a:focus-visible, .skgx__back:focus-visible { outline: 2px solid var(--focus, var(--primary)); outline-offset: 3px; }
.skgx .skills__name[tabindex] { cursor: pointer; }

/* Descripción dentro del mapa en teléfono: hoja inferior que solo aparece cuando hay algo encendido */
/* Táctil o estrecho: franja fija bajo el mapa (pista o descripción, nunca encima de las estrellas; altura fija = sin saltos) */
.skgx__foot { height: 4.6em; margin-top: 4px; overflow: hidden; font-size: .88rem; }
.skgx__foot .skgx__hint, .skgx__foot .skgx__info { margin: 0; min-height: 0; font-size: inherit; line-height: 1.5; }
.skgx__foot .skgx__info { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--text); }
.skgx__foot [hidden] { display: none !important; }
/* Botón «Explorar» (solo táctil) y «Cerrar» (solo a pantalla completa) */
.skgx__open, .skgx__close { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--heading); font-family: var(--font-ui); font-size: .92rem; font-weight: 500; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
.skgx__open { position: absolute; left: 8px; top: 10px; }
@media (min-width: 900px) { .skgx__open { left: auto; right: 6px; } }
.skgx__close { display: none; position: absolute; right: max(10px, env(safe-area-inset-right)); top: 10px; }
.skgx__open:focus-visible, .skgx__close:focus-visible { outline: 2px solid var(--focus, var(--primary)); outline-offset: 3px; }
/* Pantalla completa: el mapa ocupa todo y un dedo lo mueve */
html.skgx-lock, html.skgx-lock body { overflow: hidden; overscroll-behavior: none; }
.skgx__fig.is-full { position: fixed; inset: 0; top: 0 !important; z-index: 60; display: flex; flex-direction: column; margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) max(10px, env(safe-area-inset-bottom)) env(safe-area-inset-left); background: var(--bg); }
.skgx__fig.is-full .skgx__stage { flex: 1; min-height: 0; }
.skgx__fig.is-full .skgx__stage::before { display: none; }
.skgx__fig.is-full .skgx__cv { height: 100%; touch-action: none; -webkit-mask-image: none; mask-image: none; }
.skgx__fig.is-full .skgx__open { display: none; }
.skgx__fig.is-full .skgx__close { display: inline-flex; }
.skgx__fig.is-full .skgx__ctl { right: auto; left: max(10px, env(safe-area-inset-left)); }
.skgx__fig.is-full .skgx__foot { height: auto; min-height: 4.6em; padding: 8px 16px 0; border-top: 1px solid var(--border-soft); }
.skgx__fig.is-full .skgx__foot .skgx__info { -webkit-line-clamp: 5; }
.skgx__see { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; margin: 12px auto 0; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--heading); font-family: var(--font-ui); font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); cursor: pointer; }
.skgx__see[hidden] { display: none; }
/* Un velo suave tras el mapa para que el dibujo decorativo del fondo no compita con él */
.skgx__stage { isolation: isolate; }
.skgx__stage::before { content: ""; position: absolute; inset: -4%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bg) 86%, transparent) 38%, transparent 74%); }

/* Habilidades, equilibrio (28-oct-2026): sin panel lateral, el cerebro queda DETRÁS de la constelación (las estrellas como sus neuronas),
   un poco más arriba que el centro y muy tenue; la caja de «Habilidades principales» pesa menos para que lista y mapa se equilibren. */
.skgx .skilltop { max-width: none; margin-bottom: 26px; padding: 0 0 18px; background: none; border-radius: 0; border-bottom: 1px solid var(--border-soft); }
@media (min-width: 900px) {
  .skgx__ctl { right: auto; left: 6px; }
  .bgbrain { left: auto; right: -150px; margin-left: 0; top: 40%; margin-top: -169px; opacity: calc(var(--deco) * .85); }
  .skgx__stage::before { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) { .bgbrain { right: -250px; } }
@media (max-width: 899px) and (min-width: 720px) { .bgbrain { top: 64%; right: -110px; opacity: calc(var(--deco) * .7); } }
@media (max-width: 899px) and (min-width: 720px) { .skgx__cv { height: clamp(300px, 50svh, 520px); } }
@media (max-width: 719px) { .bgbrain { top: 66%; right: -100px; opacity: calc(var(--deco) * .6); } }
@media (max-width: 719px) { .skgx__cv { height: clamp(230px, 34svh, 340px); } }

/* Proyectos personales (Experiencia): estado de hoy, aprendizajes, herramientas y bitácora en desplegable */
.ownp .prose p { margin: 10px 0 0; font-size: 1rem; }
.ownp__block h4 { margin: 18px 0 0; font-size: 1.05rem; }
.ownp__block ul { margin-top: 6px; }
.ownp__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; }
.ownp__tools .tag { margin-left: 0; vertical-align: 0; }
.ownp__label { margin-right: 4px; color: var(--muted); font-family: var(--font-ui); font-size: .9rem; }
.ownp .history__title { font-weight: 400; }

/* Flujo de un proyecto propio (ownProjects[].flow): fases como teclas discretas y lo hecho en la fase en curso */
.more--flow > .more__body { padding: 6px 0 4px; border-left: 0; background: none; border-radius: 0; max-width: none; }
.flow { margin-top: 4px; }
.flow__phases { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 22px; }
.flow__step { position: relative; min-height: 70px; padding: 10px 26px 11px 12px; border: 1px solid var(--border); border-bottom-width: 3px;
  border-radius: 10px; background: var(--surface); font-family: var(--font-ui); line-height: 1.25; }
.flow__step::after { content: ""; position: absolute; right: -15px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--border-strong);
  border-right: 1.5px solid var(--border-strong); transform: translateY(-50%) rotate(45deg); }
.flow__step:nth-child(4n)::after, .flow__step:last-child::after { display: none; }
.flow__step.is-todo { background: transparent; border-style: dashed; border-bottom-width: 1px; color: var(--muted); }
.flow__step.is-cur { border-color: var(--brass); border-bottom-color: var(--brass-strong);
  background: color-mix(in srgb, var(--brass) 13%, var(--surface)); }
.flow__step.is-done { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.flow__k { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.flow__step.is-todo .flow__k { color: var(--muted); }
.flow__step.is-done .flow__k { color: var(--primary-ink); opacity: .8; }
.flow__n { display: block; margin-top: 3px; font-size: .97rem; font-weight: 500; }
.flow__here { display: block; margin-top: 6px; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-strong); }
.flow__led { position: absolute; top: 12px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.flow__step.is-cur .flow__led { background: var(--brass); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 28%, transparent); }
.flow__step.is-done .flow__led { background: var(--primary-ink); }
.flow__loop { margin: 12px 0 0; font-family: var(--font-text); font-style: italic; font-size: .92rem; color: var(--muted); }
.flow__lane { margin: 20px 0 0; font-size: 1.05rem; }
.flow__areas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.flow__area { padding: 2px 0 2px 14px; border-left: 3px solid var(--brass); display: grid; gap: 2px; }
.flow__area b { font-weight: 600; }
.flow__area > span { font-style: italic; font-size: .93rem; color: var(--muted); }
.flow__dots { display: flex; gap: 5px; margin-top: 3px; }
.flow__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
@media (max-width: 600px) {
  .flow__phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step:nth-child(2n)::after { display: none; }
  .flow__areas { grid-template-columns: 1fr; }
}