/* Mapa de precios · se carga después de /estilos.css */
[hidden] { display: none !important; }
:root {
  --p0: #93AA78; --p1: #76935E; --p2: #5B7B48; --p3: #425F36; --p4: #2A3F24;
}

.cabecera-plana { position: relative; inset: auto; border-bottom: 1px solid var(--marfil-suave); }
.cabecera-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; }

.mapa-intro { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.mapa-intro h1 {
  font-weight: 380; font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.05; letter-spacing: -.012em;
  margin: 0; max-width: 20ch; font-variation-settings: "opsz" 72;
}

.aviso-personal { max-width: 56ch; margin: 1.4rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--oro); background: rgba(176,138,62,.1); font-size: 1rem; }
.aviso-personal strong { font-weight: 600; }

.mapa-cuerpo { padding-top: 2rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.mapa-controles { display: inline-flex; border: 1px solid var(--espresso); border-radius: 99px; padding: 3px; gap: 3px; margin-bottom: 1.4rem; }
.control {
  font: 500 1rem/1 var(--serif); color: var(--espresso); background: transparent; border: 0;
  border-radius: 99px; padding: .7rem 1.15rem; min-height: 44px; cursor: pointer;
}
.control[aria-pressed="true"] { background: var(--verde); color: var(--marfil); }

.mapa-rejilla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .mapa-rejilla { grid-template-columns: 1fr; } }

.mapa-figura { margin: 0; }
.mapa { width: 100%; height: auto; background: var(--marfil); touch-action: manipulation; }
.capa-costa { pointer-events: none; }
.capa-costa path { fill: none; stroke: var(--capuchino); stroke-width: 1.2; stroke-linejoin: round; stroke-opacity: .85; }
.capa-autopistas path { fill: none; stroke: #CFC3AC; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.zona path, .zona circle { stroke: var(--marfil); stroke-width: 1.2; stroke-linejoin: round; transition: stroke .15s; cursor: pointer; }
.zona:focus { outline: none; }
.zona:hover path, .zona:hover circle, .zona:focus-visible path, .zona:focus-visible circle { stroke: var(--espresso); stroke-width: 2.4; }
.zona.sel path, .zona.sel circle { stroke: var(--oro); stroke-width: 4; }

.metrica-precio .p0 > * { fill: var(--p0); }
.metrica-precio .p1 > * { fill: var(--p1); }
.metrica-precio .p2 > * { fill: var(--p2); }
.metrica-precio .p3 > * { fill: var(--p3); }
.metrica-precio .p4 > * { fill: var(--p4); }
.metrica-rend .r0 > * { fill: var(--p0); }
.metrica-rend .r1 > * { fill: var(--p1); }
.metrica-rend .r2 > * { fill: var(--p2); }
.metrica-rend .r3 > * { fill: var(--p3); }
.metrica-rend .r4 > * { fill: var(--p4); }
.metrica-rend .rnd > * { fill: url(#rayado); }
.rayado-fondo { fill: var(--marfil); }
.rayado-linea { stroke: var(--capuchino); stroke-width: 2.5; }

.rotulo {
  font: 500 21px var(--serif); fill: var(--espresso); text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: var(--marfil); stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.rotulo.ver, .rotulo.fijo { opacity: 1; }
.rotulo.fijo:not(.ver) { font-weight: 400; }

.mapa-leyenda { margin-top: 1rem; }
.leyenda-titulo { margin: 0 0 .5rem; font-size: .95rem; color: var(--tinta-suave); }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.leyenda li { display: inline-flex; align-items: center; gap: .45rem; }
.muestra { width: 1.4rem; height: .9rem; border-radius: 3px; display: inline-block; }
.muestra.p0, .muestra.r0 { background: var(--p0); }
.muestra.p1, .muestra.r1 { background: var(--p1); }
.muestra.p2, .muestra.r2 { background: var(--p2); }
.muestra.p3, .muestra.r3 { background: var(--p3); }
.muestra.p4, .muestra.r4 { background: var(--p4); }
.muestra.rnd { background: repeating-linear-gradient(45deg, var(--capuchino) 0 2px, var(--marfil) 2px 6px); border: 1px solid var(--capuchino); }
.leyenda-nota { margin: .8rem 0 0; font-size: .84rem; color: var(--capuchino); }

/* Ficha */
.ficha { position: sticky; top: 1.2rem; border-top: 3px solid var(--verde); padding-top: 1.2rem; }
.ficha h2 { font-weight: 420; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; margin: 0 0 .9rem; font-variation-settings: "opsz" 60; }
.ficha p { margin: 0 0 .8rem; }
.ficha-pista { color: var(--tinta-suave); }
.ficha-cifra { margin-bottom: .2rem !important; }
.cifra-grande { font-size: clamp(2.4rem, 4.2vw, 3.4rem); font-weight: 340; color: var(--verde); line-height: 1; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 72; }
.ficha-sub { color: var(--capuchino); font-size: .95rem; }
.ficha-datos { margin: 1.2rem 0 0; border-top: 1px solid var(--marfil-suave); }
.ficha-datos > div { padding: .8rem 0; border-bottom: 1px solid var(--marfil-suave); }
.ficha-datos dt { font-size: .92rem; color: var(--tinta-suave); }
.ficha-datos dd { margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.ficha-datos dd span { display: block; }
.ficha-areas { margin-top: 1rem !important; font-size: .84rem; color: var(--capuchino); }
@media (max-width: 860px) { .ficha { position: static; } }

/* Tabla */
.mapa-tabla-sec { background: var(--arena); }
.tabla-desliza { margin-top: 2rem; overflow-x: auto; }
.tabla-desliza:focus-visible { outline: 3px solid var(--oro); }
.tabla-zonas { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 1rem; }
.tabla-zonas th, .tabla-zonas td { text-align: left; padding: .65rem 1rem .65rem 0; border-bottom: 1px solid var(--marfil-suave); }
.tabla-zonas thead th { font-weight: 500; font-size: .9rem; color: var(--tinta-suave); vertical-align: bottom; }
.tabla-zonas tbody th { font-weight: 400; }
.tabla-zonas td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-zonas td:nth-child(n+2), .tabla-zonas thead th:nth-child(n+2) { text-align: right; }
.tabla-zonas tr.sel th, .tabla-zonas tr.sel td { background: rgba(176,138,62,.16); }
.ir-zona { color: var(--espresso); }

/* Método */
.lista-metodo { margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 3.5rem; }
.lista-metodo dt { font-weight: 500; color: var(--verde); font-size: 1.15rem; }
.lista-metodo dd { margin: .3rem 0 0; max-width: 52ch; color: var(--tinta-suave); }
.mapa-metodo .fuente { margin-top: 2.4rem; max-width: 70ch; }
@media (max-width: 700px) { .lista-metodo { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .rotulo { font-size: 32px; stroke-width: 7px; }
  .zona path, .zona circle { stroke-width: 1.6; }
  .zona.sel path, .zona.sel circle { stroke-width: 6; }
}
@media (prefers-reduced-motion: reduce) {
  .zona path, .zona circle, .rotulo { transition: none; }
}