/* Observatorio Conecta v1 (v26). Prefijo propio: obs-.
   Tono editorial de instituto: papel, filetes finos, cifras en Literata con números tabulares.
   Sin tarjetas KPI ni estética de tablero: tablas legibles y barras SVG con su texto al lado. */
.obs{
  --obs-res:#B4532A;          /* resalte en papel (educación, Cusco, La Convención) */
  --obs-res-claro:#F0B48A;    /* resalte sobre noche */
  --obs-barra:var(--petroleo);
  --obs-fondo-barra:rgba(14,23,38,.07);
  --obs-papel-2:#ECE7DE;
}
.obs .num, .obs-tabla, .obs-barra__n, .obs-vivo__n, .obs-reg__n{ font-variant-numeric:tabular-nums lining-nums }

/* ---------- Cabecera (mancheta) ---------- */
.obs-cab{ background:var(--noche); color:var(--papel); position:relative; overflow:hidden;
  padding:calc(var(--alto-nav) + clamp(1.5rem,4vw,3rem)) 0 clamp(2.5rem,5vw,4rem) }
.obs-cab__in{ position:relative; display:grid; gap:var(--e-sm); grid-template-columns:minmax(0,1fr) }
.obs-cab--portada .obs-cab__in{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(2rem,5vw,5rem); align-items:end }
.obs-cab--portada .obs-cab__in > *:not(.obs-vivo){ grid-column:1 }
.obs-cab--portada .obs-vivo{ grid-column:2; grid-row:2 / span 4 }
.obs-cab__marca{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1rem; font-family:var(--sans); font-size:.86rem;
  border-bottom:1px solid var(--filete-piedra); padding-bottom:.6rem; margin-bottom:var(--e-xs); color:var(--piedra); font-weight:650 }
.obs-cab__corto{ color:var(--suave-claro); font-weight:500; font-size:.82rem }
.obs-cab .antetitulo{ color:var(--piedra); margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem }
.obs-cab__t{ font-family:var(--lee); font-weight:500; font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem); line-height:1.08; letter-spacing:-.02em;
  color:var(--papel); max-width:22ch; text-wrap:balance }
