/* -----------------------------------------------------------------
   La visita guiada

   Una capa que apaga la pantalla entera menos un rectángulo, y un globo
   con el color del capítulo colgado de ese rectángulo.

   EL APAGADO SE HACE CON UNA SOMBRA GIGANTE Y NO CON CUATRO DIVS. Un
   `box-shadow` de 9999px sobre un rectángulo transparente pinta todo lo
   de afuera y deja el adentro intacto —con sus esquinas redondeadas y
   todo— en una sola regla. La alternativa clásica son cuatro paneles
   rodeando el hueco, que hay que recalcular los cuatro en cada scroll y
   que dejan una costura fina en las esquinas.
----------------------------------------------------------------- */

.vis-capa{
  position:fixed;inset:0;z-index:400;
  /* Sin fondo propio: lo oscuro lo pone la sombra del foco. Así el
     click sobre el ancla llega a la pantalla de abajo. */
  animation:vis-entra .18s ease-out;
}
@keyframes vis-entra{ from{opacity:0} to{opacity:1} }

/* LA PÁGINA SIGUE SCROLLEANDO, Y NO ES UN DESCUIDO.

   Acá había un `overflow:hidden` para que el foco no quedara marcando
   el lugar equivocado mientras se mueve la rueda. Rompía lo otro: con
   el cuerpo congelado, `scrollIntoView` no puede llevar el ancla a la
   vista, así que todo paso que apunte a algo debajo del pliegue —la
   mitad de los de cualquier capítulo largo— resaltaba fuera de la
   pantalla. Se vio en el paso 3 del Resumen.

   El foco se recalcula en cada scroll, así que no hacía falta
   congelar nada: se queda pegado a su ancla solo. */

.vis-foco{
  position:fixed;border-radius:var(--radius-sm);
  box-shadow:0 0 0 9999px rgba(7,9,13,.62);
  /* Un borde del color del capítulo, para que el resaltado se lea como
     parte del HUB y no como un recorte de otra herramienta. */
  outline:2px solid var(--cap);
  outline-offset:0;
  transition:left .2s, top .2s, width .2s, height .2s;
  pointer-events:none;
}

/* EL GLOBO SE DESLIZA IGUAL QUE EL FOCO, y hasta el 29/9 no lo hacía.

   El foco tenía su transición desde siempre y el globo no, así que en
   cada paso uno se deslizaba y el otro saltaba: los dos moviéndose
   juntos, uno suave y uno de golpe. Mateo: "cuando cambia el cuadro de
   texto va poco fluido y medio bugueado".

   Mismo tiempo y misma curva que el foco. Son una sola pieza partida en
   dos elementos, y cualquier diferencia entre las dos se lee como un
   error. */
.vis-globo{
  transition:left .2s, top .2s;
  position:fixed;width:min(340px, calc(100vw - 32px));
  background:var(--c-surface);border:1px solid var(--c-border);
  border-top:3px solid var(--cap);
  border-radius:var(--radius-sm);
  box-shadow:0 18px 48px rgba(7,9,13,.28);
  padding:15px 16px 13px;
}
.vis-flecha{
  position:absolute;width:14px;height:14px;transform:rotate(45deg);
  background:var(--c-surface);border:1px solid var(--c-border);
}
/* El lado dice por dónde SALE del globo, así que la flecha se pega al
   borde contrario al que mira. Y se le tapan los dos bordes que dan
   hacia adentro, o se ve la línea del globo cruzándola por el medio. */
.vis-flecha[data-lado="arriba"]{top:-8px;border-right:0;border-bottom:0}
.vis-flecha[data-lado="abajo"]{bottom:-8px;border-left:0;border-top:0}
.vis-flecha[data-lado="izquierda"]{left:-8px;border-right:0;border-top:0}
.vis-flecha[data-lado="derecha"]{right:-8px;border-left:0;border-bottom:0}

.vis-tit{
  font-family:var(--font-title);font-size:16px;font-weight:800;
  color:var(--c-text);margin:0 22px 6px 0;line-height:1.2;
}
.vis-texto{margin:0;font-size:13.5px;line-height:1.55;color:var(--c-muted)}

.vis-x{
  position:absolute;top:8px;right:8px;
  background:none;border:0;color:var(--c-suave);cursor:pointer;
  font-size:18px;line-height:1;padding:2px 6px;border-radius:var(--radius-xs);
}
.vis-x:hover{color:var(--c-red);background:var(--c-red-bg)}

.vis-pie{
  display:flex;align-items:center;justify-content:flex-end;
  gap:12px;margin-top:13px;padding-top:11px;border-top:1px solid var(--c-border);
}

