/* ============================================================
   us.orinocolabs.com — componentes que sólo usa la landing de EE. UU.
   Va aparte para no tocar styles.css (copia del sitio principal) ni su
   caché. Parte de galeria.css del portfolio. 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__grande {
  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__promesa { margin-top: var(--esp-12); font-size: var(--tipo-body); font-weight: var(--peso-titulo); color: var(--agua-profunda); }
.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); }

/* Nota bajo los botones: qué pasa al tocar el CTA y que no se paga nada antes. */
.cta-nota { margin-top: var(--esp-12); }

/* ---------- Por qué importa ---------- */

/* Lo que encuentra el cliente cuando te busca: tres cards, hairline + sombra. */
.hallazgos {
  list-style: none;
  padding: 0;
  margin: var(--esp-32) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}
@media (min-width: 640px) { .hallazgos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hallazgos .card { box-shadow: var(--sombra-2); }

/* La frase que cierra el argumento, antes del botón. */
.remate {
  max-width: var(--medida-xl);
  margin-top: var(--esp-24);
  font-size: var(--tipo-claim);
  line-height: 1.3;
  font-weight: var(--peso-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--granito);
}

/* ---------- Trabajos ---------- */

/* .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); }

/* Muestras de diseño: las capturas de las demos, sin enlace. */
.muestras {
  list-style: none;
  padding: 0;
  margin: var(--esp-32) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}
@media (min-width: 640px) { .muestras { grid-template-columns: repeat(3, 1fr); } }
.muestra { margin: 0; }
.muestra img {
  width: 100%;
  height: auto;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-2);
}
.muestra figcaption { margin-top: var(--esp-12); }
.muestra figcaption .h3 { font-size: var(--tipo-body); }

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

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

/* En styles.css, desde 900px los pasos van en una fila que scrollea si no
   entra (pasa en casi cualquier laptop). Acá: 2×2 desde 640px y 4 columnas
   desde 1200px, sin scroll. Sin flechas: el «Step 01…04» ya marca el orden. */
@media (min-width: 640px) {
  ol.capas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-grid);
    overflow: visible;
    padding: 0;
    margin: var(--esp-48) 0 0;
  }
  ol.capas .card { min-width: 0; }
  ol.capas .capas__flecha { display: none; }
}
@media (min-width: 1200px) {
  ol.capas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

/* ---------- Cierre ---------- */

.cierre { max-width: var(--medida-2xl); }
.cierre .h2 { margin-top: var(--esp-24); }
.cierre .lead { margin-top: var(--esp-24); }