.obs-cab__lede{ font-size:var(--t-lede); line-height:1.6; color:#DCE3E6; max-width:60ch }

.obs-migas ol{ list-style:none; margin:0 0 var(--e-xs); padding:0; display:flex; flex-wrap:wrap; gap:.15rem .5rem; font-family:var(--sans); font-size:.86rem }
.obs-migas li{ display:flex; align-items:center; gap:.5rem; color:#C9D4D7 }
.obs-migas li + li::before{ content:"/"; color:rgba(244,242,238,.4) }
.obs-migas a{ color:#C9D4D7; text-decoration:underline; text-decoration-color:rgba(201,212,215,.45); text-underline-offset:.2em; display:inline-flex; min-height:1.75rem; align-items:center }
.obs-migas a:hover{ color:var(--papel) }
.obs-migas a[aria-current="page"]{ color:var(--piedra); text-decoration:none }

/* Dato vivo */
.obs-vivo{ border-top:1px solid var(--piedra); padding-top:var(--e-sm); margin-top:var(--e-md) }
.obs-vivo__k{ font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--piedra); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem }
.obs-vivo__k span{ font-weight:500; color:var(--suave-claro) }
.obs-vivo__n{ font-family:var(--lee); font-weight:500; font-size:clamp(3.4rem,2.4rem + 3.6vw,5.6rem); line-height:1; letter-spacing:-.03em; color:var(--papel); margin:.35rem 0 .5rem }
.obs-vivo__t{ color:#DCE3E6; line-height:1.55 }
.obs-vivo__t b{ color:var(--papel); font-weight:600 }
.obs-vivo__f{ margin-top:var(--e-sm); font-family:var(--sans); font-size:.86rem; color:var(--suave-claro); line-height:1.5 }
.obs-vivo__f a, .obs-cab__lede a{ color:var(--piedra); text-underline-offset:.2em }
.obs-vivo__f a + a{ margin-left:.4rem }

/* Subnavegación del Observatorio */
.obs-sub{ background:var(--papel); border-bottom:1px solid var(--filete) }
.obs-sub__in{ overflow-x:auto; scrollbar-width:none }
.obs-sub__in::-webkit-scrollbar{ display:none }
.obs-sub ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(.75rem,2.2vw,2rem); white-space:nowrap }
.obs-sub a{ display:inline-flex; align-items:center; min-height:3.1rem; font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--tinta-2);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px }
.obs-sub a:hover{ color:var(--tinta); border-bottom-color:var(--filete-firme) }
.obs-sub a[aria-current="page"]{ color:var(--petroleo); border-bottom-color:var(--petroleo) }

/* ---------- Secciones ---------- */
.obs-sec{ padding-block:clamp(3rem,6.5vw,5.5rem) }
.obs-sec--borde{ background:var(--blanco); border-block:1px solid var(--filete) }
.obs-sec--borde + .obs-sec--borde{ border-top:0 }
.obs-cabsec{ max-width:62ch; margin:0 0 clamp(1.75rem,3.5vw,2.75rem); display:grid; gap:var(--e-xs) }
.obs-cabsec .antetitulo{ margin:0 }
.obs-h2{ font-size:clamp(1.45rem,1.1rem + 1.1vw,2.1rem); max-width:28ch; text-wrap:balance }
.obs-h3{ font-family:var(--sans); font-size:1.02rem; font-weight:650; margin:var(--e-md) 0 var(--e-xs); color:var(--t1) }
.obs-h3:first-child{ margin-top:0 }
.obs-dos{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.75rem,5vw,5rem); align-items:start }
.obs-dos__a{ display:grid; gap:var(--e-sm); align-content:start }
.obs-dos__a .antetitulo{ margin:0 }
@media (min-width:64rem){ .obs-dos__a{ position:sticky; top:calc(var(--alto-nav) + 1.5rem) } }
.obs-dos--fig{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); margin-bottom:var(--e-md) }
.obs-prosa{ max-width:64ch }
.obs-prosa > * + *{ margin-top:1em }
.obs-prosa a, .obs-falta a, .obs-pasos a, .obs-fuente a, .obs-tabla a, .obs-reg a, .nota a{ color:var(--petroleo); text-underline-offset:.18em; text-decoration-thickness:1px }
.obs-prosa a:hover, .obs-fuente a:hover, .obs-tabla a:hover{ text-decoration-thickness:2px }
.obs-prosa-c{ font-size:.98rem; color:var(--t2); margin-top:var(--e-sm) }
.obs-fuente{ font-family:var(--sans); font-size:.84rem; line-height:1.5; color:var(--mudo); margin-top:var(--e-sm); max-width:78ch }
.obs-nota-c{ margin-top:var(--e-md) }
.obs-enlace{ font-family:var(--sans); font-weight:650; font-size:.95rem; color:var(--petroleo); text-underline-offset:.22em; display:inline-flex; min-height:2.5rem; align-items:center }
.oscuro .obs-enlace{ color:var(--piedra) }
.obs code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em; background:var(--obs-papel-2); padding:.05em .3em; border-radius:3px; overflow-wrap:anywhere }

