/* PULPA — LA GUÍA GRÁFICA (16/10/2026). Piezas de includes/guia_ui.php. Todo con el prefijo gd-.
   Colores y fuentes: los mismos de «Cómo funciona» (variables .dst de pulpa_destinos.css). */
.gd{--rojo:var(--dst-rojo,#C13438);--tinta:var(--dst-tinta,#191919);--carton:#e8d7b6;--crema:#f7f1e4;--borde:#e2d6bf;--suave:#5b5247;--verde:#25612e;
    background:var(--crema);color:var(--tinta);font-family:var(--pulpa-font-text,'Barlow',Arial,sans-serif)}
.gd *{box-sizing:border-box}
.gd-wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ── portada de cada guía ── */
.gd-hero{background:#120d09;color:#f3ead9;padding:44px 0 40px}
.gd-hero .gd-wrap{display:grid;gap:14px}
.gd-kicker{font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#e9c987}
.gd-h1{font-family:var(--pulpa-font-display,'Barlow Condensed',Arial Narrow,sans-serif);font-weight:600;text-transform:uppercase;
       font-size:clamp(34px,5.4vw,60px);line-height:1;letter-spacing:.01em;margin:0;color:#fff}
.gd-bajada{font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:#e9dfcc;max-width:54ch;margin:0}
.gd-ctas{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:8px}
.gd-ctas .dst-link{color:#f3ead9}

/* ── navegación entre perfiles ── */
.gd-perfilnav{background:#1c140d;border-top:1px solid #33271b}
.gd-perfilnav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gd-perfilnav a{display:block;padding:13px 16px;color:#cdbfa6;text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap;border-bottom:3px solid transparent}
.gd-perfilnav a:hover{color:#fff}
.gd-perfilnav a[aria-current="page"]{color:#fff;border-bottom-color:var(--rojo)}

/* ── bloques ── */
.gd-bloque{margin:44px 0}
.gd-h2{font-family:var(--pulpa-font-display,'Barlow Condensed',Arial Narrow,sans-serif);font-weight:600;text-transform:uppercase;
       font-size:clamp(24px,3vw,32px);line-height:1.05;letter-spacing:.01em;margin:0 0 22px;color:var(--tinta)}
.gd-pie{font-size:14px;line-height:1.5;color:var(--suave);margin:14px 0 0;max-width:68ch}
.gd-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#f1e4cb;color:var(--rojo);flex:none}
.gd-ico svg{width:24px;height:24px}

/* ── recorrido en pasos ── */
.gd-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px 22px}
.gd-paso{position:relative;background:#fffdf8;border:1px solid var(--borde);border-radius:16px;padding:34px 18px 20px;display:flex;flex-direction:column;gap:10px}
.gd-num{position:absolute;top:-16px;left:18px;width:34px;height:34px;border-radius:50%;background:var(--rojo);color:#fff;
        font-family:var(--pulpa-font-display,'Barlow Condensed',Arial Narrow,sans-serif);font-weight:600;font-size:19px;
        display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.gd-num svg{width:18px;height:18px;stroke-width:2.4}
.gd-tit{font-weight:700;font-size:18px;line-height:1.2}
.gd-txt{font-size:15px;line-height:1.5;color:var(--suave)}
@media (min-width:900px){
  .gd-paso:not(:last-child)::after{content:"";position:absolute;top:50%;right:-23px;width:22px;height:2px;background:var(--rojo);opacity:.55}
  .gd-paso:not(:last-child)::before{content:"";position:absolute;top:calc(50% - 4px);right:-23px;width:8px;height:8px;border-top:2px solid var(--rojo);border-right:2px solid var(--rojo);transform:rotate(45deg);opacity:.55}
}
.gd-paso.hecho .gd-num{background:var(--verde)}
.gd-paso.activo{border-color:var(--rojo);box-shadow:0 0 0 2px rgba(193,52,56,.18)}
.gd-paso.pendiente{opacity:.6}

/* ── diagrama de cajas con flechas ── */
.gd-flujo{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:10px}
.gd-nodo{flex:1 1 0;min-width:0;background:#fffdf8;border:1px solid var(--borde);border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.gd-nodo b{font-size:16.5px;line-height:1.2}
.gd-nodo span:not(.gd-ico){font-size:14px;line-height:1.45;color:var(--suave)}
.gd-nodo.rojo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.gd-nodo.rojo span:not(.gd-ico){color:#ffe9e2}
.gd-nodo.rojo .gd-ico{background:rgba(255,255,255,.18);color:#fff}
.gd-nodo.verde{background:#eef7ee;border-color:#b9d9bb}
.gd-nodo.verde .gd-ico{background:#d8ecd9;color:var(--verde)}
.gd-flecha{display:flex;align-items:center;color:var(--rojo);flex:none}
.gd-flecha svg{width:26px;height:26px}
@media (max-width:899px){
  .gd-flujo{flex-direction:column}
  .gd-flecha{justify-content:center}
  .gd-flecha svg{transform:rotate(90deg)}
}

/* ── tarjetas de funciones ── */
.gd-tarjetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gd-tarjeta{display:flex;gap:14px;align-items:flex-start;background:#fffdf8;border:1px solid var(--borde);border-radius:16px;padding:18px}
.gd-tarjeta b{font-size:17px}
.gd-tarjeta p{margin:5px 0 0;font-size:15px;line-height:1.5;color:var(--suave)}
.gd-etq{display:inline-block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rojo);border:1px solid var(--rojo);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:2px}
@media (max-width:720px){.gd-tarjetas{grid-template-columns:1fr}}

/* ── «esto lo decidís vos» ── */
.gd-decidis{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gd-decidis li{display:flex;gap:14px;align-items:center;background:#fffdf8;border:1px solid var(--borde);border-radius:14px;padding:14px 16px}
.gd-decidis b{display:block;font-size:16px}
.gd-decidis span:not(.gd-sw){display:block;font-size:14.5px;line-height:1.45;color:var(--suave)}
.gd-sw{flex:none;width:46px;height:26px;border-radius:999px;background:#cfc4ae;position:relative}
.gd-sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.gd-sw.on{background:var(--verde)}
.gd-sw.on i{left:23px}

/* ── ejemplos ilustrados ── */
.gd-mock{width:min(100%,300px);background:#fff;border:1px solid #d9cfbd;border-radius:14px;box-shadow:0 1px 4px rgba(26,18,8,.08);padding:14px;text-align:center}
.gd-mock-foto{aspect-ratio:4/5;border-radius:10px;background:linear-gradient(160deg,#d8c9ae,#b9a583);display:flex;align-items:center;justify-content:center;color:#fff}
.gd-mock-foto svg{width:54px;height:54px;opacity:.85}
.gd-mock-tit{font-weight:700;font-size:17px;margin-top:12px}
.gd-mock-precio{font-weight:700;font-size:18px;text-align:right;margin-top:10px;padding:0 6px}
.gd-mock-mkt{font-size:12.5px;text-align:right;color:var(--verde);padding:0 6px}
.gd-mock-stats{margin-top:10px;padding-top:10px;border-top:1px solid #f0e9dd;font-size:12.5px;color:#8a8177}
.gd-celu{width:min(100%,340px);border:6px solid #1c140d;border-radius:30px;background:#fffdf8;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.gd-celu-cab{background:#1c140d;color:#e9c987;font-weight:700;font-size:13px;letter-spacing:.08em;padding:10px 16px}
.gd-celu ul{list-style:none;margin:0;padding:6px 14px 14px}
.gd-celu li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #efe6d3}
.gd-celu li:last-child{border-bottom:0}
.gd-celu .gd-ico{width:38px;height:38px}.gd-celu .gd-ico svg{width:20px;height:20px}
.gd-celu b{display:block;font-size:15.5px}.gd-celu li span:not(.gd-ico){display:block;font-size:13.5px;line-height:1.4;color:var(--suave)}
.gd-dos{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:720px){.gd-dos{grid-template-columns:1fr;justify-items:center}}

/* ── «¿cuál sos vos?» ── */
.gd-perfiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gd-perfil{display:flex;flex-direction:column;gap:10px;background:#fffdf8;border:1px solid var(--borde);border-radius:18px;padding:22px;text-decoration:none;color:inherit;height:100%;transition:transform .12s,box-shadow .12s}
.gd-perfil:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,18,8,.12)}
.gd-perfil h3{font-family:var(--pulpa-font-display,'Barlow Condensed',Arial Narrow,sans-serif);font-weight:600;text-transform:uppercase;font-size:28px;margin:0;line-height:1}
.gd-perfil p{margin:0;font-size:16px;line-height:1.5;color:var(--suave)}
.gd-perfil .mas{font-weight:700;color:var(--rojo);margin-top:auto}
@media (max-width:720px){.gd-perfiles{grid-template-columns:1fr}}

/* ── cierre ── */
.gd-cierre{background:var(--carton);border-radius:20px;padding:28px;margin:48px 0 60px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.gd-cierre p{margin:0;font-size:19px;line-height:1.4;font-weight:600;max-width:36ch;color:#2a1d12}

/* ── celu: el paso va en horizontal (ícono a la izquierda), así la lista no se hace interminable ── */
@media (max-width:719px){
  .gd-pasos{gap:20px}
  .gd-paso{display:grid;grid-template-columns:46px 1fr;gap:2px 14px;padding:28px 16px 16px;align-items:start}
  .gd-paso .gd-ico{grid-row:1 / span 2}
  .gd-paso .gd-tit{align-self:end}
  .gd-paso .gd-txt{grid-column:2}
  .gd-bloque{margin:34px 0}
}

/* el sitio le baja el peso a <b>: acá los títulos de cada pieza tienen que verse como títulos */
.gd .gd-nodo b,.gd .gd-tarjeta b,.gd .gd-decidis b,.gd .gd-celu b,.gd .gd-mock-precio,.gd .gd-mock-stats b{font-weight:700!important}

/* los bloques que van lado a lado (ejemplo + tarjetas) no suman el margen de arriba y abajo */
.gd-dos .gd-bloque{margin:0}
.gd-dos{margin:44px 0}
@media (max-width:719px){.gd-dos{margin:34px 0;gap:30px}}

/* ══ ANIMACIÓN SUAVE (16/10/2026) ═══════════════════════════════════════════════════════════════════════════════
   Los pasos, las cajas del diagrama, las flechas y las tarjetas aparecen de a uno, una sola vez, al llegar a la
   pantalla: sirve para leer el ORDEN de lo que pasa. Reglas:
     · sólo se esconde algo si hay JavaScript (la clase gd-js la pone el <head>) y la animación está prendida (gd-anim);
     · con «reducir movimiento» no se esconde ni se anima nada;
     · sólo opacity y transform (baratos para el celu); nada se repite sin parar.                                */
.gd-js .gd-anim .gd-paso,.gd-js .gd-anim .gd-nodo,.gd-js .gd-anim .gd-tarjeta,.gd-js .gd-anim .gd-decidis li,
.gd-js .gd-anim .gd-mock,.gd-js .gd-anim .gd-celu{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 130ms)}
.gd-js .gd-anim .gd-flecha{opacity:0;transform:scale(.4);transition:opacity .35s ease,transform .35s ease;transition-delay:calc(var(--i,0) * 130ms + 90ms)}
.gd-js .gd-anim .gd-ver .gd-paso,.gd-js .gd-anim .gd-ver .gd-nodo,.gd-js .gd-anim .gd-ver .gd-tarjeta,.gd-js .gd-anim .gd-ver .gd-decidis li,
.gd-js .gd-anim .gd-ver .gd-mock,.gd-js .gd-anim .gd-ver .gd-celu,.gd-js .gd-anim .gd-ver.gd-mock,.gd-js .gd-anim .gd-ver.gd-celu{opacity:1;transform:none}
.gd-js .gd-anim .gd-ver .gd-flecha{opacity:1;transform:none}
/* el orden de aparición: el primero sale primero (hasta 9 elementos por bloque) */
.gd-pasos>:nth-child(1),.gd-flujo>:nth-child(1),.gd-tarjetas>:nth-child(1),.gd-decidis>:nth-child(1){--i:0}
.gd-pasos>:nth-child(2),.gd-flujo>:nth-child(2),.gd-tarjetas>:nth-child(2),.gd-decidis>:nth-child(2){--i:1}
.gd-pasos>:nth-child(3),.gd-flujo>:nth-child(3),.gd-tarjetas>:nth-child(3),.gd-decidis>:nth-child(3){--i:2}
.gd-pasos>:nth-child(4),.gd-flujo>:nth-child(4),.gd-tarjetas>:nth-child(4),.gd-decidis>:nth-child(4){--i:3}
.gd-flujo>:nth-child(5){--i:4}.gd-flujo>:nth-child(6){--i:5}.gd-flujo>:nth-child(7){--i:6}
/* la cajita roja (la acción) da un latido al aparecer, para que el ojo vaya hacia ella */
@keyframes gd-latido{0%,100%{box-shadow:0 0 0 0 rgba(193,52,56,.0)}50%{box-shadow:0 0 0 8px rgba(193,52,56,.22)}}
.gd-js .gd-anim .gd-ver .gd-nodo.rojo{animation:gd-latido 1.2s ease-out .9s 2}
/* los interruptores se prenden solos, después de aparecer */
.gd-js .gd-anim .gd-sw.on{background:#cfc4ae;transition:background .35s ease .5s}
.gd-js .gd-anim .gd-sw.on i{left:3px;transition:left .35s ease .5s}
.gd-js .gd-anim .gd-ver .gd-sw.on{background:var(--verde)}
.gd-js .gd-anim .gd-ver .gd-sw.on i{left:23px}
@media (prefers-reduced-motion:reduce){
  .gd-js .gd-anim .gd-paso,.gd-js .gd-anim .gd-nodo,.gd-js .gd-anim .gd-tarjeta,.gd-js .gd-anim .gd-decidis li,.gd-js .gd-anim .gd-mock,
  .gd-js .gd-anim .gd-celu,.gd-js .gd-anim .gd-flecha{opacity:1!important;transform:none!important;transition:none!important}
  .gd-js .gd-anim .gd-nodo.rojo{animation:none!important}
  .gd-js .gd-anim .gd-sw.on{background:var(--verde)!important;transition:none!important}
  .gd-js .gd-anim .gd-sw.on i{left:23px!important;transition:none!important}
}