/* «Nuestra especialidad» (v23) · prefijo ce3- · mapa de regiones naturales y brechas por región
   Colores de región (convención de atlas escolar: costa arena, sierra tierra, selva bosque),
   validados como paleta categórica sobre papel #F4F2EE (CVD y visión normal). */
.ce3{
  --c-costa:#D0A12C;  --o-costa:#7A5A0E;
  --c-sierra:#B05A2C; --o-sierra:#6E3517;
  --c-selva:#00806A;  --o-selva:#004D40;
  --c:var(--c-sierra); --o:var(--o-sierra);
  color:var(--tinta);
}
.ce3[data-r="costa"]{ --c:var(--c-costa); --o:var(--o-costa) }
.ce3[data-r="selva"]{ --c:var(--c-selva); --o:var(--o-selva) }
.ce3 [data-r="costa"]:not(.ce3-lee):not(.ce3-ru){ --rc:var(--c-costa); --ro:var(--o-costa) }
.ce3 [data-r="sierra"]:not(.ce3-lee):not(.ce3-ru){ --rc:var(--c-sierra); --ro:var(--o-sierra) }
.ce3 [data-r="selva"]:not(.ce3-lee):not(.ce3-ru){ --rc:var(--c-selva); --ro:var(--o-selva) }
.ce3-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* cabecera */
.ce3__cab{ max-width:44rem }
.ce3__ante{ margin:0 0 .5rem; font:600 .95rem/1.3 var(--sans); color:var(--petroleo) }
.ce3__t{ margin:0; font-family:var(--sans); font-size:var(--t-titular); font-weight:650; line-height:1.1; letter-spacing:var(--tr-titular); max-width:20ch; text-wrap:balance }
.ce3__entra{ margin:.85rem 0 0; font-family:var(--lee); font-size:1.08rem; line-height:1.6; color:var(--tinta-2); max-width:46ch }

.ce3__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; margin-top:clamp(2rem,4vw,3rem) }
@media (min-width:62rem){
  .ce3__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2.5rem,5vw,5.5rem); align-items:start }
  .ce3__izq{ position:sticky; top:calc(var(--alto-nav) + 1.25rem) }
}

/* selector: la propia leyenda del mapa */
.ce3-tabs{ display:flex; gap:clamp(1.25rem,3vw,2.25rem); border-bottom:1px solid var(--filete) }
.ce3-tab{ position:relative; display:inline-flex; align-items:center; gap:.55rem; min-height:var(--toque,44px); padding:.55rem 0 .7rem; margin-bottom:-1px; border:0; background:none; font:600 1.06rem/1 var(--sans); color:var(--mudo); cursor:pointer; transition:color .25s }
.ce3-tab__m{ width:.72rem; height:.72rem; background:var(--rc); box-shadow:inset 0 0 0 1px var(--ro) }
.ce3-tab::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--tinta); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--salida) }
.ce3-tab:hover{ color:var(--tinta) }
.ce3-tab[aria-selected="true"]{ color:var(--tinta) }
.ce3-tab[aria-selected="true"]::after{ transform:scaleX(1) }
.ce3-tab:focus-visible{ outline:2px solid var(--petroleo); outline-offset:3px }