/* ---------- Tablas ---------- */
.obs-tabla-marco{ position:relative; --obs-fondo-tabla:var(--papel) }
.obs-sec--borde .obs-tabla-marco{ --obs-fondo-tabla:var(--blanco) }
.banda--niebla .obs-tabla-marco{ --obs-fondo-tabla:var(--niebla) }
.obs-desliza{ display:none }
.obs-tabla-env{ overflow-x:auto; margin:0; border-top:1px solid var(--filete-firme) }
/* Primera columna fija al desplazar */
.obs-tabla thead th:first-child, .obs-tabla tbody th{ position:sticky; left:0; z-index:1; background:var(--obs-fondo-tabla, var(--papel)) }
@media (max-width:47.99rem){
  .obs-tabla-marco.con-desborde .obs-desliza{ display:flex; align-items:center; gap:.4rem; justify-content:flex-end; margin:0 0 .35rem;
    font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--petroleo) }
  .obs-tabla-marco.con-desborde .obs-desliza::after{ content:""; width:.45rem; height:.45rem; border-right:1.6px solid currentColor; border-top:1.6px solid currentColor; transform:rotate(45deg) }
  .obs-tabla-marco.con-desborde::after{ content:""; position:absolute; top:2.2rem; right:0; bottom:0; width:2.75rem; pointer-events:none; z-index:2;
    background:linear-gradient(to right, rgba(244,242,238,0), var(--obs-fondo-tabla, var(--papel)) 85%); transition:opacity .2s ease }
  .obs-tabla-marco.con-desborde.al-final::after{ opacity:0 }
  .obs-tabla tbody th{ box-shadow:1px 0 0 var(--filete) }
  .obs-tabla tbody th, .obs-tabla thead th:first-child{ min-width:7.5rem; max-width:9.5rem; white-space:normal }
}
@media (prefers-reduced-motion:reduce){ .obs-tabla-marco::after{ transition:none } }
.obs-tabla-env:focus-visible{ outline-offset:2px }
.obs-tabla{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.93rem; line-height:1.4 }
.obs-tabla caption{ caption-side:top; text-align:left; font-weight:650; font-size:.9rem; color:var(--tinta-2); padding:.7rem 0 .55rem }
.obs-tabla th, .obs-tabla td{ padding:.62rem .75rem .62rem 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--filete) }
.obs-tabla thead th{ font-weight:650; font-size:.82rem; color:var(--mudo); border-bottom:1px solid var(--filete-firme); vertical-align:bottom }
.obs-tabla tbody th{ font-weight:600; color:var(--t1) }
.obs-tabla .num{ text-align:right; padding-left:.75rem; white-space:nowrap }
.obs-tabla td:last-child, .obs-tabla th:last-child{ padding-right:0 }
.obs-tabla tbody tr:hover{ background:rgba(20,80,79,.04) }
.obs-tabla small{ display:block; font-size:.8rem; color:var(--mudo); font-weight:400; margin-top:.15rem; white-space:normal }
.obs-tabla b{ font-family:var(--lee); font-weight:600; font-size:1.06rem }
/* v28: la fila resaltada se distingue por el color y el peso del texto, sin raya lateral ni fondo tintado */
.obs-fila-res th, .obs-fila-res th a{ color:var(--obs-res) }
.obs-fila-res td{ color:var(--t1); font-weight:650 }
.obs-fila-tot th, .obs-fila-tot td{ font-weight:650; border-top:1px solid var(--filete-firme); border-bottom:0 }
.obs-fila-dep td:nth-child(3){ color:var(--obs-res); font-weight:600 }
.obs-tabla thead button{ font:inherit; color:inherit; background:none; border:0; padding:.2rem 0; cursor:pointer; text-align:inherit;
  display:inline-flex; align-items:flex-end; gap:.3rem; min-height:2rem }
.obs-tabla thead button::after{ content:""; width:.5rem; height:.5rem; flex:0 0 auto; margin-bottom:.3rem; opacity:.35;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) }
.obs-tabla th[aria-sort="ascending"] button::after{ transform:rotate(-135deg); opacity:1; margin-bottom:0 }
.obs-tabla th[aria-sort="descending"] button::after{ opacity:1 }
.obs-tabla th[aria-sort]:not([aria-sort="none"]) button{ color:var(--petroleo) }
.obs-tabla thead button:hover{ color:var(--tinta) }

