/* ============================================================================
   Konsters Pro · Guía de la app (/pros/guia)
   Recorrido detallado de los 8 flujos del contratista, con capturas REALES de
   la app anotadas: recuadro punteado sobre el elemento, número, y la
   descripción numerada al lado. Reusa los tokens de site.css.

   El recuadro punteado no es decoración: es el mismo lenguaje que la app usa
   para "aquí va tu foto" (las casillas de captura de evidencia), así que el
   técnico ya lo reconoce cuando llega a la pantalla real.
   ============================================================================ */

:root { --g-rail: 268px; --g-head: 66px }

[hidden] { display: none !important }
/* El html lo pinta site.css de navy (es el fondo de la portada). Si sólo se
   repinta el body, el navy reaparece en cuanto el body deja de cubrir el
   lienzo — rebote de scroll, zoom, barra del navegador. Se pinta el html. */
html { background: var(--canvas) }
body { min-height: 100%; background: var(--canvas); color: var(--ink) }

/* ============ Encabezado ============ */
.g-head {
  position: sticky; top: 0; z-index: 60; height: var(--g-head);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
/* El enlace del logo necesita área táctil propia: el SVG mide 25 px de alto. */
.g-head__logo { display: inline-flex; align-items: center; min-height: 44px; padding-right: 8px }
.g-head__logo svg { width: 116px; height: 25px; fill: var(--navy); display: block }
.g-head__cta {
  display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff;
  font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 999px;
  transition: transform .18s var(--ease);
}
.g-head__cta:hover { transform: translateY(-1px) }

/* ============ Portada ============ */
.g-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 46px) }
.g-hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(32px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -.04em;
  margin: 0; max-width: 17ch;
}
.g-hero h1 em { font-style: normal; color: var(--royal) }
.g-hero p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 56ch; margin: 24px 0 0 }
.g-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.g-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--yellow); border-radius: 2px; transform: rotate(45deg) }

/* ============ Rejilla: índice fijo + contenido ============ */
.g-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px) }
.g-layout { display: grid; grid-template-columns: var(--g-rail) minmax(0, 1fr); gap: clamp(30px, 4vw, 70px); padding-bottom: 90px }
.g-rail { position: sticky; top: calc(var(--g-head) + 22px); align-self: start; max-height: calc(100vh - var(--g-head) - 44px); overflow: auto }
.g-rail__t { display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px }
.g-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: rail }
.g-rail a {
  display: flex; gap: 11px; align-items: center; min-height: 44px; padding: 9px 12px; border-radius: 11px;
  font-size: 14px; line-height: 1.35; color: var(--ink-soft);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.g-rail a::before {
  counter-increment: rail; content: counter(rail);
  font-size: 11.5px; font-weight: 700; color: var(--muted); min-width: 13px;
}
.g-rail a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink) }
.g-rail a.on { background: var(--sky); color: var(--navy); font-weight: 600 }
.g-rail a.on::before { color: var(--royal) }

/* ============ Indicador de «disponible sin internet» ============ */
.g-head__right { display: flex; align-items: center; gap: 12px; min-width: 0 }
.g-offline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--success-dark); background: var(--success-bg);
  padding: 6px 12px; border-radius: 999px;
}
.g-offline[data-estado="offline"] { color: var(--warning-dark); background: var(--warning-bg) }
@media (max-width: 720px) { .g-offline { display: none } }

/* ============ Buscador del índice ============ */
.g-find {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding: 0 12px; height: 42px; border-radius: 11px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--muted);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.g-find:focus-within { border-color: var(--royal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--royal) 13%, transparent) }
.g-find svg { flex: 0 0 auto }
.g-find input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit;
  font-size: 14px; color: var(--ink); outline: 0;
}
.g-find input::-webkit-search-cancel-button { display: none }
.g-find button {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--muted);
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
}
.g-find button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink) }
.g-find__msg { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.45 }

/* ============ Botón «ver las pantallas seguidas» ============ */
.g-play {
  display: inline-flex; align-items: center; gap: 8px; border: 0; font: inherit;
  font-size: 12.5px; font-weight: 700; color: #fff; background: var(--navy);
  padding: 8px 15px; border-radius: 999px; transition: transform .16s var(--ease);
}
.g-play:hover { transform: translateY(-1px) }

