/* ============================================================================
   CHEKAR — PÁGINA DEL MÉTODO
   ============================================================================
   Se apoya en styles.css (tokens) y en servicios.css (portada oscura, cierre
   y navegación de páginas internas). Acá vive solo el recorrido.

   LA DECISIÓN DE FONDO: el recorrido se DIBUJA, no se fotografía.
   El método es abstracto; una foto de oficina puesta al lado de "Contrastar"
   no aporta nada y arriesga que la página se vea genérica justo donde tiene
   que verse rigurosa. El trazo pesa dos kilobytes y es nítido en cualquier
   pantalla.

   POR QUÉ NO ES 3D: la profundidad ya se usa en los verbos del titular y en
   las tarjetas que giran. Una tercera vez deja de ser firma y pasa a ser tic.
   Y un mapa vale porque se ve la forma de un vistazo — la perspectiva es
   justamente lo que arruina eso.

     1. Rótulos de producto
     2. La línea y las fases
     3. El tilde que se dibuja
     4. La bifurcación
     5. Por qué así
     6. Responsive
   ============================================================================ */

.pagina-metodo .ruta{
  background: var(--crema);
  padding: clamp(60px, 10vh, 104px) 0 clamp(40px, 7vh, 80px);
}

/* ============================================================================
   1. RÓTULOS DE PRODUCTO
   ============================================================================ */
.ruta-rotulo{ max-width: 46ch; margin: 0 0 clamp(28px, 4vh, 44px); }
.ruta-rotulo + .fases{ margin-top: 0; }

.ruta-producto{
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja-texto);
  margin-bottom: 10px;
}
.ruta-rotulo h2{ margin: 0 0 10px; }
.ruta-rotulo p{ margin: 0; color: rgba(5,25,72,.74); }

/* ============================================================================
   2. LA LÍNEA Y LAS FASES
   ============================================================================
   Cada fase es una fila de dos columnas: el carril con el nodo, y el texto.
   La línea NO es un elemento aparte: es el borde izquierdo de cada nodo
   prolongado hacia abajo. Así crece y se acorta sola con el contenido, sin
   ninguna medida fija que se rompa cuando cambie un párrafo.
   ============================================================================ */
.fases{
  list-style: none;
  margin: 0 0 clamp(28px, 4vh, 44px);
  padding: 0;
}

.fase{
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 clamp(18px, 3vw, 34px);
  padding-bottom: clamp(34px, 5vh, 56px);
}
/* El tramo de línea que baja desde cada nodo hasta el siguiente. */
.fase::before{
  content: "";
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: rgba(5,25,72,.14);
}
.fase:last-child::before{ display: none; }

/* El tramo que se pinta de naranja a medida que bajás: es el mismo trazo,
   avanzando. Corre en la placa de video, no en JavaScript. */
.fase::after{
  content: "";
  position: absolute;
  left: 22px;
  top: 46px;
  width: 2px;
  height: 0;
  background: var(--naranja);
  transform-origin: top;
}
.fase:last-child::after{ display: none; }

@keyframes avanzar-trazo{ to{ height: calc(100% - 46px); } }

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .fase::after{
      animation: avanzar-trazo linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 55%;
    }
  }
}

/* --- El nodo --- */
.fase-nodo{
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--crema);
  border: 2px solid rgba(5,25,72,.16);
  transition: border-color var(--t-hover) var(--ease-out);
}
.fase-nodo svg{ width: 24px; height: 24px; overflow: visible; }

/* --- El texto --- */
.fase-txt{ padding-top: 6px; max-width: 62ch; }
.fase-num{
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(5,25,72,.72);   /* .5 daba 3.5:1 y no pasa el mínimo */
  margin-bottom: 6px;
}
.fase-txt h3{
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
}
.fase-que{ margin: 0 0 14px; color: rgba(5,25,72,.82); }
.fase-recibis{
  margin: 0;
  padding: 14px 18px;
  background: var(--crema-2);
  border-left: 3px solid var(--naranja);
  border-radius: 0 var(--r-chico) var(--r-chico) 0;
  font-size: .9375rem;
  color: rgba(5,25,72,.82);
}
.fase-recibis b{ color: var(--navy); }
.fase-plazo{
  margin: 12px 0 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(5,25,72,.72);
}

/* ============================================================================
   3. EL TILDE QUE SE DIBUJA
   ============================================================================
   El mismo gesto de la Pantalla 2 y del logotipo. `pathLength="1"` normaliza
   el largo real del trazo: si mañana cambia la forma del tilde, la animación
   sigue funcionando sin recalcular nada.
   ============================================================================ */
