/* ============================================================
   JOHNNYTECH — flacas.css
   Estilos de las secciones nuevas de eventos / colabora / llamadas
   y de la página 404. Se incluye SOLO en esas páginas.
   Usa tokens comunes a ambos temas (estudio y original) con fallbacks.
   Animación: ease-out cubic-bezier(0.23,1,0.32,1), <300ms, solo transform/opacity.
   ============================================================ */

/* ---------- Pasos numerados (colabora + llamadas) ---------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos li {
  counter-increment: paso;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 24px;
  box-shadow: var(--sombra-1, none);
}
.pasos li::before {
  content: "0" counter(paso) " /";
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 10px;
}
.pasos li strong {
  display: block;
  font-family: var(--display, inherit);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.35;
}
.pasos li p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- Qué sí / qué no (colabora) ---------- */
.sino {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.sino .col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 24px;
  box-shadow: var(--sombra-1, none);
}
.sino .col h3 {
  font-family: var(--display, inherit);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sino ul { list-style: none; margin: 6px 0 0; padding: 0; }
.sino li {
  position: relative;
  padding: 10px 0 10px 28px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.sino li + li { border-top: 1px solid var(--border); }
.sino li::before {
  position: absolute;
  left: 2px;
  top: 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
}
.sino .si li::before { content: "✓"; color: var(--ok-tx, #34d399); }
.sino .no li::before { content: "✕"; color: var(--warm-tx, #f87171); }

/* ---------- Mini FAQ con <details> (llamadas) ---------- */
.faq { margin-top: 28px; max-width: 760px; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  font-family: var(--display, inherit);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 150ms ease;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  color: var(--accent);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p {
  margin: 0;
  padding: 0 36px 18px 4px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 640px;
}
.faq details[open] > p { animation: faq-entra 240ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes faq-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Buscador simple (404) ---------- */
.buscador-404 { margin-top: 36px; max-width: 560px; }
.buscador-404 label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.buscador-404 input[type=search] {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--sans, inherit);
  font-size: 15px;
  transition: border-color 150ms ease;
}
.buscador-404 input[type=search]:focus { outline: none; border-color: var(--accent); }
.resultados-404 { margin-top: 14px; }
.resultados-404 a {
  display: block;
  padding: 11px 4px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 14.5px;
  text-decoration: none;
  animation: faq-entra 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.resultados-404 a:hover { color: var(--accent); text-decoration: none; }
.resultados-404 a .tipo-res {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-right: 8px;
}
.resultados-404 .nada {
  padding: 11px 4px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
  .faq details[open] > p, .resultados-404 a { animation: none; }
}

@media (max-width: 640px) {
  .pasos li, .sino .col { padding: 20px; }
  .faq details > p { padding-right: 12px; }
}