/* Tablas anchas y ficha: en pantallas chicas, cada fila se apila con su rótulo */
@media (max-width:47.99rem){
  .obs-tabla-env--ancha .obs-tabla thead, .obs-tabla-env--ficha .obs-tabla thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .obs-tabla-env--ancha .obs-tabla tr, .obs-tabla-env--ficha .obs-tabla tr{ display:grid; grid-template-columns:minmax(0,1fr); padding:.7rem 0; border-bottom:1px solid var(--filete) }
  .obs-tabla-env--ancha .obs-tabla th, .obs-tabla-env--ancha .obs-tabla td,
  .obs-tabla-env--ficha .obs-tabla th, .obs-tabla-env--ficha .obs-tabla td{ border:0; padding:.12rem 0; text-align:left; white-space:normal }
  .obs-tabla-env--ancha .obs-tabla td::before, .obs-tabla-env--ficha .obs-tabla td::before{ content:attr(data-label) ": "; font-weight:600; color:var(--mudo); font-size:.8rem }
  .obs-tabla-env--ficha .obs-tabla td:nth-child(2)::before{ content:none }
  .obs-tabla-env--ficha .obs-tabla tbody th{ font-size:.86rem; color:var(--mudo) }
  .obs-tabla-env--ficha .obs-tabla b{ font-size:1.35rem }
  .obs-tabla-env--ancha .obs-tabla tbody th, .obs-tabla-env--ficha .obs-tabla tbody th{ position:static; box-shadow:none; max-width:none; background:none }
}

/* ---------- Barras (SVG decorativo, texto en HTML) ---------- */
.obs-fig{ margin:0 }
.obs-fig__t{ font-family:var(--sans); font-weight:650; font-size:.9rem; color:var(--tinta-2); margin-bottom:var(--e-sm); max-width:60ch }
.obs-barras{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-family:var(--sans) }
.obs-barra{ display:grid; grid-template-columns:minmax(9rem,15rem) minmax(0,1fr) minmax(5.5rem,auto); align-items:center; gap:.3rem .9rem }
.obs-barra__k{ font-size:.92rem; line-height:1.3; color:var(--t1) }
.obs-barra__k small{ display:block; font-size:.78rem; color:var(--mudo) }
.obs-barra__g{ width:100%; height:.8rem; display:block }
.obs-barra__fondo{ fill:var(--obs-fondo-barra) }
.obs-barra__v{ fill:var(--obs-barra) }
.obs-barra__n{ font-size:.9rem; font-weight:600; text-align:right; white-space:nowrap }
.obs-barra--res .obs-barra__v{ fill:var(--obs-res) }
.obs-barra--res .obs-barra__k{ font-weight:650 }
.obs-barra--res .obs-barra__n{ color:var(--obs-res) }
.obs-barras--grandes{ gap:1rem }
.obs-barras--grandes .obs-barra__g{ height:1.6rem }
.obs-barras--grandes .obs-barra__n{ font-family:var(--lee); font-size:1.05rem }
.obs-barras--compactas{ gap:.32rem }
.obs-barras--compactas .obs-barra__g{ height:.62rem }
.obs-barras--compactas .obs-barra__k{ font-size:.88rem }
@media (max-width:40rem){
  .obs-barra{ grid-template-columns:minmax(0,1fr) auto; }
  .obs-barra__k{ grid-column:1 / -1 }
  .obs-barra__g{ grid-column:1 }
  .obs-barras--compactas{ gap:.55rem }
  .obs-barras--compactas .obs-barra__k small{ display:inline; margin-left:.35rem }
  .obs-barra__n{ min-width:4.5rem }
}