.fase-nodo svg path{
  fill: none;
  stroke: var(--naranja);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;   /* de fábrica, sin dibujar */
}

@keyframes dibujar-fase{ to{ stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .fase-nodo svg path{
      animation: dibujar-fase linear both;
      animation-timeline: view();
      animation-range: entry 45% entry 90%;
    }
  }
}

/* Sin líneas de tiempo de scroll (Firefox) o con movimiento reducido, los
   tildes se muestran dibujados desde el arranque. Nunca queda un recorrido
   de círculos vacíos, que se leería como algo roto. */
@supports not (animation-timeline: view()){
  .fase-nodo svg path{ stroke-dashoffset: 0; }
  .fase::after{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .fase-nodo svg path{ stroke-dashoffset: 0; }
  .fase::after{ display: none; }
}

/* ============================================================================
   4. LA BIFURCACIÓN
   ============================================================================
   Acá la línea se abre en dos. No es adorno: es el punto donde el cliente
   decide si sigue, y el momento donde el diagnóstico deja de depender de que
   haya una venta después. El recorrido cuenta la decisión comercial en vez
   de explicarla en un párrafo.
   ============================================================================ */
.bifurcacion{
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin: 0 0 clamp(38px, 6vh, 64px);
  padding: clamp(26px, 4vh, 40px) clamp(22px, 3vw, 36px);
  background: var(--crema-2);
  border-radius: var(--r-panel);
}
.bifurcacion-trazo{ width: 200px; height: 120px; }
.bifurcacion-trazo path{
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.bif-tronco{ stroke: var(--naranja); }
/* El camino de "si no seguís" va en gris: existe, es legítimo, y no es el
   que estamos empujando. Pintarlo del mismo naranja sería mentir sobre la
   simetría de la decisión. */
.bif-izq{ stroke: rgba(5,25,72,.3); stroke-dasharray: .02 .03; }
.bif-der{ stroke: var(--naranja); }
.bif-punto{ fill: var(--naranja); }

@keyframes dibujar-bif{ to{ stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .bif-tronco{ animation: dibujar-bif linear both; animation-timeline: view(); animation-range: entry 30% entry 55%; }
    .bif-izq   { animation: dibujar-bif linear both; animation-timeline: view(); animation-range: entry 50% entry 80%; }
    .bif-der   { animation: dibujar-bif linear both; animation-timeline: view(); animation-range: entry 50% entry 80%; }
  }
}
@supports not (animation-timeline: view()){
  .bifurcacion-trazo path{ stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce){
  .bifurcacion-trazo path{ stroke-dashoffset: 0; }
}
/* La izquierda es punteada a propósito, así que su offset no se anima a 0
   de la misma forma: se deja dibujada y el punteado lo da el dasharray. */
.bif-izq{ stroke-dashoffset: 0; }

.bifurcacion-txt h2{ margin: 0 0 18px; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.bif-caminos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;   /* las dos cajas terminan a la misma altura */
  gap: 18px;
}
.bif-camino{
  padding: 16px 18px;
  border-radius: var(--r-chico);
  background: var(--crema);
  border: 1px solid var(--linea-cla);
}
.bif-camino-activo{ border-color: var(--naranja); }
.bif-etiqueta{
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(5,25,72,.72);
  margin-bottom: 8px;
}
.bif-camino-activo .bif-etiqueta{ color: var(--naranja-texto); }
.bif-camino p{ margin: 0; font-size: .9375rem; color: rgba(5,25,72,.8); }

/* ============================================================================
   5. POR QUÉ ASÍ
   ============================================================================ */
.porque{
  background: var(--crema-2);
  padding: clamp(56px, 9vh, 96px) 0;
  border-top: 1px solid var(--linea-cla);
}
.porque-txt{ max-width: 62ch; }
.porque-txt h2{ margin: 0 0 18px; max-width: 22ch; }
.porque-txt p{ color: rgba(5,25,72,.82); }
.porque-nota{
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea-cla);
  font-size: .9375rem;
  color: rgba(5,25,72,.72);
}

/* ============================================================================
   6. RESPONSIVE
   ============================================================================ */
@media (max-width: 860px){
  .bifurcacion{ grid-template-columns: 1fr; }
  .bifurcacion-trazo{ width: 160px; height: 96px; margin-inline: auto; }
  .bif-caminos{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .fase{ grid-template-columns: 36px 1fr; }
  .fase-nodo{ width: 36px; height: 36px; }
  .fase-nodo svg{ width: 19px; height: 19px; }
  .fase::before, .fase::after{ left: 17px; top: 36px; }
  @keyframes avanzar-trazo{ to{ height: calc(100% - 36px); } }
}