/* ============ CONFIG DE MARCA ============ */ :root{ --bg-main:#1A1410; --bg-secondary:#241D17; --bg-main-rgb:26,20,16; --bg-secondary-rgb:36,29,23; --text-primary:#E5E0DB; --text-secondary:#A09D9A; --accent-color:#D8A7B1; --accent-hover:#E2B4BD; --price-color:#E2B4BD; --border-color:#D8A7B1; --card-polaroid:#F7F5F0; --card-polaroid-shadow:#D9D3C8; /* Texto para usar SIEMPRE sobre tarjetas/paneles claros (dropdowns de filtro, inputs, etc.) — esas tarjetas son claras en los DOS temas, así que este color se queda fijo en oscuro y no se invierte con el tema como sí hacen --text-primary / --bg-main. */ --card-text:#241D17; /* Igual que --card-text, pero para el hero: tiene foto/video de fondo SIEMPRE, así que su velo y su texto quedan fijos (no se invierten con el tema) — si no, en modo claro el velo se vuelve casi blanco y "lava" los colores de la foto, y el texto pierde contraste. A propósito NO se repiten estas 3 variables en el bloque de modo claro de más abajo: al no redefinirse ahí, se quedan siempre con este valor. */ --hero-overlay-rgb:26,20,16; --hero-text:#E5E0DB; --hero-text-secondary:#A09D9A; --font-display:'Bodoni Moda', 'Times New Roman', serif; --font-mono:'Space Mono', 'Courier New', monospace; --font-body:'Archivo', sans-serif; color-scheme:dark; } /* ============ MODO CLARO ============ */ /* Se activa poniendo data-theme="light" en (lo hace theme.js, detectando el navegador/SO o lo que haya elegido la persona a mano) */ html[data-theme="light"]{ --bg-main:#F5F1EA; --bg-secondary:#FFFFFF; --bg-main-rgb:245,241,234; --bg-secondary-rgb:255,255,255; --text-primary:#231C16; --text-secondary:#726B64; --accent-color:#C1717F; --accent-hover:#A85566; --price-color:#A85566; --border-color:#C1717F; --card-polaroid:#FFFFFF; --card-polaroid-shadow:#E4DED5; --card-text:#241D17; /* En modo claro el dorado quedaba pálido y perdía contraste, así que acá lo devolvemos al rosado original de la marca — el modo oscuro sigue usando el dorado que se definió en index.html. */ --hero-accent:#C1717F; color-scheme:light; } *{margin:0;padding:0;box-sizing:border-box;} /* Transición suave al cambiar de tema (oscuro/claro). Los elementos que ya tienen su propia transición (hover, etc.) no se ven afectados. */ *, *::before, *::after{ transition:background-color .25s ease, border-color .25s ease, color .25s ease; } html{scroll-behavior:smooth;} body{ background:var(--bg-main); color:var(--text-primary); font-family:var(--font-body); line-height:1.5; position:relative; overflow-x:hidden; } /* grano sutil sobre todo el fondo, sin gradientes de color */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } a{color:inherit;text-decoration:none;} ul,ol{list-style:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} img{max-width:100%;display:block;} .section-title{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.15em; color:var(--text-secondary); border-top:1px solid var(--border-color); padding-top:.9rem; margin-bottom:2.5rem; } .wrap{ max-width:1420px; margin:0 auto; padding:0 1.5rem; } /* ============ HEADER ============ */ .site-header{ position:fixed; top:0;left:0;right:0; z-index:500; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.5rem; border-bottom:1px solid var(--border-color); background:rgba(var(--bg-secondary-rgb),.88); backdrop-filter:blur(6px); gap:1rem; } .logo{ display:flex; align-items:center; } .logo-img{ width:auto; display:block; } .logo-img-header{ height:var(--logo-height-header, 70px); } .logo-img-footer{ height:var(--logo-height-footer, 70px); } .logo-text-fallback{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:1.5rem; letter-spacing:.02em; white-space:nowrap; } .logo-text-fallback span{color:var(--accent-color);} .header-search{ flex:1; max-width:360px; margin:0 1rem; } .header-search input{ width:100%; background:transparent; border:1px solid var(--border-color); color:var(--text-primary); padding:.55rem .8rem; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em; outline:none; transition:border-color .15s ease; } .header-search input::placeholder{ color:var(--text-secondary); } .header-search input:focus{ border-color:var(--accent-color); } .cart-toggle{ position:relative; display:flex; align-items:center; gap:.5rem; border:1px solid var(--border-color); padding:.5rem .8rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; transition:border-color .15s ease; white-space:nowrap; } .cart-toggle:hover{border-color:var(--accent-hover);} .cart-toggle svg{width:16px;height:16px;stroke:var(--text-primary);} /* ============ SWITCH DE TEMA (oscuro / claro) ============ */ .theme-toggle{ display:flex; align-items:center; gap:.4rem; flex-shrink:0; } .theme-icon{ width:15px; height:15px; color:var(--text-secondary); transition:color .2s ease; } /* El ícono del modo actual se resalta */ html:not([data-theme="light"]) .theme-icon-moon{ color:var(--accent-color); } html[data-theme="light"] .theme-icon-sun{ color:var(--accent-color); } .theme-toggle-track{ position:relative; width:38px; height:20px; border:1px solid var(--border-color); background:var(--bg-secondary); padding:2px; display:flex; align-items:center; } .theme-toggle-thumb{ width:14px; height:14px; background:var(--accent-color); transition:transform .2s ease; transform:translateX(16px); /* modo oscuro (default): pegado a la luna, a la derecha */ } html[data-theme="light"] .theme-toggle-thumb{ transform:translateX(0); /* modo claro: pegado al sol, a la izquierda */ } .cart-count{ min-width:18px; height:18px; padding:0 4px; background:var(--accent-color); color:var(--text-primary); font-family:var(--font-mono); font-size:.7rem; display:flex; align-items:center; justify-content:center; border-radius:50%; } @media (max-width:640px){ .header-search{ display:none; } /* Margen lateral chico en celu para que la foto gane más ancho, bien pegado al borde pero sin quedar sin respiro */ .wrap{ padding:0 .65rem; } } /* ============ HERO ============ */ .hero{ position:relative; min-height:52vh; display:flex; align-items:center; padding:6.5rem 1.5rem 3rem; border-bottom:1px solid var(--border-color); overflow:hidden; } /* ====== CARRUSEL DE FONDO DEL HERO ====== */ .hero-carousel{ position:absolute; inset:0; z-index:0; overflow:hidden; } /* Oculto por defecto: la media query de abajo activa el correcto (desktop o mobile) según el ancho de pantalla */ .hero-carousel-mobile{ display:none; } .hero-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; } .hero-slide.active{ opacity:1; } /* Velo semitransparente sobre las fotos/videos para que el texto del hero se siga leyendo bien encima, en los dos temas. OJO: z-index:1 es a propósito — tiene que quedar ARRIBA del carrusel (z-index:0) y ABAJO del texto (z-index:2), si no, el video tapa el velo y el texto pierde todo el contraste. */ .hero::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(var(--hero-overlay-rgb), .6); pointer-events:none; } .hero-content{ position:relative; z-index:2; max-width:780px; } .hero-eyebrow{ font-family:var(--font-mono); font-weight:700; font-size:.75rem; letter-spacing:.2em; color:var(--hero-accent, var(--accent-color)); display:inline-block; margin-bottom:1.4rem; padding:.4rem .9rem; border:1px solid var(--hero-accent, var(--accent-color)); background:rgba(var(--hero-overlay-rgb), .35); text-shadow:0 2px 10px rgba(var(--hero-overlay-rgb),.5); } .hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.02; letter-spacing:-.01em; color:var(--hero-text); text-shadow:0 2px 14px rgba(var(--hero-overlay-rgb),.45); } .hero h1 em{ font-style:italic; color:var(--hero-accent, var(--accent-color)); } /* (el parche que engordaba estas letras solo en modo claro ya no hace falta: ahora el hero siempre usa el mismo velo oscuro fijo, así que el contraste queda igual de bueno en los dos temas) */ .hero-sub{ margin-top:1.8rem; max-width:440px; color:var(--hero-text); font-weight:500; font-size:1.02rem; text-shadow:0 1px 8px rgba(var(--hero-overlay-rgb),.6); } .btn-stamp{ display:inline-block; margin-top:2.4rem; padding:.9rem 1.7rem; border:2px dashed var(--accent-color); color:var(--accent-color); font-family:var(--font-mono); font-weight:700; font-size:.85rem; letter-spacing:.1em; transform:rotate(-2deg); transition:all .18s ease; } .btn-stamp:hover{ background:var(--accent-color); color:var(--bg-main); transform:rotate(0deg); } /* ============ CATALOGO ============ */ .catalog{ padding:6rem 1.5rem; border-bottom:1px solid var(--border-color); } .catalog-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; margin-bottom:2.5rem; } .catalog-top .section-title{ margin-bottom:0; flex:1; min-width:200px; } /* ===== BARRA DE FILTROS (estilo Depop) ===== */ .filters-bar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:2.5rem; } .filter-group{ position:relative; } .filter-btn{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; padding:.5rem .9rem; border:1px solid var(--border-color); color:var(--text-secondary); background:transparent; transition:all .15s ease; white-space:nowrap; } .filter-btn:hover{ border-color:var(--accent-hover); color:var(--text-primary); } .filter-btn .chev{ font-size:.6rem; transition:transform .15s ease; } .filter-group.open .filter-btn, .filter-btn.active-filter{ background:var(--text-primary); color:var(--bg-main); border-color:var(--text-primary); } .filter-group.open .filter-btn .chev{ transform:rotate(180deg); } .filter-btn.pill-toggle.active-filter{ background:var(--accent-color); border-color:var(--accent-color); color:var(--text-primary); } /* Botón hamburguesa: solo existe visualmente en celu (ver media query abajo). .filters-more usa display:contents en escritorio para que sus filtros (Categoría, Marca, etc.) se comporten como si no tuvieran wrapper — así en escritorio la barra queda exactamente igual que antes. */ .hamburger-btn{ display:none; } .filters-more{ display:contents; } .filter-panel{ display:none; position:absolute; top:calc(100% + .5rem); left:0; z-index:40; background:var(--card-polaroid); border:1px solid var(--border-color); min-width:220px; max-height:320px; overflow-y:auto; padding:.6rem; box-shadow:0 12px 24px rgba(0,0,0,.35); } .filter-group.open .filter-panel{ display:block; } .filter-check-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem .3rem; cursor:pointer; font-family:var(--font-mono); font-size:.78rem; color:var(--card-text); border-bottom:1px solid rgba(0,0,0,.08); } .filter-check-row:last-child{ border-bottom:none; } .filter-check-row input[type="checkbox"], .filter-check-row input[type="radio"]{ width:14px;height:14px; accent-color:var(--accent-color); flex-shrink:0; } .filter-check-row .swatch{ width:14px;height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.25); flex-shrink:0; } .filter-check-row.selected{ font-weight:700; } .filter-panel-empty{ font-family:var(--font-mono); font-size:.75rem; color:#777; padding:.5rem .3rem; } .filter-price{ padding:.4rem .2rem; } .filter-price-inputs{ display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; } .filter-price-inputs > div{ flex:1; } .filter-price-inputs label{ display:block; font-family:var(--font-mono); font-size:.62rem; color:#777; margin-bottom:.3rem; letter-spacing:.06em; } .filter-price-inputs input{ width:100%; padding:.5rem .6rem; border:1px solid var(--border-color); font-family:var(--font-mono); font-size:.8rem; background:#fff; color:var(--card-text); } .filter-price-sep{ color:#999; margin-top:1.1rem; } .filter-actions{ display:flex; gap:.5rem; } .filter-actions button{ flex:1; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; padding:.55rem; border:1px solid var(--card-text); } .filter-actions .btn-reset{ background:transparent; color:var(--card-text); } .filter-actions .btn-apply{ background:var(--card-text); color:#fff; } .filters-clear{ font-family:var(--font-mono); font-size:.7rem; color:var(--accent-color); text-decoration:underline; letter-spacing:.05em; } .catalog-state{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.05em; color:var(--text-secondary); padding:3rem 0; text-align:center; } .catalog-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:2.2rem 1.2rem; } @media (max-width:1024px){ .catalog-grid{ grid-template-columns:repeat(4,1fr); gap:1.8rem 1rem; } } @media (max-width:640px){ .catalog-grid{ grid-template-columns:repeat(3,1fr); gap:1.2rem .5rem; } } .product-card{ display:flex; flex-direction:column; min-width:0; /* deja que la tarjeta se achique al ancho de su columna, necesario para que el "..." del nombre funcione bien y no empuje el ancho de toda la fila */ } .polaroid{ position:relative; background:var(--bg-secondary); border:1px solid var(--border-color); overflow:hidden; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; } .polaroid:hover{ transform:scale(1.02); box-shadow:0 8px 20px rgba(0,0,0,.35); } .photo-placeholder{ aspect-ratio:7/10; width:100%; background: repeating-linear-gradient(135deg, #1b1b1b 0 2px, #141414 2px 4px), #171717; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .photo-placeholder span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em; color:var(--text-secondary); line-height:1.6; } .photo-placeholder img{ width:100%; height:100%; object-fit:cover; } .sold-stamp{ position:absolute; top:40%;left:50%; transform:translate(-50%,-50%) rotate(-8deg); border:2px solid var(--accent-color); color:var(--accent-color); background:rgba(var(--bg-main-rgb),.75); font-family:var(--font-mono); font-weight:700; font-size:.68rem; letter-spacing:.1em; padding:.3rem .7rem; pointer-events:none; white-space:nowrap; } /* ===== DATOS EXTRA AL PASAR EL MOUSE (solo en pantallas con hover real, es decir escritorio — en celu no aplica: tocar la foto abre la ficha completa de la prenda, ahí se ve todo este detalle igual) ===== */ .card-hover-info{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; gap:.3rem; padding:.6rem .5rem .5rem; background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; } .card-hover-info .tag{ background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.4); color:#fff; } @media (hover:hover){ .polaroid:hover .card-hover-info{ opacity:1; transform:translateY(0); } } .product-card.sold .polaroid{ filter:grayscale(60%) brightness(.75); } .product-info{ margin-top:.6rem; padding:0 .1rem; } .product-info h3{ font-family:var(--font-display); font-weight:700; font-size:.95rem; line-height:1.25; margin-bottom:.35rem; cursor:pointer; /* Se corta en 1 línea (con "...") para que el nombre nunca cambie el alto de la tarjeta, sin importar si es largo o corto */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .meta{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); margin-bottom:.6rem; flex-wrap:wrap; } .tag{ font-size:.62rem; color:var(--text-secondary); border:1px solid var(--border-color); padding:.1rem .4rem; letter-spacing:.04em; } .price{ font-size:.82rem; font-weight:700; color:var(--price-color); } .btn-add{ width:100%; border:1px solid var(--text-primary); padding:.5rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; transition:all .15s ease; } .btn-add:hover{ background:var(--text-primary); color:var(--bg-main); } .btn-add.added{ border-color:var(--accent-color); background:var(--accent-color); color:var(--text-primary); } /* Prenda ya agregada al carrito: se ve claramente distinto al botón normal, e invita a tocarlo de nuevo para sacarla */ .btn-add.in-cart{ border-color:#dc3545; color:#dc3545; } .btn-add.in-cart:hover{ background:#dc3545; color:#fff; } .btn-add:disabled{ border-color:var(--border-color); color:var(--text-secondary); cursor:not-allowed; background:none; } /* ============ COMO FUNCIONA ============ */ .how{ padding:6rem 1.5rem; border-bottom:1px solid var(--border-color); } .steps{ display:flex; flex-direction:column; } .steps li{ display:grid; grid-template-columns:90px 1fr; align-items:start; gap:1.5rem; padding:2rem 0; border-top:1px solid var(--border-color); } .steps li:last-child{border-bottom:1px solid var(--border-color);} .steps .num{ font-family:var(--font-mono); font-size:1rem; color:var(--accent-color); padding-top:.2rem; } .steps h3{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; margin-bottom:.5rem; } .steps p{ color:var(--text-secondary); max-width:520px; font-size:.95rem; } /* ============ FOOTER ============ */ footer{ padding:3rem 1.5rem 2.5rem; } .footer-top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:flex-start; gap:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--border-color); } .footer-top .footer-col:first-child{ justify-self:start; } .footer-top .footer-col:nth-child(2){ justify-self:center; } .footer-brand{ justify-self:end; } .footer-brand{ display:flex; align-items:center; } .footer-col{ display:flex; flex-direction:column; gap:.9rem; min-width:150px; } .footer-heading{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); margin:0; } .footer-links{ display:flex; flex-direction:column; gap:.7rem; font-family:var(--font-mono); font-size:.85rem; } .footer-links a, .footer-links span{ display:flex; align-items:center; gap:.55rem; color:var(--text-primary); } .footer-links a{ width:fit-content; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; } .footer-links a:hover{ color:var(--accent-hover); border-color:var(--accent-hover); } .footer-links i{ font-size:1.05rem; color:var(--accent-color); flex-shrink:0; } .footer-bottom{ margin-top:1.6rem; text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; color:var(--text-secondary); display:flex; flex-direction:column; gap:.35rem; } /* ============ CARRITO DRAWER ============ */ .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:600; opacity:0; pointer-events:none; transition:opacity .25s ease; } .overlay.active{ opacity:1; pointer-events:auto; } .cart-drawer{ position:fixed; top:0;right:0; height:100%; width:min(420px,100%); background:var(--bg-secondary); border-left:1px solid var(--border-color); z-index:700; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; } .cart-drawer.active{ transform:translateX(0); } .drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.5rem; border-bottom:1px solid var(--border-color); } .drawer-header h2{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; } #closeCart{ font-family:var(--font-mono); font-size:1.1rem; color:var(--text-secondary); } #closeCart:hover{ color:var(--accent-hover); } .receipt-perf{ height:1px; margin:0 1.5rem; background-image:repeating-linear-gradient(90deg, var(--border-color) 0 6px, transparent 6px 12px); } .cart-items{ flex:1; overflow-y:auto; padding:1rem 1.5rem; font-family:var(--font-mono); } .cart-empty{ padding:2rem 1.5rem; color:var(--text-secondary); font-family:var(--font-mono); font-size:.85rem; text-align:center; } .cart-line{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.7rem; padding:.8rem 0; border-bottom:1px dashed var(--border-color); font-size:.82rem; } .cart-line .name{ line-height:1.35; } .cart-line .name small{ display:block; color:var(--text-secondary); } .cart-line .price{ color:var(--text-primary); font-weight:700; white-space:nowrap; } .cart-line .remove{ color:var(--text-secondary); font-size:.9rem; padding:.2rem; } .cart-line .remove:hover{ color:var(--accent-hover); } .cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; padding:1.2rem 1.5rem; border-top:1px solid var(--border-color); font-family:var(--font-mono); } .cart-total-row span:first-child{ font-size:.75rem; letter-spacing:.1em; color:var(--text-secondary); } .cart-total-row span:last-child{ font-size:1.3rem; font-weight:700; color:var(--accent-color); } .btn-whatsapp{ margin:0 1.5rem 1.5rem; padding:1rem; background:var(--accent-color); color:var(--text-primary); font-family:var(--font-mono); font-weight:700; font-size:.85rem; letter-spacing:.08em; text-align:center; transition:filter .15s ease; } .btn-whatsapp:hover{ filter:brightness(1.12); } .btn-whatsapp:disabled{ background:var(--border-color); color:var(--text-secondary); cursor:not-allowed; } /* ============ MODAL PRODUCTO ============ */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:800; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:6rem 1.5rem 3rem; } .modal-overlay.active{ display:flex; } .modal-box{ background:var(--bg-secondary); border:1px solid var(--border-color); width:100%; max-width:900px; position:relative; padding:2rem; } .modal-close{ position:absolute; top:1rem;right:1rem; font-family:var(--font-mono); font-size:1.2rem; color:var(--text-secondary); z-index:2; } .modal-close:hover{ color:var(--accent-hover); } .modal-layout{ display:flex; gap:2.5rem; flex-wrap:wrap; } .modal-photos{ flex:1 1 340px; display:flex; flex-direction:column; gap:.6rem; max-height:75vh; overflow-y:auto; } .modal-photo-main img{ width:100%; object-fit:cover; aspect-ratio:3/4; } .modal-photo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; } .modal-photo-grid img{ width:100%; object-fit:cover; aspect-ratio:3/4; cursor:pointer; } /* Carrusel del modal — solo se usa en celu, escondido en escritorio */ .modal-carousel{ display:none; } .modal-side{ flex:1 1 260px; } .modal-side h2{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; margin-bottom:1rem; } .modal-side .price{ font-size:1.4rem; display:block; margin-bottom:1.2rem; } .modal-side .meta{ margin-bottom:1.5rem; } .modal-desc{ color:var(--text-secondary); font-size:.9rem; line-height:1.7; margin-bottom:2rem; white-space:pre-line; } .modal-actions{ display:flex; flex-direction:column; gap:.8rem; } /* ============ RESPONSIVE ============ */ @media (max-width:760px){ .steps li{ grid-template-columns:50px 1fr; } .hero-carousel-desktop{ display:none; } .hero-carousel-mobile{ display:block; } .modal-layout{ flex-direction:column; } /* En celu: se esconden la foto grande + la grilla de miniaturas, y se muestra el carrusel de una foto a la vez (swipe o tocar costados) */ .modal-photo-main, .modal-photo-grid{ display:none; } .modal-photos{ max-height:none; overflow:visible; gap:0; } .modal-carousel{ display:block; position:relative; margin:-2rem -2rem 0; } .modal-carousel-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; } .modal-carousel-track::-webkit-scrollbar{ display:none; } .modal-carousel-slide{ position:relative; flex:0 0 100%; scroll-snap-align:start; aspect-ratio:3/4; } .modal-carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; } /* Botones invisibles a cada lado de la foto: tocar izquierda/derecha pasa a la foto anterior/siguiente, sin taparle la vista al usuario */ .carousel-tap{ position:absolute; top:0; bottom:0; width:35%; background:transparent; border:none; padding:0; cursor:pointer; } .carousel-tap-prev{ left:0; } .carousel-tap-next{ right:0; } .modal-carousel-dots{ display:flex; justify-content:center; gap:.4rem; padding:.8rem 0; } .carousel-dot{ width:6px; height:6px; border-radius:50%; background:var(--border-color); transition:background .2s, transform .2s; } .carousel-dot.active{ background:var(--accent-color, var(--text-secondary)); transform:scale(1.3); } /* Barra de filtros en celu: solo quedan visibles Categoría→Condición escondidas detrás del ícono ☰, y Populares + Ordenar sueltos al lado. Todo centrado, en una sola fila compacta. */ .filters-bar{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem; } .hamburger-btn{ display:flex; align-items:center; justify-content:center; width:2.6rem; padding:.5rem; font-size:.95rem; order:1; } #btnPopulares{ order:2; } .filters-bar > .filter-group[data-filter="orden"]{ order:3; } .filters-clear{ order:4; width:100%; text-align:center; margin-top:.3rem; } /* El menú hamburguesa: chico, pegado al ícono, NO a pantalla completa */ .filters-more{ display:none; position:absolute; top:calc(100% + .5rem); left:0; z-index:45; flex-direction:column; gap:.4rem; width:210px; max-height:60vh; overflow-y:auto; background:var(--card-polaroid); border:1px solid var(--border-color); padding:.6rem; box-shadow:0 12px 24px rgba(0,0,0,.35); } .filters-more.open{ display:flex; } .filters-more .filter-group{ width:100%; } .filters-more .filter-btn{ width:100%; justify-content:space-between; } .filters-more .filter-panel{ position:static; width:100%; min-width:0; max-height:none; margin-top:.4rem; box-shadow:none; } } /* accesibilidad: foco visible */ a:focus-visible, button:focus-visible{ outline:2px solid var(--accent-color); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } } /* ============ TOAST "AÑADIDO AL CARRITO" ============ */ #toastContainer{ position:fixed; top:1.2rem; right:1.2rem; z-index:1000; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; } .toast{ background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-primary, #fff); font-family:var(--font-mono); font-size:.8rem; padding:.7rem 1.1rem; max-width:260px; box-shadow:0 4px 16px rgba(0,0,0,.3); opacity:0; transform:translateX(12px); transition:opacity .25s ease, transform .25s ease; } .toast.show{ opacity:1; transform:translateX(0); } @media (max-width:760px){ #toastContainer{ top:auto; bottom:1.2rem; right:1rem; left:1rem; align-items:center; } .toast{ max-width:320px; text-align:center; } } @media (max-width:640px){ .footer-top{ grid-template-columns:1fr; justify-items:center; text-align:center; } .footer-top .footer-col:first-child, .footer-top .footer-col:nth-child(2), .footer-brand{ justify-self:center; } .footer-links a, .footer-links span{ justify-content:center; } }