/* Configurador de fundas para celular (/personaliza/fundas/) */
.fd-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; overflow-x: auto; }
.fd-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--ink-3, #6b7280); white-space: nowrap; background: var(--paper); }
.fd-steps li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--cream-2, #efe6d8); color: var(--ink); }
.fd-steps li.on, .fd-steps li.done { color: var(--ink); border-color: var(--navy); }
.fd-steps li.on b, .fd-steps li.done b { background: var(--navy); color: var(--cream, #fff); }
.fd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.fd-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l, 20px); padding: clamp(18px, 3vw, 28px); margin-bottom: 18px; }
.fd-card[hidden] { display: none; }
.fd-card > .h3 { margin: 0 0 14px; }
.fd-sticky { position: sticky; top: 96px; margin: 0; }
.fd-filter, .fd-brands { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fd-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.fd-type { text-align: left; border: 1px solid var(--line-2); background: #fff; border-radius: 16px; padding: 10px; cursor: pointer; display: grid; gap: 8px; transition: border-color .2s, box-shadow .2s, transform .2s; font: inherit; color: inherit; }
.fd-type:hover { border-color: var(--navy); transform: translateY(-2px); }
.fd-type[aria-pressed="true"] { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(224, 51, 111, .15); }
.fd-type .im { aspect-ratio: 4/3; border-radius: 10px; background: var(--cream-2, #f4ede1); display: grid; place-items: center; overflow: hidden; }
.fd-type .im img { width: 100%; height: 100%; object-fit: contain; }
.fd-type b { font-size: 14px; line-height: 1.25; }
.fd-type small { color: var(--ink-3, #6b7280); font-size: 12px; line-height: 1.35; }
.fd-type .pr { font-weight: 700; color: var(--magenta); font-size: 14px; }
.fd-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.fd-model { border: 1px solid var(--line-2); background: #fff; border-radius: 12px; padding: 10px 12px; text-align: left; font: inherit; font-size: 13.5px; cursor: pointer; min-height: 44px; }
.fd-model:hover { border-color: var(--navy); }
.fd-model[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.fd-drop { border: 2px dashed var(--line-2); border-radius: 16px; padding: 26px 18px; text-align: center; cursor: pointer; background: #fff; transition: border-color .2s, background .2s; display: grid; gap: 6px; justify-items: center; }
.fd-drop:hover, .fd-drop.over, .fd-drop:focus-visible { border-color: var(--magenta); background: rgba(224, 51, 111, .04); outline: none; }
.fd-drop b { display: block; margin-bottom: 4px; }
.fd-preview { display: flex; gap: 14px; align-items: center; text-align: left; }
.fd-preview img { width: 120px; height: 120px; object-fit: contain; border-radius: 12px; background: var(--cream-2, #f4ede1); }
.fd-preview .doc { width: 120px; height: 120px; border-radius: 12px; background: var(--cream-2, #f4ede1); display: grid; place-items: center; font-weight: 700; }
.fd-preview button { margin-top: 6px; }
.fd-check { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 14px; }
.fd-sum { display: grid; gap: 8px; font-size: 14px; margin-bottom: 12px; }
.fd-sum div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.fd-sum span { color: var(--ink-3, #6b7280); }
.fd-sum b { text-align: right; }
.fd-qtyrow { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }
.fd-qtyrow[hidden] { display: none; }
@media (max-width: 980px) { .fd-grid { grid-template-columns: 1fr; } .fd-sticky { position: static; } }