/* ═══════════════════════════════════════════════════════════════════════════
   Guía del medio aliado — plantillas/guia-aliados.php
   Solo se carga en esa página. Usa las fichas de color del tema (ah.css).

   Sin JavaScript se ven los once pasos seguidos. El guion añade `is-js` al
   contenedor y a partir de ahí se enseña uno cada vez: así una página que no
   ejecuta nada sigue siendo una guía completa en vez de una página en blanco.
   ═══════════════════════════════════════════════════════════════════════════ */

.guia{position:relative}

/* ── Las chapas numeradas ─────────────────────────────────────────────────
   Índice y posición a la vez. En un teléfono no caben once, así que la fila
   se desliza en horizontal: partirla en dos líneas movería la página entera
   cada vez que se cambia de paso. */
.guia__chapas{
  display:flex; gap:6px; margin-bottom:22px; padding-bottom:4px;
  overflow-x:auto; scrollbar-width:none;
}
.guia__chapas::-webkit-scrollbar{display:none}
.guia__chapa{
  flex:0 0 auto; width:30px; height:30px; padding:0; cursor:pointer;
  display:grid; place-items:center; line-height:1;
  border:1px solid var(--line); border-radius:var(--r); background:transparent;
  font-family:var(--f-data); font-size:12px; color:var(--muted);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.guia__chapa:hover{border-color:var(--navy); color:var(--navy)}
.guia__chapa.is-hecha{color:var(--ink)}
.guia__chapa.is-on{background:var(--red); border-color:var(--red); color:#fff; font-weight:600}

/* ── El paso ──────────────────────────────────────────────────────────── */
.guia__paso{
  display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px); align-items:start;
  padding-bottom:34px; margin-bottom:34px; border-bottom:1px solid var(--line-soft);
}
.guia.is-js .guia__paso{display:none; padding-bottom:0; margin-bottom:0; border-bottom:0}
.guia.is-js .guia__paso.is-on{display:grid}

.guia__n{
  font-family:var(--f-data); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red);
}
.guia__paso h2{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(22px,2.4vw,30px); line-height:1.12; margin:8px 0 12px;
  text-wrap:balance;
}
.guia__entrada{
  font-family:var(--f-text); font-size:15.5px; line-height:1.6; color:var(--muted);
  margin:0 0 20px;
}
.guia__entrada b{color:var(--ink); font-weight:600}

.guia__acciones{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.guia__accion{
  display:grid; grid-template-columns:24px 1fr; gap:11px; align-items:start;
  padding:9px 10px; border:1px solid transparent; border-radius:var(--r);
  transition:background .15s ease, border-color .15s ease;
}
.guia__accion:hover,.guia__accion.is-on{background:var(--paper); border-color:var(--line)}
.guia__marca{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-data); font-size:11.5px; font-weight:600; line-height:1;
  color:#fff; background:var(--navy); transition:background .2s ease;
}
.guia__accion.is-on .guia__marca{background:var(--red)}
.guia__accion p{
  margin:0; font-family:var(--f-text); font-size:14.5px; line-height:1.5; color:var(--muted);
}
.guia__accion p b{color:var(--ink); font-weight:600}

.guia__nota{
  margin:18px 0 0; padding:12px 14px; border-left:2px solid var(--red);
  background:var(--paper); border-radius:0 var(--r) var(--r) 0;
  font-family:var(--f-text); font-size:13.5px; line-height:1.55; color:var(--muted);
}

/* ── La captura ───────────────────────────────────────────────────────── */
.guia__marco{
  margin:0; background:var(--paper); border:1px solid var(--line);
  border-radius:6px; box-shadow:var(--shadow); overflow:hidden;
}
.guia__barra{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-bottom:1px solid var(--line-soft);
}
.guia__barra i{width:8px; height:8px; border-radius:50%; background:var(--line); flex:none}
.guia__url{
  margin-left:6px; min-width:0; font-family:var(--f-data); font-size:10.5px;
  color:var(--muted-2); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.guia__lupa{
  margin-left:auto; flex:none; cursor:pointer; padding:4px 9px;
  border:1px solid var(--line); border-radius:var(--r); background:transparent;
  font-family:var(--f-data); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2);
}
.guia__lupa:hover{color:var(--navy); border-color:var(--navy)}

.guia__lienzo{position:relative; line-height:0; background:var(--navy-ink); cursor:zoom-in}
.guia__lienzo img{width:100%; height:auto; display:block}

.guia__punto{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; padding:0;
  border-radius:50%; border:2px solid #fff; background:var(--red); color:#fff;
  font-family:var(--f-data); font-size:13px; font-weight:600; line-height:1;
  display:grid; place-items:center; cursor:pointer; z-index:2;
  box-shadow:0 2px 10px rgba(10,25,48,.55);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.guia__punto::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--red); opacity:0; animation:guia-latido 2.6s ease-out infinite;
}
.guia__punto:hover,.guia__punto.is-on{
  background:#fff; color:var(--red); border-color:var(--red); transform:scale(1.15); z-index:3;
}
@keyframes guia-latido{
  0%{opacity:.7; transform:scale(.85)} 70%{opacity:0; transform:scale(1.5)} 100%{opacity:0}
}

/* La flecha que recorre los puntos cuando la guía se reproduce sola.
   La punta cae en el BORDE del punto, no encima, para que el número siga
   leyéndose: de ahí el margen positivo. */
