/* ==========================================================================
   PreventGas — orientador
   Tres preguntas y sale el equipo. Mismo lenguaje que los filtros del
   catálogo: chips de tinta, filetes finos, marca amarilla en lo elegido.
   La versión sin JavaScript (.oriest) son dos listas que llevan al catálogo
   filtrado; orientador.js la oculta y muestra el paso a paso.
   ========================================================================== */
.ori { margin-block: clamp(2rem, 5vw, 3.5rem); }
.ori[hidden] { display: none; }

.ori__migas {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 0 0 1.5rem; padding: 0; list-style: none;
}
.ori__miga button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem; border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--card); font: 500 .75rem/1 var(--body); color: var(--muted); cursor: pointer;
}
.ori__miga button::after { content: "×"; font-size: .95rem; line-height: 1; }

.ori__pregunta { font: 600 clamp(1.25rem, 3vw, 1.9rem)/1.15 var(--head); color: var(--ink); margin: 0 0 .4rem; }
.ori__ayuda { margin: 0 0 1.5rem; color: var(--muted); font-size: var(--fs-small); max-width: 62ch; }

.ori__ops { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ori__op {
  display: flex; flex-direction: column; gap: .2rem; width: 100%; text-align: left;
  padding: .9rem 1rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--border-2); border-radius: var(--radius);
  border-left: 3px solid transparent;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.ori__op:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(245,196,0,.35); }
.ori__op b { font: 600 1rem/1.2 var(--head); color: var(--ink); }
.ori__op small { font: 500 .75rem/1.3 var(--body); color: var(--muted); }
.ori__op--ancho { grid-column: 1 / -1; }

/* ── resultado ── */
.ori__res { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.ori__ficha { border-top: 1px solid var(--border); }
.ori__dato {
  display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: .4rem 2rem;
  align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.ori__dato dt { font: 600 .8125rem/1.3 var(--head); color: var(--ink); }
.ori__dato dd { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.ori__aviso {
  margin: 0; padding: .9rem 1rem; font-size: var(--fs-small); color: var(--ink);
  background: rgba(245,196,0,.14); border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.ori__equipos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.ori__eq {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 3px solid var(--accent);
}
.ori__eq img { width: 100%; height: 150px; object-fit: contain; }
.ori__eq b { font: 600 1.05rem/1.2 var(--head); color: var(--ink); }
.ori__eq p { margin: 0; font-size: var(--fs-small); color: var(--muted); flex: 1; }
.ori__eqpie { display: flex; flex-wrap: wrap; gap: .5rem; }
.ori__cierre { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ── versión sin JavaScript ── */
.oriest { display: grid; gap: clamp(2rem, 5vw, 3rem); margin-block: clamp(2rem, 5vw, 3.5rem); }
.oriest[hidden] { display: none; }
.oriest__nota { margin: .25rem 0 1rem; color: var(--muted); font-size: var(--fs-small); }
.oriest__lista { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.oriest__link {
  display: flex; align-items: baseline; gap: .5rem; padding: .7rem .85rem;
  background: var(--card); border: 1px solid var(--border-2); border-radius: var(--radius);
  text-decoration: none;
}
.oriest__link b { font: 600 .95rem/1.2 var(--head); color: var(--ink); }
.oriest__link span { font: 500 .75rem/1 var(--mono, var(--body)); color: var(--muted); }
.oriest__link small { margin-left: auto; font-size: .75rem; color: var(--muted); }
.oriest__lista--ind .oriest__link { flex-direction: column; gap: .2rem; }
.oriest__lista--ind .oriest__link span { margin: 0; }

@media (max-width: 560px) {
  .ori__dato { grid-template-columns: 1fr; gap: .2rem; }
}

/* -------------------------------------------------- hover solo con mouse
   En una pantalla táctil no hay hover: el navegador lo simula y el estilo
   queda pegado después de tocar. Estas reglas son las mismas de arriba,
   movidas acá sin cambiarles nada, para que solo corran donde hay puntero
   fino. El feedback táctil va por :active, que funciona en todo. */
@media (hover: hover) and (pointer: fine) {
  .ori__miga button:hover { border-color: var(--ink); color: var(--ink); }
  .ori__op:hover { border-color: var(--ink); border-left-color: var(--accent); transform: translateY(-1px); }
  .oriest__link:hover { border-color: var(--ink); }
}