/* v24 · Los cuatro frentes de /que-hacemos/ (territorio_frentes.py). Prefijo fr-.
   Cada frente lleva su acento (--c) en el número, los nodos y la barra de avance.
   Un fondo distinto por frente marca el ritmo: papel, noche, blanco y tierra. */
.fr{ --fr-cd:color-mix(in oklab, var(--c, var(--petroleo)) 52%, var(--tinta)); position:relative }
.fr-f{ --fr-cd:color-mix(in oklab, var(--c) 52%, var(--tinta)); padding-block:clamp(3.5rem,7vw,6.5rem); scroll-margin-top:var(--dt-sub, 0px) }
.fr .fr-ciclo{ scroll-margin-top:calc(var(--dt-sub, 0px) + 1rem) }
/* El margen se suma al scroll-padding-top de la página (nav + 4.5rem), que ya cubre la barra de frentes. */

/* ---------------------------------------------------------------- Introducción y barra
   La barra se fija justo debajo del índice de la página (.subnav, z 50, alto --dt-sub;
   en móvil el índice no es fijo y --dt-sub vale 0). */
/* v24b: una sola introducción (#encaje), compacta: título a la izquierda y la regla de entrada a la derecha. */
.fr-intro{ background:var(--papel); padding-block:5.5rem 2.25rem }
.fr-intro__g{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--e-md) clamp(2rem,5vw,5rem); align-items:end }
.fr-intro .qcab{ margin:0; text-align:left; justify-items:start }
.fr-intro .qcab .h2{ max-width:18ch }
.fr-intro__e{ margin:0; max-width:46ch }
.fr-intro__e b{ display:block; margin-top:.5rem; font-weight:600; color:var(--tinta) }
@media (max-width:63.99rem){
  .fr-intro{ padding-block:4rem 1.75rem }
  .fr-intro__g{ grid-template-columns:1fr }
}
.fr-nav{ transition:top .3s var(--salida) }
@media (prefers-reduced-motion:reduce){ .fr-nav{ transition:none } }
.fr-nav{ position:sticky; top:calc(var(--alto-nav) + var(--dt-sub, 0px)); z-index:49; background:var(--papel);
  box-shadow:0 1px 0 var(--filete), 0 14px 24px -22px rgba(14,23,38,.5) }
