:root{ --bg: #071411; --card: rgba(255,255,255,.09); --card2: rgba(255,255,255,.15); --text: rgba(255,255,255,.98); --muted: rgba(255,255,255,.85); --line: rgba(255,255,255,.18); --accent: #49d3a4; --accent2:#8ae6c9; --warn: #ffd28a; --shadow: 0 18px 60px rgba(0,0,0,.45); --r: 18px; /* Acento terracota — usado en el título principal, botones secundarios y estado activo de los filtros */ --terracota: #c96442; --terracota2: #e0a07c; } *{ box-sizing:border-box; } /* CAUSA REAL de que el topbar y la franja de filtros "desaparecieran" al scrollear (verificado con un navegador real, no a ojo): estaba acá, no en overflow-x. El tenía "height:100%", o sea una altura FIJA igual a la de la pantalla. El es el "contenedor" de esas dos barras (position:sticky), y ese contenedor solo puede tener la altura que se le puso — 100% de la pantalla — aunque el contenido real sea muchísimo más alto (todo el catálogo). Entonces apenas se scrolleaba un poco más que un pantallazo, las barras se quedaban sin "contenedor" donde seguir pegadas y se iban para arriba con el resto — exactamente el síntoma reportado (se pierden justo al pasar la primera sección). "min-height:100%" en vez de "height:100%" arregla esto: sigue cubriendo toda la pantalla con el fondo aunque la página sea corta, pero ya NO le pone techo a la altura real cuando el contenido es más largo — así el contenedor de las barras fijas mide lo que tiene que medir (toda la página) y quedan pegadas todo el recorrido. overflow-x sigue en , como corresponde, para evitar scroll lateral sin generar un contenedor de scroll aparte. */ html{ min-height:100%; overflow-x:hidden; } body{ min-height:100%; } body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: radial-gradient(1000px 600px at 20% 0%, rgba(73,211,164,.24), transparent 60%), radial-gradient(900px 600px at 80% 10%, rgba(138,230,201,.18), transparent 55%), radial-gradient(900px 700px at 50% 100%, rgba(201,100,66,.10), transparent 55%), var(--bg); color: var(--text); } a{ color: inherit; text-decoration: none; } .container{ width:min(1120px, 92vw); margin:0 auto; } /* Top bar */ .topbar{ position: sticky; top:0; z-index:50; backdrop-filter: blur(12px); background: linear-gradient(to bottom, rgba(7,20,17,.88), rgba(7,20,17,.55)); border-bottom: 1px solid var(--line); } .topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 14px; } .brand{ display:flex; align-items:center; gap:14px; } .logo{ width: 108px; height: 108px; background: transparent; display: grid; place-items: center; flex: 0 0 auto; } .logo img{ width: 100%; height: 100%; object-fit: contain; display:block; } /* Título principal de marca: grande, tipografía elegante, terracota. Es el único texto que queda junto al logo (sin subtítulo debajo), así que puede ocupar bastante más lugar. */ .brand-title{ font-family: "Playfair Display", ui-serif, Georgia, serif; font-weight: 800; font-size: clamp(36px, 6vw, 64px); line-height: 1; letter-spacing: -0.01em; color: var(--terracota); /* naranja terracota, no verde ni blanco */ margin: 0; } .nav{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; justify-content:flex-end; } .pill{ padding: 10px 12px; border:1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); font-size: 13px; color: var(--muted); transition: transform .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; } .pill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 14px; border-radius: 999px; border: none; background: linear-gradient(135deg, #49d3a4, #2fbf90); color: rgba(255,255,255,.96); font-weight: 800; box-shadow: 0 12px 34px rgba(0,0,0,.35); transition: transform .15s ease, filter .15s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); filter: brightness(1.10); } .btn:active{ transform: translateY(0px); } .btn-outline{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); color: var(--text); font-weight: 700; box-shadow: none; } /* Variante terracota, para usar como acento junto al verde */ .btn-terracota{ background: linear-gradient(135deg, var(--terracota), #a3502f); color: rgba(255,255,255,.97); } /* Botón "Agregar a la lista" — verde cuando está disponible, cambia a estado "Agregado" cuando ya está en la lista */ .btn-add-list{ min-width: 0; } .btn-add-list .add-list-icon{ display:inline-flex; align-items:center; justify-content:center; font-size: 15px; line-height:1; font-weight: 900; } .btn-add-list .add-list-icon svg{ display:block; } .btn-add-list.is-added{ background: rgba(73,211,164,.14); border: 1px solid rgba(73,211,164,.55); color: var(--accent2); box-shadow: none; } /* Cuando ya está agregado, se oculta el carrito y se muestra un tilde en su lugar (en vez de superponer los dos). */ .btn-add-list.is-added .add-list-icon svg{ display:none; } .btn-add-list.is-added .add-list-icon::before{ content: "✓"; } /* Botón "Mi lista" del topbar, con contador */ .list-toggle{ display:inline-flex; align-items:center; gap:8px; cursor: pointer; appearance: none; -webkit-appearance: none; font-family: inherit; } .list-badge{ display:inline-flex; align-items:center; justify-content:center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--terracota); color: #fff; font-size: 11px; font-weight: 800; } :root{ --wa:#25D366; } .btn-wa{ border-color: rgba(37, 211, 102, .45) !important; background: linear-gradient(135deg, rgba(37, 211, 102, .22), rgba(255,255,255,.04)) !important; } .wa-ico{ width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: rgba(37, 211, 102, .18); border: 1px solid rgba(37, 211, 102, .55); color: var(--wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .10); } /* Hero */ .hero{ padding: 26px 0 10px; } .hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: stretch; } @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } } .hero-card{ border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); box-shadow: var(--shadow); overflow:hidden; position:relative; } .hero-copy{ padding: 28px 24px; } .kicker{ display:inline-flex; align-items:center; gap:8px; font-size: 12px; color: rgba(255,255,255,.80); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); padding: 8px 10px; border-radius: 999px; } .title{ font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; margin: 14px 0 10px; letter-spacing: -0.02em; } .subtitle{ font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0 0 18px; } .hero-actions{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; } /* Swiper */ .swiper{ width: 100%; height: 100%; } .hero-media{ min-height: 340px; display:grid; grid-template-rows: 1fr; } .slide{ height: 100%; min-height: 340px; background: rgba(255,255,255,.05); display:grid; place-items: center; position:relative; overflow:hidden; } .slide img{ width:100%; height:100%; object-fit: cover; filter: contrast(1.05) saturate(1.08); } .slide .overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,20,17,.00), rgba(7,20,17,.35)); } .slide .label{ position:absolute; left:16px; bottom:16px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); font-size: 13px; color: rgba(255,255,255,.92); max-width: 80%; } .swiper-pagination-bullet{ background: rgba(255,255,255,.55); } .swiper-pagination-bullet-active{ background: var(--accent); } section{ padding: 38px 0; } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; margin-bottom: 16px; } .section-head h2{ margin:0; font-size: 22px; letter-spacing: -0.01em; } .section-head p{ margin:0; color: var(--muted); font-size: 13px; max-width: 62ch; } /* Cards */ .card{ border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.06); box-shadow: 0 10px 40px rgba(0,0,0,.25); overflow:hidden; } .card-body{ padding: 18px 18px 20px; } /* Sobre nosotros */ .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:center; } @media (max-width: 980px){ .about-grid{ grid-template-columns: 1fr; } } .about-media{ border-radius: var(--r); overflow:hidden; border: 1px solid var(--line); min-height: 260px; } .about-media img{ width:100%; height:100%; object-fit:cover; display:block; min-height:260px; } .about-copy p{ color: var(--muted); font-size: 14px; line-height: 1.7; } /* Products */ .products{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 980px){ .products{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .products{ grid-template-columns: 1fr; } } .product{ display:grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; } /* Contenedor cuadrado y fijo: cualquier foto que entre (vertical, horizontal, distinta resolución) se recorta para verse igual que las demás, estilo grilla de catálogo (1:1, como en Mercado Libre). */ .product-media{ border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at top, rgba(255,255,255,.11), rgba(0,0,0,.22)); aspect-ratio: 1 / 1; width: 100%; position: relative; display: block; cursor: pointer; } .product-media::after{ content:""; position:absolute; inset:0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 18px 55px rgba(255,255,255,.05); pointer-events:none; z-index: 4; } .product-media img, .product-media video{ width: 100%; height: 100%; display:block; object-fit: contain; object-position: center; transition: transform .35s ease; } .product-media:hover img{ transform: scale(1.04); } /* Pista de "hacé click para agrandar", solo visible al pasar el mouse (en mobile queda siempre visible, tenue, porque no hay hover) */ .media-zoom-hint{ position:absolute; right: 12px; bottom: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 999px; display:grid; place-items:center; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); color: rgba(255,255,255,.92); opacity: 0; transition: opacity .2s ease; } .product-media:hover .media-zoom-hint{ opacity: 1; } @media (hover: none){ .media-zoom-hint{ opacity: .85; } } .badge{ position:absolute; top: 14px; left: 14px; padding: 8px 10px; border-radius: 999px; font-size: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); z-index: 3; } .tag{ position:absolute; z-index:6; display:inline-flex; align-items:center; gap:8px; padding: 10px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.42); } .tag-price{ top: 14px; right: 14px; padding: 10px 12px; border-radius: 16px; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.18); z-index: 7; } .tag-price .price-currency{ font-size: 11px; font-weight: 800; opacity: .85; letter-spacing: .08em; } .tag-price .price-value{ font-size: 18px; font-weight: 900; letter-spacing: -0.02em; } .tag-price .price-unit{ font-size: 11px; font-weight: 800; opacity: .70; } .tag-price.is-consultar .price-value{ font-size: 13px; letter-spacing: .02em; } .tag-price .price-prefix{ display:block; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 2px; } .product-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; justify-content: center; } /* Botón único "Ver producto" de la tarjeta (reemplaza al "Agregar a la lista" + "Ver más"): mismo estilo que .btn, un poco más ancho para que se note como la acción principal, centrado por .product-actions. */ .btn-view-product{ min-width: 160px; } .product-more{ display:none; margin-top: 10px; } .product-more.is-open{ display:block; } .product-features{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; } .product-features li{ margin: 6px 0; } .product-desc{ margin: 10px 0 0; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.7; font-family: ui-serif, Georgia, "Times New Roman", Times, serif; font-style: italic; letter-spacing: .01em; padding: 12px 12px 12px 14px; border-radius: 12px; border-left: 2px solid rgba(201,100,66,.60); background: linear-gradient(90deg, rgba(201,100,66,.16), rgba(73,211,164,.06), rgba(255,255,255,0)); box-shadow: inset 0 0 0 1px rgba(201,100,66,.10); display: none; } .product-desc::before{ content: "✦ "; color: rgba(201,100,66,.90); font-style: normal; font-weight: 900; } .product-more.is-open .product-desc{ display:block; } /* Fila del nombre del producto + link "Ver más / Ver menos", en la misma línea (el link no empuja contenido hacia abajo). Si el nombre es largo y no entra junto al link, se envuelven en dos líneas (flex-wrap) en vez de solaparse. */ .product-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; flex-wrap: wrap; } .product-title-row .product-title{ flex: 1 1 auto; min-width: 0; } /* "Ver más / Ver menos": texto linkeable, no botón — con un circulito +/− antes del texto que cambia solo con JS. */ .desc-toggle{ display:inline-flex; align-items:center; gap:5px; flex-shrink: 0; margin-top: 3px; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: var(--accent2); background: none; border: none; padding: 2px 0; cursor:pointer; user-select:none; white-space:nowrap; } .desc-toggle:hover, .desc-toggle:focus-visible{ text-decoration: underline; text-underline-offset: 2px; } .desc-toggle-icon{ display:inline-flex; align-items:center; justify-content:center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; line-height:1; font-weight: 900; flex-shrink: 0; } .product-title{ margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; text-shadow: 0 10px 30px rgba(0,0,0,.35); } .product-title::after{ content:""; display:block; width: 72px; height: 2px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(73,211,164,.90), rgba(201,100,66,.65), rgba(255,255,255,0)); opacity: .95; } /* Filtros (etiquetas múltiples) */ .filter-nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin: 10px 0 18px; } .filter-btn{ padding: 10px 14px; border:1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); font-size: 13px; color: var(--muted); transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; cursor:pointer; } .filter-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } .filter-btn.active{ background: linear-gradient(135deg, var(--terracota), #a3502f); border-color: rgba(255,255,255,.10); color: #fff; } /* Botón "Copiar link de este filtro": mismo look que un filtro pero con borde punteado, para que se note que es una acción distinta */ .filter-share-btn{ border-style: dashed; border-color: rgba(201,100,66,.55); color: var(--terracota2); } .filter-share-btn:hover{ background: rgba(201,100,66,.12); } /* ================================ AUTORIDAD / SOBRE NOSOTROS Foto real del local + sello de años + slider de reseñas (texto, no capturas — ver comentario en index.php sobre por qué). ================================ */ .authority-grid{ display:grid; grid-template-columns: 0.75fr 1.25fr; gap: 26px; align-items: center; } @media (max-width: 900px){ .authority-grid{ grid-template-columns: 1fr; } } .authority-photo{ position: relative; border-radius: calc(var(--r) + 6px); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; } .authority-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .authority-years-badge{ position: absolute; left: 16px; bottom: 16px; display:flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px; border-radius: 16px; background: rgba(7,20,17,.72); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); } .authority-years-number{ font-family: "Playfair Display", ui-serif, Georgia, serif; font-size: 30px; font-weight: 800; line-height: 1; color: var(--terracota2); } .authority-years-label{ font-size: 12px; color: rgba(255,255,255,.88); font-weight: 700; } .authority-copy p{ color: var(--muted); font-size: 14px; line-height: 1.7; margin: 10px 0 22px; } .testimonial-slider .swiper{ padding-bottom: 34px; } /* Tarjeta con dos partes fijas: la captura de la reseña arriba (siempre la misma proporción, se recorta parejo sin importar el tamaño real de la imagen que subas) y el texto abajo. Esto es lo que evita que las tarjetas se vean "alargadas" — antes el texto solo se estiraba para llenar toda la altura de la tarjeta. */ .testimonial-card{ height: 100%; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,.05); overflow: hidden; display:flex; flex-direction: column; } .testimonial-shot{ width: 100%; aspect-ratio: 4 / 3; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line); overflow: hidden; } .testimonial-shot img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .testimonial-body{ padding: 16px 18px 18px; display:flex; flex-direction: column; gap: 8px; } .testimonial-stars{ color: var(--warn); font-size: 14px; letter-spacing: 2px; } .testimonial-text{ margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.92); font-family: ui-serif, Georgia, "Times New Roman", Times, serif; font-style: italic; /* Recorta textos muy largos a 4 líneas prolijas en vez de estirar la tarjeta — así las 5 quedan con la misma altura. */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .testimonial-author{ margin: 4px 0 0; font-size: 12px; color: var(--muted); font-weight: 700; } /* ================================ SUB-FILTROS (nivel 2): aparecen debajo de la categoría elegida. Se distinguen de los de nivel 1 por ser más chicos, tener un rótulo adelante y una guía vertical a la izquierda (como una "hija" de la categoría de arriba). ================================ */ .subfilter-nav{ margin: -6px 0 18px; } .subfilter-group{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; padding: 10px 0 10px 16px; border-left: 2px solid rgba(201,100,66,.45); margin-top: 6px; } .subfilter-label{ font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; margin-right: 2px; } .subfilter-btn{ padding: 7px 12px; font-size: 12px; } .subfilter-btn.active{ background: rgba(201,100,66,.20); border-color: rgba(201,100,66,.65); color: #fff; } /* Versión dentro de la barra lateral fija: columna angosta, sin tanto lugar para el rótulo ni para chips en fila */ .subfilter-nav-sidebar .subfilter-group{ flex-direction: column; align-items: flex-start; padding: 8px 0 8px 12px; gap: 6px; } .subfilter-nav-sidebar .subfilter-btn{ width: 100%; text-align: left; } @media (max-width: 979px){ .subfilter-nav-sidebar{ display:flex; } .subfilter-nav-sidebar .subfilter-group{ flex-direction: row; align-items: center; border-left: none; padding: 0 0 0 10px; margin: 0; } .subfilter-nav-sidebar .subfilter-btn{ width: auto; flex: 0 0 auto; } .subfilter-nav-sidebar .subfilter-label{ display:none; } } /* ================================ VISTA SIN FILTRO: "Más populares" + secciones por categoría ================================ */ .browse-section{ margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .browse-section:first-child{ margin-top: 8px; padding-top: 0; border-top: none; } .browse-section-title{ margin: 0 0 16px; font-size: 19px; letter-spacing: -0.01em; } .browse-more-wrap{ display:flex; justify-content: center; margin-top: 18px; } /* ================================ BARRA DE FILTROS FIJA (categorías + Ver lista) Desktop/tablet grande: columna fija a la izquierda de toda la pantalla. Mobile/tablet chica: franja horizontal que se pega arriba al hacer scroll (position: sticky), con los chips en fila y scroll horizontal. ================================ */ .filters-sidebar{ z-index: 40; /* por debajo del topbar (50) y de los modales (1000+) */ } .sidebar-list-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font-weight: 800; cursor: pointer; appearance: none; -webkit-appearance: none; font-family: inherit; } .sidebar-list-btn:hover{ background: rgba(255,255,255,.09); } .sidebar-list-btn .list-badge{ background: var(--terracota); } .sidebar-filters-title{ display:block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; } /* Escritorio / tablet grande: columna fija a la izquierda */ @media (min-width: 980px){ body{ padding-left: 226px; } .filters-sidebar{ position: fixed; left: 0; top: 0; bottom: 0; width: 226px; overflow-y: auto; padding: 150px 16px 24px; /* el padding-top deja lugar para el topbar */ display: flex; flex-direction: column; gap: 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-right: 1px solid var(--line); } .sidebar-list-btn{ width: 100%; padding: 13px 14px; border-radius: 12px; font-size: 14px; } .sidebar-filters{ display:flex; flex-direction: column; gap: 8px; } .sidebar-filter-btn{ display:block; width: 100%; text-align: left; } } /* Mobile / tablet chica: franja compacta pegada arriba, en grilla de 3 columnas (los botones de filtro quedan en 2-3 filas cortas en vez de una tira larga con scroll lateral escondido — a pedido explícito, porque en el scroll horizontal la gente no se daba cuenta de que había más opciones para el costado). "top" usa la altura real del topbar (medida por JS y guardada en --lcm-topbar-h, ver site.js) en vez de un valor fijo, para que esta franja quede siempre pegada justo debajo del topbar sin que uno tape al otro sea cual sea el ancho de pantalla. */ @media (max-width: 979px){ .filters-sidebar{ position: sticky; top: var(--lcm-topbar-h, 128px); z-index: 40; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; background: rgba(7,20,17,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .sidebar-breadcrumb{ font-size: 11px; } /* "Ver lista" (solo existe en la barra del inicio, sidebar-home.php — en las páginas de categoría se sacó por quedar duplicado con "Mi lista" del topbar). A pedido explícito, en mobile queda DESACTIVADO/oculto acá también: ocupaba una línea entera propia, justo debajo del topbar que ya tiene "Mi lista" — quedaba duplicado. Se apaga solo con CSS (display:none), no se borra el botón del PHP, así que si en algún momento se quiere mostrar de nuevo en mobile alcanza con sacar esta regla. En desktop/tablet grande sigue viéndose normal (ahí es la columna fija lateral, no hay línea de topbar con la que se duplique). */ .sidebar-list-btn{ display: none; } .sidebar-filters{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; } .sidebar-filters-title{ display:none; } /* en mobile el rótulo ocupa lugar de más */ .sidebar-filter-btn{ flex: initial; text-align: center; padding: 7px 6px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Videos */ .video-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 980px){ .video-grid{ grid-template-columns: 1fr; } } /* FAQ */ details{ border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: var(--r); padding: 14px 14px; } details summary{ cursor:pointer; font-weight: 700; color: rgba(255,255,255,.9); } details p{ margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; } .faq{ display:grid; gap: 10px; } /* ================================ CONTACTO ================================ */ .contact-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; } @media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } } .contact-form{ display:flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,.05); } .contact-form label{ display:flex; flex-direction:column; gap: 6px; font-size: 13px; color: var(--muted); } .contact-form input, .contact-form textarea{ padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.20); color: var(--text); font-family: inherit; font-size: 14px; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: rgba(73,211,164,.55); } .contact-form .btn{ align-self: flex-start; } .contact-form-note{ margin: 0; font-size: 13px; color: var(--accent2); display:none; } .contact-form-note.is-visible{ display:block; } /* Mensaje de error (envío que falló o datos incompletos): mismo bloque que la nota normal, pero en un tono de alerta en vez del verde de "éxito". */ .contact-form-note.is-error{ color: var(--terracota2); } /* Campo trampa antispam ("honeypot"): oculto de forma visual, NO con display:none/visibility:hidden (a esos los bots más avanzados los detectan y no completan el campo). Sigue "presente" en la página pero corrido bien afuera de la pantalla, así una persona real jamás lo ve ni lo completa sin querer. */ .hp-field{ position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-alt{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap: 8px; padding: 22px; border-radius: var(--r); border: 1px solid rgba(37,211,102,.30); background: linear-gradient(135deg, rgba(37,211,102,.10), rgba(255,255,255,.03)); } .contact-alt-title{ margin:0; font-weight: 800; font-size: 15px; } .contact-alt-text{ margin: 0 0 6px; font-size: 13px; color: var(--muted); } footer{ padding: 26px 0 90px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; } .sticky-wa{ position: fixed; right: 18px; bottom: 18px; z-index: 60; display:flex; gap: 10px; align-items:center; } .wa-fab{ width: 56px; height: 56px; border-radius: 18px; display:grid; place-items:center; border: 1px solid rgba(73,211,164,.38); background: linear-gradient(135deg, rgba(73,211,164,.22), rgba(138,230,201,.10)); box-shadow: 0 14px 40px rgba(0,0,0,.45); } .wa-fab svg{ opacity:.95; } html{ scroll-behavior: smooth; } @media (max-width: 620px){ /* El topbar se mantiene "position: sticky" (definido arriba) en todos los anchos de mobile — a pedido explícito, para que la barra con "Catálogo" y "Mi lista" nunca desaparezca al scrollear, ni siquiera al pasar por secciones con fotos o sliders. Antes acá se la volvía "position: relative" (dejaba de quedar fija) solo en este breakpoint chico. */ .topbar-inner{ padding: 10px 0 !important; gap: 10px !important; align-items: flex-start; } .logo{ width: 66px !important; height: 66px !important; } .brand-title{ font-size: 32px !important; } .nav{ gap: 8px !important; justify-content: flex-start !important; } .pill{ padding: 8px 10px !important; font-size: 12px !important; } .btn{ padding: 10px 12px !important; font-size: 13px !important; width: 100%; justify-content:center; } } .title, .section-head h2, .products-section-head h3, .product-title{ font-family: "Playfair Display", ui-serif, Georgia, serif; letter-spacing: -0.01em; } /* ================================ BENEFICIOS ================================ */ /* Grilla genérica de 3 columnas (tarjetas de "Elegí tu línea" en el inicio, "También te puede interesar" en las páginas de material, etc.) — 3 columnas en desktop/tablet, 1 en mobile. */ .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr; } } .grid-3 > *{ min-width: 0; } /* evita que una imagen "empuje" el ancho de su columna */ .benefits .benefits-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 980px){ .benefits .benefits-grid{ grid-template-columns: 1fr; } } .benefit-card{ border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); background: rgba(255,255,255,.06); overflow:hidden; box-shadow: 0 10px 40px rgba(0,0,0,.25); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .benefit-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); } .benefit-media{ position:relative; aspect-ratio: 1 / 1; min-height: 210px; overflow:hidden; background: rgba(255,255,255,.04); } @media (max-width: 980px){ .benefit-media{ min-height: 220px; } } .benefit-media img{ width:100%; height:100%; object-fit: cover; display:block; transform: scale(1.03); transition: transform 1.2s ease; filter: contrast(1.05) saturate(1.06); } .benefit-card:hover .benefit-media img{ transform: scale(1.08); } .benefit-shade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,20,17,.05), rgba(7,20,17,.55) 65%, rgba(7,20,17,.86)); } .benefit-chip{ position:absolute; left: 14px; top: 14px; z-index: 2; display:inline-flex; align-items:center; gap: 8px; padding: 10px 12px; border-radius: 999px; background: rgba(0,0,0,.40); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); color: rgba(255,255,255,.95); font-size: 13px; font-weight: 800; letter-spacing: .01em; } .benefit-emoji{ width: 28px; height: 28px; border-radius: 10px; display:grid; place-items:center; background: rgba(201,100,66,.16); border: 1px solid rgba(201,100,66,.30); } .benefit-overlay{ position:absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; } .benefit-overlay p{ margin: 0; color: rgba(255,255,255,.92); font-size: 13px; line-height: 1.55; text-shadow: 0 8px 22px rgba(0,0,0,.65); } .product-desc .sizes-block{ display:block; white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.92); line-height: 1.6; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10); padding: 10px 12px; border-radius: 12px; } /* ================================ LIGHTBOX de producto (modal "Ver") Se abre al hacer click en la foto o en el botón "Ver" de una tarjeta. Muestra el carrusel de fotos (con un texto opcional debajo de cada una), el nombre, las características y un botón para agregar el producto a "Mi lista". ================================ */ .lightbox{ position: fixed; inset:0; z-index: 1000; background: rgba(0,0,0,.90); display: none; align-items: center; justify-content: center; padding: 40px 16px; } .lightbox.is-open{ display:flex; } .lightbox-inner{ position: relative; width: min(720px, 100%); max-height: 90vh; overflow-y: auto; border-radius: 20px; background: #0d211c; border: 1px solid var(--line); box-shadow: var(--shadow); } .lightbox-inner .swiper{ background:#000; } /* Con una sola foto cargada, site.js le agrega la clase "has-single-photo" al modal (#productLightbox) — acá se ocultan del todo las flechas y los puntitos del carrusel de Swiper, que si no quedan visibles (aunque no tengan a dónde ir) y confunden: al tocarlas antes no pasaba nada útil y a veces se veía la foto como en negro por un instante. */ .lightbox.has-single-photo .swiper-button-prev, .lightbox.has-single-photo .swiper-button-next, .lightbox.has-single-photo .swiper-pagination{ display: none !important; } /* Ficha de producto SIEMPRE cuadrada: la caja del carrusel fuerza proporción 1:1 y la foto la llena recortando/centrando si no es cuadrada (object-fit:cover), en vez de dejarla "flotando" con franjas negras arriba/abajo como antes (object-fit:contain). Así todas las fichas se ven parejas aunque alguna foto no sea 1:1. */ .lightbox-inner .swiper-slide{ display:flex; align-items:center; justify-content:center; background:#000; position: relative; aspect-ratio: 1 / 1; } .lightbox-inner .swiper-slide img{ width: 100%; height: 100%; object-fit: contain; object-position: center; display:block; } .lightbox-slide-caption{ position:absolute; left:0; right:0; bottom:0; padding: 10px 16px 12px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75)); color: rgba(255,255,255,.92); font-size: 13px; line-height: 1.5; text-align:center; } .lightbox-details{ padding: 20px 22px 22px; } .lightbox-details h3{ margin: 0 0 4px; font-family: "Playfair Display", ui-serif, Georgia, serif; font-size: 21px; } .lightbox-spec{ margin: 0 0 10px; color: var(--terracota2); font-size: 13px; font-weight: 700; } .lightbox-details .product-features{ margin: 6px 0 16px; } /* ================================ VARIANTES (color / tamaño) en el modal "Ver" ================================ */ .variant-group{ margin: 4px 0 18px; } .variant-group-title{ display:block; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.92); margin-bottom: 10px; } .variant-group-title .variant-selected{ font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; } /* Colores: redondeles clickeables */ .variant-colors{ display:flex; gap: 12px; flex-wrap: wrap; } .variant-color{ width: 46px; height: 46px; border-radius: 50%; background-size: cover !important; background-position: center !important; background-color: rgba(255,255,255,.10); border: 2px solid rgba(255,255,255,.30); cursor: pointer; position: relative; padding: 0; appearance: none; -webkit-appearance: none; transition: border-color .15s ease, transform .15s ease; } .variant-color:hover{ transform: translateY(-1px); } .variant-color.is-selected{ border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(201,100,66,.28); } .variant-color.is-selected::after{ content: "✓"; position: absolute; inset:0; display:flex; align-items:center; justify-content:center; color: #fff; font-size: 16px; font-weight: 900; text-shadow: 0 2px 6px rgba(0,0,0,.65); } .variant-color-name{ display:block; text-align:center; margin-top: 6px; font-size: 10.5px; color: var(--muted); } .variant-color-wrap{ display:flex; flex-direction:column; align-items:center; } /* Tamaños: lista vertical de opciones */ .variant-sizes{ display:flex; flex-direction:column; gap: 8px; } .variant-size{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: rgba(255,255,255,.92); font-size: 14px; cursor: pointer; text-align: left; appearance: none; -webkit-appearance: none; font-family: inherit; transition: border-color .15s ease, background .15s ease; } .variant-size:hover{ background: rgba(255,255,255,.07); } .variant-size.is-selected{ border-color: var(--terracota); background: linear-gradient(90deg, rgba(201,100,66,.20), rgba(255,255,255,.03)); } .variant-size-check{ width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); flex: 0 0 auto; display:grid; place-items:center; } .variant-size.is-selected .variant-size-check{ border-color: var(--terracota); background: var(--terracota); } .variant-size.is-selected .variant-size-check::after{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; } /* Grupo con falta de selección: se marca en terracota al intentar agregar */ .variant-group.has-warning .variant-group-title{ color: var(--terracota2); } .variant-group.has-warning .variant-colors, .variant-group.has-warning .variant-sizes{ outline: 2px solid rgba(201,100,66,.55); outline-offset: 6px; border-radius: 14px; } .variant-warning{ display:none; margin: -6px 0 14px; font-size: 13px; color: var(--terracota2); font-weight: 700; } .variant-warning.is-visible{ display:block; } /* Selector de cantidad (modal "Ver") */ .qty-stepper{ display:inline-flex; align-items:center; gap: 14px; padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); } .qty-btn{ width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.06); color: #fff; font-size: 17px; font-weight: 800; line-height: 1; display:grid; place-items:center; cursor:pointer; appearance:none; -webkit-appearance:none; } .qty-btn:hover{ background: rgba(255,255,255,.14); } .qty-btn:disabled{ opacity: .35; cursor: default; } .qty-value{ min-width: 22px; text-align:center; font-size: 15px; font-weight: 800; } /* Versión chica del stepper, para cada renglón del panel "Mi lista" */ .qty-stepper-sm{ gap: 8px; padding: 3px 6px; } .qty-btn-sm{ width: 24px; height: 24px; font-size: 13px; } .qty-value-sm{ min-width: 16px; font-size: 13px; } .list-item-qty{ flex: 0 0 auto; margin: 0 8px; } .lightbox-close{ position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45); backdrop-filter: blur(6px); color: #fff; font-size: 18px; line-height: 1; display:grid; place-items:center; cursor:pointer; } .lightbox-close:hover{ background: rgba(0,0,0,.6); } /* Panel "Mi lista" (drawer) */ .list-drawer{ position: fixed; inset:0; z-index: 1000; background: rgba(0,0,0,.80); display: none; align-items: center; justify-content: center; padding: 24px 16px; } .list-drawer.is-open{ display:flex; } .list-drawer-inner{ position: relative; width: min(480px, 100%); max-height: 86vh; display:flex; flex-direction: column; border-radius: 20px; background: #0d211c; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; } .list-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); } .list-drawer-head h3{ margin:0; font-family: "Playfair Display", ui-serif, Georgia, serif; font-size: 19px; } .list-drawer-close{ width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.06); color: #fff; font-size: 16px; line-height:1; display:grid; place-items:center; cursor:pointer; } .list-drawer-close:hover{ background: rgba(255,255,255,.12); } .list-drawer-body{ padding: 12px 16px; overflow-y: auto; flex: 1; } .list-empty{ padding: 22px 8px; text-align:center; color: var(--muted); font-size: 13px; display:none; } .list-empty.is-visible{ display:block; } /* ACTUALIZADO — el Total ahora se muestra INLINE dentro de la lista de "Mi lista", justo al terminar los productos con precio (antes de los que van "a consultar"), sin ningún texto de encabezado de grupo (eso se sacó a pedido). */ .list-total-inline{ font-size: 14px; font-weight: 700; color: var(--text, inherit); padding: 12px 8px; margin: 4px 0 6px; border-top: 1px solid var(--line, rgba(255,255,255,.14)); border-bottom: 1px solid var(--line, rgba(255,255,255,.14)); } .list-item{ display:flex; align-items:center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .list-item:last-child{ border-bottom: none; } .list-item-info{ flex:1; min-width:0; } .list-item-name{ font-size: 14px; font-weight: 700; } .list-item-spec{ font-size: 12px; color: var(--muted); margin-top: 2px; } .list-item-remove{ width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); font-size: 14px; line-height:1; display:grid; place-items:center; cursor:pointer; } .list-item-remove:hover{ background: rgba(255,255,255,.12); } .list-drawer-footer{ padding: 16px; border-top: 1px solid var(--line); } .list-drawer-footer .btn{ width: 100%; } .list-drawer-hint{ margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align:center; } /* Botón secundario "Prefiero que me contacten" — mismo ancho que el de WhatsApp pero look más discreto (no es la opción principal), y el mini-formulario que despliega debajo. */ .btn-callback-toggle{ margin-top: 10px; background: transparent !important; border: 1px solid var(--line) !important; } .callback-form{ margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r, 12px); background: rgba(255,255,255,.03); } .callback-form label{ display:block; margin-bottom: 10px; font-size: 13px; } .callback-form label span{ display:block; margin-bottom: 4px; color: var(--muted); } .callback-form input[type="text"], .callback-form input[type="tel"]{ width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.04); /* Iba con "color: inherit" — se veía bien acá, pero site-test-rediseno.css le pone al un texto oscuro con !important (pensado para las tarjetas BLANCAS del rediseño), y ese "inherit" lo heredaba en este panel, que sigue siendo oscuro (#0d211c): texto oscuro sobre fondo oscuro = invisible mientras se escribe. Con el color fijo en blanco (y su propio !important, para ganarle al del body) queda legible sin depender de qué texto herede de más arriba. */ color: #ffffff !important; font: inherit; } .callback-form input[type="text"]::placeholder, .callback-form input[type="tel"]::placeholder{ color: rgba(255,255,255,.55) !important; opacity: 1 !important; } .callback-note{ margin: 10px 0 0; font-size: 12px; text-align: center; display: none; } .callback-note.is-visible{ display:block; } .callback-note.is-error{ color: #ff6b6b; } @media (max-width: 620px){ .lightbox-details{ padding: 16px 16px 18px; } .list-drawer-inner{ max-height: 90vh; } } /* ================================ TOAST: "Has agregado ..." + Ver lista / Volver al catálogo ================================ */ .add-toast{ position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 1100; width: min(420px, calc(100% - 32px)); padding: 16px 18px; border-radius: 16px; background: #0d211c; border: 1px solid rgba(73,211,164,.35); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .add-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .add-toast-text{ margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.94); } .add-toast-text strong{ color: var(--accent2); } .add-toast-actions{ display:flex; gap: 10px; flex-wrap: wrap; } .add-toast-link{ padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: rgba(255,255,255,.90); font-size: 13px; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none; font-family: inherit; } .add-toast-link:hover{ background: rgba(255,255,255,.10); } .add-toast-link-primary{ background: linear-gradient(135deg, #49d3a4, #2fbf90); border-color: transparent; color: rgba(255,255,255,.97); } @media (prefers-reduced-motion: reduce){ .add-toast{ transition: none; } } /* ================================ SCROLL REVEAL Las tarjetas e imágenes aparecen con un fade + subida suave a medida que el usuario hace scroll (una sola vez por elemento). ================================ */ .reveal{ opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } } /* ============================================================ FALLBACK DEL SLIDER (Swiper): si por cualquier motivo el CSS del CDN de Swiper (swiper-bundle.min.css) no llega a cargar en el navegador de la visita, estas reglas evitan que las tarjetas del carrusel (hero, reseñas, lightbox) se apilen una debajo de la otra y disparen la altura de la página. Con Swiper cargado normalmente, estas reglas no cambian nada (Swiper las pisa con las suyas, más completas). Sin Swiper, como mínimo el layout se mantiene contenido y prolijo en vez de romperse. ============================================================ */ .swiper{ overflow: hidden; position: relative; } .swiper-wrapper{ display: flex; flex-wrap: nowrap; } .swiper-slide{ flex-shrink: 0; width: 100%; }