/* moko.css — tarjeta MOKO "ASÍ SE VE EN TI" (modelo + ojo + tono). Puerto de 15_Scripts/moko_card.py.
   On-brand (obsidian/ámbar). Usada en /lentes-de-contacto-color y en el resultado del asesor. */
.moko-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:18px}
@media(max-width:520px){.moko-grid{grid-template-columns:1fr}}
.moko-card{display:grid;grid-template-columns:1.1fr .9fr;background:#09080A;border:1px solid #221f1b;border-radius:18px;overflow:hidden}
@media(max-width:420px){.moko-card{grid-template-columns:1fr}}
.moko-left{position:relative;background:#000;min-height:230px}
.moko-hero{width:100%;height:100%;object-fit:cover;display:block;object-position:center 26%}
.moko-badge{position:absolute;top:12px;left:12px;background:rgba(9,8,10,.8);border:1px solid #D4883A;color:#EDE8E0;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600}
.moko-badge b{color:#D4883A}
.moko-antes{position:absolute;bottom:12px;left:12px;width:78px;border-radius:9px;overflow:hidden;border:2px solid rgba(237,232,224,.67)}
.moko-antes img{width:100%;display:block}
.moko-antes span{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.67);color:#fff;font-size:9px;text-align:center;letter-spacing:.1em}
.moko-right{background:linear-gradient(160deg,#141215,#0c0b0d);padding:20px;color:#EDE8E0}
.moko-kick{color:#9a948a;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.moko-tone{font-family:"Syne",sans-serif;font-weight:800;font-size:30px;line-height:1;margin:3px 0;color:#fff}
.moko-sub{color:#D4883A;font-weight:600;font-size:12px;margin-bottom:10px;letter-spacing:.04em}
.moko-eye{width:100%;height:84px;object-fit:cover;border-radius:9px;margin:4px 0 10px;border:1px solid #2a2723}
.moko-right h4{font-family:"Syne",sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;color:#9a948a;text-transform:uppercase;margin:10px 0 5px}
.moko-body{font-size:12px;line-height:1.45;color:#cfc9bf}
.moko-specs{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:11.5px;margin-top:4px}
.moko-specs div{display:flex;justify-content:space-between;border-bottom:1px solid #1d1a17;padding:3px 0}
.moko-specs span{color:#8a847a}.moko-specs b{color:#EDE8E0}
.moko-foot{margin-top:10px;font-size:9.5px;color:#6f6a61;line-height:1.4}
.moko-cta{display:inline-flex;margin-top:12px;gap:7px;align-items:center;background:#D4883A;color:#09080A;font-weight:700;font-size:12.5px;padding:9px 15px;border-radius:999px;text-decoration:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}