/* SATheat · sitio oficial (prototipo Fase 0). Tokens del estándar SIMAR+ (fondo de mar profundo, vidrio, Newsreader + Inter)
   con la identidad propia de SATheat: la escala de calor de las categorías de ola, reservada para el dato. El turquesa marca lo
   que se puede tocar. Solo tema oscuro, como el resto del ecosistema. */
:root {
  --bg: #030a17; --bg2: #061426; --bg3: #0a1b31;
  --ink: #eaf4ff; --ink2: #c3d6e8; --muted: #93b0cc; --muted2: #5f7d99;
  --line: rgba(140, 200, 255, .12); --line2: rgba(140, 200, 255, .22);
  --glass: rgba(16, 34, 58, .45); --glass-hi: rgba(28, 56, 92, .6);
  --cyan: #55e6d6; --aqua: #6fd0ff; --violet: #8a9bff;
  /* escala de ola de calor (SIMAR+ · kit de nodo) */
  --c0: #1b3a5c; --cv: #ffeca0; --c1: #ffc866; --c2: #ff6900; --c3: #9e0000; --c4: #2d0000;
  --calor: linear-gradient(100deg, #ffe08a 0%, #ffb347 28%, #ff6a1a 58%, #e0242e 100%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --maxw: 82rem; --r: 1.25rem;
  --serif: 'Newsreader', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--sans); overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--aqua); text-decoration: none; }
b { font-weight: 600; }
em { font-style: italic; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--cyan); color: #03202f; padding: .5rem 1rem; z-index: 99; border-radius: 0 0 .5rem 0; }
.saltar:focus { left: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: .4rem; }