/* Barra apilada */
.obs-ap svg{ width:100%; height:1.15rem; display:block; border-radius:2px }
.obs-ap__ley{ list-style:none; margin:.55rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; font-family:var(--sans); font-size:.86rem; color:var(--t2) }
.obs-ap__ley li{ display:inline-flex; align-items:center; gap:.4rem }
.obs-ap__ley b{ font-weight:650; color:var(--t1) }
.obs-ap__m{ width:.8rem; height:.8rem; border-radius:2px; display:inline-block; background:currentColor }
.obs-ap__edu, .obs-ap__rur{ fill:var(--obs-res); color:var(--obs-res) }
.obs-ap__resto, .obs-ap__urb{ fill:var(--petroleo); color:var(--petroleo) }
.obs-ap__ini{ fill:#8FB0B4; color:#8FB0B4 }
.obs-ap__pri{ fill:#3D7A78; color:#3D7A78 }
.obs-ap__sec{ fill:var(--petroleo-hondo); color:var(--petroleo-hondo) }

/* ---------- Portada ---------- */
/* v28: cuatro preguntas como filas de índice editorial (quién · qué encuentra), no cuatro tarjetas con raya lateral */
.obs-para{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-firme) }
.obs-para li{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:.4rem clamp(1.5rem,4vw,4rem); align-items:baseline;
  padding:clamp(1rem,2vw,1.4rem) 0; border-bottom:1px solid var(--filete) }
.obs-para h3{ font-family:var(--lee); font-weight:500; font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem); line-height:1.2; letter-spacing:-.01em }
.obs-para p{ font-size:1rem; color:var(--t2); line-height:1.6; max-width:60ch }

.obs-prods{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-firme) }
.obs-prod{ border-bottom:1px solid var(--filete) }
.obs-prod__a{ display:grid; grid-template-columns:minmax(0,4fr) auto minmax(0,7fr); gap:.4rem 1.5rem; align-items:baseline;
  padding:1.1rem .25rem; text-decoration:none; color:inherit; transition:background-color .2s ease }
.obs-prod__a:hover{ background:rgba(20,80,79,.05) }
.obs-prod__t{ font-family:var(--lee); font-size:clamp(1.12rem,1rem + .4vw,1.32rem); font-weight:500; color:var(--t1); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.2em; transition:text-decoration-color .2s }
.obs-prod__a:hover .obs-prod__t{ text-decoration-color:var(--petroleo) }
.obs-prod__d{ font-size:.97rem; color:var(--t2); line-height:1.55 }

/* v28: el estado es texto con peso y color, no una píldora */
.obs-estado{ font-family:var(--sans); font-size:.86rem; font-weight:700; white-space:nowrap }
.obs-estado--pub{ color:var(--petroleo) }
.obs-estado--pil{ color:var(--obs-res) }
.obs-estado--prep{ color:var(--tinta-2); font-weight:600 }
.obs-cab .obs-estado--prep{ color:var(--piedra) }

.obs-reglas, .obs-falta, .obs-pasos, .obs-cambios{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-firme) }
.obs-reglas li, .obs-falta li, .obs-pasos li, .obs-cambios li{ padding:1rem 0; border-bottom:1px solid var(--filete) }
.obs-reglas h3{ font-size:1.06rem; margin-bottom:.35rem }
.obs-reglas p{ color:var(--t2) }
.obs-falta li, .obs-pasos li, .obs-cambios li{ color:var(--t2); line-height:1.6 }
.obs-falta b, .obs-pasos b, .obs-cambios b{ color:var(--t1); font-family:var(--sans); font-weight:650 }
.obs-pasos{ counter-reset:paso }
.obs-pasos li{ counter-increment:paso; display:grid; grid-template-columns:2rem minmax(0,1fr) }
.obs-pasos li::before{ content:counter(paso); font-family:var(--lee); font-size:1.25rem; color:var(--petroleo); line-height:1.3 }
.obs-cambios b{ margin-right:.5rem }