.guia__flecha{
  position:absolute; left:6%; top:94%; width:30px; height:30px; margin:9px 0 0 5px;
  opacity:0; pointer-events:none; z-index:5;
  transition:left .95s cubic-bezier(.42,0,.22,1), top .95s cubic-bezier(.42,0,.22,1),
             opacity .35s ease;
  filter:drop-shadow(0 3px 7px rgba(5,12,25,.75));
}
.guia__flecha.is-on{opacity:1}
.guia__flecha svg{width:100%; height:100%; fill:#fff; stroke:#0A1930; stroke-width:1.3}
.guia__eco{
  position:absolute; left:5px; top:3px; width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%; border:2px solid var(--red); opacity:0;
}
.guia__flecha.is-click .guia__eco{animation:guia-eco .6s ease-out}
@keyframes guia-eco{
  0%{opacity:.9; transform:scale(.25)} 100%{opacity:0; transform:scale(1.7)}
}

.guia__pie{
  margin:10px 2px 0; font-family:var(--f-data); font-size:11px; line-height:1.5;
  color:var(--muted-2);
}

/* ── El mando ─────────────────────────────────────────────────────────────
   Pegado abajo mientras la guía está en pantalla, no fijo al navegador: fijo
   taparía el pie del sitio y, en un teléfono, media captura. */
.guia__mando{
  position:sticky; bottom:0; z-index:20; display:none;
  align-items:center; gap:10px; flex-wrap:nowrap;
  padding:10px 12px; margin-top:20px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 -6px 20px -14px rgba(13,37,81,.5);
}
.guia.is-js .guia__mando{display:flex}
.guia__b{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
  padding:9px 15px; border:1px solid var(--line); border-radius:var(--r);
  background:transparent; color:var(--ink);
  font-family:var(--f-display); font-weight:600; font-size:13.5px;
}
.guia__b:hover:not(:disabled){border-color:var(--navy); color:var(--navy)}
.guia__b:disabled{opacity:.35; cursor:default}
.guia__b svg{width:12px; height:12px; fill:currentColor; flex:none}
.guia__b--play{background:var(--navy); border-color:var(--navy); color:#fff}
.guia__b--play:hover:not(:disabled){background:var(--navy-deep); border-color:var(--navy-deep); color:#fff}
.guia__b--sig{background:var(--red); border-color:var(--red); color:#fff}
.guia__b--sig:hover:not(:disabled){background:var(--red-soft); border-color:var(--red-soft); color:#fff}
.guia__donde{
  margin:0 auto; min-width:0; text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  font-family:var(--f-data); font-size:11.5px; letter-spacing:.04em; color:var(--muted);
}
.guia__donde b{color:var(--ink); font-weight:600}

/* ── El cierre ────────────────────────────────────────────────────────── */
.guia__cierre{margin-top:36px; display:grid; gap:20px}
.guia__cta{display:flex; gap:10px; flex-wrap:wrap}

/* ── La lupa ──────────────────────────────────────────────────────────────
   En pantalla ancha la captura entra entera. En un teléfono NO: 1440 px
   reducidos a 360 no se leen. Ahí la imagen se enseña a su tamaño y se
   arrastra, que es lo que de verdad resuelve «no veo el botón». */
.guia__zoom{
  position:fixed; inset:0; z-index:1000; background:rgba(7,14,26,.94);
  padding:clamp(10px,2vw,28px); overflow:auto; overscroll-behavior:contain;
}
.guia__zoom[hidden]{display:none}
.guia__zoom-caja{max-width:1440px; margin:0 auto}
.guia__zoom-x{
  position:sticky; top:0; float:right; z-index:2; margin-bottom:10px; cursor:pointer;
  padding:9px 16px; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.16); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:13px;
}
.guia__zoom-x:hover{background:rgba(255,255,255,.26)}
.guia__zoom .guia__lienzo{border-radius:4px; overflow:hidden; cursor:default}
.guia__zoom-pista{
  display:none; margin:10px 0 0; text-align:center;
  font-family:var(--f-data); font-size:11px; color:rgba(255,255,255,.75);
}

/* ── Teléfono ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .guia__paso{grid-template-columns:1fr; gap:18px}
  /* La captura primero: el texto habla de ella, y en vertical lo que se lee
     antes manda. */
  .guia__vista{order:1}
  .guia__lado{order:2}
  .guia__punto{width:26px; height:26px; margin:-13px 0 0 -13px; font-size:11.5px}
  .guia__flecha{width:26px; height:26px}
  .guia__pie{font-size:10.5px}
}
@media (max-width:640px){
  .guia__paso h2{font-size:22px}
  .guia__entrada{font-size:15px}
  .guia__accion{padding:8px 8px}
  .guia__accion p{font-size:14px}
  .guia__b span{display:none}          /* solo los iconos: el ancho no da para más */
  .guia__b--play span{display:inline}  /* menos en el de reproducir, que es el que se busca */
  .guia__b{padding:10px 12px}
  .guia__mando{gap:8px; padding:9px 10px}
  .guia__donde{font-size:11px}
  .guia__url{font-size:9.5px}

  /* La lupa, a tamaño real y arrastrable. */
  .guia__zoom{padding:8px}
  .guia__zoom-caja{max-width:none}
  .guia__zoom-hueco{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .guia__zoom .guia__lienzo{width:1100px}
  .guia__zoom-pista{display:block}
}

@media (prefers-reduced-motion:reduce){
  .guia__punto::after{animation:none}
  .guia__flecha{transition:opacity .2s ease}
  .guia__flecha.is-click .guia__eco{animation:none}
}