/* ---------- tipografía ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; margin: 0; line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h2 em, h1 em { font-weight: 400; }
.h2s { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.h3 { font: 600 .78rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cejilla { font: 600 .74rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); margin: 0 0 1.1rem; display: flex; align-items: center; gap: .75rem; }
.cejilla::before { content: ""; width: 1.9rem; height: 1px; background: currentColor; opacity: .8; flex: none; }
.calor, h2 em { background: var(--calor); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.calor { background-size: 200% 100%; animation: calorMar 9s ease-in-out infinite alternate; }
@keyframes calorMar { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ---------- botones y chips ---------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.35rem; border-radius: 999px; font: 600 .95rem/1 var(--sans);
  border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; cursor: pointer; white-space: nowrap; }
.btn--p { background: linear-gradient(120deg, var(--cyan), var(--aqua)); color: #03202f; box-shadow: 0 0 0 0 rgba(85, 230, 214, 0); }
.btn--p:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -8px rgba(85, 230, 214, .55); }
.btn--g { border-color: var(--line2); color: var(--ink); background: rgba(255, 255, 255, .02); }
.btn--g:hover { border-color: var(--cyan); background: rgba(85, 230, 214, .06); }
.btn--s { padding: .55rem 1rem; font-size: .85rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: .42rem .65rem; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); margin: 0; }
.chip--dev { border-style: dashed; border-color: rgba(255, 200, 102, .55); color: #ffd98c; }

/* ---------- navegación ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; }
.nav.fija { background: rgba(3, 10, 23, .72); backdrop-filter: blur(1.1rem) saturate(140%); -webkit-backdrop-filter: blur(1.1rem) saturate(140%); border-bottom-color: var(--line); }
.nav__in { max-width: 96rem; margin: 0 auto; padding: .8rem clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; gap: 1rem; }
.nav__simar img { height: 1.7rem; width: auto; opacity: .92; }
.nav__sep { width: 1px; height: 1.6rem; background: var(--line2); }
.marca { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.marca__ico { width: 1.9rem; height: 1.9rem; fill: none; stroke: #ffb347; stroke-width: 1.7; stroke-linecap: round; }
.marca__ico circle { fill: rgba(255, 140, 40, .18); }
.marca__ico .ola { stroke: var(--aqua); }
.marca__txt { font: 600 1.32rem/1 var(--sans); letter-spacing: -.01em; }
.marca__txt b { background: var(--calor); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.menu { display: flex; gap: .2rem; margin-left: auto; }
.menu a { color: var(--muted); font-size: .9rem; padding: .45rem .75rem; border-radius: 999px; white-space: nowrap; transition: color .2s, background .2s; }
.menu a:hover, .menu a.on { color: var(--ink); background: rgba(140, 200, 255, .08); }
.nav__acc { display: flex; align-items: center; gap: .9rem; }
.vivo { display: inline-flex; align-items: center; gap: .5rem; font: 500 .74rem/1 var(--mono); color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.vivo b { color: var(--ink); font-weight: 600; }
.vivo i { width: .5rem; height: .5rem; border-radius: 50%; background: #4fe08a; box-shadow: 0 0 0 0 rgba(79, 224, 138, .6); animation: pulso 2.2s infinite; }
.vivo.prov i { background: #ffc866; animation-name: pulsoA; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(79, 224, 138, .55); } 70% { box-shadow: 0 0 0 .6rem rgba(79, 224, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 224, 138, 0); } }
@keyframes pulsoA { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 102, .55); } 70% { box-shadow: 0 0 0 .6rem rgba(255, 200, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 102, 0); } }

/* ---------- hero ---------- */
.hero { position: relative; padding: 7.5rem clamp(1rem, 3vw, 2.5rem) 3rem; min-height: 100vh; isolation: isolate; }
.hero__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 78% 30%, rgba(255, 105, 0, .13), transparent 60%),
    radial-gradient(50rem 36rem at 15% 10%, rgba(59, 130, 246, .16), transparent 62%),
    radial-gradient(40rem 30rem at 50% 100%, rgba(85, 230, 214, .07), transparent 60%),
    linear-gradient(180deg, #030a17 0%, #051124 60%, #030a17 100%); }
.hero__fondo::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hero__in { max-width: 96rem; margin: 0 auto; display: grid; grid-template-columns: minmax(20rem, 5fr) 7fr; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; }
.hero__lead { font-size: clamp(1.02rem, 1.25vw, 1.18rem); color: var(--ink2); max-width: 36rem; margin: 1.6rem 0 2rem; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__nota { font: 500 .78rem/1.5 var(--mono); color: var(--muted2); margin: 1.6rem 0 0; max-width: 34rem; }
.hero__nota b { color: #ffd98c; font-weight: 600; }
.sobre__que { background: none; border: 0; padding: 0; font: inherit; color: var(--aqua); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
@media print { .sobre__que { display: none; } .sobre__expl[hidden] { display: inline !important; } }
.hero__atraso { margin-top: .6rem; padding-left: .7rem; border-left: 2px solid #ffb547; color: var(--ink2); }

.mapa { margin: 0; position: relative; }
.mapa__marco { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line2);
  background: radial-gradient(120% 90% at 60% 40%, #0a1d35, #050f1f); box-shadow: 0 2.5rem 6rem -2rem rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 140, 40, .05), 0 0 8rem -3rem rgba(255, 105, 0, .25); }
.mapa__marco canvas { width: 100%; height: auto; }
.mapa__etq { position: absolute; inset: 0; pointer-events: none; }
.mapa__etq span { position: absolute; transform: translate(-50%, -50%); font: 500 italic clamp(.62rem, .9vw, .86rem)/1 var(--serif); color: rgba(234, 244, 255, .62); letter-spacing: .04em; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); white-space: nowrap; }
.mapa__scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(111, 208, 255, .07) 48%, rgba(111, 208, 255, .16) 50%, transparent 52%); background-size: 220% 100%; animation: scan 7s linear infinite; mix-blend-mode: screen; }
@keyframes scan { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.mapa__fecha { position: absolute; left: 1rem; top: .9rem; display: flex; flex-direction: column; gap: .2rem; padding: .55rem .8rem; border-radius: .8rem;
  background: rgba(3, 10, 23, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
.mapa__fecha span { font: 600 1rem/1 var(--mono); color: var(--ink); letter-spacing: .02em; }
.mapa__fecha small { font: 500 .66rem/1.2 var(--mono); color: #ffd98c; letter-spacing: .08em; text-transform: uppercase; }
.mapa__fecha small:empty { display: none; }
.mapa__ctl { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; }
.ic { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line2); background: var(--glass); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; transition: border-color .2s, background .2s; }
.ic:hover { border-color: var(--cyan); }
.ic svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic .i-play { display: none; fill: currentColor; stroke: none; }
.ic.pausa .i-pausa { display: none; } .ic.pausa .i-play { display: block; }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 2.4rem; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan) var(--p, 100%), rgba(140, 200, 255, .18) var(--p, 100%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(140, 200, 255, .18); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--cyan); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 3px solid var(--cyan); box-shadow: 0 0 0 5px rgba(85, 230, 214, .18); }
input[type=range]::-moz-range-thumb { width: .8rem; height: .8rem; border-radius: 50%; background: var(--ink); border: 3px solid var(--cyan); }
.seg { display: inline-flex; padding: .2rem; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); flex: none; }
.seg button { font: 600 .78rem/1 var(--sans); color: var(--muted); background: none; border: 0; padding: .55rem .85rem; border-radius: 999px; cursor: pointer; }
.seg button[aria-selected=true] { background: rgba(85, 230, 214, .14); color: var(--ink); }
.leyenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .75rem; font: 500 .72rem/1 var(--mono); color: var(--muted); align-items: center; }
.leyenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; margin-right: .4rem; vertical-align: -1px; border: 1px solid rgba(255, 255, 255, .12); }
.leyenda .rampa { width: 12rem; height: .55rem; border-radius: .3rem; background: linear-gradient(90deg, #7e0382 0%, #3a4ac7 10%, #30affe 20%, #7dfae7 30%, #ebfcfa 38.4%, #fefefe 40%, #fefcf0 41.6%, #ffdd61 50%, #ff951c 60%, #cf5301 70%, #6e001e 80%, #280019 100%); }

/* KPIs */
.kpis { max-width: 96rem; margin: 2.6rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kpi { position: relative; padding: 1.3rem 1.4rem 1.2rem; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--calor); opacity: .8; }
.kpi dt { font: 600 .68rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-height: 1.85rem; }
.kpi dd { margin: .55rem 0 .35rem; display: flex; align-items: baseline; gap: .35rem; }
.kpi dd b { font: 500 clamp(2.3rem, 3.6vw, 3.4rem)/1 var(--serif); letter-spacing: -.02em; color: #ffd27a; font-variant-numeric: tabular-nums; }
.kpi dd u { text-decoration: none; font: 500 1rem/1 var(--sans); color: var(--ink2); }
.kpi small { font: 500 .74rem/1.4 var(--mono); color: var(--muted2); }
.kpi .cat { display: inline-flex; align-items: center; gap: .55rem; }
.kpi .cat i { width: 1.15rem; height: 1.15rem; border-radius: .3rem; border: 1px solid rgba(255, 255, 255, .25); }

/* último año */
.anio { max-width: 96rem; margin: 1rem auto 0; padding: 1.2rem 1.4rem .9rem; border-radius: var(--r); border: 1px solid var(--line); background: rgba(6, 20, 38, .55); }
.anio__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.anio__cab p { margin: 0; font: 500 .76rem/1.4 var(--mono); color: var(--muted); }
.anio__cab p b { color: var(--ink); }
.anio__svg { width: 100%; height: 6.5rem; margin-top: .7rem; overflow: visible; }
.anio__eje { display: flex; justify-content: space-between; font: 500 .66rem/1 var(--mono); color: var(--muted2); margin-top: .45rem; }

/* ---------- secciones ---------- */
.sec { padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 3vw, 2.5rem); max-width: var(--maxw); margin: 0 auto; position: relative; }
.sec--alt { max-width: none; background: linear-gradient(180deg, transparent, rgba(10, 27, 49, .55) 12%, rgba(10, 27, 49, .55) 88%, transparent); }
.sec--alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sec__cab { margin-bottom: clamp(2rem, 4vw, 3.2rem); max-width: 50rem; }
.sec__lead { color: var(--ink2); font-size: 1.07rem; margin: 1.1rem 0 0; max-width: 44rem; }
.rev { opacity: 0; transform: translateY(1.6rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rev.in { opacity: 1; transform: none; }

/* mares */
.mares { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1rem; }
.mar { position: relative; border-radius: var(--r); padding: 1.3rem 1.3rem 1.1rem; background: var(--glass); border: 1px solid var(--line); overflow: hidden; transition: transform .35s var(--ease), border-color .35s; }
.mar:hover { transform: translateY(-3px); border-color: var(--line2); }
.mar::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--g, transparent), transparent 70%); opacity: .55; pointer-events: none; }
.mar__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.mar h3 { font-size: 1.45rem; }
.mar__cat { font: 600 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .38rem .55rem; border-radius: .45rem; white-space: nowrap; }
.mar__pct { display: flex; align-items: baseline; gap: .3rem; margin: 1rem 0 .2rem; }
.mar__pct b { font: 500 2.6rem/1 var(--serif); color: #ffd27a; font-variant-numeric: tabular-nums; }
.mar__pct span { color: var(--ink2); font-size: .85rem; }
.mar__barra { display: flex; height: .5rem; border-radius: .3rem; overflow: hidden; background: rgba(140, 200, 255, .1); margin: .5rem 0 .9rem; }
.mar__barra i { display: block; height: 100%; }
.mar__spark { width: 100%; height: 3.2rem; overflow: visible; }
.mar__pie { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.mar__pie div { font: 500 .62rem/1.35 var(--mono); color: var(--muted2); letter-spacing: .04em; text-transform: uppercase; }
.mar__pie b { display: block; font: 600 .98rem/1.2 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; margin-top: .15rem; }
.mar__pie b.sube { color: #ffb347; }

/* dimensiones */
.dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dim { padding: 1.6rem; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); display: flex; flex-direction: column; }
.dim__ico { width: 2.8rem; height: 2.8rem; border-radius: .9rem; display: grid; place-items: center; background: rgba(111, 208, 255, .08); border: 1px solid var(--line2); margin-bottom: 1.2rem; }
.dim__ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--aqua); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dim__tag { font: 600 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dim h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.dim p { color: var(--ink2); font-size: .95rem; margin: 0 0 1rem; }
.dim__datos { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: .45rem; }
.dim__datos li { font-size: .9rem; color: var(--muted); padding: .55rem .8rem; border-radius: .7rem; background: rgba(3, 10, 23, .4); border: 1px solid var(--line); }
.dim__datos b { color: var(--ink); font-family: var(--mono); margin-right: .35rem; }
.columna { margin-top: auto; display: grid; gap: .55rem; }
.nivel { display: grid; grid-template-columns: 4.2rem 1fr 3.4rem; align-items: center; gap: .7rem; font: 500 .78rem/1 var(--mono); color: var(--muted); }
.nivel__b { height: 1.55rem; border-radius: .45rem; background: rgba(140, 200, 255, .08); overflow: hidden; position: relative; }
.nivel__b i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #ffc866, #ff6900); border-radius: .45rem; transition: width 1.4s var(--ease); }
.nivel b { color: #ffd27a; font: 600 .95rem/1 var(--mono); text-align: right; }
.columna__pie { font: 500 .68rem/1.4 var(--mono); color: var(--muted2); margin-top: .3rem; }
.pron { width: 100%; height: 9rem; margin-top: auto; overflow: visible; }
.pron__ley { display: flex; gap: 1rem; flex-wrap: wrap; font: 500 .7rem/1 var(--mono); color: var(--muted); margin-top: .6rem; }
.pron__ley i { display: inline-block; width: .9rem; height: 3px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }

/* franjas */
.franjas { display: flex; height: clamp(9rem, 22vw, 15rem); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.franjas i { flex: 1; position: relative; transition: transform .3s var(--ease), filter .3s; cursor: default; }
.franjas i:hover { filter: brightness(1.25); }
.franjas i::after { content: attr(data-t); position: absolute; left: 50%; bottom: calc(100% - 2.4rem); transform: translateX(-50%); white-space: nowrap; font: 600 .7rem/1 var(--mono); padding: .4rem .55rem; border-radius: .4rem;
  background: rgba(3, 10, 23, .88); border: 1px solid var(--line2); color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2; }
.franjas i:hover::after { opacity: 1; }
.franjas i:first-child::after { left: 0; transform: none; } .franjas i:last-child::after { left: auto; right: 0; transform: none; }
.franjas i.parcial { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .0) 0 5px, rgba(255, 255, 255, .18) 5px 7px) !important; }
.franjas__eje { display: flex; justify-content: space-between; font: 500 .7rem/1 var(--mono); color: var(--muted2); margin-top: .55rem; }
.hitos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.hito { padding: 1.1rem 1.2rem; border-left: 2px solid; border-image: var(--calor) 1; background: rgba(16, 34, 58, .3); border-radius: 0 .8rem .8rem 0; }
.hito b { display: block; font: 500 1.7rem/1 var(--serif); color: #ffd27a; margin-bottom: .45rem; }
.hito span { font-size: .88rem; color: var(--ink2); }

/* ANP */
.anp { margin-top: clamp(3.5rem, 7vw, 5.5rem); display: grid; grid-template-columns: 2fr 3fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.anp__cab p { color: var(--ink2); margin: 1rem 0 0; }
.anp__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; counter-reset: a; }
.anp__lista li { counter-increment: a; display: grid; grid-template-columns: 2rem 1fr auto; gap: .2rem .8rem; align-items: center; padding: .7rem .9rem; border-radius: .9rem; background: var(--glass); border: 1px solid var(--line); }
.anp__lista li::before { content: counter(a, decimal-leading-zero); font: 600 .78rem/1 var(--mono); color: var(--muted2); grid-row: span 2; }
.anp__lista .n { font-size: .95rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anp__lista .d { font: 600 1.05rem/1 var(--mono); color: #ffd27a; text-align: right; grid-row: span 2; }
.anp__lista .d small { display: block; font: 500 .62rem/1.3 var(--mono); color: var(--muted2); text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; }
.anp__b { height: .4rem; border-radius: .3rem; background: rgba(140, 200, 255, .08); position: relative; overflow: hidden; }
.anp__b i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffc866, #ff6900, #9e0000); border-radius: .3rem; width: 0; transition: width 1.3s var(--ease); }
.anp__b u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--aqua); text-decoration: none; }

/* qué es */
.quees { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.quees__txt p { color: var(--ink2); font-size: 1.04rem; margin: 0 0 1.1rem; }
.quees__txt p b { color: var(--ink); }
.cats { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.cats li { border-radius: .8rem; padding: .8rem .7rem; font: 600 .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; min-height: 5.2rem; display: flex; flex-direction: column; justify-content: space-between; }
.cats li span { font: 500 .66rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; opacity: .85; }
.quees__fig { margin: 0; padding: 1.2rem; border-radius: var(--r); background: rgba(3, 10, 23, .5); border: 1px solid var(--line); }
.quees__fig figcaption { font-size: .8rem; color: var(--muted); margin-top: .6rem; }
#esquema { width: 100%; height: auto; }
.esq-clim { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.esq-p90 { fill: none; stroke: var(--aqua); stroke-width: 1.6; stroke-dasharray: 5 5; }
.esq-temp { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 3.2s var(--ease); }
.in .esq-temp { stroke-dashoffset: 0; }
.esq-relleno { opacity: 0; transition: opacity 1.2s 2s; } .in .esq-relleno { opacity: 1; }
.esq-txt text { font: 500 12px var(--mono); fill: var(--muted); }
.esq-txt text.t-ola { fill: #ffd27a; font-weight: 600; }

/* confianza */
.conf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.conf__c { padding: 1.4rem; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); }
.conf__c b { display: block; font: 500 2.4rem/1 var(--serif); color: var(--ink); margin-bottom: .6rem; }
.conf__c span { font-size: .9rem; color: var(--muted); }
.fuentes { margin-top: 2.2rem; padding: 1.4rem 1.6rem; border-radius: var(--r); border: 1px solid var(--line); }
.fuentes ul { margin: .9rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; color: var(--ink2); font-size: .93rem; }
.fuentes li::marker { color: var(--cyan); }

/* banners */
.banners { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.banner { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.6rem, 3vw, 2.6rem); min-height: 19rem; border-radius: calc(var(--r) + .3rem);
  border: 1px solid var(--line2); color: var(--ink); background: linear-gradient(140deg, rgba(16, 34, 58, .8), rgba(6, 20, 38, .9)); cursor: default; }
.banner h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.banner p { color: var(--ink2); max-width: 30rem; margin: 0; }
.banner .chip { align-self: flex-start; }
.banner__ir { margin-top: auto; font: 600 .82rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.banner__rejilla { position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(111, 208, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 208, 255, .09) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem; mask-image: radial-gradient(80% 90% at 85% 40%, #000, transparent); -webkit-mask-image: radial-gradient(80% 90% at 85% 40%, #000, transparent); }
.banner--exp { isolation: isolate; }
.banner--exp::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 105, 0, .28), transparent 65%); z-index: -1; }
.banner--tab { isolation: isolate; }
.banner__barras { position: absolute; right: 1.8rem; bottom: 1.8rem; display: flex; align-items: flex-end; gap: .45rem; height: 9rem; z-index: -1; opacity: .75; }
.banner__barras i { width: 1.1rem; border-radius: .3rem .3rem 0 0; background: linear-gradient(180deg, #ff6900, rgba(255, 200, 102, .25)); animation: barra 3.6s var(--ease) infinite alternate; }
.banner__barras i:nth-child(1) { height: 18%; animation-delay: -.2s; } .banner__barras i:nth-child(2) { height: 30%; animation-delay: -1.1s; }
.banner__barras i:nth-child(3) { height: 22%; animation-delay: -.6s; } .banner__barras i:nth-child(4) { height: 48%; animation-delay: -1.8s; }
.banner__barras i:nth-child(5) { height: 40%; animation-delay: -.9s; } .banner__barras i:nth-child(6) { height: 70%; animation-delay: -2.4s; }
.banner__barras i:nth-child(7) { height: 62%; animation-delay: -1.4s; } .banner__barras i:nth-child(8) { height: 92%; animation-delay: -.3s; }
@keyframes barra { from { transform: scaleY(.75); transform-origin: bottom; } to { transform: scaleY(1.05); transform-origin: bottom; } }

/* pie */
.pie { border-top: 1px solid var(--line); background: #020814; margin-top: 2rem; }
.pie__in { max-width: var(--maxw); margin: 0 auto; padding: 3rem clamp(1rem, 3vw, 2.5rem) 2.4rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem 3rem; align-items: center; }
.pie__marca { display: flex; gap: 1.2rem; align-items: center; }
.pie__marca img { height: 2.3rem; width: auto; }
.pie__marca p { margin: 0; color: var(--muted); font-size: .88rem; max-width: 32rem; }
.pie__logos { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.pie__logos img { height: 2.3rem; width: auto; opacity: .85; }
.pie__legal { grid-column: 1 / -1; margin: 0; font: 500 .72rem/1.5 var(--mono); color: var(--muted2); border-top: 1px solid var(--line); padding-top: 1.4rem; }

/* ---------- responsivo ---------- */
@media (max-width: 1240px) {
  .menu { display: none; }
  .hero__in { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dims { grid-template-columns: 1fr; }
  .hitos { grid-template-columns: repeat(2, 1fr); }
  .conf { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .anp, .quees, .banners { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .pie__in { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .nav__simar, .nav__sep, .vivo span { display: none; }
  .hero { padding-top: 5.6rem; }
  .kpis, .hitos, .conf { grid-template-columns: 1fr; }
  .mapa__ctl { flex-wrap: wrap; }
  .mapa__ctl input { order: 3; flex-basis: 100%; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .pie__marca { flex-direction: column; align-items: flex-start; }
}
@media (pointer: coarse) { .ic { width: 2.8rem; height: 2.8rem; } .seg button { padding: .75rem 1rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rev { opacity: 1; transform: none; }
  .esq-temp { stroke-dashoffset: 0; } .esq-relleno { opacity: 1; }
}

/* ---------- ajustes tras la primera revisión ---------- */
.sec { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.sec--alt > .sec__cab { max-width: var(--maxw); }
.sec__cab h2 { max-width: 50rem; }
.mares { grid-template-columns: repeat(3, 1fr); }
.dim .columna__pie { font: 500 .68rem/1.45 var(--mono); color: var(--muted2); margin: .4rem 0 0; }
.franjas__eje { position: relative; display: block; height: 1rem; }
.franjas__eje span { position: absolute; transform: translateX(-50%); }
.franjas__eje span:first-child { transform: none; } .franjas__eje span:last-child { transform: translateX(-100%); }
.pie__in { grid-template-columns: 1fr; }
.pie__marca p { max-width: 40rem; flex: 1; }
.pie__logos { gap: 2.2rem; }
.pie__logos img { height: 2.1rem; }
@media (max-width: 1240px) { .mares { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mares { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; } .kpi { padding: 1rem; } .kpi dt { font-size: .6rem; min-height: 2.4rem; } .kpi small { font-size: .66rem; } }

/* ---------- bajo la superficie ---------- */
.sec--hondo { max-width: none; background:
    radial-gradient(50rem 30rem at 85% 20%, rgba(154, 120, 255, .10), transparent 65%),
    linear-gradient(180deg, transparent 0%, #020814 18%, #01050e 82%, transparent 100%); }
.sec--hondo > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sec--hondo > .sec__cab { max-width: var(--maxw); }
.sec--hondo h2 em { background: linear-gradient(100deg, #c9b8ff 0%, #9a78ff 40%, #ff8a3d 100%); -webkit-background-clip: text; background-clip: text; }
.mapa__fecha small.fija { color: #c9b8ff; }
.bajo { display: grid; grid-template-columns: 7fr 3fr; gap: 1.2rem; align-items: start; }
.bajo__mapa { margin: 0; }
.bajo__cifras { display: grid; gap: .8rem; }
.cifra { padding: 1.05rem 1.2rem 1rem; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); position: relative; overflow: hidden; }
.cifra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #ff8a3d; }
.cifra--v::before { background: #9a78ff; }
.cifra dd { margin: 0; display: flex; align-items: baseline; gap: .3rem; }
.cifra dd b { font: 500 clamp(2rem, 3vw, 2.8rem)/1 var(--serif); color: #ffd27a; font-variant-numeric: tabular-nums; }
.cifra--v dd b { color: #c9b8ff; }
.cifra dd u { text-decoration: none; color: var(--ink2); font-size: .95rem; }
.cifra dt { color: var(--ink2); font-size: .9rem; line-height: 1.35; margin: .45rem 0 .25rem; }
.cifra small { font: 500 .7rem/1.4 var(--mono); color: var(--muted2); }
.bajo__anual { margin-top: 1.2rem; padding: 1.2rem 1.4rem .9rem; border-radius: var(--r); border: 1px solid var(--line); background: rgba(6, 20, 38, .55); }
.bajo__svg { width: 100%; height: auto; aspect-ratio: 1000 / 220; margin-top: .6rem; }
.bajo__svg .barra { transition: opacity .2s; }
.bajo__svg .barra:hover { opacity: .75; }
.bajo__svg .barra.parcial rect { opacity: .55; }
.corte { margin: 1.2rem auto 0; padding: 1.2rem 1.4rem 1rem; border-radius: var(--r); border: 1px solid var(--line); background: rgba(6, 20, 38, .55); }
.corte__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.corte__cab p { margin: .35rem 0 0; color: var(--ink2); font-size: .92rem; }
.corte__marco { display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: auto 1.4rem; }
.corte__y { position: relative; font: 500 .66rem/1 var(--mono); color: var(--muted2); }
.corte__y span { position: absolute; right: .5rem; transform: translateY(-50%); white-space: nowrap; }
.corte__y span:first-child { transform: none; }
.corte__y span:last-child { transform: translateY(-100%); }
.corte__lienzo { position: relative; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line2);
  box-shadow: inset 0 3px 0 0 rgba(111, 208, 255, .55); }
.corte__lienzo canvas { width: 100%; height: clamp(12rem, 26vw, 21rem); image-rendering: pixelated; }
.corte__etq { position: absolute; inset: 0; pointer-events: none; }
.corte__etq span { position: absolute; top: .6rem; transform: translateX(-50%); font: 500 italic clamp(.66rem, .95vw, .9rem)/1 var(--serif); color: rgba(234, 244, 255, .82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .95); white-space: nowrap; }
.corte__x { grid-column: 2; position: relative; font: 500 .66rem/1 var(--mono); color: var(--muted2); margin-top: .4rem; }
.corte__x span { position: absolute; transform: translateX(-50%); }
.corte__tip { position: absolute; transform: translate(.8rem, -50%); pointer-events: none; padding: .45rem .6rem; border-radius: .5rem; background: rgba(3, 10, 23, .9);
  border: 1px solid var(--line2); font: 500 .7rem/1.35 var(--mono); color: var(--ink2); display: grid; white-space: nowrap; z-index: 2; }
.corte__tip.izq { transform: translate(calc(-100% - .8rem), -50%); }
.corte__tip b { color: var(--ink); font-weight: 600; }
.leyenda i.tierra { background: repeating-linear-gradient(135deg, #0e1a2a 0 3px, #22324a 3px 4px); }
@media (max-width: 1240px) { .bajo { grid-template-columns: 1fr; } .bajo__cifras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bajo__cifras { grid-template-columns: 1fr 1fr; gap: .6rem; } .cifra { padding: .9rem; } .cifra dt { font-size: .8rem; }
  .corte__marco { grid-template-columns: 2.4rem 1fr; } .corte__x span:nth-child(even) { display: none; } }
[hidden] { display: none !important; }
.chip--nuevo { border-color: rgba(85, 230, 214, .55); color: var(--cyan); }
.mar__ir, .anp__lista a { color: inherit; }
.mar__ir { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mar__ir:focus-visible { outline-offset: -3px; }
.mar__mas { position: relative; z-index: 2; display: inline-block; margin-top: .8rem; font: 600 .72rem/1 var(--mono); letter-spacing: .06em; color: var(--aqua); }
.anp__lista a:hover .n { color: var(--cyan); }
@media (max-width: 620px) { .nav__acc .btn--g { display: none; } }

/* ---------- menú para pantallas angostas ---------- */
.nav__ham { display: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line2); background: var(--glass); color: var(--ink); cursor: pointer; place-items: center; flex: none; }
.nav__ham svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav__ham path { transition: transform .3s var(--ease), opacity .2s; transform-origin: 12px 12px; }
.nav.abierta .nav__ham .l1 { transform: rotate(45deg) translateY(5px); }
.nav.abierta .nav__ham .l2 { opacity: 0; }
.nav.abierta .nav__ham .l3 { transform: rotate(-45deg) translateY(-5px); }
.nav.abierta { background: rgba(3, 10, 23, .96); border-bottom-color: var(--line); }
.nav__panel { position: fixed; inset: 3.9rem 0 auto 0; max-height: calc(100dvh - 3.9rem); overflow: auto; padding: 1rem clamp(1rem, 4vw, 2rem) 1.6rem;
  background: rgba(3, 10, 23, .97); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); border-bottom: 1px solid var(--line2); }
.nav__panel nav { display: grid; }
.nav__panel nav a { font: 500 1.35rem/1.2 var(--serif); color: var(--ink); padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.nav__panel nav a[aria-current] { color: var(--cyan); }
.nav__panel-acc { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.nav__panel-acc .btn { display: inline-flex !important; }
html.sin-scroll, html.sin-scroll body { overflow: hidden; }
@media (max-width: 1240px) { .nav__ham { display: grid; } .nav__acc { margin-left: auto; } }
@media (max-width: 620px) { .nav__acc .btn { display: none; } }
/* logos como en InfoCLIMA: SIMAR+ a 33 px de alto arriba; SEMARNAT · CONABIO abajo */
.nav .nav__simar img { height: 33px; width: auto; }
.pie__logos .pie__gob { display: block; height: 32px; width: auto; }
@media (max-width: 620px) { .pie__logos .pie__gob { height: 24px; } }
.pie__mapa { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font: 600 .78rem/1.4 var(--sans); grid-column: 1 / -1; }
.pie__mapa a { color: var(--ink2); } .pie__mapa a:hover { color: var(--cyan); }
.conf__mas { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; }
/* selector de idioma ES · EN · FR */
.idiomas { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; padding: .15rem; background: var(--glass); }
.idiomas a { font: 700 .66rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); padding: .38rem .5rem; border-radius: 999px; }
.idiomas a:hover { color: var(--ink); }
.idiomas a.on { background: rgba(85, 230, 214, .16); color: var(--ink); }
.nav__panel-acc .idiomas { display: inline-flex; }

/* menú que no cabe en una línea: pasa al botón del panel (js/nav.js) */
#nav.nav--compacta .menu { display: none; }
#nav.nav--compacta .nav__ham { display: grid; }
#nav.nav--compacta .nav__acc { margin-left: auto; }
.nav__acc .btn, .nav__acc a { white-space: nowrap; }

/* ---------- portada · explicaciones (2026-10-20): mapitas de los mares, escala de las franjas, mapa de ANP, corte y ¿qué es? ---------- */
.mares__ley { margin: 0 0 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: rgba(6, 20, 38, .5); }
.mares__ley summary { cursor: pointer; padding: .8rem 1.2rem; font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); }
#maresLey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.6rem; padding: 0 1.2rem 1.1rem; }
.ml__b h4 { margin: 0 0 .3rem; font: 600 .78rem/1.3 var(--sans); color: var(--ink); }
.ml__b p { margin: 0 0 .5rem; font-size: .82rem; line-height: 1.5; color: var(--ink2); }
.ml__b span { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .8rem .3rem 0; font: 500 .68rem/1.2 var(--mono); color: var(--muted); }
.ml__b i, .mar__desg i { display: inline-block; width: .75rem; height: .75rem; border-radius: .2rem; border: 1px solid rgba(255, 255, 255, .14); flex: none; }
.mar__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: .9rem; align-items: center; margin-top: .4rem; }
.mar__izq .mar__pct { margin-top: .5rem; flex-wrap: wrap; }
.mar__desg { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: -.35rem 0 .2rem; font: 500 .66rem/1.3 var(--mono); color: var(--muted); }
.mar__desg span { display: inline-flex; align-items: center; gap: .3rem; }
.mar__desg b { color: var(--ink2); font-weight: 600; }
.mar__mapa { margin: 0; border-radius: .7rem; overflow: hidden; border: 1px solid var(--line2); background: #0d1c2e; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; }
.mar__mapa img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.mar__sparkw { margin-top: .8rem; }
.mar__sparkeje { display: flex; justify-content: space-between; font: 500 .6rem/1 var(--mono); color: var(--muted2); margin-top: .25rem; text-transform: uppercase; letter-spacing: .05em; }
.corte__etq .corte__tierra { top: 52%; font: 600 normal clamp(.58rem, .8vw, .74rem)/1.15 var(--sans); color: #d8e2ec; text-align: center; white-space: normal; max-width: 12rem; transform: translate(-50%, -50%); }
.corte__etq .corte__tierra--fondo { top: 80%; color: #f0d9b5; }
.corte__etq .corte__tierra.vert { writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); white-space: nowrap; max-width: none; }
.leyenda i.tierra { background: repeating-linear-gradient(135deg, #4a3626 0 4px, #64503f 4px 5px); }
.fesc { margin-top: 1.4rem; max-width: 40rem; }
.fesc p { margin: 0 0 .45rem; font: 600 .7rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fesc__barra { position: relative; height: .8rem; border-radius: .4rem; border: 1px solid var(--line2); }
.fesc__barra u, .fesc__ley u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--aqua); text-decoration: none; }
.fesc__barra u.d23, .fesc__ley u.d23 { background: #ffd27a; }
.fesc__eje { position: relative; height: 1rem; margin-top: .35rem; font: 500 .64rem/1 var(--mono); color: var(--muted2); }
.fesc__eje span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.fesc__eje span:first-child { transform: none; } .fesc__eje span:last-child { transform: translateX(-100%); }
.fesc__ley { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; font-size: .8rem; color: var(--ink2); }
.fesc__ley span { display: inline-flex; align-items: center; gap: .45rem; }
.fesc__ley u { position: relative; display: inline-block; top: 0; height: .9rem; }
.anp__mapa { margin: 1.3rem 0 0; }
.anp__marco { position: relative; border-radius: .9rem; overflow: hidden; border: 1px solid var(--line2); background: #0a182a; margin: 0 auto; }
.anp__marco img { width: 100%; height: 100%; object-fit: contain; }
.anp__num { position: absolute; transform: translate(-50%, -50%); width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 .72rem/1 var(--mono); color: #2a1000; background: #ffd27a; border: 2px solid #03101f; box-shadow: 0 0 0 1px rgba(255, 210, 122, .6), 0 2px 8px rgba(0, 0, 0, .6); transition: transform .2s var(--ease), background .2s; z-index: 1; }
.anp__num:hover, .anp__num.on { transform: translate(-50%, -50%) scale(1.3); background: var(--cyan); color: #03202f; z-index: 2; }
.anp__lista li { transition: border-color .2s, background .2s; }
.anp__lista li.on { border-color: var(--cyan); background: var(--glass-hi); }
.anp__lista li::before { content: counter(a); width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; background: #ffd27a; color: #2a1000; font-weight: 700; }
.pasos { margin: 0 0 1.1rem; padding-left: 1.3rem; color: var(--ink2); display: grid; gap: .55rem; }
.pasos li { padding-left: .2rem; font-size: .98rem; }
.pasos li b, .ejemplo b { color: var(--ink); }
.ejemplo { padding: .9rem 1.1rem; border-radius: .9rem; border: 1px solid var(--line2); background: rgba(255, 200, 102, .05); font-size: .95rem !important; }
.cats li em { font: 600 normal .66rem/1.2 var(--mono); margin-top: .35rem; opacity: .95; }
.paquete { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.4rem 1.6rem; border-radius: var(--r); border: 1px solid var(--line2); background: rgba(3, 10, 23, .45); max-width: 64rem; }
.paquete h3 { margin: 0 0 .6rem; }
.paquete p { color: var(--ink2); margin: 0 0 .8rem; }
.paquete p:last-child { margin-bottom: 0; }
.bajo__nota { margin: .7rem 0 0; font-size: .84rem; color: var(--ink2); max-width: 62rem; }
.conf__c a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1240px) { #maresLey { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .mar__cuerpo { grid-template-columns: 1fr; } .mar__mapa { aspect-ratio: 16 / 9; } }
.quees { align-items: start; }
.quees__fig { position: sticky; top: 6rem; }
.sec--alt > .cats--ancho { margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; }
.sec--alt > .paquete { margin-top: clamp(2rem, 4vw, 3rem); }
.cats--ancho li { min-height: 6.2rem; font-size: .76rem; }
.cats--ancho li span { font-size: .78rem; }
.cats--ancho li em { font-size: .74rem; }
@media (max-width: 900px) { .quees__fig { position: static; } }
.mar__pct b u { font: 500 1.2rem/1 var(--serif); text-decoration: none; margin-left: .15rem; color: #ffd27a; }
.mar__mapa { position: relative; }
.mar__coord { display: block; white-space: nowrap; margin-top: .3rem; font: 500 .6rem/1.2 var(--mono); color: var(--muted2); text-align: center; letter-spacing: .02em; }
.mar__mapw { min-width: 0; }