:root {
    --azul: #0F70B7;
    --gris: #575656;
    --tinta: #2A2A2A;
    --tenue: #8C8C8C;
    --filete: #CFCFCF;
    --palido: #E9F1F8;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", "TeX Gyre Pagella", "URW Palladio L", Georgia, serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: #fff;
    color: var(--tinta);
    font-family: var(--serif);
    font-size: 19.8px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--azul); text-decoration: none; border-bottom: 1px solid rgba(15,112,183,.25); }
  a:hover { border-bottom-color: var(--azul); }
  .hoja { max-width: 946px; margin: 0 auto; padding: 0 30.8px; }

  /* encabezado */
  header.sitio { padding-top: 37.4px; }
  .barra { display: flex; justify-content: space-between; align-items: flex-end; gap: 26.4px; flex-wrap: wrap; }
  .barra .logo { display: block; width: 182.6px; height: 70.4px; overflow: hidden; border: 0; }
  .barra .logo img { display: block; height: 115.5px; width: auto; margin: -23.1px 0 0 -12.1px; }
  nav { font-family: var(--sans); font-size: 14.3px; letter-spacing: .02em; display: flex; flex-wrap: wrap; gap: 4.4px 19.8px; }
  nav a { color: var(--gris); border: 0; }
  nav a:hover { color: var(--azul); }

  .portada { padding: 79.2px 0 44px; }
  .portada .rotulo { font-family: var(--sans); font-size: 14.3px; color: var(--tenue); letter-spacing: .04em; margin: 0 0 19.8px; }
  .portada h1 { font-family: var(--sans); font-weight: 700; color: var(--gris); font-size: 46.2px; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
  .portada .sub { font-style: italic; color: var(--azul); font-size: 24.2px; margin: 17.6px 0 0; }
  .portada .quien { margin: 30.8px 0 0; font-size: 18.7px; }
  .portada .quien span { color: var(--tenue); font-size: 16.5px; display: block; line-height: 1.45; margin-top: 4.4px; }

  .trenza { display: block; width: 100%; height: auto; margin: 8.8px 0 0; }
  .trenza {}
  .trenza .st { fill: none; stroke: var(--azul); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .trenza .ha { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: butt; }

  /* secciones */
  section { padding: 61.6px 0 8.8px; }
  h2 { font-family: var(--sans); font-weight: 700; color: var(--gris); font-size: 28.6px; margin: 0 0 22px; }
  h3 { font-family: var(--sans); font-weight: 700; color: var(--azul); font-size: 18.7px; margin: 0 0 6.6px; }
  p { margin: 0 0 15.4px; }
  .nota { font-size: 15.4px; color: var(--tenue); }

  .bloque { border-left: 2px solid var(--azul); padding: 2px 0 2px 19.8px; margin: 0 0 28.6px; }
  .bloque.gris { border-left-color: var(--filete); }
  .bloque .meta { font-family: var(--sans); font-size: 13.2px; color: var(--tenue); letter-spacing: .03em; margin-bottom: 4.4px; }

  .clave { background: var(--palido); border-radius: 2px; padding: 19.8px 26.4px; margin: 30.8px auto; max-width: 748px; text-align: center; font-size: 20.9px; }

  ol.metodo { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
  ol.metodo li { counter-increment: paso; position: relative; padding-left: 46.2px; margin-bottom: 17.6px; }
  ol.metodo li::before { content: counter(paso); position: absolute; left: 0; top: 1px; font-family: var(--sans); font-weight: 700; color: var(--azul); font-size: 16.5px; width: 28.6px; height: 28.6px; border: 1.5px solid var(--azul); border-radius: 50%; text-align: center; line-height: 25.3px; }

  .equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 6.6px 39.6px; }
  .persona { padding: 11px 0; border-bottom: 1px solid #eee; }
  .persona b { font-family: var(--sans); font-weight: 700; font-size: 17.1px; color: var(--tinta); display: block; }
  .persona .rol { font-family: var(--sans); font-size: 13.2px; color: var(--azul); letter-spacing: .03em; }
  .persona .inst { font-size: 16.5px; color: var(--tenue); display: block; line-height: 1.45; }
  .persona .area { font-size: 16.5px; color: var(--tinta); display: block; line-height: 1.45; }
  h3.grupo { color: var(--gris); margin: 37.4px 0 6.6px; }
  h3.grupo:first-of-type { margin-top: 0; }

  .ref { margin: 0 0 19.8px; }
  .ref .autores { display: block; }
  .ref .titulo { font-style: italic; }

  .actividad { display: grid; grid-template-columns: 165px 1fr; gap: 0 26.4px; padding: 15.4px 0; border-top: 1px solid #eee; }
  .actividad:last-child { border-bottom: 1px solid #eee; }
  .actividad .cuando { font-family: var(--sans); font-size: 14.3px; color: var(--azul); padding-top: 3px; }
  .actividad .lugar { color: var(--tenue); font-size: 16.5px; }

  footer { margin-top: 79.2px; padding: 0 0 44px; }
  footer .cols { display: flex; justify-content: space-between; gap: 35.2px; flex-wrap: wrap; margin-top: 24.2px; font-size: 16.5px; color: var(--gris); }
  footer .cols div { min-width: 242px; }
  footer .agradece { font-size: 15.4px; color: var(--tenue); margin-top: 24.2px; max-width: 682px; }

  @media (max-width: 640px) {
    body { font-size: 18.7px; }
    .portada { padding-top: 52.8px; }
    .portada h1 { font-size: 34.1px; }
    .portada .sub { font-size: 20.9px; }
    .barra .logo { width: 143px; height: 55px; }
    .barra .logo img { height: 90.2px; margin: -17.6px 0 0 -8.8px; }
    nav { gap: 4.4px 15.4px; }
    .actividad { grid-template-columns: 1fr; }
  }

  nav a.activo { color: var(--azul); }
  .portada.chica { padding: 61.6px 0 30.8px; }
  .portada.chica h1 { font-size: 37.4px; }
  .mas { font-family: var(--sans); font-size: 15.4px; }
  @media (max-width: 640px) { .portada.chica h1 { font-size: 29.7px; } }
  .lista-refs .ref { padding: 13.2px 0; margin: 0; border-top: 1px solid #eee; }
  .lista-refs .ref:last-child { border-bottom: 1px solid #eee; }