/* mapa */
.ce3-mapa{ margin:1.25rem 0 0; max-width:27rem }
.ce3-mapa__svg{ display:block; width:100%; height:auto }
.ce3-mapa__borde path{ fill:none; stroke:var(--tinta); stroke-width:2.4; stroke-linejoin:round }
.ce3-mapa__z{ fill:color-mix(in srgb, var(--rc) 24%, var(--papel)); transition:fill .45s var(--salida) }
.ce3[data-h="costa"] .ce3-mapa__z[data-r="costa"],
.ce3[data-h="sierra"] .ce3-mapa__z[data-r="sierra"],
.ce3[data-h="selva"] .ce3-mapa__z[data-r="selva"]{ fill:color-mix(in srgb, var(--rc) 46%, var(--papel)) }
.ce3[data-r="costa"] .ce3-mapa__z[data-r="costa"],
.ce3[data-r="sierra"] .ce3-mapa__z[data-r="sierra"],
.ce3[data-r="selva"] .ce3-mapa__z[data-r="selva"]{ fill:color-mix(in srgb, var(--rc) 88%, var(--papel)) }
.ce3-mapa__lago{ fill:#B9D3D6; stroke:#4D7F86; stroke-width:.8 }
.ce3-mapa__lim{ fill:none; stroke:var(--tinta); stroke-opacity:.38; stroke-width:1 }
.ce3-mapa__deps path{ fill:none; stroke:var(--papel); stroke-opacity:.85; stroke-width:1; stroke-linejoin:round; pointer-events:none }
.ce3-mapa__toque{ fill:transparent; cursor:pointer }
.ce3-mapa__et{ font:600 25px var(--sans); fill:var(--tinta-2); pointer-events:none; transition:fill .3s }
.ce3[data-r="costa"] .ce3-mapa__et[data-r="costa"]{ fill:var(--tinta) }
.ce3[data-r="sierra"] .ce3-mapa__et[data-r="sierra"],
.ce3[data-r="selva"] .ce3-mapa__et[data-r="selva"]{ fill:#fff }
.ce3-mapa__lima{ pointer-events:none }
.ce3-mapa__lima circle{ fill:var(--tinta); stroke:var(--papel); stroke-width:2 }
.ce3-mapa__lima text{ font:500 18px var(--sans); fill:var(--tinta) }
.ce3-mapa__vec{ font:italic 18px var(--lee); fill:var(--mudo); pointer-events:none }
.ce3-mapa__oc{ font:italic 19px var(--lee); fill:var(--mudo); letter-spacing:.02em; pointer-events:none }
.ce3-mapa__nota{ margin-top:.9rem; font:400 .8rem/1.5 var(--sans); color:var(--mudo); max-width:44ch }

/* fuentes (letra menuda, enlazadas) */
.ce3-fuente{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent) }
.ce3-fuente:hover{ color:var(--tinta); text-decoration-color:currentColor }
.ce3-fuente:focus-visible, .ce3-tabla summary:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px; border-radius:2px }

/* lectura de la región */
.ce3__der:focus-visible{ outline:2px solid var(--petroleo); outline-offset:6px }
.ce3-lee__t{ margin:0; font-family:var(--sans); font-size:clamp(1.42rem,1.1rem + 1vw,1.95rem); font-weight:650; line-height:1.14; letter-spacing:-.015em; max-width:24ch; text-wrap:balance }
.ce3-lee__p{ margin:.85rem 0 0; font-family:var(--lee); font-size:1.12rem; line-height:1.62; color:var(--tinta-2); max-width:50ch }
.ce3-lee__dato{ margin:.85rem 0 0; font-family:var(--lee); font-size:1.02rem; line-height:1.6; color:var(--tinta); max-width:54ch }
.ce3-lee__fs{ margin:.5rem 0 0; font:400 .8rem/1.5 var(--sans); color:var(--mudo); max-width:60ch }

/* gráfico de brechas */
.ce3-fig{ margin:2.25rem 0 0; padding-top:.9rem; border-top:1px solid var(--tinta) }
.ce3-fig__t{ margin:0; font:650 1.05rem/1.35 var(--sans); max-width:46ch }
.ce3-fig__ley{ display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; margin:.55rem 0 0; font:400 .84rem/1.3 var(--sans); color:var(--tinta-2) }
.ce3-ley{ display:inline-flex; align-items:center; gap:.45rem }
.ce3-ley i{ display:inline-block; flex:none }
.ce3-ley--r i{ width:13px; height:13px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1.5px var(--papel), 0 0 0 2.5px var(--o) }
.ce3-ley--o i{ width:10px; height:10px; border-radius:50%; background:var(--papel); box-shadow:inset 0 0 0 1.5px var(--mudo) }
.ce3-ley--p i{ width:2px; height:15px; background:var(--tinta) }