/* ============ Reproductor ============ */
.g-player { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100% }
.g-player::backdrop { background: rgba(13,30,60,.82); backdrop-filter: blur(4px) }
.g-player__in {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--paper); border-radius: 22px;
  padding: 16px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.g-player__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
.g-player__top b { flex: 1; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.02em; color: var(--ink) }
.g-player__x {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft);
  display: grid; place-items: center;
}
.g-player__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 12px }
.g-player__bar i { display: block; height: 100%; background: var(--navy); border-radius: 3px; transition: width .3s var(--ease-out) }
/* Las capturas son muy verticales (620×1383): a ancho completo el reproductor
   medía más que la pantalla y los controles quedaban fuera. Manda la ALTURA
   disponible, y el ancho se acomoda. */
.g-player img {
  display: block; margin: 0 auto; width: auto; max-width: 100%;
  max-height: min(58vh, 620px); height: auto; border-radius: 16px;
  border: 1px solid var(--line); background: var(--canvas-2);
}
/* El video obedece la misma regla de altura que las capturas: manda lo que
   cabe en pantalla, no el ancho del diálogo. */
/* `aspect-ratio` + altura fija, no `max-height`: con max-height el navegador
   calcula el ancho del contenedor (100%) y el video queda con franjas negras
   arriba y abajo. Así la caja toma la forma real de la grabación. */
.g-player video {
  display: block; margin: 0 auto;
  aspect-ratio: 620 / 1384; height: min(60vh, 640px); width: auto; max-width: 100%;
  border-radius: 16px; background: #0D1E3C;
}
.g-player__cap { display: flex; align-items: baseline; gap: 10px; margin: 12px 2px 0; font-size: 13.5px; color: var(--ink-soft) }
.g-player__cap span { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.g-player__cap b { color: var(--ink); font-weight: 600 }
.g-player__acts { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px }
.g-player__acts button {
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; font: inherit;
}
.g-player__acts button:hover { border-color: var(--sky-line) }
.g-player__play {
  width: auto !important; padding: 0 20px; gap: 8px; display: inline-flex !important;
  align-items: center; font-size: 13.5px; font-weight: 600;
  background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important;
}

/* ============ Un flujo ============ */
.g-flow { padding-top: clamp(34px, 5vw, 62px); scroll-margin-top: calc(var(--g-head) + 18px) }
.g-flow + .g-flow { border-top: 1px solid var(--line); margin-top: clamp(38px, 5vw, 70px) }
.g-flow__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: var(--navy); color: #fff; font-family: var(--display); font-weight: 600; font-size: 16px;
}
.g-flow h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -.034em;
  margin: 16px 0 0; max-width: 22ch;
}
.g-flow__lede { font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.62; color: var(--ink-soft); max-width: 62ch; margin: 16px 0 0 }
.g-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.g-meta span {
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 7px 14px; border-radius: 999px;
}
.g-meta span b { color: var(--navy); font-weight: 700 }

/* ============ Un paso: texto + captura ============ */
.g-steps { list-style: none; margin: clamp(28px, 3.6vw, 44px) 0 0; padding: 0; display: grid; gap: clamp(34px, 4.4vw, 62px) }
.g-step { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: clamp(26px, 3.4vw, 52px); align-items: start }
/* Alterna el lado de la captura para que la página no se lea como una lista. */
.g-step:nth-child(even) { grid-template-columns: 344px minmax(0, 1fr) }
.g-step:nth-child(even) .g-shot { order: -1 }
/* Paso sin captura (los que explican plazos, no pantallas): una sola columna.
   Con la retícula de dos, el cuerpo caía en el hueco de 344 px del teléfono. */
.g-step--texto,
.g-step--texto:nth-child(even) { grid-template-columns: minmax(0, 1fr) }
.g-step--texto .g-step__body { max-width: 68ch }
.g-step__head { display: flex; gap: 13px; align-items: baseline }
.g-step__n {
  flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 999px;
  background: var(--sky); color: var(--navy); font-size: 13.5px; font-weight: 700;
}
.g-step h3 { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; letter-spacing: -.02em; margin: 0 }
.g-step__body > p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 12px 0 0 }
/* Una sola frase por paso, con peso: es lo único que hay que leer sí o sí.
   El resto son notas cortas, y el «por qué» va plegado. */