.fr-nav ol{ list-style:none; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(.4rem,1.5vw,1.5rem) }
.fr-nav li{ --fr-cd:color-mix(in oklab, var(--c) 52%, var(--tinta)); min-width:0 }
.fr-nav a{ position:relative; display:flex; align-items:center; gap:.7rem; min-height:3.5rem; padding:.55rem 0 .7rem; text-decoration:none; color:var(--mudo); transition:color .2s ease }
.fr-nav a:hover{ color:var(--tinta) }
.fr-nav a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:-3px; border-radius:6px }
.fr-nav__n{ flex:none; display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; font-family:var(--lee); font-size:1rem; color:var(--tinta);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, var(--tinta)); transition:background-color .25s ease }
.fr-nav__t{ display:grid; min-width:0; line-height:1.2 }
.fr-nav__t b{ font-family:var(--sans); font-size:.95rem; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fr-nav__t small{ font-family:var(--lee); font-style:italic; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fr-nav__c{ display:none }
.fr-nav__p{ position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:var(--filete); overflow:hidden }
.fr-nav__p i{ position:absolute; inset:0; background:var(--fr-cd); transform-origin:0 50%; transform:scaleX(var(--p,0)) }
.fr-nav a[aria-current]{ color:var(--tinta) }
.fr-nav a[aria-current] .fr-nav__n{ background:var(--c); box-shadow:none }
@media (max-width:61.99rem){ .fr-nav__t small{ display:none } }
@media (max-width:47.99rem){
  .fr-nav ol{ padding-inline:.6rem; gap:.3rem }
  .fr-nav a{ flex-direction:column; gap:.25rem; min-height:3.6rem; padding:.45rem 0 .6rem; text-align:center }
  .fr-nav__n{ width:1.6rem; height:1.6rem; font-size:.88rem }
  .fr-nav__l{ display:none }
  .fr-nav__c{ display:inline }
  .fr-nav__t b{ font-size:.74rem; font-weight:600 }
}

/* ---------------------------------------------------------------- Cabecera de cada frente */
.fr-cab{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 clamp(1rem,3vw,2.5rem); align-items:start; max-width:60rem }
.fr-cab__n{ font-family:var(--lee); font-weight:400; font-size:clamp(4.2rem,2.6rem + 5vw,8.5rem); line-height:.78; color:var(--fr-cd); font-variant-numeric:lining-nums; margin-top:.1em }
.fr-cab h2{ margin:0; font-family:var(--sans); font-size:clamp(1.9rem,1.3rem + 2.1vw,3.1rem); font-weight:650; line-height:1.05; letter-spacing:-.028em; color:var(--tinta); text-wrap:balance }
.fr-cab__v{ margin:.45rem 0 0; font-family:var(--lee); font-style:italic; font-size:clamp(1.15rem,1rem + .5vw,1.45rem); color:var(--fr-cd) }
.fr-cab__lede{ margin:1rem 0 0; max-width:52ch; font-family:var(--lee); font-size:var(--t-lede); line-height:1.6; color:var(--tinta-2); text-wrap:pretty }
.fr-etq{ display:inline-block; vertical-align:.45em; margin-left:.4rem; padding:.28rem .75rem; border-radius:999px; font-size:.8rem; font-weight:650; letter-spacing:0; line-height:1.2;
  color:var(--tinta); background:color-mix(in srgb, var(--c) 42%, var(--blanco)) }

/* Enlaces y «qué recibe», iguales en los cuatro frentes */
.fr-ir{ display:inline-block; padding-block:.65rem; line-height:1.45; font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--petroleo);
  text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:.25em }
.fr-ir:hover{ text-decoration-color:currentColor }
.fr-ir svg{ display:inline-block; vertical-align:middle; margin-left:.2rem; transition:transform .25s var(--curva) }
.fr-ir:hover svg{ transform:translateX(3px) }
.fr-recibe{ margin:1.8rem 0 0; display:grid; gap:.35rem; padding:1.15rem 1.35rem; border-radius:12px; background:color-mix(in srgb, var(--c) 20%, transparent) }
.fr-recibe b{ font-family:var(--sans); font-size:.9rem; font-weight:650; color:var(--tinta) }
.fr-recibe span{ font-family:var(--lee); font-size:1.04rem; line-height:1.55; color:var(--tinta) }
.oscuro .fr-recibe{ background:rgba(244,242,238,.06) }
.oscuro .fr-recibe b{ color:var(--c) }
.oscuro .fr-recibe span{ color:var(--papel) }

/* ---------------------------------------------------------------- 1 · Diagnóstico: hilo de tres pasos */
.fr-diag{ background:var(--papel) }
.fr-diag__g{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); margin-top:clamp(2.2rem,4vw,3.5rem); align-items:start }
.fr-diag__foto{ margin:0; position:sticky; top:calc(var(--alto-nav) + var(--dt-sub, 0px) + 5rem) }
.fr-diag__foto img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:58% 45%; border-radius:14px }
.fr-diag__foto figcaption{ margin-top:.6rem; font-family:var(--sans); font-size:.86rem; color:var(--mudo) }
.fr-hilo{ list-style:none; margin:0; padding:0; display:grid }
.fr-hilo__i{ position:relative; display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:1.2rem; padding-bottom:1.9rem }
.fr-hilo__i::before{ content:""; position:absolute; left:calc(1.6rem - 1px); top:3.4rem; bottom:.2rem; width:2px; background:color-mix(in srgb, var(--c) 55%, transparent) }
.fr-hilo__nodo{ display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:50%; background:color-mix(in srgb, var(--c) 30%, var(--blanco)); color:var(--tinta) }
.fr-hilo__nodo .fr-ic{ width:1.45rem; height:1.45rem }
.fr-hilo h3{ margin:.55rem 0 .35rem; font-family:var(--sans); font-size:1.3rem; font-weight:650; letter-spacing:-.015em; color:var(--tinta) }
.fr-hilo p{ margin:0; max-width:50ch; font-family:var(--lee); font-size:1.02rem; line-height:1.6; color:var(--tinta-2) }
.fr-hilo .fr-hilo__ve{ display:flex; flex-wrap:wrap; gap:0 1.4rem; margin-top:.3rem }
.fr-hilo__vuelta{ display:flex; align-items:center; gap:.8rem; margin:0; padding-left:.85rem; font-family:var(--lee); font-style:italic; font-size:1.05rem; color:var(--fr-cd) }
.fr-hilo__vuelta .fr-ic{ flex:none; width:1.5rem; height:1.5rem }

