/* ── tarjeta.css ───────────────────────────────────────────────────────────
   La tarjeta de oportunidad y su pantalla de detalle. Una sola copia, usada
   por invierte.html (público) y por inversionistas.html (miembros), para que
   las dos páginas no se separen con el tiempo. CLAUDE.md §3.

   Usa los tokens que YA definen las dos páginas en su :root
   (--ink --green --green-d --green-l --sand2 --slate --mid --white --border
    --font-serif --font-body). No define paleta nueva.

   Diseño aprobado por Lumi ("Tarjeta V2"): la foto es la cara, pocas
   palabras, dos cifras y un botón. D-034.
   ────────────────────────────────────────────────────────────────────────── */

/* ── rejilla ── cada tarjeta mide lo suyo; no se estiran entre sí ── */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
         gap:1.3rem;align-items:start}

/* ── la tarjeta ── */
.op-card{background:var(--white);border:1px solid var(--border);border-radius:10px;
         padding:1rem 1rem 1.3rem;display:flex;flex-direction:column;text-align:center}

.shot{border-radius:6px;overflow:hidden;background:var(--sand2);margin-bottom:1rem;position:relative}
.shot .one{aspect-ratio:4/3;background:var(--sand2) center/cover no-repeat;position:relative}
.shot .half{aspect-ratio:16/9;background:var(--sand2) center/cover no-repeat;position:relative}
.shot .half + .half{border-top:2px solid var(--white)}
/* La foto "después" se enseña COMPLETA, no recortada: si es una ilustración,
   la etiqueta va quemada en un borde de la imagen y recortarla la borraría. */