.obs-cal{ margin:0; border-top:1px solid var(--filete-firme) }
.obs-cal > div{ display:grid; grid-template-columns:minmax(9rem,2fr) minmax(0,5fr); gap:.35rem 1.5rem; padding:.95rem 0; border-bottom:1px solid var(--filete) }
.obs-cal dt{ font-family:var(--sans); font-weight:650; font-size:.95rem; color:var(--t1) }
.obs-cal dd{ margin:0; color:var(--t2); line-height:1.6 }

/* ---------- Cusco ---------- */
.obs-reg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,3vw,2.5rem); margin-bottom:var(--e-lg) }
.obs-reg__i{ border-top:1px solid var(--filete-firme); padding-top:var(--e-sm); display:grid; gap:.5rem; align-content:start }
.obs-reg__i h3{ font-size:1rem; font-family:var(--sans) }
.obs-reg__i .obs-reg__n{ font-family:var(--lee); font-weight:500; font-size:clamp(2.3rem,1.8rem + 1.6vw,3.2rem); line-height:1; letter-spacing:-.02em; color:var(--obs-res) }
.obs-reg__i .obs-reg__n--txt{ font-size:clamp(1.45rem,1.2rem + .8vw,1.85rem); line-height:1.15 }
.obs-reg__i p{ color:var(--t2); font-size:.98rem }
.obs-reg__i .obs-fuente{ margin-top:0 }

.obs-fichas{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); column-gap:clamp(1.25rem,3vw,2.5rem); border-top:1px solid var(--filete-firme) }
.obs-fichas a{ display:grid; gap:.15rem; padding:.85rem 0; border-bottom:1px solid var(--filete); text-decoration:none; color:inherit; min-height:3rem }
.obs-fichas span{ font-family:var(--lee); font-size:1.12rem; color:var(--t1); text-decoration:underline; text-decoration-color:var(--filete-firme); text-underline-offset:.2em }
.obs-fichas a:hover span{ text-decoration-color:var(--petroleo) }
.obs-fichas small{ font-family:var(--sans); font-size:.82rem; color:var(--mudo) }

.obs-lista-inv{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-firme) }
.obs-lista-inv li{ padding:.8rem 0; border-bottom:1px solid var(--filete); display:grid; gap:.2rem }
.obs-lista-inv a{ color:var(--t1); text-underline-offset:.18em; text-decoration-color:var(--filete-firme); line-height:1.45; font-size:.98rem }
.obs-lista-inv a:hover{ text-decoration-color:var(--petroleo) }
.obs-lista-inv span{ font-family:var(--sans); font-size:.82rem; color:var(--mudo) }
.obs-lista-inv b{ color:var(--t1); font-weight:650 }

