/* public/styles.css — base del sitio, siguiendo la paleta ya definida en storefront.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700;800&display=swap');

:root{
  --bg:#0b0b10;
  --panel:#15151b;
  --panel-alt:#1c1c23;
  --border:#24242c;
  --border-soft:#2e2e37;
  --text:#f3f3f6;
  --muted:#9c9ca7;
  --muted-soft:#84848f;
  --red:#cc1830;
  --red-bright:#ff304c;
  --red-soft:#ed2538;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px}
.red{color:var(--red-bright)}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:24px}

.skip-link{position:absolute;left:-999px;top:auto;background:#fff;color:#111;padding:12px 18px;border-radius:8px;z-index:100}
.skip-link:focus{left:16px;top:16px}

.icon{width:20px;height:20px}

.eyebrow{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--red-bright);margin-bottom:14px}

.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:.85rem;transition:background .2s ease,transform .15s ease}
.button.primary{background:var(--red);color:#fff}
.button.primary:hover{background:var(--red-bright)}
.button.secondary{background:transparent;border:1px solid var(--border-soft);color:var(--text)}
.button.secondary:hover{background:var(--panel-alt)}
.button:active{transform:scale(.98)}

/* Catálogo (home) */
.catalog{padding-block:70px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.section-heading h2{font-family:'DM Sans',Arial,sans-serif;font-weight:700;font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.03em}
.demo-note{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--muted);background:var(--panel-alt);border:1px solid var(--border);padding:9px 14px;border-radius:999px;white-space:nowrap}
.demo-note .icon{width:15px;height:15px}

