/* ============================================================
   portfolio.orinocolabs.com — componentes que sólo usa la galería de demos.
   Va aparte para no tocar styles.css ni su caché. Todo sale de
   tokens.css: hairline + sombra en cada superficie elevada.
   ============================================================ */

/* ---------- Ficha de la oferta (hero) ---------- */

.oferta { width: 100%; max-width: 440px; }
.oferta__desde { margin-top: var(--esp-20); }
.oferta__precio {
  font-weight: var(--peso-titulo);
  font-size: var(--tipo-precio);
  line-height: 1;
  letter-spacing: var(--ls-titulo);
  color: var(--granito);
  margin-top: var(--esp-10);
}
.oferta__mant { margin-top: var(--esp-12); }
.oferta__filas { margin: var(--esp-24) 0 0; }
.oferta__filas div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-16);
  padding: var(--esp-12) 0;
  border-top: 1px solid var(--linea);
}
.oferta__filas dt { flex: 0 0 auto; font-size: var(--tipo-meta); font-weight: var(--peso-ui); color: var(--niebla); }
.oferta__filas dd { margin: 0; font-size: var(--tipo-body-sm); text-align: right; color: var(--granito); }

/* ---------- Demos ---------- */

/* .tags como lista real (<ul>), sin viñetas */
ul.tags { list-style: none; padding: 0; margin-bottom: 0; }

.demos { display: flex; flex-direction: column; gap: var(--esp-bloque); margin-top: var(--esp-64); }

/* Captura: el escritorio de fondo y el celular encima, abajo a la derecha */
.captura { position: relative; width: 100%; max-width: 560px; padding-bottom: var(--esp-32); }
.captura img { height: auto; background: var(--papel-alto); border: 1px solid var(--linea); border-radius: var(--radio-card); }
.captura__escritorio { width: 88%; box-shadow: var(--sombra-2); }
.captura__celular { position: absolute; right: 0; bottom: 0; width: 27%; box-shadow: var(--sombra-3); }

/* ---------- Pasos (recorrido de 4 cards) ---------- */

ol.capas { list-style: none; padding: 0; margin-bottom: 0; }
.capas .card .h3 { margin-top: var(--esp-20); }

/* ---------- Precio ---------- */

.precio__lista { list-style: none; padding: 0; margin: var(--esp-24) 0 0; }
.precio__lista li {
  display: flex;
  gap: var(--esp-12);
  padding: var(--esp-10) 0;
  border-top: 1px solid var(--linea);
  font-size: var(--tipo-body-sm);
  line-height: 1.5;
  color: var(--granito);
}
.precio__lista li::before { content: "—"; color: var(--agua); font-weight: var(--peso-titulo); }

/* El acordeón de preguntas no lleva «Ver detalle»: sólo el chevron */
.acc__toggle--solo { gap: 0; }

/* ---------- Único botón de WhatsApp ----------
   El .flotante del sitio aparece sólo en celular y después del hero.
   Acá es el único contacto de la página: visible siempre, en todo ancho. */

.flotante--fijo,
.flotante--fijo.is-visible {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
  transform: none;
  bottom: var(--esp-24);
}
.footer { padding-bottom: calc(var(--esp-64) + var(--tactil)); }