/* Megantoni */
.obs-meg{ background:var(--noche); position:relative; overflow:hidden }
.obs-meg__fig{ margin-top:var(--e-md) }
.obs-meg__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 40%; border-radius:4px }
.obs-meg__fig figcaption{ font-family:var(--sans); font-size:.8rem; color:var(--suave-claro); margin-top:.5rem }
.obs-meg .obs-dos{ grid-template-columns:minmax(0,4fr) minmax(0,5fr) }
.obs-meg .obs-dos__b{ border-top:1px solid var(--filete-piedra); padding-top:var(--e-xs) }
.obs-meg .entrada{ color:#DCE3E6 }
.obs-meg__dl{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem }
.obs-meg__dl > div{ padding:.7rem 0; border-bottom:1px solid var(--filete-oscuro) }
.obs-meg__dl dt{ font-family:var(--sans); font-size:.82rem; color:var(--suave-claro) }
.obs-meg__dl dd{ margin:.1rem 0 0; font-family:var(--lee); font-size:1.6rem; line-height:1.15; color:var(--papel) }
.obs-meg .obs-fuente{ color:var(--suave-claro) }
.obs-meg .obs-fuente a, .obs-meg .obs-lista-inv a{ color:var(--piedra) }
.obs-meg .obs-lista-inv{ border-color:var(--filete-piedra) }
.obs-meg .obs-lista-inv li{ border-color:var(--filete-oscuro) }
.obs-meg .obs-lista-inv span, .obs-meg .obs-lista-inv b{ color:var(--suave-claro) }

.obs-otras ul{ list-style:none; margin:var(--e-sm) 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem }
.obs-otras a{ display:inline-flex; align-items:center; min-height:2.5rem; padding:0 .95rem; border-radius:999px; box-shadow:inset 0 0 0 1px var(--filete-firme);
  font-family:var(--sans); font-size:.9rem; color:var(--t1); text-decoration:none }
.obs-otras a:hover{ box-shadow:inset 0 0 0 1px var(--petroleo); color:var(--petroleo) }
.obs-otras a[aria-current="page"]{ background:var(--petroleo); color:var(--papel); box-shadow:none }
.obs-otras.obs-sec{ padding-block:clamp(2.25rem,4.5vw,3.5rem) }

/* ---------- Metodologías ---------- */
.obs-formula{ border-block:1px solid var(--filete-firme); padding:clamp(1rem,2.5vw,1.4rem) 0; display:grid; gap:.6rem; margin-block:var(--e-md) }
.obs-formula__f{ font-family:var(--lee); font-style:italic; font-size:clamp(1.2rem,1rem + .8vw,1.6rem); color:var(--t1); line-height:1.3 }
.obs-formula__f span{ font-style:normal; font-weight:600; font-family:var(--sans); font-size:.85em }
.obs-formula__d{ font-family:var(--sans); font-size:.9rem; color:var(--t2); line-height:1.55 }
.obs-dos__a .obs-formula{ margin-block:var(--e-sm) 0 }

.obs-escala{ list-style:none; margin:var(--e-md) 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; font-family:var(--sans) }
.obs-escala li{ display:grid; gap:.1rem; padding:.55rem .6rem; background:rgba(20,80,79,calc(var(--o,.12))); color:var(--t1); border-radius:2px }
.obs-escala li:nth-child(1){ --o:.08 } .obs-escala li:nth-child(2){ --o:.16 } .obs-escala li:nth-child(3){ --o:.28 }
.obs-escala li:nth-child(4){ --o:.6; color:var(--papel) } .obs-escala li:nth-child(5){ --o:.92; color:var(--papel) }
.obs-escala b{ font-family:var(--lee); font-size:1.3rem; font-weight:600; line-height:1 }
.obs-escala span{ font-size:.8rem; line-height:1.25; overflow-wrap:anywhere }
.obs-escala-env{ margin-top:var(--e-xl); max-width:52rem }

/* v28: las cinco P como escalera de dependencia: cada peldaño se apoya en el anterior (secuencia real, 1 a 5) */
.obs-p5{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--filete-firme) }
.obs-p5 li{ display:grid; grid-template-columns:2.6rem minmax(9rem,14rem) minmax(0,1fr); gap:.3rem clamp(1rem,2.5vw,2rem); align-items:baseline;
  padding:1rem 0; border-bottom:1px solid var(--filete); margin-left:calc(var(--k, 0) * clamp(0rem,4vw,3.5rem)) }
.obs-p5__i{ font-family:var(--lee); font-weight:500; font-size:2rem; line-height:1; color:var(--petroleo) }
.obs-p5 h3{ font-family:var(--lee); font-weight:500; font-size:1.3rem; display:grid }
.obs-p5 h3 span{ font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--mudo) }
.obs-p5 p{ font-size:.97rem; color:var(--t2); line-height:1.58; max-width:58ch }