.vis-botones{display:flex;gap:7px}
.vis-atras, .vis-sigue{
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:6px 12px;border-radius:var(--radius-sm);
}
.vis-atras{background:none;border:1px solid var(--c-border);color:var(--c-muted)}
.vis-atras:hover{border-color:var(--cap-ui);color:var(--cap-ui)}
.vis-sigue{background:var(--cap-ui);border:1px solid var(--cap-ui);color:#fff}
.vis-sigue:hover{background:var(--cap-dark);border-color:var(--cap-dark)}

/* -----------------------------------------------------------------
   El chip que la dispara

   NO ES UN "?". Ése ya existe en el HUB y contesta otra pregunta: qué
   es un CAP, cómo es el proceso de proveedores — conceptos del negocio.
   Éste contesta cómo se usa la pantalla, así que lleva la palabra
   puesta y nunca se confunden. En CAP los dos van a quedar al lado, y
   está bien: dicen dos cosas distintas.
----------------------------------------------------------------- */

.vis-chip{
  display:inline-flex;align-items:center;gap:7px;
  /* `align-self` Y NO SÓLO `inline-flex`: el hero es una columna flex,
     así que sin esto el chip se estiraba a los setecientos píxeles de
     ancho de la pantalla. Se veía como una banda gris y nadie lo leía
     como un botón — de hecho Mateo ni lo encontró. */
  align-self:flex-start;
  background:var(--cap-soft);border:1px solid transparent;color:var(--cap-ui);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  padding:5px 11px 5px 9px;border-radius:99px;
  transition:border-color .12s, background-color .12s;
}
.vis-chip:hover{border-color:var(--cap-ui)}

/* EN EL HERO VA AL REVÉS. `--cap-soft` y `--cap-ui` son los del tema
   claro: un fondo casi blanco con texto medio, que sobre el hero oscuro
   queda gris sobre negro y desaparece. Ahí el chip usa el mismo par que
   el resto del hero —blanco con alfa, y `--cap-claro` para el color—,
   que es la misma regla que ya siguen el eyebrow y la bajada. */
.hero .vis-chip{
  margin-top:14px;
  background:rgba(255,255,255,.1);color:var(--cap-claro);
  border-color:rgba(255,255,255,.16);
}
.hero .vis-chip:hover{background:rgba(255,255,255,.17);border-color:var(--cap-claro)}
.vis-chip::before{
  content:'';width:0;height:0;
  border-left:7px solid currentColor;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}

/* -----------------------------------------------------------------
   El de la barra, más callado

   Con la pastilla de color puesta competía con el selector de cuenta y
   con el item marcado, que son los dos que sí tienen que llamar la
   atención ahí. Y encima cambiaba de color en cada capítulo, así que la
   barra parpadeaba al navegar. Mateo: "queda medio disonante".

   Acá va como un renglón más de la barra —mismo tamaño, mismo gris—
   con el triangulito adelante para que se lea como algo que se
   dispara y no como un destino. El color aparece sólo al pasar por
   encima. */
.vis-hub{
  display:flex;width:100%;margin:0 0 4px;
  background:none;border:0;border-radius:var(--radius-sm);
  color:var(--c-muted);font-weight:600;font-size:12.5px;
  padding:7px 10px;
}
.vis-hub::before{border-left-width:6px;border-top-width:4px;border-bottom-width:4px;opacity:.7}
.vis-hub:hover{background:var(--cap-soft);color:var(--cap-ui);border-color:transparent}
.vis-hub:hover::before{opacity:1}

/* Y al lado, cuando quedó una a medias: volver a empezarla.

   Sin esto, el que corta la vuelta larga en el paso veinte no tiene
   forma de arrancarla de cero nunca más — el botón sólo ofrece seguir.
   Aparece únicamente cuando hay algo que reiniciar, así que en el caso
   normal la barra no gana un botón. */
.vis-fila{display:flex;align-items:center;gap:2px;margin-bottom:4px}
.vis-fila .vis-hub{margin:0}
.vis-reiniciar{
  flex:none;background:none;border:0;cursor:pointer;
  color:var(--c-suave);font-size:14px;line-height:1;
  padding:6px 7px;border-radius:var(--radius-sm);
}
.vis-reiniciar:hover{color:var(--cap-ui);background:var(--cap-soft)}

/* Cuando el paso no resalta nada, lo oscuro lo pone la capa: la sombra
   que apaga la pantalla vive en el foco, y sin foco no había sombra. */
.vis-capa.sin-foco{background:rgba(7,9,13,.62)}

/* -----------------------------------------------------------------
   El cartel de la primera vez

   Arriba de todo en la barra, donde arranca la lectura, y con el color
   del capítulo para que se lea como parte del HUB y no como un aviso
   pegado encima. Dos botones del mismo peso: ninguna de las dos
   respuestas es la que esperamos.
----------------------------------------------------------------- */

.vis-oferta{
  background:var(--cap-soft);border:1px solid var(--cap-claro);
  border-radius:var(--radius-sm);padding:11px 12px 10px;margin-bottom:10px;
}
.vis-oferta p{
  margin:0 0 9px;font-size:12.5px;line-height:1.4;
  color:var(--c-text);font-weight:600;
}
.vis-oferta-btns{display:flex;gap:7px}
.vis-oferta-btns button{
  flex:1;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  padding:6px 0;border-radius:var(--radius-sm);
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-muted);
  transition:border-color .12s, color .12s, background-color .12s;
}
.vis-oferta-btns button:hover{border-color:var(--cap-ui);color:var(--cap-ui)}
.vis-oferta-btns button[data-oferta="si"]{
  background:var(--cap-ui);border-color:var(--cap-ui);color:#fff;
}
.vis-oferta-btns button[data-oferta="si"]:hover{background:var(--cap-dark);border-color:var(--cap-dark);color:#fff}

/* Y NADA DE ESTO SE MUEVE si el sistema pide que no. Una visita guiada
   con el foco saltando de un lado a otro es justo el caso que
   `prefers-reduced-motion` existe para cubrir. */
@media (prefers-reduced-motion: reduce){
  .vis-foco, .vis-globo{ transition:none }
}