/* ==========================================================================
site-test-rediseno.css
Hoja de estilos DE PRUEBA para La Casa de la Maceta.
Qué es esto: una capa de estilos aparte, pensada para PROBAR una
dirección visual nueva sin tocar site.css. Se carga DESPUÉS de
site.css (mismo ), así que todo lo de acá abajo pisa lo que
ya existe por especificidad/orden — nada se borra del original.
Para sacarla, basta con quitar el que la carga. Ver
instrucciones de instalación al final de este archivo.
No usa Tailwind ni ningún framework: en un sitio ya armado y
liviano como este, cargar Tailwind entero (o su CDN) suma peso
real sin necesidad — casi todo lo que da "aire moderno" (bordes
redondeados grandes, sombras suaves, hover con lift, gradientes,
transiciones) se logra con CSS plano y variables, sin JS extra y
sin descargar un framework de por medio. El resultado es el mismo
efecto visual, con menos peso y menos que mantener.
ALCANCE DE ESTA PRIMERA PASADA: paleta de colores, tipografía,
botones, tarjetas de producto y espaciado general. Todavía NO
reordena secciones de la página (eso es un cambio estructural
aparte, mejor hacerlo una vez que la dirección visual esté
aprobada — para no mezclar dos decisiones grandes en un solo
cambio). Al final del archivo dejo anotado un orden sugerido.
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700;800&display=swap");
:root{
/* ===== Paleta nueva: verde inglés oscuro (marca) + terracota (acento) +
fondo claro cálido, en vez del navy/blanco frío que había.
(Antes era oliva — se cambió a verde inglés por pedido: el oliva
quedaba muy apagado en los títulos.) ===== */
--lcm-olive: #1B4D3E; /* verde inglés — nombre de marca, títulos */
--lcm-olive-dark: #0F3327; /* verde inglés oscuro — texto fuerte, hover */
--lcm-olive-light: #E7EEEA; /* verde inglés muy clarito — fondos de sección alternos */
--lcm-terracota: #C1662E; /* terracota — acento, detalles */
--lcm-terracota-dark:#9C4F22; /* terracota oscuro — hover de acentos */
--lcm-cream: #FBF9F4; /* fondo general, cálido en vez de blanco puro */
--lcm-white: #FFFFFF;
--lcm-ink: #262B27; /* texto principal: grafito oscuro con matiz verdoso, va con el verde inglés de los títulos */
--lcm-ink-soft: #5B6660; /* texto secundario: mismo tono, más clarito */
--lcm-line: #E2E6E1; /* bordes suaves */
/* Botón "Temu-style": degradé amarillo → naranja, cálido y llamativo */
--lcm-btn-grad: linear-gradient(135deg, #FFC93C 0%, #FF9A2E 55%, #FF7A1A 100%);
--lcm-btn-grad-hover: linear-gradient(135deg, #FFD25C 0%, #FFA847 55%, #FF8C3A 100%);
--lcm-shadow-sm: 0 2px 8px rgba(44,42,34,.06);
--lcm-shadow-md: 0 8px 24px rgba(44,42,34,.10);
--lcm-shadow-lg: 0 16px 40px rgba(44,42,34,.14);
--lcm-radius: 18px;
}
/* ===== Base: fondo claro, tipografía nueva ===== */
body{
background: var(--lcm-cream) !important;
color: var(--lcm-ink) !important;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-webkit-font-smoothing: antialiased;
}
/* ===== Bandas con borde ondulado ("wave dividers"): un bloque de
color de ancho completo con un borde curvo arriba y abajo (como
las tiendas de plantas tipo Shopify que sirvieron de inspiración),
con un texto centrado en blanco. Las ondas son dos SVG chiquitos
(uno para el borde de arriba, otro para el de abajo, mismo color
que la banda) puestos por fuera de la caja para que el color se
"derrame" hacia la sección con una curva, en vez de un corte recto.
Todo vectorial, sin imágenes. ===== */
.lcm-wave-band{
position: relative;
width: min(1120px, 92vw) !important;
margin: 34px auto 0 !important;
text-align: center;
color: #FFFFFF !important;
padding: 22px 24px 28px !important;
border-radius: 8px;
}
.lcm-wave-band::before,
.lcm-wave-band::after{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 20px;
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.lcm-wave-band::before{ top: 0; transform: translateY(-99%); }
.lcm-wave-band::after{ bottom: 0; transform: translateY(99%); }
.lcm-wave-band p{
margin: 0 !important;
color: #FFFFFF !important;
font-family: "Fraunces", Georgia, serif !important;
font-size: clamp(17px, 2.2vw, 22px) !important;
font-weight: 600 !important;
font-style: normal !important;
letter-spacing: -0.01em;
}
/* Variante verde inglés oscuro */
.lcm-wave-band--green{
background: var(--lcm-olive-dark);
}
.lcm-wave-band--green::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C220,95 380,5 600,45 C820,85 980,15 1200,45 L1200,120 L0,120 Z' fill='%230F3327'/%3E%3C/svg%3E");
}
.lcm-wave-band--green::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,75 C220,25 380,115 600,75 C820,35 980,105 1200,75 L1200,0 L0,0 Z' fill='%230F3327'/%3E%3C/svg%3E");
}
/* Variante terracota suave (más clara que el acento terracota fuerte) */
.lcm-wave-band--terracota{
background: #D98A5F;
}
.lcm-wave-band--terracota::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C220,95 380,5 600,45 C820,85 980,15 1200,45 L1200,120 L0,120 Z' fill='%23D98A5F'/%3E%3C/svg%3E");
}
.lcm-wave-band--terracota::after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,75 C220,25 380,115 600,75 C820,35 980,105 1200,75 L1200,0 L0,0 Z' fill='%23D98A5F'/%3E%3C/svg%3E");
}
@media (max-width: 480px){
.lcm-wave-band{ padding: 18px 16px 22px !important; }
}
/* ===== Separador "rosario": línea fina que se desvanece hacia los
costados con unas cuentitas chicas en el medio, como un collar de
cuentas discreto — inspirado en la planta rosario. Se usa entre
secciones para marcar el corte sin caer en un bloque de color.
Es el reemplazo de las manchas difusas que no gustaron. ===== */
.lcm-rosario{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 320px;
margin: 8px auto;
padding: 0 16px;
}
.lcm-rosario::before,
.lcm-rosario::after{
content: "";
flex: 1 1 auto;
height: 1px;
}
.lcm-rosario::before{
background: linear-gradient(to right, transparent, var(--lcm-line));
}
.lcm-rosario::after{
background: linear-gradient(to left, transparent, var(--lcm-line));
}
.lcm-rosario-bead{
display: inline-block;
border-radius: 50%;
background: var(--lcm-terracota);
flex: none;
}
.lcm-rosario-bead--sm{ width: 5px; height: 5px; opacity: .5; }
.lcm-rosario-bead--lg{ width: 8px; height: 8px; opacity: .85; }
@media (max-width: 700px){
header.hero::before, #sobre-nosotros::before, #contacto::before{
width: 260px !important;
height: 260px !important;
}
}
/* ===== Corrección de fondo blanco: site.css original está armado
para un tema OSCURO (fondo casi negro), así que --text y --muted
ahí son blancos. Con el fondo nuevo claro, todo lo que use esas
variables (descripciones de producto, specs, autor de reseña,
respuestas del FAQ, labels del formulario, footer, etc.) quedaba
en blanco sobre blanco. Se remapean acá al grafito oscuro nuevo,
sin tener que tocar cada regla suelta en site.css. ===== */
:root{
--text: var(--lcm-ink) !important;
--muted: var(--lcm-ink-soft) !important;
--line: var(--lcm-line) !important;
}
/* Títulos: Fraunces — serif moderna, cálida y natural (no una serif
clásica de diario, tiene un aire minimalista/editorial que combina
con "vivero" sin caer en lo rústico-kitsch). Como hay poco texto
en el sitio, se agranda bastante para que cada título pese en la
página. */
h1, h2, h3,
.title, .kicker,
.product-title,
.lcm-space-caption h3,
.lcm-divider h2,
.section-head h2{
font-family: "Fraunces", Georgia, serif !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
color: var(--lcm-olive-dark) !important;
}
h1.title, header.hero .title{
font-size: clamp(34px, 5vw, 56px) !important;
line-height: 1.08 !important;
margin: 14px 0 26px !important;
}
/* ===== Aire prolijo entre kicker / título / checklist / botón del
hero: antes quedaba todo apretado uno contra otro. ===== */
.hero-copy .kicker{
margin: 0 0 14px !important;
}
.hero-copy .lcm-checklist-wrap{
margin: 0 0 30px !important;
}
.hero-actions{
margin-top: 4px !important;
}
.section-head h2{
font-size: clamp(26px, 3.4vw, 36px) !important;
}
.lcm-divider h2{ color: var(--lcm-olive-dark) !important; }
.lcm-space-caption h3{ color: #fff !important; font-family: "Fraunces", serif !important; }
/* Marca / nombre del sitio en verde oliva oscuro, bien legible sobre
el fondo claro nuevo. */
.logo, .brand, .topbar .brand-name, header .brand{
color: var(--lcm-olive-dark) !important;
font-family: "Fraunces", serif !important;
font-weight: 700 !important;
}
/* ===== Menú de arriba: fondo blanco a pedido (antes era un degradé
oscuro con blur, que sobre el fondo claro nuevo se veía gris
lavado). El logo queda tal cual es (ánfora terracota con las
letras blancas adentro, sin placa ni recoloreo) — no necesita nada
más porque ya tiene su propio color sólido.
Estructura en 2 filas: arriba el logo + nombre, centrados; abajo
la barra de menú, que hace de separador entre la cabecera blanca
y el cuerpo blanco de la página: en vez de un borde finito, es una
barra prolija en oliva clarito con los 3 items separados por
líneas verticales, como "pestañas" de sección — se nota que son
categorías/accesos, y de paso corta visualmente la cabecera del
resto de la página. En mobile queda igual (misma barra, sticky),
nada de menú hamburguesa ni ocultarla. */
.lcm-topbar-stack{
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
background: var(--lcm-white) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
box-shadow: 0 1px 0 var(--lcm-line) !important;
}
.lcm-topbar-stack .topbar-inner{
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
}
.lcm-topbar-stack .brand{
justify-content: center !important;
padding: 16px 0 14px !important;
}
.lcm-topbar-stack .logo{
width: 84px !important;
height: 84px !important;
}
.lcm-topbar-stack .brand-title{
font-family: "Fraunces", serif !important;
font-weight: 700 !important;
color: var(--lcm-olive-dark) !important;
font-size: clamp(26px, 4vw, 38px) !important;
text-align: center !important;
}
/* La barra de menú: ancho completo del topbar (no solo del
contenido), fondo oliva clarito, con un filo verde arriba y otro
terracota abajo — ese doble filo es lo que separa visualmente la
cabecera del cuerpo blanco de la página. */
.lcm-topbar-stack .nav{
justify-content: center !important;
gap: 0 !important;
width: 100% !important;
background: var(--lcm-olive-light) !important;
border-top: 1px solid var(--lcm-olive) !important;
border-bottom: 2px solid var(--lcm-terracota) !important;
flex-wrap: nowrap !important;
}
/* Los botones quedan como "pestañas" parejas, separadas por una
línea fina — se leen como secciones/accesos, no como chips
sueltos. */
.lcm-topbar-stack .pill{
flex: 1 1 0 !important;
background: transparent !important;
border: none !important;
border-right: 1px solid rgba(15,51,39,.14) !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 13px 14px !important;
color: var(--lcm-olive-dark) !important;
font-weight: 700 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
text-align: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
.lcm-topbar-stack .pill:last-child{ border-right: none !important; }
.lcm-topbar-stack .pill:hover{
background: var(--lcm-olive) !important;
color: #FFFFFF !important;
}
.lcm-topbar-stack .list-badge{
background: var(--lcm-terracota) !important;
color: #FFFFFF !important;
}
@media (max-width: 620px){
.lcm-topbar-stack{
position: sticky !important;
top: 0 !important;
}
.lcm-topbar-stack .brand{
padding: 12px 0 10px !important;
}
.lcm-topbar-stack .logo{
width: 72px !important;
height: 72px !important;
}
.lcm-topbar-stack .nav{
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.lcm-topbar-stack .pill{
padding: 11px 10px !important;
font-size: 11.5px !important;
}
}
/* ===== Barra lateral (catálogo/filtros + "Ver lista"): existe desde
antes en las 6 páginas de material, y ahora también en el inicio
(includes/sidebar-home.php, mismas clases). Estaba pensada para el
fondo oscuro del sitio viejo — vidrio translúcido en desktop, franja
casi negra en mobile — así que con la paleta clara nueva quedaba
fuera de lugar. Se pasa a blanco/crema, texto grafito, acentos
oliva/terracota, igual que el resto del sitio.
También se ajusta el espacio que deja arriba (padding en desktop,
"top" en mobile) porque la cabecera nueva de 2 filas es más alta
que la de una sola fila que había antes — si no, la barra lateral
queda tapada debajo del menú. */
.filters-sidebar{
background: var(--lcm-white) !important;
border-right: 1px solid var(--lcm-line) !important;
}
@media (min-width: 980px){
.filters-sidebar{
padding-top: 180px !important;
}
}
@media (max-width: 979px){
.filters-sidebar{
/* "top" usa la altura real del topbar (medida por JS, ver
site.js) en vez de un valor fijo, para que esta franja de
filtros quede siempre pegada justo debajo del topbar sin que
uno tape al otro, sea cual sea el ancho de pantalla — antes,
con un valor fijo, en algunos anchos el topbar quedaba más
alto que ese valor y tapaba parte de esta franja. */
top: var(--lcm-topbar-h, 140px) !important;
background: var(--lcm-white) !important;
border-bottom: 1px solid var(--lcm-line) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
.sidebar-list-btn{
background: var(--lcm-olive-light) !important;
border: 1px solid var(--lcm-line) !important;
color: var(--lcm-olive-dark) !important;
}
.sidebar-list-btn:hover{
background: var(--lcm-olive) !important;
color: #FFFFFF !important;
}
/* Botón "← Catálogo principal": reutiliza el estilo de .sidebar-list-btn
(mismo tamaño/forma que "Ver lista") pero es un , así que se le
quita el subrayado, y se le da un tono terracota propio para que se
distinga a simple vista del botón del carrito. */
.sidebar-back-btn{
text-decoration: none !important;
justify-content: center !important;
background: var(--lcm-cream) !important;
border: 1px solid var(--lcm-terracota) !important;
color: var(--lcm-terracota) !important;
margin-bottom: 8px;
}
.sidebar-back-btn:hover{
background: var(--lcm-terracota) !important;
color: #FFFFFF !important;
}
.list-badge{
background: var(--lcm-terracota) !important;
color: #FFFFFF !important;
}
.sidebar-filters-title, .subfilter-label{
color: var(--lcm-ink-soft) !important;
}
.filter-btn, .sidebar-filter-btn{
background: var(--lcm-cream) !important;
border: 1px solid var(--lcm-line) !important;
color: var(--lcm-ink) !important;
text-decoration: none !important;
}
.filter-btn:hover, .sidebar-filter-btn:hover{
background: var(--lcm-olive-light) !important;
border-color: var(--lcm-olive) !important;
color: var(--lcm-olive-dark) !important;
}
.filter-btn.active, .sidebar-filter-btn.active{
background: var(--lcm-terracota) !important;
border-color: var(--lcm-terracota) !important;
color: #FFFFFF !important;
}
/* Miga de pan arriba de la barra lateral: "Catálogo › Hormigón" (en
el inicio es solo "Catálogo", sin link, porque ya estás ahí). */
.sidebar-breadcrumb{
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
margin-bottom: 2px;
}
.sidebar-breadcrumb a{
color: var(--lcm-olive-dark);
text-decoration: none;
}
.sidebar-breadcrumb a:hover{ text-decoration: underline; }
.sidebar-breadcrumb-sep{
color: var(--lcm-ink-soft);
opacity: .7;
}
.sidebar-breadcrumb-current{
color: var(--lcm-terracota);
white-space: nowrap;
}
@media (max-width: 979px){
.sidebar-breadcrumb{
flex: 0 0 auto;
padding-right: 10px;
margin-right: 4px;
margin-bottom: 0;
border-right: 1px solid var(--lcm-line);
}
}
/* Texto de cuerpo: un poco más grande y con más aire entre líneas,
ya que hay poco copy y conviene que cada párrafo se lea cómodo. */
p, .subtitle{
font-size: 16.5px !important;
line-height: 1.7 !important;
color: var(--lcm-ink-soft);
}
/* ===== Los dos párrafos "de marca" (la bio de "Más de 30 años..." y
el texto de "Vení a buscar tu maceta al Cordón"): más grandes, en
tono oscuro (no el gris suave del resto del copy) y en la serif
Fraunces en cursiva liviana, para que se sientan como una frase
destacada/elegante y no como un párrafo más. ===== */
.lcm-divider p, .lcm-visit-copy p{
font-family: "Fraunces", Georgia, serif !important;
font-size: 22px !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: 1.6 !important;
letter-spacing: -0.005em;
color: var(--lcm-ink) !important;
}
@media (max-width: 480px){
.lcm-divider p, .lcm-visit-copy p{
font-size: 18.5px !important;
}
}
/* ===== Botones "Temu-style": degradé amarillo→naranja, pill, con
levantamiento suave al pasar el mouse. Liviano: solo transform +
box-shadow, sin librerías. (Los de WhatsApp NO usan este degradé,
van aparte más abajo con el verde característico de WhatsApp.) ===== */
.btn, .btn-terracota{
background: var(--lcm-btn-grad) !important;
color: #3A2200 !important;
border: none !important;
border-radius: 999px !important;
font-weight: 800 !important;
letter-spacing: -0.01em;
padding: 13px 28px !important;
box-shadow: var(--lcm-shadow-md);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover, .btn-terracota:hover{
background: var(--lcm-btn-grad-hover) !important;
transform: translateY(-2px);
box-shadow: var(--lcm-shadow-lg);
color: #3A2200 !important;
}
.btn:active, .btn-terracota:active{
transform: translateY(0);
}
/* ===== Botón flotante de WhatsApp: el estilo original era un
"vidrio" verde translúcido (fondo casi transparente + borde tenue)
pensado para el fondo oscuro del sitio viejo. Con el fondo claro
nuevo quedaba prácticamente invisible. Ahora es sólido, verde
WhatsApp con el ícono en blanco, bien visible. ===== */
.wa-fab{
background: #25D366 !important;
border: none !important;
box-shadow: 0 10px 28px rgba(37,211,102,.45), var(--lcm-shadow-md) !important;
color: #FFFFFF !important;
}
.wa-fab svg{
opacity: 1 !important;
color: #FFFFFF !important;
}
.wa-fab:hover{
background: #1EBE5B !important;
transform: translateY(-2px);
}
/* ===== Botones de WhatsApp: verde característico de WhatsApp con
texto blanco, en vez del degradé amarillo/naranja de los demás
botones — se reconoce de un vistazo qué botón abre WhatsApp. ===== */
.btn-wa{
background: #25D366 !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 999px !important;
font-weight: 800 !important;
letter-spacing: -0.01em;
padding: 13px 28px !important;
box-shadow: var(--lcm-shadow-md);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-wa:hover{
background: #1EBE5B !important;
color: #FFFFFF !important;
transform: translateY(-2px);
box-shadow: var(--lcm-shadow-lg);
}
.btn-wa:active{
transform: translateY(0);
}
/* ===== Tarjeta "contacto directo por WhatsApp": antes tenía dos
textos ("¿Preferís algo más directo?" / "Escribinos por WhatsApp...")
y ahora es solo una foto (nosotros.webp) que llena la tarjeta —
se sacó el botón de WhatsApp de esta tarjeta a pedido (el contacto
por WhatsApp sigue disponible en el hero, el mapa y el botón
flotante). ===== */
.contact-alt{
align-items: stretch !important;
justify-content: stretch !important;
background: var(--lcm-white) !important;
border: 1px solid var(--lcm-line) !important;
box-shadow: var(--lcm-shadow-sm);
border-radius: var(--lcm-radius) !important;
padding: 0 !important;
overflow: hidden;
}
.contact-alt-img{
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
display: block;
}
.btn-outline{
background: transparent !important;
color: var(--lcm-olive-dark) !important;
border: 1.5px solid var(--lcm-olive) !important;
border-radius: 999px !important;
font-weight: 700 !important;
padding: 12px 26px !important;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn-outline:hover{
background: var(--lcm-olive) !important;
color: #fff !important;
transform: translateY(-2px);
}
/* ===== Tarjetas de "Elegí tu línea": fondo blanco, sombra suave,
zoom sutil de la foto al pasar el mouse, levantamiento de la
tarjeta entera. ===== */
.card{
background: var(--lcm-white) !important;
border: 1px solid var(--lcm-line) !important;
border-radius: var(--lcm-radius) !important;
box-shadow: var(--lcm-shadow-sm);
transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover{
transform: translateY(-4px);
box-shadow: var(--lcm-shadow-md);
}
.card .product-media{ overflow: hidden; }
.card .product-media img{
transition: transform .35s ease;
}
.card:hover .product-media img{
transform: scale(1.06);
}
.card .product-title{
font-size: 19px !important;
}
/* El texto "Ver catálogo →" pasa de ser un link de texto a verse
como un botón (mismo degradé que el resto), centrado, sin flecha —
la tarjeta entera sigue siendo el link, esto es solo la etiqueta
visual dentro. */
.card .card-body p[style*="color:var(--accent2)"],
.card .card-body p[style*="color: var(--accent2)"]{
display: inline-block !important;
position: relative !important;
overflow: hidden !important;
margin-top: 16px !important;
padding: 9px 22px !important;
background: var(--lcm-btn-grad) !important;
color: #3A2200 !important;
border-radius: 999px !important;
font-size: 13.5px !important;
font-weight: 800 !important;
text-align: center;
}
.card .card-body p[style*="color:var(--accent2)"]::after,
.card .card-body p[style*="color: var(--accent2)"]::after{
content: "";
}
.card .card-body{ text-align: center; padding-bottom: 22px !important; }
/* ===== Halo de brillo del botón "Ver catálogo": un destello diagonal
que recorre el botón en loop, para que llame la atención sin
necesitar hover (la tarjeta entera ya es el link). Solo transform +
opacity, liviano. ===== */
.card .card-body p[style*="color:var(--accent2)"]::before,
.card .card-body p[style*="color: var(--accent2)"]::before{
content: "";
position: absolute;
top: 0;
left: -75%;
width: 45%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.75), transparent);
transform: skewX(-20deg);
animation: lcmBtnShine 3.2s ease-in-out infinite;
}
@keyframes lcmBtnShine{
0% { left: -75%; }
35% { left: 130%; }
100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce){
.card .card-body p[style*="color:var(--accent2)"]::before,
.card .card-body p[style*="color: var(--accent2)"]::before{
animation: none;
display: none;
}
}
/* ===== Kicker del hero: pill en oliva clarito ===== */
.kicker{
display: inline-block;
background: var(--lcm-olive-light) !important;
color: var(--lcm-olive-dark) !important;
padding: 6px 16px;
border-radius: 999px;
font-size: 13px !important;
font-weight: 700 !important;
font-family: "Inter", sans-serif !important;
letter-spacing: 0;
}
/* ===== Secciones con fondo alterno (oliva clarito) para separar
visualmente el scroll, look más "e-commerce moderno" y menos
plano. Se aplica a franjas pares, dejando el resto en el cream
base — un zigzag suave. ===== */
#populares-preview{ background: var(--lcm-olive-light); padding: 48px 0; border-radius: 32px; margin: 24px auto; max-width: 1400px; }
/* ===== Badge "+30 años": de navy a terracota, más cálido ===== */
.authority-years-badge{
background: rgba(156,79,34,.88) !important;
}
.lcm-space-seq .authority-years-badge{
background: rgba(156,79,34,.88) !important;
}
/* ===== Checklist "sobre nosotros" e íconos de check: el HTML original
los pintaba en blanco porque esa fila tenía fondo verde oscuro; con
el rediseño esa sección quedó con fondo claro, así que el texto
blanco quedaba invisible. Mismo tratamiento que el checklist del
hero: texto grafito oscuro + ícono en oliva clarito. (El checklist
del hero, .lcm-checklist--hero, ya tenía esto — acá se agrega para
el checklist de más abajo también.) ===== */
.lcm-checklist li{
color: var(--lcm-ink) !important;
}
.lcm-check-ico{
background: var(--lcm-terracota) !important;
border-color: var(--lcm-terracota) !important;
color: #FFFFFF !important;
}
.lcm-divider::before{
background: var(--lcm-terracota) !important;
}
/* ===== Reveal / movimiento liviano al entrar en pantalla =====
Si el sitio ya tiene una clase ".reveal" controlada por site.js
(agregando alguna clase "is-visible" al hacer scroll), esta regla
solo define CÓMO se ve la transición — no agrega JS nuevo. Si tu
site.js no la controla todavía, esta regla queda inactiva y no
rompe nada (los elementos se ven igual, sin animar). */
.reveal{
opacity: 0;
transform: translateY(14px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible, .reveal.revealed, .reveal.in-view{
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
.reveal{ opacity: 1; transform: none; transition: none; }
}
/* ===== FAQ: acordeón más moderno, bordes redondeados, sin líneas
duras ===== */
.faq details{
background: var(--lcm-white);
border: 1px solid var(--lcm-line);
border-radius: 14px !important;
padding: 4px 18px !important;
margin-bottom: 10px !important;
transition: box-shadow .2s ease;
}
.faq details[open]{ box-shadow: var(--lcm-shadow-sm); }
.faq summary{
font-family: "Fraunces", serif !important;
font-weight: 600 !important;
color: var(--lcm-olive-dark) !important;
padding: 14px 0 !important;
}
/* ===== Formulario de contacto: tarjeta blanca en vez del "vidrio"
transparente original (que quedaba casi invisible sobre el fondo
claro), labels e inputs en grafito oscuro bien legibles, y el
placeholder con más contraste que el gris clarito por defecto del
navegador. ===== */
.contact-form{
background: var(--lcm-white) !important;
border: 1px solid var(--lcm-line) !important;
box-shadow: var(--lcm-shadow-sm) !important;
}
.contact-form label{
color: var(--lcm-ink) !important;
font-weight: 700 !important;
font-size: 13.5px !important;
letter-spacing: 0.01em;
}
.contact-form input, .contact-form textarea{
border-radius: 12px !important;
border: 1px solid var(--lcm-line) !important;
background: var(--lcm-white) !important;
color: var(--lcm-ink) !important;
font-weight: 500 !important;
transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{
color: var(--lcm-ink-soft) !important;
opacity: .85 !important;
}
.contact-form input:focus, .contact-form textarea:focus{
border-color: var(--lcm-olive) !important;
box-shadow: 0 0 0 3px rgba(91,107,51,.15) !important;
outline: none !important;
}
/* ===== Slider de reseñas / flechas: de navy a oliva ===== */
.lcm-t-arrow{ color: var(--lcm-olive-dark) !important; }
.lcm-t-dot.is-active{ background: var(--lcm-terracota) !important; }
/* ===== Hero: sacar la "tarjeta" del bloque de texto (H1 + checklist),
dejar solo texto plano. OJO: no tocar .hero-media (la tarjeta con el
slider de fotos), esa mantiene su fondo/borde/sombra ===== */
.hero-card:not(.hero-media){
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* ===== Checklist del hero: mismo mecanismo de aparición (0.5s stagger,
scroll) que el checklist de "sobre nosotros", pero en tono oscuro
porque el hero tiene fondo claro (el otro checklist es blanco sobre
fondo verde) ===== */
.lcm-checklist--hero li{
color: var(--lcm-ink) !important;
font-size: 16.5px !important;
font-weight: 600 !important;
}
.lcm-checklist--hero .lcm-check-ico{
background: var(--lcm-terracota) !important;
border: 1px solid var(--lcm-terracota) !important;
color: #FFFFFF !important;
}
/* ==========================================================================
ORDEN SUGERIDO DE SECCIONES (para la próxima pasada, una vez que
apruebes esta dirección visual — esto es solo la propuesta, no
está aplicado todavía):
1. Hero (como está)
2. "Elegí tu línea" (como está — es la puerta de entrada al catálogo,
tiene que estar arriba)
3. Secuencia "Para cada espacio" (subirla, justo después de las
líneas — es la pieza más visual/moderna del sitio, conviene
mostrarla temprano en vez de mezclada con el "sobre nosotros")
4. "Lo más pedido ahora mismo" (populares) — moverla acá, después
de la secuencia visual, como gancho de conversión antes de
seguir bajando
5. Título + bio ("Más de 30 años...") + reseñas/checklist — todo
el bloque de confianza junto
6. "Vení a buscar tu maceta" (mapa)
7. FAQ
8. Contacto
Avisame si querés que aplique este reordenamiento además de este
CSS, o si preferís primero validar los colores/tipografía en la
página tal como está.
========================================================================== */
/* ==========================================================================
.grid-4 — mismo patrón que .grid-3 de site.css (tarjetas "¿Buscás
otro material/macetas?"), pero para 4 tarjetas: se usa en la página
de vivero, que ahora linkea a las 4 líneas de macetas (antes le
faltaba la de plástico rotomoldeado). 4 columnas en desktop, 2 en
tablet, 1 en mobile.
========================================================================== */
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-4 > *{ min-width: 0; }
@media (max-width: 900px){
.grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
.grid-4{ grid-template-columns: 1fr; }
}
/* .grid-5 — la página de plantas naturales linkea a las 5 líneas
(vivero + las 4 de macetas), una tarjeta más que .grid-4. Con
auto-fit se acomodan solas sin dejar una tarjeta sola y descolgada
en la última fila (3+2 en desktop, en vez de 4+1). */
.grid-5{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.grid-5 > *{ min-width: 0; }
@media (max-width: 480px){
.grid-5{ grid-template-columns: 1fr; }
}
/* ==========================================================================
Etiqueta de precio en la tarjeta de producto (chip oscuro arriba a la
derecha de la foto, ".tag-price"): mismo problema de raíz que el
modal de abajo. El texto ("Desde", "$", el número, "UYU") no tiene
color propio, hereda var(--text), que acá arriba remapeamos a tono
oscuro para el resto del sitio. El fondo del chip sigue siendo
oscuro (rgba(0,0,0,.55), a propósito, para que resalte sobre
cualquier foto) → texto oscuro sobre fondo oscuro = ilegible. Se
fuerza blanco SOLO adentro de este chip, en las 6 páginas de
categoría. */
.tag-price,
.tag-price .price-prefix,
.tag-price .price-currency,
.tag-price .price-value,
.tag-price .price-unit{
color: rgba(255,255,255,.98) !important;
}
/* Mismo problema, mismo origen: el chip ".badge" (ícono + texto, ej.
"🪴 Maceta", "Cemento", "Jardinera") arriba a la izquierda de la
foto de cada producto, también tiene fondo oscuro fijo
(rgba(0,0,0,.35)) y el texto sin color propio hereda var(--text)
oscuro → se ve opaco/apagado. Se fuerza blanco acá también. */
.badge{
color: rgba(255,255,255,.98) !important;
}
/* ==========================================================================
Modal "Ver ficha de producto" y panel "Mi lista" (carrito): el fondo
de estos dos (#0d211c, verde bien oscuro) quedó igual que en el
diseño original — a propósito, combina bien con las fotos. El
problema es que el texto que NO tenía un color propio fijo (título,
descripción, specs chicas, etc.) usa var(--text)/var(--muted), que
más arriba en este mismo archivo remapeamos a tonos oscuros para el
resto del sitio (fondo blanco). Eso deja esos textos oscuros sobre
fondo oscuro = ilegibles. Acá se fuerza blanco/gris clarito SOLO
adentro de estos dos modales, sin tocar var(--text)/var(--muted)
globales (que siguen sirviendo bien al resto de la página). */
.lightbox-details h3,
.list-drawer-head h3,
.list-item-name,
.list-total-inline{
color: rgba(255,255,255,.98) !important;
}
.lightbox-details .product-features,
.qty-value,
.variant-group-title .variant-selected,
.variant-color-name,
.list-empty,
.list-item-spec,
.list-drawer-hint{
color: rgba(255,255,255,.82) !important;
}
/* ==========================================================================
Botones del modal de producto y del carrito ("Mi lista"): contorno
sutil + un brillo fino arriba (efecto "cromado" discreto), en vez del
plano que tenían. El brillo es un inset en la parte de arriba del
botón, como si le pegara una luz desde arriba — es lo que da esa
sensación de superficie pulida/moderna sin ponerlo llamativo.
Alcance: SOLO los botones de estos dos modales (agregar a la lista,
+/- cantidad, cerrar, sacar de la lista, pedir por WhatsApp) — no
toca los botones del resto del sitio. */
.lightbox-details .btn,
.list-drawer-footer .btn,
.qty-btn,
.lightbox-close,
.list-drawer-close,
.list-item-remove{
border: 1px solid rgba(255,255,255,.30) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 6px 16px rgba(0,0,0,.30) !important;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, filter .15s ease !important;
}
.lightbox-details .btn:hover,
.list-drawer-footer .btn:hover,
.qty-btn:hover:not(:disabled),
.lightbox-close:hover,
.list-drawer-close:hover,
.list-item-remove:hover{
border-color: rgba(255,255,255,.48) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 8px 22px rgba(0,0,0,.36) !important;
}
/* ==========================================================================
Footer ampliado: antes eran 2 columnas sueltas (marca + copyright);
ahora son 3 columnas (marca+contacto, líneas de producto, links del
sitio) más una franja final centrada con el copyright y el crédito
de "Desarrollado por Prometheia". Los links a las 6 líneas son
reales (no JS), a propósito: para SEO, es "link juice" real desde
TODAS las páginas hacia el resto del sitio. */
.lcm-footer{
padding: 44px 0 100px; /* 100px abajo: deja lugar al botón flotante de WhatsApp */
background: var(--lcm-olive-dark);
border-top: none;
color: rgba(255,255,255,.72);
font-size: 13.5px;
}
.lcm-footer-grid{
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 32px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 780px){
.lcm-footer-grid{ grid-template-columns: 1fr; gap: 26px; text-align: center; }
}
.lcm-footer-col strong{
display: block;
color: #fff;
font-size: 14px;
font-weight: 800;
letter-spacing: .01em;
margin-bottom: 12px;
}
.lcm-footer-brand{ font-size: 17px !important; font-family: "Playfair Display", ui-serif, Georgia, serif; }
.lcm-footer-col p{ margin: 0 0 6px; line-height: 1.7; }
.lcm-footer-col ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.lcm-footer-col a{
color: rgba(255,255,255,.72);
text-decoration: none;
}
.lcm-footer-col a:hover{
color: #fff;
text-decoration: underline;
}
/* Franja final: centrada y bien visible (fondo distinto al resto del
footer, texto blanco pleno) — a pedido explícito para el crédito
"Desarrollado por Prometheia". */
.lcm-footer-bottom{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 22px;
text-align: center;
color: rgba(255,255,255,.85);
font-size: 13px;
}
.lcm-footer-bottom a{
color: var(--lcm-terracota);
font-weight: 700;
text-decoration: none;
}
.lcm-footer-bottom a:hover{ text-decoration: underline; }
.lcm-footer-dot{ opacity: .5; }