/* ---------------------------------------------------------------- 2 · Dinámica social */
.fr-din{ position:relative; overflow:hidden; background:var(--noche); color:var(--papel) }
.fr-din .pagina{ position:relative }
.fr-din__foto{ position:absolute; top:0; right:0; width:58%; height:min(36rem,68vh); margin:0 }
.fr-din__foto picture,.fr-din__foto img{ display:block; width:100%; height:100% }
.fr-din__foto img{ object-fit:cover; object-position:50% 40%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 38%), linear-gradient(0deg, transparent, #000 45%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 38%), linear-gradient(0deg, transparent, #000 45%); mask-composite:intersect }
.fr-din__foto figcaption{ position:absolute; right:var(--canal); bottom:28%; font-family:var(--sans); font-size:.82rem; color:rgba(244,242,238,.8) }
.fr-din .fr-cab{ min-height:min(22rem,42vh); align-content:end; max-width:40rem }
.fr-din .fr-cab h2{ color:var(--papel) }
.fr-din .fr-cab__n,.fr-din .fr-cab__v{ color:var(--c) }
.fr-din .fr-cab__lede{ color:#DCE3E6 }
.fr-din__g{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(2rem,5vw,5rem); margin-top:clamp(2.5rem,5vw,4rem); align-items:start }
.fr-sub{ margin:0 0 1rem; font-family:var(--sans); font-size:1.05rem; font-weight:650; letter-spacing:-.005em; color:var(--piedra) }

.fr-lin{ border-top:1px solid var(--filete-oscuro) }
.fr-lin:last-of-type{ border-bottom:1px solid var(--filete-oscuro) }
.fr-lin summary{ list-style:none; display:grid; grid-template-columns:2.6rem minmax(0,1fr) 1.4rem; align-items:center; gap:1rem; min-height:var(--toque); padding:1rem .25rem; cursor:pointer;
  font-family:var(--sans); font-size:clamp(1.05rem,1rem + .3vw,1.2rem); font-weight:600; color:var(--papel); border-radius:8px; transition:background-color .2s ease }
.fr-lin summary::-webkit-details-marker{ display:none }
.fr-lin summary:hover{ background:rgba(244,242,238,.04) }
.fr-lin summary:focus-visible{ outline:3px solid var(--piedra); outline-offset:2px }
.fr-lin__ic{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:rgba(235,163,175,.14); color:var(--c); transition:background-color .25s ease, color .25s ease }
.fr-lin__ic .fr-ic{ width:1.3rem; height:1.3rem }
.fr-lin[open] .fr-lin__ic{ background:var(--c); color:var(--tinta) }
.fr-lin__mas{ position:relative; width:1.1rem; height:1.1rem; justify-self:end }
.fr-lin__mas::before,.fr-lin__mas::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.6px; margin-top:-.8px; background:var(--piedra); transition:transform .3s var(--curva) }
.fr-lin__mas::after{ transform:rotate(90deg) }
.fr-lin[open] .fr-lin__mas::after{ transform:rotate(0) }
.fr-lin__c{ display:grid; gap:.9rem; padding:0 .25rem 1.5rem 3.85rem }
.fr-lin[open] .fr-lin__c{ animation:fr-abre .35s var(--curva) both }
@keyframes fr-abre{ from{ opacity:0; transform:translateY(-6px) } }
.fr-lin__d{ margin:0; max-width:56ch; font-family:var(--lee); font-size:1.02rem; line-height:1.6; color:#DCE3E6 }
.fr-lin__r b,.fr-lin__con b{ display:block; font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--piedra); margin-bottom:.35rem }
.fr-lin__r ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem }
.fr-lin__r li{ padding:.35rem .75rem; border-radius:999px; font-family:var(--sans); font-size:.88rem; line-height:1.35; color:var(--papel); background:rgba(235,163,175,.13) }
.fr-lin__con{ margin:0; font-family:var(--sans); font-size:.92rem; line-height:1.5; color:var(--suave-claro) }
.fr-lin__con b{ display:inline; margin:0 .35rem 0 0 }
.fr-lin__ir{ margin:-.3rem 0 0 }
.fr-din .fr-ir{ color:var(--piedra) }