.g-lead { font-size: 16.5px !important; line-height: 1.5 !important; color: var(--ink) !important; font-weight: 500 }
.g-lead b { font-weight: 700 }

/* El «por qué» plegado: el técnico que escanea no lo abre; el que duda, sí. */
.g-more { margin-top: 16px }
.g-more summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--royal);
  padding: 6px 0; min-height: 32px;
}
.g-more summary::-webkit-details-marker { display: none }
.g-more summary::after {
  content: ""; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23214E9C' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/13px no-repeat;
  transition: transform .2s var(--ease);
}
.g-more[open] summary::after { transform: rotate(180deg) }
.g-more p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft) }
.g-step__body > p:first-of-type { margin-top: 14px }
.g-step__body b { color: var(--ink); font-weight: 600 }

/* Notas numeradas — se corresponden 1:1 con los recuadros de la captura. */
.g-notes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: note }
.g-notes li {
  position: relative; padding-left: 36px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.g-notes li::before {
  counter-increment: note; content: counter(note);
  position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}
.g-notes li b { color: var(--ink); font-weight: 600 }

/* Aviso dentro de un paso */
.g-note {
  display: flex; gap: 11px; margin-top: 18px; padding: 14px 16px; border-radius: 13px;
  background: color-mix(in srgb, var(--sky) 40%, var(--paper)); color: var(--navy);
  font-size: 14px; line-height: 1.55;
}
.g-note svg { flex: 0 0 auto; margin-top: 2px }
.g-note--warn { background: var(--warning-bg); color: var(--warning-dark) }

/* ============ Captura anotada ============ */
/* La figura es una escena con perspectiva: el marco gira con el puntero y los
   recuadros flotan por encima de la captura en su propia capa. Es el mismo
   lenguaje de movimiento que el motor 3D del sitio, en versión enfocada. */
.g-shot {
  margin: 0; position: relative;
  perspective: 1100px; perspective-origin: 50% 42%;
  will-change: transform;
}
.g-shot__frame {
  position: relative; border-radius: 26px;
  border: 1px solid var(--line); background: var(--paper);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--navy) 8%, transparent),
              0 18px 44px color-mix(in srgb, var(--navy) 14%, transparent);
  cursor: zoom-in;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
/* `overflow:hidden` iría contra `preserve-3d` (lo aplana). El recorte lo hace
   la propia imagen con su radio, y las marcas se recortan con clip-path. */
.g-shot__frame > img { border-radius: 25px }
.g-shot__frame[data-activo] {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--navy) 10%, transparent),
              0 30px 70px color-mix(in srgb, var(--navy) 22%, transparent);
}
/* Brillo que sigue al puntero — el mismo recurso que las tarjetas del sitio. */
.g-shot__glare {
  position: absolute; inset: 0; border-radius: 26px; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255,255,255,.5), rgba(255,255,255,0) 46%);
  opacity: 0; transition: opacity .45s var(--ease);
  transform: translateZ(30px);
}
.g-shot__frame[data-activo] .g-shot__glare { opacity: .85 }
.g-shot img { display: block; width: 100%; height: auto }
/* En el teléfono del técnico la captura sale pequeña: un toque la abre a
   tamaño completo, que es donde de verdad se lee el botón. */
/* Fuera de la captura, no encima. Flotando abajo a la derecha tapaba justo los
   recuadros que señalan botones a lo ancho de la pantalla («Reportar un
   problema», «+ Nuevo servicio»). Vive junto al pie de figura. */
.g-shot__zoom {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  min-height: 36px; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 12px; font-weight: 600;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.g-shot__zoom:hover { border-color: var(--royal); color: var(--royal) }
.g-shot figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted) }

/* ============================================================================
   El recuadro punteado — versión con profundidad
   ----------------------------------------------------------------------------
   Antes era un borde plano pintado encima. Ahora vive en su propia capa por
   encima de la captura (translateZ), se dibuja al entrar en pantalla, y al
   señalar su nota se enciende mientras el resto se atenúa: el ojo va a un solo
   sitio en vez de barrer siete recuadros iguales.
   Posición en % con variables, para que siga al pixel aunque la captura se
   reescale.
   ============================================================================ */
