/* ============================================================ LUZ — la cara pública (la portada y la tienda del vendedor) ------------------------------------------------------------ Se carga DESPUÉS de base.css y sólo actúa dentro de , así que no toca ni la app del vendedor ni el panel. La foto real del artículo es el fondo; encima va vidrio sobre un fondo con luz. La regla que costó caro en otra app: el adorno NUNCA puede esconder el contenido. La clase que desvanece la pone el JS (si el JS falla se ve todo) y hay un plazo que destapa pase lo que pase. Está en js/api.js → apareceAlBajar(). ============================================================ */ /* ---------- Portada con la foto de fondo ---------- */ .luz .portada { position: relative; isolation: isolate; min-height: min(78vh, 620px); display: flex; align-items: flex-end; padding: 120px 0 96px; overflow: hidden; } .luz .portada .foto { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; filter: saturate(1.08) contrast(1.04); } /* El velo hace legible el título; por eso NADA que deba leerse dentro de la foto (precio, insignias) cuelga de la foto. */ .luz .portada .velo { position: absolute; inset: 0; z-index: 0; background: linear-gradient(185deg, rgba(12,32,28,.20) 0%, rgba(12,32,28,.48) 52%, rgba(12,32,28,.78) 100%); } .luz .portada .dentro { position: relative; z-index: 1; color: #fff; } .luz .portada h1 { font-size: clamp(38px, 6vw, 74px); color: #fff; max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .luz .portada .lema { font-size: clamp(17px, 2.2vw, 21px); max-width: 46ch; margin-top: 14px; color: rgba(255,255,255,.92); } .luz .portada .antetitulo { display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.86); } .luz .portada .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } /* Las cifras de vidrio, montadas sobre el borde de la portada. */ .luz .cifras { position: relative; z-index: 2; margin: -46px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .luz .cifras .cifra { background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sombra-2); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } .luz .cifras .cifra b { display: block; font-size: 27px; letter-spacing: -.03em; } .luz .cifras .cifra span { font-size: 13.5px; color: var(--suave); font-weight: 600; } /* ---------- Secciones ---------- */ .luz .seccion { padding: 56px 0; } .luz .seccion h2 { font-size: clamp(26px, 3.4vw, 38px); } .luz .seccion .antetitulo { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-hondo); } .luz .seccion > p { max-width: 60ch; color: var(--suave); font-size: 17px; } /* ---------- Las tarjetas de artículo: la foto grande arriba ---------- */ .luz .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; margin-top: 26px; } .luz .articulo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-1); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; } .luz .articulo:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); } .luz .articulo .imagen { position: relative; aspect-ratio: 4/3; background: linear-gradient(145deg, var(--luz-campo), var(--luz-sol)); } .luz .articulo .imagen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.04); } .luz .articulo .cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .luz .articulo h3 { font-size: 18.5px; } .luz .articulo .lana { font-size: 25px; font-weight: 800; color: var(--acento-hondo); letter-spacing: -.03em; } .luz .articulo .resumen { font-size: 14.5px; color: var(--suave); margin: 0; flex: 1; } .luz .articulo .btn { margin-top: 6px; } /* ---------- La ficha del vendedor ---------- */ .luz .quien-vende { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--sombra-2); } .luz .quien-vende .retrato { width: 64px; height: 64px; border-radius: 22px; flex: none; display: grid; place-items: center; background: linear-gradient(145deg, var(--acento-claro), var(--acento-hondo)); color: #fff; font-size: 27px; font-weight: 800; box-shadow: var(--brillo); } .luz .quien-vende .datos { flex: 1; min-width: 200px; } .luz .quien-vende .datos b { font-size: 21px; display: block; } /* ---------- Barra fija del celular ---------- */ .luz .barra-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--vidrio-fuerte); border-top: 1px solid var(--vidrio-borde); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } .luz .barra-abajo .btn { width: 100%; } @media (max-width: 720px) { .luz .barra-abajo { display: block; } /* body.luz, no «.luz body»: el body ES el que trae la clase. */ body.luz { padding-bottom: 84px; } /* En el celular no van dos botones de WhatsApp: si está la barra fija abajo, el de arriba estorba. */ .luz .quien-vende .btn.wa { display: none; } } /* ---------- Pie ---------- */ .luz .pie { padding: 40px 0 60px; color: var(--suave); font-size: 13.5px; border-top: 1px solid var(--linea); margin-top: 40px; }