.fr-ciclo{ position:sticky; top:calc(var(--alto-nav) + var(--dt-sub, 0px) + 5rem); padding:clamp(1.3rem,2.5vw,2rem); border-radius:16px; background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px var(--filete-oscuro) }
.fr-ciclo .fr-sub{ font-size:1.2rem; color:var(--papel); margin-bottom:.4rem }
.fr-ciclo__lede{ margin:0; font-family:var(--lee); font-size:.98rem; line-height:1.55; color:#DCE3E6 }
.fr-anillo{ display:block; width:min(100%,14.5rem); margin:1.2rem auto .6rem; overflow:visible; color:var(--piedra) }
.fr-anillo__arcos path{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-opacity:.7; stroke-dasharray:1; stroke-dashoffset:0 }
.rv .fr-ciclo:not(.visto) .fr-anillo__arcos path{ stroke-dashoffset:1 }
.rv .fr-ciclo .fr-anillo__arcos path{ transition:stroke-dashoffset .7s var(--curva) }
.fr-anillo__arcos path:nth-child(2){ transition-delay:.55s !important }
.fr-anillo__arcos path:nth-child(3){ transition-delay:1.1s !important }
.fr-anillo__arcos path:nth-child(4){ transition-delay:1.65s !important }
.fr-anillo__nodo circle{ fill:var(--noche); stroke:var(--c); stroke-width:1.5; transition:fill .25s ease }
.fr-anillo__nodo text{ font-family:var(--sans); font-size:14px; font-weight:700; fill:var(--papel); text-anchor:middle; transition:fill .25s ease }
.fr-anillo__nodo[data-on="true"] circle{ fill:var(--c) }
.fr-anillo__nodo[data-on="true"] text{ fill:var(--tinta) }
.fr-anillo__m{ font-family:var(--sans); font-size:16px; font-weight:650; fill:var(--papel); text-anchor:middle }
.fr-anillo__a{ font-family:var(--sans); font-size:11px; fill:var(--suave-claro); text-anchor:middle }
.fr-ciclo__l{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem }
.fr-ciclo__l li{ display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.8rem; padding:.65rem .6rem; border-radius:10px; transition:background-color .25s ease }
.fr-ciclo__l li[data-on="true"]{ background:rgba(244,242,238,.07) }
.fr-ciclo__n{ display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; font-family:var(--sans); font-size:.8rem; font-weight:700; color:var(--papel); box-shadow:inset 0 0 0 1.5px var(--c) }
.fr-ciclo__l b{ font-family:var(--sans); font-size:1rem; font-weight:650; color:var(--papel) }
.fr-ciclo__l p{ margin:.15rem 0 0; font-family:var(--sans); font-size:.9rem; line-height:1.5; color:#DCE3E6 }

/* ---------------------------------------------------------------- 3 · Educativos: visor de fotos */
.fr-edu{ background:var(--blanco) }
.fr-edu__g{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(2.2rem,4vw,3.5rem); align-items:start }
.fr-visor__marco{ position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--noche) }
.fr-visor__f{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s ease; pointer-events:none }
.fr-visor__f[data-on="true"]{ opacity:1; pointer-events:auto }
.fr-visor__f picture,.fr-visor__f img{ display:block; width:100%; height:100% }
.fr-visor__f img{ object-fit:cover; object-position:var(--pos,50% 50%) }
.fr-visor__f figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1.1rem .9rem; font-family:var(--sans); font-size:.9rem; color:var(--papel);
  background:linear-gradient(0deg, rgba(10,26,47,.78), transparent) }