.g-mark {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 2px dashed var(--royal); border-radius: 11px;
  background: color-mix(in srgb, var(--royal) 6%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--royal) 18%, transparent),
              0 6px 18px color-mix(in srgb, var(--navy) 16%, transparent);
  pointer-events: none;
  /* NADA de translateZ aquí. Con `perspective:1100px`, levantar el recuadro
     26 px lo proyecta un 2.4 % más grande y lo corre hacia afuera del punto de
     fuga — a 760 px de alto son ~18 px de desplazamiento, suficiente para que
     el recuadro deje de cubrir el elemento que señala. La profundidad la dan
     la sombra y el halo del número, que no mueven un pixel. */
  opacity: 0; scale: .96;
  transition: opacity .5s var(--ease-out), scale .5s var(--ease-out),
              border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
/* Se dibujan escalonados cuando el paso entra en pantalla. */
.g-shot.on .g-mark { opacity: 1; scale: 1; transition-delay: calc(var(--i, 0) * .1s + .12s) }

.g-mark::before {
  content: attr(data-n);
  position: absolute; left: -12px; top: -12px; width: 25px; height: 25px; border-radius: 999px;
  background: var(--navy); color: #fff; font-family: var(--body); font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(13, 30, 60, .38), 0 0 0 2.5px #fff;
  transition: background .22s var(--ease), scale .22s var(--ease);
}
/* Cuando el recuadro toca el borde superior, el número se mete hacia dentro
   para no quedar cortado por el overflow del marco. */
.g-mark[data-inset]::before { left: 6px; top: 6px }

/* Señalar la nota enciende SU recuadro y apaga los demás. */
.g-shot[data-foco] .g-mark { opacity: .22 }
.g-shot[data-foco] .g-mark.hot {
  opacity: 1;
  border-color: var(--navy); border-style: solid;
  background: color-mix(in srgb, var(--yellow) 20%, transparent);
  box-shadow: 0 0 0 1px var(--navy), 0 10px 26px color-mix(in srgb, var(--navy) 26%, transparent);
}
.g-shot[data-foco] .g-mark.hot::before { background: var(--yellow); color: var(--navy); scale: 1.12 }

/* Foco recíproco: la nota también se enciende. */
.g-notes li { transition: color .2s var(--ease), transform .2s var(--ease) }
.g-notes li.hot { color: var(--ink); transform: translateX(2px) }
.g-notes li.hot::before { background: var(--yellow); color: var(--navy) }
.g-notes li[data-liga] { cursor: default }

/* ============ Cierre ============ */
.g-end { background: var(--dark); color: #fff; border-radius: 40px 40px 0 0; padding: clamp(48px, 7vw, 92px) 0 }
.g-end h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.035em; margin: 0; max-width: 18ch; color: #fff }
.g-end p { font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.6; color: var(--on-dark-2); max-width: 54ch; margin: 20px 0 30px }
.g-end .g-cta {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--navy);
  font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: 999px;
  transition: transform .18s var(--ease);
}
.g-end .g-cta:hover { transform: translateY(-2px) }

.g-foot { background: var(--dark); color: #fff; padding: 0 0 40px }
.g-foot__in { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px }
.g-foot a { color: var(--on-dark-2); font-size: 13.5px }
.g-foot a:hover { color: #fff }

/* ============ Responsivo ============ */
@media (max-width: 1040px) {
  .g-layout { grid-template-columns: 1fr; gap: 0 }
  .g-rail {
    position: static; max-height: none; margin-bottom: 26px;
    border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; background: var(--paper);
  }
  .g-rail ol { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); display: grid }
}
@media (max-width: 860px) {
  .g-step, .g-step:nth-child(even) { grid-template-columns: 1fr; gap: 24px }
  .g-step:nth-child(even) .g-shot { order: 0 }
  .g-shot { max-width: 330px }
}
@media (max-width: 560px) {
  :root { --g-head: 58px }
  .g-head__logo svg { width: 100px; height: 21px }
  .g-head__cta { padding: 10px 16px; font-size: 13px }
  .g-shot { max-width: 100% }
}
@media (prefers-reduced-motion: reduce) {
  .g-head__cta:hover, .g-end .g-cta:hover { transform: none }
}

/* Divulgación de IA en el reproductor. Va junto al pie del clip, no escondida
   en una nota legal: es la regla de Konsters — la IA se revela en el punto de
   interacción, no en un anexo. */
.g-ia { color: var(--muted); font-weight: 600 }