/* Componentes reutilizables (complementan Tailwind) */
:root { --brand: #c8102e; }
html { -webkit-tap-highlight-color: transparent; }

.nav-link { padding: .5rem .9rem; border-radius: 999px; font-size: .875rem; font-weight: 600; color: #475569; position: relative; transition: .2s; }
.dark .nav-link { color: #cbd5e1; }
.nav-link:hover { color: var(--brand); background: rgba(200,16,46,.07); }
.nav-link.is-active { color: var(--brand); }
.nav-link.is-active::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .15rem; height: 2px; border-radius: 2px; background: var(--brand); }
.m-link { padding: .75rem 1rem; border-radius: .75rem; font-weight: 600; }
.m-link:hover { background: rgba(200,16,46,.08); color: var(--brand); }

.icon-btn { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: grid; place-items: center; color: #475569; transition: .2s; }
.dark .icon-btn { color: #cbd5e1; }
.icon-btn:hover { background: rgba(200,16,46,.08); color: var(--brand); transform: translateY(-1px); }

.btn-primary, .btn-ghost, .btn-outline, .btn-light { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; padding: .85rem 1.5rem; border-radius: 999px; transition: .25s; }
.btn-primary { background: linear-gradient(135deg, #e11d3f, #a50d26); color: #fff; box-shadow: 0 10px 25px -8px rgba(200,16,46,.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(200,16,46,.75); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.25); }
.btn-outline { border: 1.5px solid #cbd5e1; }
.dark .btn-outline { border-color: rgba(255,255,255,.2); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -8px rgba(0,0,0,.4); }
.btn-sm { background: var(--brand); color: #fff; font-size: .8rem; font-weight: 700; padding: .5rem 1rem; border-radius: .6rem; transition: .2s; }
.btn-sm:hover { background: #a50d26; }
.btn-sm-outline { display: grid; place-items: center; width: 2.25rem; border-radius: .6rem; border: 1px solid #e2e8f0; color: #64748b; transition: .2s; }
.dark .btn-sm-outline { border-color: rgba(255,255,255,.15); color: #94a3b8; }
.btn-sm-outline:hover { color: var(--brand); border-color: var(--brand); }
.btn-add { width: 100%; background: var(--brand); color: #fff; font-weight: 700; font-size: .8rem; padding: .65rem; border-radius: .7rem; transition: .2s; }
.btn-add:hover { background: #a50d26; transform: translateY(-1px); }
.btn-add.added { background: #059669; }

.field { width: 100%; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; padding: .8rem 1.2rem; font-size: .9rem; outline: none; transition: .2s; }
.dark .field { background: #1b2538; border-color: rgba(255,255,255,.12); color: #e2e8f0; }
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(200,16,46,.12); }
.field-dark { width: 100%; border-radius: .8rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: .8rem 1rem; font-size: .9rem; outline: none; }
.field-dark::placeholder { color: rgba(255,255,255,.5); }
.field-dark:focus { border-color: #e11d3f; background: rgba(255,255,255,.12); }

.quick-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 1rem; background: #fff; border: 1px solid #e2e8f0; transition: .25s; }
.dark .quick-card { background: #121a2b; border-color: rgba(255,255,255,.08); }
.quick-card small { color: #64748b; font-size: .78rem; }
.quick-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(15,23,42,.2); border-color: rgba(200,16,46,.4); }
.quick-ico { width: 2.75rem; height: 2.75rem; border-radius: .9rem; display: grid; place-items: center; background: rgba(200,16,46,.1); color: var(--brand); flex-shrink: 0; }

.service-card { display: flex; flex-direction: column; padding: 1.4rem; border-radius: 1.1rem; background: #fff; border: 1px solid #e2e8f0; transition: .3s; }
.dark .service-card { background: #121a2b; border-color: rgba(255,255,255,.08); }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -16px rgba(200,16,46,.3); border-color: rgba(200,16,46,.45); }
.service-arrow { transition: transform .25s; }
.service-card:hover .service-arrow { transform: translateX(6px); }

.branch-card { padding: 1.1rem; border-radius: 1.1rem; background: #fff; border: 1px solid #e2e8f0; transition: .25s; cursor: pointer; }
.dark .branch-card { background: #121a2b; border-color: rgba(255,255,255,.08); }
.branch-card:hover, .branch-card.is-active { border-color: var(--brand); box-shadow: 0 14px 30px -14px rgba(200,16,46,.4); transform: translateY(-2px); }

.cat-tab { padding: .5rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid #e2e8f0; transition: .2s; }
.dark .cat-tab { border-color: rgba(255,255,255,.12); }
.cat-tab:hover { border-color: var(--brand); color: var(--brand); }
.cat-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.product-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.1rem; overflow: hidden; transition: .3s; }
.dark .product-card { background: #121a2b; border-color: rgba(255,255,255,.08); }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -18px rgba(15,23,42,.35); }
.product-media { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); overflow: hidden; }
.dark .product-media { background: linear-gradient(135deg, #1b2538, #121a2b); }
.product-media img { transition: transform .5s; }
.product-card:hover .product-media img { transform: scale(1.06); }

.footer-h { color: #fff; font-weight: 700; margin-bottom: .75rem; }
.footer-ul { display: grid; gap: .5rem; font-size: .875rem; }
.footer-ul a:hover { color: #fff; }

@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-zoom { animation: heroZoom 1.6s ease-out both; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d, 0ms), transform .6s ease var(--d, 0ms), border-color .3s, box-shadow .3s; }
.reveal.in { opacity: 1; transform: none; }

/* Leaflet */
.leaflet-container { font-family: inherit; }
.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
.pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--brand); transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }

/* Carrito */
#cart-drawer.open { transform: none; }
#cart-overlay.open { opacity: 1; pointer-events: auto; }

/* Pop-up publicitario */
#ad-modal { opacity: 0; transition: opacity .3s; }
#ad-modal.is-open { opacity: 1; }
#ad-modal .ad-box { transform: translateY(24px) scale(.94); transition: transform .4s cubic-bezier(.2,.9,.3,1.2); }
#ad-modal.is-open .ad-box { transform: none; }
.ad-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(255,255,255,.9); color: #0b1220; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: .2s; }
.ad-nav:hover { background: var(--brand); color: #fff; }
.ad-dot { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: .25s; }
.ad-dot.on { width: 1.4rem; background: var(--brand); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }