/* ==========================================================================
   EXERGÍA V2 — páginas de menú por pasos (formato de las Herramientas de Cálculo)
   Encabezado con mapa 3D · línea de pasos · panel del paso elegido
   ========================================================================== */
.pp{ --st-a:#FFFFFF; --st-b:#EEF3F7; --st-c:#DFE8F0; --st-dot:rgba(23,76,115,.10); --tip-bg:rgba(13,36,56,.55); padding-bottom:clamp(40px,7vh,90px); }
html[data-theme="dark"] .pp{ --st-a:#1A3047; --st-b:#11233A; --st-c:#0A1826; --st-dot:rgba(160,200,235,.08); --tip-bg:rgba(255,117,31,.6); }

/* ---------- encabezado: texto a la izquierda, mapa a la derecha ---------- */
.pp-hero{ padding:calc(var(--hdr-real, 96px) + 18px) 0 clamp(70px,10vh,110px);
  background:radial-gradient(ellipse 70% 80% at 80% 30%, color-mix(in srgb, var(--azul) 10%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--azul) 6%, var(--paper)), var(--paper)); }
.pp-hero-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr); gap:clamp(20px,3vw,56px); align-items:center; }
.pp-crumb{ font-size:var(--f-small); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:clamp(10px,2vh,22px); }
.pp-crumb a{ color:var(--naranja); }
.pp-hero h1{ font-size:clamp(2.8rem,6vw,6.4rem); font-weight:700; line-height:.94; letter-spacing:-.05em; color:var(--azul-deep); margin-bottom:clamp(14px,2.4vh,26px); }
html[data-theme="dark"] .pp-hero h1{ color:var(--ink); }
.pp-phrase{ font-size:clamp(1.02rem,1.3vw,1.32rem); line-height:1.55; color:var(--ink-soft); max-width:34em; }

/* mapa (mismos componentes que la portada) */
.pp-map.mq-stage{ position:relative; height:min(56vh, 560px); min-height:340px; border-radius:24px; overflow:hidden; cursor:grab; touch-action:pan-y;
  background:radial-gradient(ellipse 70% 60% at 50% 42%, var(--st-a) 0%, var(--st-b) 55%, var(--st-c) 100%);
  border:1px solid var(--linea); box-shadow:0 30px 80px -40px rgba(13,36,56,.45), inset 0 1px 0 rgba(255,255,255,.6); }
.pp-map.mq-stage:active{ cursor:grabbing; }
.pp-map::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(var(--st-dot) 1.2px, transparent 1.3px); background-size:22px 22px; pointer-events:none; }
.pp-map .mq-canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.pp-map .mq-tip{ position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:4; display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 14px; border-radius:100px;
  background:var(--tip-bg); color:#fff; font-size:.84rem; font-weight:700; white-space:nowrap; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22); border-left:5px solid var(--tc, var(--naranja)); max-width:90%; }
.pp-map .mq-tip[hidden]{ display:none; }
.pp-map .mq-tip span{ color:var(--tc, var(--naranja)); }
.pp-map .mq-tip b{ overflow:hidden; text-overflow:ellipsis; }
.pp-map .mq-lead{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible; opacity:0; transition:opacity .5s var(--ease); }
.pp-map .mq-hint{ position:absolute; left:14px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 9px; border-radius:100px;
  background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--linea); color:var(--azul-deep);
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; pointer-events:none; }
html[data-theme="dark"] .pp-map .mq-hint{ background:rgba(10,24,38,.7); color:#E8EEF5; }
.pp-map .mq-hint svg{ width:17px !important; height:17px !important; flex:0 0 17px; }

/* ---------- línea de pasos (montada sobre el borde del encabezado) ---------- */
.pp-steps{ position:relative; z-index:5; margin-top:clamp(-70px,-8vh,-50px); }
.pp-steps ol{ --prog:0; position:relative; list-style:none; margin:0; padding:clamp(16px,2.2vw,26px) clamp(12px,2vw,28px) clamp(12px,1.6vw,18px);
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(86px,1fr); gap:0; overflow-x:auto; scrollbar-width:thin;
  background:var(--card); border:1px solid var(--linea); border-radius:20px; box-shadow:0 24px 50px -30px rgba(13,36,56,.35); }
.pp-steps li{ position:relative; display:flex; justify-content:center; }
.pp-steps li + li::before{ content:''; position:absolute; top:calc(26px + 0px); right:50%; width:100%; height:4px; transform:translateY(-50%);
  background:linear-gradient(90deg, var(--cp, var(--linea)), var(--cs, var(--linea))); border-radius:2px; z-index:0; }
.pp-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 6px; background:none; border:0; cursor:pointer; color:var(--ink); font:inherit; min-width:0; }
.pp-sico{ position:relative; display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--card); border:3px solid var(--c); color:var(--c);
  box-shadow:0 0 0 5px var(--card); transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.pp-sico svg{ width:24px; height:24px; }
