@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
:root{--pink:#e6007e;--pink2:#ffe0ef;--ink:#19151a;--muted:#77717a;--cream:#fff9fb;--line:#f0dce4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;background:#fff}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,92%);margin:auto}.topbar{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:2px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.5px;margin-top:3px}.brand-mark{background:var(--pink);color:white;width:43px;height:43px;border-radius:14px;display:grid;place-items:center;font-weight:800;letter-spacing:0}.nav nav{display:flex;gap:26px;font-size:13px;color:#514b52}.nav nav a:hover{color:var(--pink)}button{font:inherit;cursor:pointer}.cart-button{border:0;background:var(--ink);color:#fff;border-radius:30px;padding:11px 17px}.cart-button span{background:var(--pink);border-radius:20px;padding:3px 7px;margin-left:5px}.hero{background:linear-gradient(110deg,#fff1f6,#fff 65%);overflow:hidden}.hero-grid{min-height:400px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:55px 0}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:800;color:var(--pink)}h1{font-size:clamp(44px,6vw,72px);line-height:.98;letter-spacing:-3px;margin:18px 0}h1 em{font-family:'Playfair Display',serif;color:var(--pink)}.hero p,.intro p,.about p,.contact p{max-width:500px;color:var(--muted);line-height:1.7;font-size:14px}.primary{display:inline-block;border:0;background:var(--pink);color:#fff;border-radius:30px;padding:14px 22px;font-weight:700;font-size:13px;box-shadow:0 8px 20px #ed6c9a35}.hero .primary{margin-top:15px}.hero-art{height:275px;position:relative;display:grid;place-items:center}.hero-card{width:min(330px,90%);height:230px;background:linear-gradient(145deg,#19151a,#393039);color:white;border-radius:22px;padding:28px;box-shadow:18px 18px 0 #f7b9ce;transform:rotate(4deg);display:flex;flex-direction:column;justify-content:space-between}.hero-card span{font-size:11px;letter-spacing:4px;color:#ffc0d5}.hero-card strong{font:700 32px 'Playfair Display',serif}.hero-card small{color:#e7cbd5}.bubble{position:absolute;z-index:1;right:6%;top:5px;background:var(--pink);color:white;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:800;transform:rotate(12deg);box-shadow:0 6px 20px #ed6c9a55}.intro{text-align:center;padding:65px 0 25px}.intro h2,.about h2,.contact h2{font-size:34px;margin:10px 0}.intro p{margin:0 auto}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 25px;flex-wrap:wrap}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:white;border-radius:24px;padding:9px 14px;font-size:12px;color:#5d555d}.filter.active,.filter:hover{background:var(--ink);border-color:var(--ink);color:white}#search{border:1px solid var(--line);border-radius:24px;padding:11px 15px;min-width:210px;outline-color:var(--pink)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.product{border:1px solid #f1e7eb;border-radius:16px;overflow:hidden;background:white;transition:.2s}.product:hover{transform:translateY(-4px);box-shadow:0 14px 35px #26151c12}.product img{width:100%;height:245px;object-fit:contain;background:#fff;padding:9px}.product-info{padding:14px}.tag{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--pink);font-weight:800}.product h3{font-size:14px;margin:7px 0}.product p{font-size:11px;color:var(--muted);min-height:32px;line-height:1.45}.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.price{font-size:12px;font-weight:800}.add{background:var(--pink2);border:0;color:#a93660;border-radius:20px;padding:9px 12px;font-size:11px;font-weight:800}.about{margin:75px 0;background:var(--cream);border-radius:24px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:20px}.about-stamp{border:2px solid var(--pink);color:var(--pink);border-radius:50%;width:145px;height:145px;display:grid;place-content:center;text-align:center;line-height:1.3;font-size:14px;transform:rotate(9deg)}.about-stamp b{font-size:24px}.contact{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:10px 0 65px}.contact .primary{white-space:nowrap}footer{background:var(--ink);color:#fff;font-size:11px}.footer{padding:22px 0;display:flex;justify-content:space-between;color:#d7cbd1}.overlay{display:none;position:fixed;inset:0;background:#17101770;z-index:8}.overlay.show{display:block}.cart{position:fixed;right:-440px;top:0;height:100vh;width:min(420px,100%);background:#fff;z-index:9;transition:.25s;display:flex;flex-direction:column;padding:22px}.cart.open{right:0}.cart-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.cart-head h3{margin:0 0 18px}.cart-head button{border:0;background:none;font-size:30px}.cart-items{overflow:auto;flex:1;padding:12px 0}.empty,.empty-catalog{color:var(--muted);font-size:13px}.cart-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.qty{display:flex;align-items:center;gap:9px;margin-top:6px}.qty button{border:1px solid var(--line);background:#fff;border-radius:50%;width:23px;height:23px}.cart-foot{border-top:1px solid var(--line);padding-top:13px}.cart-foot label{display:block;font-size:11px;font-weight:700;margin:10px 0}.cart-foot input,.cart-foot textarea{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:5px;font:inherit;font-size:12px}.cart-foot textarea{min-height:55px;resize:vertical}.full{width:100%;margin:5px 0}.cart-foot small{display:block;color:var(--muted);font-size:10px;line-height:1.5}.admin-wrap{padding-bottom:40px}.product[hidden]{display:none!important}@media(max-width:850px){.product-grid{grid-template-columns:repeat(3,1fr)}.nav nav{gap:12px}}@media(max-width:620px){.nav{height:auto;padding:12px 0;flex-wrap:wrap}.nav nav{order:3;width:100%;justify-content:space-around}.hero-grid{grid-template-columns:1fr;padding:42px 0}.hero-art{height:220px}.hero-card{height:180px}.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}.product img{height:175px}.product-info{padding:10px}.about,.contact{padding:26px;display:block}.about-stamp{margin:25px auto 0}.contact .primary{margin-top:12px}.toolbar{align-items:stretch}#search{width:100%}.footer{gap:10px;flex-direction:column}}


/* Galería de fotografías por producto */
.product-gallery{padding:14px 14px 0}
.gallery-main{width:100%;height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#fff7fa}
.gallery-main-image{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:thin}
.gallery-thumb{flex:0 0 58px;width:58px;height:58px;padding:3px;border:1px solid #eadbe2;border-radius:8px;background:white;cursor:pointer}
.gallery-thumb.selected{border:2px solid #ed6c9a}
.gallery-thumb img{width:100%;height:100%;object-fit:contain}
.image-lightbox{display:none;position:fixed;inset:0;z-index:1000;background:rgba(15,10,14,.92);align-items:center;justify-content:center;padding:24px}
.image-lightbox.show{display:flex}
.image-lightbox>img{max-width:min(92vw,1100px);max-height:88vh;object-fit:contain}
.lightbox-close{position:absolute;right:22px;top:12px;border:0;background:none;color:white;font-size:42px;cursor:pointer}
@media(max-width:600px){.gallery-main{height:250px}.gallery-thumb{flex-basis:52px;width:52px;height:52px}}

.cart{width:min(520px,100%);padding:22px 24px}.cart-head{flex:0 0 auto}.cart-items{min-height:80px}.cart-row{align-items:flex-start;gap:11px}.cart-row>img{width:58px;height:66px;object-fit:contain;border:1px solid var(--line);border-radius:8px}.cart-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cart-row-main small{color:var(--muted);font-size:10px}.line-total{white-space:nowrap;font-size:11px}.qty{gap:8px}.qty button{width:26px;height:26px}.qty .remove-item{width:auto;border:0;color:#a93660;border-radius:0;font-size:10px;text-decoration:underline}.cart-summary{border-top:1px solid var(--line);padding:12px 0;display:grid;gap:7px;font-size:12px}.cart-summary>div{display:flex;justify-content:space-between}.grand-total{font-size:16px;font-weight:800}.grand-total strong{color:#a93660}.cart-foot{overflow:auto;flex:0 0 auto;max-height:54vh}.cart-foot label{font-size:12px}.cart-foot input,.cart-foot textarea{font-size:13px;padding:11px}.payment-options{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:12px 0}.payment-options legend{font-size:12px;font-weight:800;padding:0 5px}.choice{display:flex!important;align-items:flex-start;gap:9px;padding:9px 0;margin:0!important;cursor:pointer}.choice input{width:auto;margin:3px 0 0;accent-color:var(--pink)}.choice span{display:grid;gap:3px}.choice small{font-size:10px;color:var(--muted);font-weight:400}.sinpe-number{color:#a93660;font-size:14px;letter-spacing:.5px}.pickup-note{background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:11px;font-size:11px;margin:10px 0}.product-modal{display:none;position:fixed;inset:0;background:#17101780;z-index:12;align-items:center;justify-content:center;padding:18px}.product-modal.show{display:flex}.modal-card{position:relative;background:white;border-radius:18px;padding:25px;width:min(420px,100%);box-shadow:0 20px 70px #0003}.modal-card h3{margin:0 30px 5px 0}.modal-hint{font-size:12px;color:var(--muted);margin:0 0 18px}.modal-card label{display:block;font-size:12px;font-weight:700;margin:12px 0}.modal-card select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:12px;background:#fff;font:inherit}.modal-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:20;background:var(--ink);color:white;padding:12px 18px;border-radius:30px;font-size:12px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:620px){.cart{padding:18px}.cart-foot{max-height:50vh}.cart-row>img{width:48px;height:56px}.line-total{font-size:10px}}
/* Catálogo paginado y selección de destacados */
.featured-grid{margin-bottom:38px}
.pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin:30px 0 10px;font-size:13px;color:var(--muted)}
.pagination .filter{display:inline-block}

/* FIX DEFINITIVO: panel lateral oculto completamente hasta abrirlo */
html,body{overflow-x:hidden}
.cart{right:0!important;width:min(520px,100vw)!important;max-width:100vw;transform:translateX(105%);visibility:hidden;transition:transform .28s ease,visibility .28s ease;z-index:1001}
.cart.open{right:0!important;transform:translateX(0);visibility:visible}
.overlay{z-index:1000}
.topbar{z-index:20}
.catalog-cta{text-align:center;margin:8px 0 35px}
.category-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 55px}
.catalog-page{min-height:65vh;padding-bottom:55px}

/* Logotipo oficial El Costo */
.brand{gap:0;letter-spacing:0}
.brand-logo{display:block;width:190px;height:58px;object-fit:contain;object-position:left center}
@media(max-width:620px){.brand-logo{width:158px;height:48px}}
/* Ajustes de galería dentro de las tarjetas de producto */
.product .product-gallery{padding:12px 12px 0}
.product .gallery-main{height:245px}
.product .gallery-main-image{display:block;width:100%;height:100%;padding:8px;object-fit:contain;background:#fff7fa;cursor:zoom-in}
.product .gallery-thumbs{padding:8px 2px 2px}
.product .gallery-thumb{padding:3px;flex:0 0 54px;width:54px;height:54px}
.product .gallery-thumb img{display:block;width:100%;height:100%;padding:0;object-fit:contain}
@media(max-width:620px){.product .gallery-main{height:175px}.product .gallery-thumb{flex-basis:48px;width:48px;height:48px}}

/* Navegación de fotos ampliadas */
.image-lightbox{gap:14px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:58px;border:1px solid #ffffff55;border-radius:14px;background:#ffffff20;color:#fff;font-size:42px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:2}
.lightbox-prev{left:22px}.lightbox-next{right:22px}
.lightbox-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;background:#0008;border-radius:20px;padding:7px 13px;font-size:13px}
.lightbox-nav[hidden]{display:none}
@media(max-width:600px){.lightbox-nav{width:40px;height:48px;font-size:34px}.lightbox-prev{left:8px}.lightbox-next{right:8px}.image-lightbox{padding:12px}}


/* Portada renovada: collage de productos reales, sin tocar las tarjetas del catálogo */
.hero-art{height:340px;display:flex;align-items:center;justify-content:center;overflow:visible}
.hero-collage{position:relative;width:min(100%,470px);height:310px;margin:auto}
.hero-photo{position:absolute;overflow:hidden;border:7px solid #fff;border-radius:22px;background:#fff7fa;box-shadow:0 14px 35px #4b24301c}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hero-photo-main{left:5%;top:22px;width:54%;height:260px;transform:rotate(-5deg);z-index:1}
.hero-photo-top{right:5%;top:0;width:39%;height:155px;transform:rotate(5deg);z-index:2}
.hero-photo-bottom{right:7%;bottom:8px;width:39%;height:145px;transform:rotate(4deg);z-index:3}
.hero-art .bubble{right:0;top:-10px;width:100px;height:100px;font-size:10px;line-height:1.35;transform:rotate(8deg);z-index:4}
.hero-caption{position:absolute;left:12%;bottom:0;z-index:5;background:#fff;border:1px solid #f7dce7;border-radius:14px;padding:10px 16px;box-shadow:0 8px 24px #4b243018;display:flex;flex-direction:column;gap:3px}
.hero-caption span{font-size:9px;letter-spacing:3px;color:var(--pink);font-weight:900}
.hero-caption strong{font-size:11px;color:var(--ink)}
.featured-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.catalog-cta{padding:4px 0 14px}
.catalog-cta .primary{min-width:210px;text-align:center}
@media(max-width:850px){.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .hero-grid{gap:18px;padding:34px 0 38px}
  .hero-art{height:270px;margin:0 -4px}
  .hero-collage{width:min(100%,390px);height:255px}
  .hero-photo-main{left:6%;top:20px;width:53%;height:210px;border-width:5px}
  .hero-photo-top{right:5%;top:0;width:39%;height:125px;border-width:5px}
  .hero-photo-bottom{right:7%;bottom:2px;width:39%;height:118px;border-width:5px}
  .hero-art .bubble{right:0;top:-7px;width:78px;height:78px;font-size:8px}
  .hero-caption{left:8%;bottom:-2px;padding:8px 11px}
  .hero-caption strong{font-size:9px}
  .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}