.ce3-bs{ list-style:none; margin:.75rem 0 0; padding:0 }
.ce3-b{ display:grid; grid-template-columns:minmax(0,1fr); gap:.4rem; padding:1.05rem 0 .9rem; border-bottom:1px solid var(--filete) }
.ce3-b__t{ margin:0; font:600 .98rem/1.3 var(--sans); color:var(--tinta) }
.ce3-b__dir{ margin:.15rem 0 0; font:400 .8rem/1.3 var(--sans); color:var(--mudo) }
.ce3-b__n{ margin:.5rem 0 0; font:400 1rem/1 var(--sans); color:var(--tinta-2) }
.ce3-b__n b{ font-size:2.05rem; font-weight:650; letter-spacing:-.02em; color:var(--tinta); font-variant-numeric:tabular-nums lining-nums }
.ce3-b__g{ margin:.35rem 0 0; font:500 .86rem/1.35 var(--sans); color:var(--tinta-2) }
.ce3-b__plot{ position:relative; height:4.6rem; margin-inline:.5rem;
  background:linear-gradient(to right, var(--filete) 1px, transparent 1px) 0 0 / calc(100% / 3) 100% repeat-x; border-right:1px solid var(--filete) }
.ce3-b__plot::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--filete-firme) }
.ce3-b__brecha{ position:absolute; top:50%; left:var(--a); width:calc(var(--b) - var(--a)); height:6px; margin-top:-3px; background:color-mix(in srgb, var(--c) 42%, transparent) }
.ce3-b__peru{ position:absolute; left:var(--x); top:18%; bottom:18%; width:2px; margin-left:-1px; background:var(--tinta) }
.ce3-b__peru em{ position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:.2rem; font:normal 500 .74rem/1.1 var(--sans); color:var(--tinta-2); white-space:nowrap; font-variant-numeric:tabular-nums }
.ce3-b__d{ position:absolute; top:50%; left:var(--x); width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--papel); box-shadow:inset 0 0 0 1.5px var(--mudo); z-index:1 }
.ce3[data-r="costa"] .ce3-b__d[data-r="costa"],
.ce3[data-r="sierra"] .ce3-b__d[data-r="sierra"],
.ce3[data-r="selva"] .ce3-b__d[data-r="selva"]{ width:17px; height:17px; margin:-8.5px 0 0 -8.5px; background:var(--rc); box-shadow:0 0 0 2px var(--papel), 0 0 0 3px var(--ro); z-index:2 }
.ce3-b__et{ position:absolute; left:var(--x); top:0; transform:translateX(-50%); font:600 .78rem/1 var(--sans); color:var(--tinta); white-space:nowrap }
.ce3-eje{ position:relative; height:1.4rem; margin-top:.35rem; font:400 .74rem/1 var(--sans); color:var(--mudo); font-variant-numeric:tabular-nums }
.ce3-eje__in{ position:absolute; inset:0 .5rem }
.ce3-eje span span{ position:absolute; left:var(--x); transform:translateX(-50%); white-space:nowrap }
.ce3-eje span span:last-child{ transform:translateX(-70%) }
@media (min-width:40rem){
  .ce3-b{ grid-template-columns:13rem minmax(0,1fr); gap:1.25rem 1.75rem; align-items:center }
  .ce3-eje{ margin-left:14.75rem }
}

.ce3-tabla{ margin-top:1rem; font:400 .86rem/1.4 var(--sans); color:var(--tinta-2) }
.ce3-tabla summary{ display:inline-block; cursor:pointer; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; padding:.35rem 0 }
.ce3-tabla summary::marker, .ce3-tabla summary::-webkit-details-marker{ display:none; content:"" }
.ce3-tabla table{ width:100%; margin-top:.6rem; border-collapse:collapse; font-variant-numeric:tabular-nums }
.ce3-tabla th, .ce3-tabla td{ padding:.45rem .5rem; border-bottom:1px solid var(--filete); text-align:right; vertical-align:top }
.ce3-tabla th:first-child{ text-align:left; padding-left:0; font-weight:500; color:var(--tinta) }
.ce3-tabla thead th{ font-weight:600; color:var(--tinta); border-bottom-color:var(--filete-firme) }
.ce3-fig__fs{ margin:.9rem 0 0; font:400 .78rem/1.5 var(--sans); color:var(--mudo); max-width:72ch }