.pp-sico img{ width:34px; height:34px; object-fit:contain; border-radius:6px; background:#fff; }
.pp-ok{ position:absolute; top:-9px; right:-9px; width:20px; height:20px; border-radius:50%; background:#2E9B4F; color:#fff; font-style:normal; font-size:.72rem; font-weight:800; display:grid; place-items:center; border:2px solid var(--card); opacity:0; transform:scale(.4); transition:opacity .3s, transform .3s var(--ease); }
.pp-step.done .pp-ok{ opacity:1; transform:none; }
.pp-sn{ font-family:'JetBrains Mono', Consolas, monospace; font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em; }
.pp-sl{ font-size:clamp(.74rem,.82vw,.9rem); font-weight:700; text-align:center; line-height:1.2; white-space:nowrap; }
.pp-step:hover .pp-sico{ transform:translateY(-3px); }
.pp-step.on .pp-sico{ background:var(--c); color:#fff; transform:scale(1.08); box-shadow:0 0 0 5px var(--card), 0 0 0 9px color-mix(in srgb, var(--c) 22%, transparent), 0 10px 24px -6px var(--c); }
.pp-step.on .pp-sico img{ background:#fff; }
.pp-step.on .pp-sl{ color:var(--c); }
html[data-theme="dark"] .pp-step.on .pp-sl{ color:color-mix(in srgb, var(--c) 65%, #fff); }
.pp-step:focus-visible{ outline:none; } .pp-step:focus-visible .pp-sico{ outline:3px solid var(--naranja); outline-offset:4px; }

/* ---------- panel del paso ---------- */
.pp-stage{ margin-top:clamp(18px,3vh,32px); }
.pp-panel{ --c:var(--naranja); background:var(--card); border:1px solid var(--linea); border-radius:22px; overflow:hidden; border-top:5px solid var(--c); }
.pp-panel.in{ animation:ppIn .55s var(--ease); }
@keyframes ppIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.pp-ph{ display:flex; gap:clamp(14px,1.6vw,22px); align-items:flex-start; padding:clamp(20px,2.6vw,34px) clamp(20px,2.8vw,40px) clamp(14px,2vw,22px);
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 70%); }
.pp-pico{ flex:0 0 auto; display:grid; place-items:center; width:62px; height:62px; border-radius:16px; background:var(--c); color:#fff; box-shadow:0 12px 26px -10px var(--c); }
.pp-pico svg{ width:30px; height:30px; } .pp-pico img{ width:46px; height:46px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; }
.pp-k{ display:block; font-size:var(--f-small); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--c); margin-bottom:4px; }
.pp-ph h2{ font-size:clamp(1.6rem,2.6vw,2.6rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; color:var(--ink); }
.pp-ph p{ margin-top:8px; font-size:clamp(.98rem,1.1vw,1.12rem); line-height:1.5; color:var(--ink-soft); max-width:46em; }
.pp-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr); gap:clamp(18px,2.6vw,44px); padding:clamp(8px,1.4vw,16px) clamp(20px,2.8vw,40px) clamp(20px,2.6vw,32px); }
.pp-main h3{ font-size:clamp(1.05rem,1.2vw,1.22rem); font-weight:700; color:var(--ink); margin:clamp(14px,2.2vh,22px) 0 8px; display:flex; align-items:center; gap:10px; }
.pp-main h3::before{ content:''; width:16px; height:4px; border-radius:2px; background:var(--c); }
.pp-main h3:first-child{ margin-top:6px; }
.pp-main p{ font-size:clamp(.95rem,1vw,1.05rem); line-height:1.65; color:var(--ink-soft); }
.pp-main p.lead{ font-size:clamp(1rem,1.1vw,1.12rem); color:var(--ink); }
.pp-main ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.pp-main ul li{ position:relative; padding-left:28px; font-size:clamp(.92rem,.98vw,1.02rem); line-height:1.5; color:var(--ink); }
.pp-main ul li::before{ content:''; position:absolute; left:0; top:.32em; width:17px; height:17px; border-radius:5px; background:color-mix(in srgb, var(--c) 16%, transparent); }
.pp-main ul li::after{ content:''; position:absolute; left:5px; top:calc(.32em + 4px); width:6px; height:9px; border:solid var(--c); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.pp-mx{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px; margin-top:6px; }
.pp-mx-c{ display:block; padding:12px 14px; border-radius:14px; border:1px solid var(--linea); background:color-mix(in srgb, var(--c) 4%, var(--card)); transition:border-color .3s, transform .3s var(--ease); }
.pp-mx-c:hover{ border-color:var(--c); transform:translateY(-2px); }
.pp-mx-c .n{ font-family:'JetBrains Mono', Consolas, monospace; font-size:.72rem; font-weight:700; color:var(--c); }
.pp-mx-c b{ display:block; font-size:.95rem; color:var(--ink); margin:2px 0 6px; }
.pp-mx-c ul{ gap:3px; } .pp-mx-c ul li{ font-size:.82rem; padding-left:16px; color:var(--ink-soft); }
.pp-mx-c ul li::before{ width:7px; height:7px; top:.5em; border-radius:50%; background:var(--c); } .pp-mx-c ul li::after{ display:none; }
.pp-aside{ display:flex; flex-direction:column; gap:14px; }
.pp-valor{ padding:clamp(16px,1.8vw,24px); border-radius:18px; background:color-mix(in srgb, var(--c) 8%, var(--paper)); border:1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.pp-valor h3{ font-size:.82rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--c); margin-bottom:8px; }
.pp-valor p{ font-size:.96rem; line-height:1.6; color:var(--ink); } .pp-valor p + p{ margin-top:8px; }
.pp-acts{ display:flex; flex-wrap:wrap; gap:10px; }
.pp-more{ font-weight:700; color:var(--naranja); }
.pp-note{ font-size:.8rem; color:var(--ink-soft); }
.pp-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px clamp(20px,2.8vw,40px); border-top:1px solid var(--linea); background:color-mix(in srgb, var(--ink) 2%, transparent); }
.pp-go{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:100px; border:1px solid var(--linea); background:var(--card); color:var(--ink); font:inherit; font-weight:700; font-size:.9rem; cursor:pointer; transition:border-color .3s, color .3s; }
.pp-go:hover{ border-color:var(--c); color:var(--c); }
.pp-count{ font-family:'JetBrains Mono', Consolas, monospace; font-size:.85rem; color:var(--ink-soft); }

@media (max-width:980px){
  .pp-hero-grid{ grid-template-columns:1fr; }
  .pp-map.mq-stage{ height:46vh; }
  .pp-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){ .pp-go{ font-size:.8rem; padding:8px 12px; } .pp-count{ display:none; } }
@media (prefers-reduced-motion: reduce){ .pp-panel.in{ animation:none; } }

/* Alianzas: captura de la página de cada aliado en un marco de navegador */
.pp-shot{ border-radius:18px; overflow:hidden; background:var(--card); border:1px solid var(--linea); box-shadow:0 30px 80px -40px rgba(13,36,56,.5); }
.pp-shot-bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; background:color-mix(in srgb, var(--ink) 6%, var(--card)); border-bottom:1px solid var(--linea); }
.pp-shot-bar i{ width:11px; height:11px; border-radius:50%; background:#FF5F57; } .pp-shot-bar i:nth-child(2){ background:#FEBC2E; } .pp-shot-bar i:nth-child(3){ background:#28C840; }
.pp-url{ flex:1; margin-left:8px; padding:5px 12px; border-radius:100px; background:var(--paper); color:var(--ink-soft); font-size:.8rem; font-family:'JetBrains Mono', Consolas, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-visit{ font-size:.8rem; font-weight:700; color:var(--naranja); white-space:nowrap; }
.pp-shot-img{ aspect-ratio:16/9.6; overflow:hidden; background:#fff; }
.pp-shot-img img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:opacity .25s var(--ease), transform .6s var(--ease); }
.pp-shot-img img.out{ opacity:0; transform:scale(.985); }

/* Herramientas de Cálculo: tarjetas de herramienta dentro del paso */
.pp-tools{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px,100%),1fr)); gap:12px; margin-top:6px; }
.pp-tool{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:16px; border:1px solid var(--linea); background:color-mix(in srgb, var(--c) 4%, var(--card)); transition:border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.pp-tool:hover{ border-color:var(--c); transform:translateY(-3px); box-shadow:0 16px 30px -18px var(--c); }
.pp-tool b{ font-size:1.02rem; color:var(--ink); }
.pp-tool span{ font-size:.9rem; line-height:1.5; color:var(--ink-soft); }
.pp-tool em{ font-style:normal; font-size:.76rem; font-weight:700; letter-spacing:.04em; color:var(--c); }
.pp-tool i{ margin-top:auto; font-style:normal; font-weight:700; font-size:.88rem; color:var(--naranja); }

/* zoom de los mapas 3D: botones + / − / vista completa y aviso de Ctrl + rueda */
.mq-zoom{ position:absolute; right:14px; bottom:14px; z-index:3; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 4px 16px rgba(13,36,56,.14); border:1px solid rgba(13,36,56,.1); cursor:default; }
.mq-zoom button{ display:grid; place-items:center; width:38px; height:36px; padding:0; border:0; background:none; color:var(--azul-deep, #0D2438); font:600 1.25rem/1 Inter, system-ui, sans-serif; cursor:pointer; transition:background .2s, color .2s; }
.mq-zoom button + button{ border-top:1px solid rgba(13,36,56,.1); }
.mq-zoom button svg{ width:17px; height:17px; }
.mq-zoom button:hover:not(:disabled){ background:#FF751F; color:#fff; }
.mq-zoom button:focus-visible{ outline:2px solid #FF751F; outline-offset:-2px; }
.mq-zoom button:disabled{ opacity:.35; cursor:default; }
html[data-theme="dark"] .mq-zoom{ background:rgba(10,24,38,.75); border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .mq-zoom button{ color:#E8EEF5; }
html[data-theme="dark"] .mq-zoom button + button{ border-top-color:rgba(255,255,255,.12); }
.mq-whint{ position:absolute; left:50%; top:50%; z-index:4; transform:translate(-50%,-50%) scale(.96); padding:10px 18px; border-radius:100px; background:rgba(13,36,56,.82); color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .25s, transform .25s; }
.mq-whint.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.mq-zoomed{ cursor:grab; }
@media (max-width:640px){ .mq-zoom button{ width:34px; height:32px; } .mq-whint{ white-space:normal; width:80%; text-align:center; } }