.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;border:1px solid var(--border-soft);background:var(--panel);color:#c6c6cf;font-size:.8rem;font-weight:600}
.filter.active{background:var(--red);border-color:var(--red);color:#fff}
.filter .icon{width:14px;height:14px}
.sort-label{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.sort-label select{background:var(--panel);border:1px solid var(--border-soft);color:var(--text);border-radius:8px;padding:9px 10px}
.result-count{font-size:.8rem;color:var(--muted-soft);margin-bottom:18px}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.product-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.cover-button{position:relative;aspect-ratio:3/4;width:100%;display:block;background:linear-gradient(160deg,#23232c,#121216)}
.cover-button img{width:100%;height:100%;object-fit:cover}
.cover-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-family:'DM Sans',Arial,sans-serif;font-weight:700;font-size:1.05rem;color:#e7e7ee}
.badge{position:absolute;top:10px;left:10px;background:var(--red-bright);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.05em;padding:5px 9px;border-radius:6px}
.card-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.platforms{display:flex;gap:6px}
.platform-tag{font-size:.65rem;font-weight:700;color:#c9c9d2;border:1px solid var(--border-soft);border-radius:5px;padding:2px 6px}
.genre{font-size:.7rem;color:var(--muted-soft)}
.product-name button{text-align:left;font-size:.95rem;font-weight:700;color:var(--text);line-height:1.35}
.price-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto}
.price-row small{display:block;font-size:.62rem;color:var(--muted-soft);letter-spacing:.05em}
.price{font-size:1.1rem;font-weight:800}
.add-button{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.add-button:hover{background:var(--red-bright)}
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-state .icon{width:34px;height:34px;color:#5a5a66;margin-bottom:14px}
.empty-state h3{font-family:'DM Sans',Arial,sans-serif;color:var(--text);margin-bottom:8px}

/* Cómo comprar */
.how{padding-block:80px;display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:60px}
.how-intro h2{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.03em;margin-bottom:16px}
.how-intro p{color:var(--muted);line-height:1.7;font-size:.92rem}
.how ol{display:grid;gap:26px}
.how li{display:flex;gap:18px}
.how li>span{font-family:'DM Sans',Arial,sans-serif;font-size:1.4rem;font-weight:700;color:#3a3a46}
.how h3{font-size:1.05rem;margin-bottom:6px}
.how li p{color:var(--muted);font-size:.88rem;line-height:1.6}

/* FAQ (home) */
.faq{padding-block:80px}
.faq>div{margin-bottom:26px}
.faq h2{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.03em}
.faq-items details{border-bottom:1px solid var(--border);padding:18px 0}
.faq-items summary{cursor:pointer;font-weight:700;display:flex;justify-content:space-between;gap:16px;list-style:none}
.faq-items summary::-webkit-details-marker{display:none}
.faq-items summary:after{content:'+';color:var(--red-bright);flex-shrink:0}
.faq-items details[open] summary:after{content:'−'}
.faq-items p{color:var(--muted);margin-top:12px;line-height:1.7;font-size:.88rem}
.faq-items a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Footer */
footer{border-top:1px solid var(--border);background:var(--bg);padding-block:50px 30px}
.footer-main{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:30px}
.footer-main .brand{display:flex;align-items:center;gap:10px}
.footer-main .brand b{font-size:1.4rem}
.footer-main .brand small{display:block;font-size:.55rem;letter-spacing:.1em;color:var(--muted-soft)}
.instagram-contact{font-weight:700}
.footer-main>div{display:flex;gap:20px;font-size:.85rem;color:#c6c6cf}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.75rem;color:#66666f;border-top:1px solid var(--border);padding-top:20px}

.floating-contact{position:fixed;right:20px;bottom:20px;display:flex;align-items:center;gap:8px;background:#fff;color:#111;padding:12px 18px;border-radius:999px;font-weight:700;font-size:.85rem;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:20}

/* Diálogos genéricos (producto y carrito) */
dialog{border:0;border-radius:16px;padding:0;background:var(--panel);color:var(--text);max-width:560px;width:92vw}
dialog::backdrop{background:rgba(6,6,10,.7);backdrop-filter:blur(3px)}
.modal-open{overflow:hidden}
.dialog-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--panel-alt);display:grid;place-items:center;z-index:2}

#product-dialog{padding:24px;position:relative}
.product-detail-grid{display:grid;grid-template-columns:190px 1fr;gap:22px}
.detail-cover{border-radius:10px;aspect-ratio:3/4;object-fit:cover}
.detail-info h2{font-family:'DM Sans',Arial,sans-serif;font-size:1.5rem;margin:6px 0 10px}
.description{color:var(--muted);font-size:.88rem;line-height:1.6}
.detail-label{display:block;font-size:.75rem;font-weight:700;margin:16px 0 8px}
.platform-options{display:flex;gap:10px;flex-wrap:wrap}
.platform-options label{border:1px solid var(--border-soft);border-radius:8px;padding:8px 14px;font-size:.85rem;display:flex;align-items:center;gap:6px}
.detail-price{margin:16px 0}
.detail-note{font-size:.75rem;color:var(--muted-soft);margin-top:14px;line-height:1.6}
@media(max-width:520px){.product-detail-grid{grid-template-columns:1fr}}

.cart-dialog{max-width:460px;position:relative}
.cart-heading{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 24px 0}
.cart-heading h2{font-family:'DM Sans',Arial,sans-serif;font-size:1.6rem}
#cart-content{padding:24px;max-height:70vh;overflow-y:auto}
.cart-empty{text-align:center;padding:40px 10px}
.cart-empty h3{font-family:'DM Sans',Arial,sans-serif;margin:16px 0 8px}
.cart-empty p{color:var(--muted);font-size:.88rem;line-height:1.6;margin-bottom:20px}
.cart-items{display:grid;gap:16px}
.cart-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:start}
.cart-item img{width:52px;height:68px;object-fit:cover;border-radius:6px;background:var(--panel-alt)}
.cart-item h3{font-size:.9rem}
.cart-item p{font-size:.76rem;color:var(--muted-soft);margin-top:2px}
.cart-item b{display:block;margin-top:6px}
.quantity{display:flex;align-items:center;gap:10px;margin-top:8px}
.quantity button{width:26px;height:26px;border-radius:50%;border:1px solid var(--border-soft);background:var(--panel-alt)}
.quantity button:disabled{opacity:.4;cursor:not-allowed}
.remove-item{color:var(--muted-soft)}
.cart-summary{margin-top:22px;border-top:1px solid var(--border);padding-top:18px;display:grid;gap:12px}
.subtotal{display:flex;justify-content:space-between;font-weight:700}
.preview-warning{font-size:.75rem;color:var(--muted-soft);line-height:1.6}
.instagram-button{background:#fff;color:#111}
.download-order{font-size:.78rem;color:#c6c6cf;text-decoration:underline;text-underline-offset:3px;justify-self:start}
.order-copy{width:100%;background:var(--panel-alt);border:1px solid var(--border-soft);border-radius:8px;color:var(--text);padding:10px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--panel-alt);border:1px solid var(--border-soft);padding:12px 18px;border-radius:10px;font-size:.85rem;transition:transform .25s ease;z-index:50}
.toast.visible{transform:translate(-50%,0)}

@media(max-width:900px){.how{grid-template-columns:1fr}}
@media(max-width:640px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.floating-contact span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}