/* v25 · ruta de trabajo: primero recursos de la empresa (tramo firme), al final la gran inversión (tramo punteado) */
.ce3-ru{ margin-top:2rem }
.ce3-ru__h{ margin:0 0 1.1rem; font:650 1.18rem/1.3 var(--sans); color:var(--tinta) }
.ce3-ru__tramo{ position:relative; padding:1.05rem 1.15rem 0.35rem 1.15rem; border-radius:14px }
.ce3-ru__tramo--propio{ background:color-mix(in srgb, var(--c) 11%, var(--papel)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent) }
.ce3-ru__tramo--fin{ margin-top:.9rem; background:transparent; box-shadow:inset 0 0 0 1px var(--filete-firme) }
.ce3-ru__k{ display:grid; gap:.2rem; margin:0 0 .9rem; font:400 .9rem/1.45 var(--sans); color:var(--tinta-2) }
.ce3-ru__k b{ font-weight:650; font-size:.98rem; color:var(--o) }
.ce3-ru__tramo--fin .ce3-ru__k b{ color:var(--tinta) }
.ce3-ru__l{ list-style:none; margin:0; padding:0; position:relative }
.ce3-ru__tramo--propio .ce3-ru__p:not(:last-child)::before{ content:""; position:absolute; left:1.05rem; top:2.1rem; bottom:0; width:2px; margin-left:-1px; background:var(--c); transform-origin:top }
.ce3-ru__p{ position:relative; display:grid; grid-template-columns:2.1rem minmax(0,1fr); gap:.9rem; padding:0 0 1rem }
.ce3-ru__n{ position:relative; z-index:1; display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--c); color:#fff; font:650 .95rem/1 var(--sans); font-variant-numeric:tabular-nums; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 11%, var(--papel)) }
.ce3[data-r="costa"] .ce3-ru__n{ color:var(--tinta) }
.ce3-ru__p--fin .ce3-ru__n{ background:var(--papel); color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--tinta-2) }
.ce3-ru__t{ margin:.28rem 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem; font:650 1.05rem/1.3 var(--sans); color:var(--tinta) }
.ce3-ru__fr{ font:500 .84rem/1.3 var(--sans); color:var(--mudo) }
.ce3-ru__p p{ margin:.3rem 0 0; font-family:var(--lee); font-size:1rem; line-height:1.55; color:var(--tinta-2); max-width:52ch }
.ce3-ru__ir{ display:inline-flex; align-items:center; gap:.4rem; margin-left:.15rem; font:600 .92rem/1.4 var(--sans); color:var(--petroleo); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; white-space:nowrap }
.ce3-ru__ir svg{ flex:none }
.ce3-ru__ir:hover{ color:var(--tinta) }
.ce3-ru__ir:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px; border-radius:2px }
@media (min-width:40rem){
  .ce3-ru__tramo{ padding:1.25rem 1.5rem .5rem }
  .ce3-ru__k{ grid-template-columns:minmax(0,auto) minmax(0,1fr); column-gap:1rem; align-items:baseline }
}
.ce3-fig{ margin-top:2.5rem }

.ce3__cierre{ margin:clamp(2.5rem,5vw,4rem) 0 0; font-family:var(--lee); font-size:1.1rem; line-height:1.6; color:var(--tinta-2); max-width:52ch }

/* movimiento: solo como respuesta a la elección, y solo si el sistema lo permite */
@media (prefers-reduced-motion:no-preference){
  .ce3-b__d, .ce3-b__et, .ce3-b__brecha{ transition:left .6s var(--salida), width .6s var(--salida), height .3s, margin .3s, background-color .4s }
  .ce3-entra{ animation:ce3-entra .4s var(--salida) both }
  @keyframes ce3-entra{ from{ opacity:0 } to{ opacity:1 } }
  /* al cambiar de región, la ruta se recorre: la línea baja y los pasos aparecen en orden */
  .ce3-ru.ce3-entra{ animation:none }
  .ce3-ru.ce3-entra .ce3-ru__p{ animation:ce3-paso .45s var(--salida) both; animation-delay:calc(var(--k) * 110ms) }
  .ce3-ru.ce3-entra .ce3-ru__p::before{ animation:ce3-linea .35s var(--salida) both; animation-delay:calc(var(--k) * 110ms + 180ms) }
  @keyframes ce3-linea{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
  @keyframes ce3-paso{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
}
@media (prefers-reduced-motion:reduce){
  .ce3 *, .ce3 *::after{ transition:none !important; animation:none !important }
}
@media (forced-colors:active){
  .ce3-b__d{ forced-color-adjust:none }
}