.fr-visor__f figcaption b{ font-weight:600; color:var(--piedra) }
.fr-visor__bs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-top:.55rem }
.fr-visor__b{ position:relative; padding:0; border:0; border-radius:8px; overflow:hidden; aspect-ratio:3/2; min-height:var(--toque); cursor:pointer; background:var(--noche); opacity:.55; transition:opacity .2s ease }
.fr-visor__b img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.fr-visor__b:hover{ opacity:.85 }
.fr-visor__b[aria-pressed="true"]{ opacity:1; box-shadow:0 0 0 2px var(--blanco), 0 0 0 4px var(--fr-cd) }
.fr-visor__b:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }
.fr-edu__p{ margin:0; font-family:var(--lee); font-size:1.06rem; line-height:1.65; color:var(--tinta-2) }
.fr-edu__qk{ margin:1.5rem 0 .6rem; font-family:var(--sans); font-size:.9rem; font-weight:650; color:var(--tinta) }
.fr-edu__quien{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
.fr-edu__quien li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .55rem; padding:.6rem 0; border-bottom:1px solid var(--filete); font-family:var(--lee); font-style:italic; color:var(--tinta-2) }
.fr-edu__quien b{ font-family:var(--sans); font-style:normal; font-weight:650; color:var(--tinta) }
.fr-edu__donde{ margin:1.3rem 0 0; font-family:var(--sans); font-size:.95rem; line-height:1.6; color:var(--tinta-2) }
.fr-edu__donde b{ display:block; font-size:.9rem; color:var(--tinta) }
.fr-edu__base{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:clamp(2.5rem,5vw,3.5rem); padding:clamp(1.2rem,2.5vw,1.6rem) clamp(1.2rem,2.5vw,1.8rem); border-radius:14px; background:var(--papel) }
.fr-edu__base p{ margin:0; max-width:40ch; font-family:var(--lee); font-size:1.02rem; line-height:1.55; color:var(--tinta-2) }
.fr-edu__base p b{ font-family:var(--sans); color:var(--tinta) }
.fr-edu__esp{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem }
.fr-edu__esp a{ display:inline-flex; align-items:center; gap:.5rem; min-height:var(--toque); padding:0 1rem; border-radius:999px; font-family:var(--sans); font-size:.9rem; font-weight:600;
  color:var(--tinta); text-decoration:none; background:var(--blanco); box-shadow:inset 0 0 0 1px var(--filete); transition:background-color .2s ease }
.fr-edu__esp a::before{ content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--c) }
.fr-edu__esp a:hover{ background:color-mix(in srgb, var(--c) 28%, var(--blanco)) }
.fr-edu__esp a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:2px }

/* ---------------------------------------------------------------- 4 · Productivos: camino de tres criterios */
.fr-pro{ background:color-mix(in srgb, var(--piedra) 34%, var(--papel)) }
.fr-pro__g{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:center }
.fr-pro__fotos{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; align-items:start }
.fr-pro__fotos figure{ margin:0 }
.fr-pro__fotos figure:last-child{ margin-top:3rem }
.fr-pro__fotos img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px }
.fr-pro__fotos figure:first-child img{ object-position:35% 55% }
.fr-pro__fotos figcaption{ margin-top:.5rem; font-family:var(--sans); font-size:.82rem; color:var(--tinta-2) }
.fr-camino{ list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.5rem); position:relative }
.fr-camino::before{ content:""; position:absolute; top:1.35rem; left:1.4rem; right:16%; border-top:2px dashed color-mix(in srgb, var(--fr-cd) 55%, transparent) }
.fr-pro .fr-camino{ --fr-cd:color-mix(in oklab, var(--c) 52%, var(--tinta)) }
.fr-camino li{ position:relative }
.fr-camino__n{ display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:50%; font-family:var(--lee); font-size:1.2rem; color:var(--tinta); background:var(--c); box-shadow:0 0 0 6px color-mix(in srgb, var(--piedra) 34%, var(--papel)) }
.fr-camino h3{ margin:1rem 0 .35rem; font-family:var(--sans); font-size:1.18rem; font-weight:650; letter-spacing:-.012em; color:var(--tinta) }
.fr-camino p{ margin:0; font-family:var(--lee); font-size:1rem; line-height:1.55; color:var(--tinta-2) }
.fr-pro__pie{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; margin-top:clamp(2.2rem,4vw,3rem) }
.fr-pro__regla{ margin:0; font-family:var(--lee); font-style:italic; font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem); line-height:1.45; color:var(--tinta); text-wrap:pretty }
.fr-pro__pie .fr-recibe{ margin:0; background:color-mix(in srgb, var(--c) 26%, var(--blanco)) }