.shot .half.despues{background-size:contain}
.shot .tag{position:absolute;top:8px;left:8px;z-index:3;font-size:.6rem;font-weight:700;
           letter-spacing:.1em;padding:.22rem .5rem;border-radius:3px;
           background:rgba(26,31,28,.8);color:#fff}
.shot .tag.after{background:var(--green);color:var(--ink)}
.shot .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          color:#a8b0a6;font-size:.72rem;letter-spacing:.04em;text-align:center;padding:.5rem;
          background:repeating-linear-gradient(45deg,#edeae2,#edeae2 11px,#e7e3d9 11px,#e7e3d9 22px)}
.op-estado{position:absolute;top:8px;right:8px;z-index:3}

/* ── mapa como cara de la tarjeta ── cuando no hay foto. No se puede tocar
   dentro de la tarjeta (pointer-events:none): así no se roba el scroll en el
   teléfono, y el botón de la tarjeta sigue llevando al detalle. ── */
.shot .mapa{background:var(--sand2)}
.shot .mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}

/* ── mapa del detalle ── este sí se mueve y se agranda ── */
.mapa-det{border-radius:8px;overflow:hidden;border:1px solid var(--border);
          aspect-ratio:4/3;margin:.55rem 0 0;background:var(--sand2)}
.mapa-det iframe{width:100%;height:100%;border:0;display:block}
.op-card.det > .mapa-det:first-child{margin:0 0 1rem}
.mapa-nota{font-size:.72rem;color:var(--mid);margin-top:.4rem;text-align:left}
.op-mapa{display:inline-block;font-size:.76rem;color:var(--green-d);font-weight:600;
         text-decoration:none;margin-top:.35rem}

.op-name{font-family:var(--font-serif);font-size:1.45rem;font-weight:700;line-height:1.15}
.op-specs{font-size:1rem;color:var(--slate);margin-top:.15rem}
.op-where{font-size:.78rem;color:var(--mid);margin-top:.1rem}

/* ── las dos cifras ── la primera grande y verde, la segunda en gris ── */
.op-figs{margin-top:.9rem}
.op-fig{font-size:1.02rem;margin-top:.22rem}
.op-fig b{font-weight:600}
.op-fig .v{font-weight:700;color:var(--green-d)}
.op-fig.sub{font-size:.95rem;color:var(--slate)}
.op-fig.sub .v{color:var(--slate);font-weight:600}
.op-desc{font-size:.82rem;color:var(--slate);line-height:1.55;margin-top:.6rem}

.bar{height:6px;background:var(--sand2);border-radius:3px;overflow:hidden;margin-top:.9rem}
.bar i{display:block;height:100%;background:var(--green);border-radius:3px}
.bar-lbl{font-size:.72rem;color:var(--mid);margin-top:.3rem}

.op-cta{margin-top:auto;padding-top:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.btn-op{display:block;padding:.8rem 1.4rem;border:none;border-radius:5px;background:var(--green);
        color:var(--ink);font-family:var(--font-body);font-size:1rem;font-weight:700;
        text-decoration:none;cursor:pointer;width:100%;max-width:260px;text-align:center}
.btn-op:hover{background:var(--green-d)}
.btn-op.quiet{background:var(--white);color:var(--slate);border:1.5px solid var(--border)}
.btn-op:disabled{opacity:.6;cursor:default}
.op-cond{font-size:.7rem;color:var(--mid);line-height:1.5}
.op-lock{margin-top:.8rem;padding-top:.8rem;font-size:.76rem;color:var(--slate);
         line-height:1.5;border-top:1px dashed var(--sand2)}
.op-lock a{color:var(--green-d);font-weight:700;text-decoration:none}

/* ── Perfil de la propiedad ── las cinco barras, en el detalle ── */
.ax{margin-top:.95rem;text-align:left}
.ax-top{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;margin-bottom:.3rem}
.ax-name{font-size:.82rem;font-weight:600}
.ax-val{font-size:.78rem;color:var(--slate);text-align:right}
.ax-val.flojo{color:#a8862e}
.ax-bar{height:7px;background:var(--sand2);border-radius:4px;overflow:hidden}
.ax-bar i{display:block;height:100%;background:var(--green);border-radius:4px}
.ax-bar.low i{background:#e0b950}
.ax-ends{display:flex;justify-content:space-between;font-size:.66rem;color:var(--mid);margin-top:.22rem}

/* ── detalle ── misma tarjeta, alineada a la izquierda, con la caja de oferta ── */
.op-card.det{text-align:left;max-width:640px;margin:0 auto}
.op-card.det .shot{text-align:center}
.det-h{font-family:var(--font-serif);font-size:1.05rem;font-weight:700;margin:1.6rem 0 .25rem}
.det-lead{font-size:.78rem;color:var(--mid)}
.maps{display:flex;gap:.6rem;margin-top:.55rem}
.maps a{flex:1;text-align:center}

/* ── caja de oferta ── fondo oscuro para que se distinga del resto ── */
.oferta{background:var(--ink);border-radius:9px;padding:1.1rem;margin-top:1.6rem;color:#fff}
.oferta h3{font-family:var(--font-serif);font-size:1.1rem;margin-bottom:.5rem}
.oferta p{font-size:.82rem;color:rgba(255,255,255,.72);line-height:1.5}
.oferta p + p{margin-top:.6rem}
.oferta .bar{background:#141816;margin-top:0}
.oferta label{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.72);
              margin:.7rem 0 .25rem}
.oferta input{width:100%;padding:.75rem;border-radius:6px;border:1px solid #3a4440;
              background:#141816;color:#fff;font-size:1rem;font-family:var(--font-body)}
.oferta input::placeholder{color:#7d8a84}
.oferta .btn-op{margin-top:.9rem;max-width:none}
.oferta .fine{font-size:.68rem;color:#8a9790;margin-top:.5rem}
.oferta .msg{font-size:.78rem;margin-top:.7rem;min-height:1.15rem}

@media(max-width:560px){
  .op-grid{grid-template-columns:1fr}
  .op-name{font-size:1.3rem}
  .maps{flex-direction:column}
}