/* ---------- Datos ---------- */
.obs-conjs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem) }
.obs-conj{ border-top:1px solid var(--filete-firme); padding-top:var(--e-sm); display:grid; gap:.75rem; align-content:start }
.obs-conj h3{ font-family:var(--lee); font-weight:500; font-size:1.35rem }
.obs-conj > p{ color:var(--t2); font-size:.98rem; line-height:1.6 }
.obs-conj dl{ margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem 1rem; font-family:var(--sans) }
.obs-conj dt{ font-size:.78rem; color:var(--mudo) }
.obs-conj dd{ margin:0; font-size:.9rem; font-weight:600 }
.obs-conj dd a{ color:var(--petroleo) }
.obs-desc{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem }
.obs-desc li{ display:inline-flex }
.obs-desc a{ display:inline-flex; align-items:center; gap:.55rem; min-height:2.6rem; padding:0 1rem; border-radius:999px; background:var(--noche); color:var(--papel);
  font-family:var(--sans); font-size:.88rem; font-weight:600; text-decoration:none; overflow-wrap:anywhere }
.obs-desc a:hover{ background:var(--petroleo) }
.obs-desc span{ font-family:var(--sans); font-size:.72rem; font-weight:700; color:var(--mudo); align-self:center; margin-left:.35rem }

/* Cómo citar */
.obs-citar{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:.75rem clamp(1.5rem,4vw,3rem); align-items:start }
.obs-citar__t{ font-family:var(--sans); font-size:1rem; font-weight:650; grid-row:span 2 }
.obs-citar__cita{ margin:0; font-family:var(--lee); font-style:italic; font-size:1rem; line-height:1.6; color:var(--t1); overflow-wrap:anywhere }
.obs-citar__lic{ font-family:var(--sans); font-size:.86rem; color:var(--mudo); line-height:1.55 }
.obs-citar__lic a{ color:var(--petroleo) }
.obs-citar__d{ margin-top:var(--e-md); padding-left:calc(33.333% + clamp(.5rem,1.3vw,1rem)) }

/* Desplegables */
.obs-det{ margin-top:var(--e-md); border-top:1px solid var(--filete) }
.obs-det summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5rem; min-height:2.75rem; font-family:var(--sans); font-weight:650; font-size:.92rem; color:var(--petroleo) }
.obs-det summary::-webkit-details-marker{ display:none }
.obs-det summary::before{ content:""; width:.45rem; height:.45rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); transition:transform .2s ease }
.obs-det[open] summary::before{ transform:rotate(45deg) }
.obs-det[open] > :not(summary){ margin-top:.25rem }
.obs-det--oscuro{ border-color:var(--filete-oscuro) }
.obs-det--oscuro summary{ color:var(--piedra) }
@media (prefers-reduced-motion:reduce){ .obs-det summary::before, .obs-prod__a, .obs-prod__t{ transition:none } }

/* ---------- Adaptación ---------- */
@media (max-width:63.99rem){
  .obs-cab--portada .obs-cab__in{ grid-template-columns:minmax(0,1fr) }
  .obs-cab--portada .obs-vivo{ grid-column:1; grid-row:auto }
  .obs-dos, .obs-dos--fig, .obs-meg .obs-dos{ grid-template-columns:minmax(0,1fr) }
  .obs-dos--fig .obs-dos__a2{ order:-1 }
  .obs-reg{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:47.99rem){
  .obs-prod__a{ grid-template-columns:minmax(0,1fr) auto }
  .obs-prod__d{ grid-column:1 / -1 }
  .obs-conjs{ grid-template-columns:minmax(0,1fr) }
  .obs-citar{ grid-template-columns:minmax(0,1fr) }
  .obs-citar__t{ grid-row:auto }
  .obs-citar__d{ padding-left:0 }
  .obs-cal > div{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:35rem){
  .obs-para li{ grid-template-columns:minmax(0,1fr) }
  .obs-p5 li{ grid-template-columns:2.2rem minmax(0,1fr); margin-left:0 }
  .obs-p5 li p{ grid-column:2 }
  .obs-escala{ grid-template-columns:minmax(0,1fr); gap:2px }
  .obs-escala li{ grid-template-columns:2rem minmax(0,1fr); align-items:center }
  .obs-conj dl{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .obs-meg__dl dd{ font-size:1.35rem }
}