/* ---------------------------------------------------------------- Qué recibe quien nos encarga */
.fr-enc .qenc__ent li > span:last-child .liga{ white-space:nowrap }

/* ---------------------------------------------------------------- Pantallas medianas y pequeñas */
@media (max-width:61.99rem){
  .fr-diag__g,.fr-din__g,.fr-edu__g,.fr-pro__g,.fr-pro__pie{ grid-template-columns:minmax(0,1fr) }
  .fr-diag__foto{ position:static }
  .fr-diag__foto img{ aspect-ratio:16/10 }
  .fr-ciclo{ position:static }
  .fr-din__foto{ position:relative; width:auto; height:auto; margin:calc(-1 * clamp(3.5rem,7vw,6.5rem)) 0 0 }
  .fr-din__foto img{ height:auto; aspect-ratio:3/2; -webkit-mask-image:linear-gradient(0deg, transparent, #000 40%); mask-image:linear-gradient(0deg, transparent, #000 40%) }
  .fr-din__foto figcaption{ bottom:18% }
  .fr-din .fr-cab{ min-height:0; margin-top:-2.5rem }
}
@media (max-width:47.99rem){
  .fr-f{ scroll-margin-top:3.75rem }
  .fr .fr-ciclo{ scroll-margin-top:4.5rem }
  .fr-cab{ grid-template-columns:minmax(0,1fr) }
  .fr-cab__n{ font-size:3.6rem; margin:0 0 .5rem }
  .fr-lin__c{ padding-left:.25rem }
  .fr-camino{ grid-template-columns:minmax(0,1fr); gap:1.6rem }
  .fr-camino::before{ top:1.4rem; bottom:1.4rem; left:1.35rem; right:auto; border-top:0; border-left:2px dashed color-mix(in srgb, var(--fr-cd) 55%, transparent) }
  .fr-camino li{ display:grid; grid-template-columns:2.7rem minmax(0,1fr); column-gap:1rem }
  .fr-camino__n{ grid-row:1 / span 2 }
  .fr-camino h3{ margin-top:.4rem }
  .fr-pro__fotos figure:last-child{ margin-top:1.6rem }
  .fr-edu__base{ display:grid }
  .fr-edu__esp a{ padding:0 .8rem; font-size:.86rem }
  .fr-hilo__i{ grid-template-columns:2.8rem minmax(0,1fr); gap:1rem }
  .fr-hilo__nodo{ width:2.8rem; height:2.8rem }
  .fr-hilo__i::before{ left:calc(1.4rem - 1px); top:3rem }
  .fr-hilo h3{ margin-top:.4rem }
  .fr-hilo__vuelta{ padding-left:.65rem }
}

@media (prefers-reduced-motion:reduce){
  .fr-nav a,.fr-nav__n,.fr-ir svg,.fr-lin summary,.fr-lin__ic,.fr-lin__mas::before,.fr-lin__mas::after,.fr-anillo__nodo circle,.fr-anillo__nodo text,
  .fr-ciclo__l li,.fr-visor__f,.fr-visor__b,.fr-edu__esp a{ transition:none }
  .fr-lin[open] .fr-lin__c{ animation:none }
  .rv .fr-ciclo .fr-anillo__arcos path{ transition:none; stroke-dashoffset:0 }
}