/* LZR Portafolio · galería, visor y cotizador · Desarrollado por Lanzer (www.lanzer.co)
   Los colores salen de variables --lzr-* que puede definir el tema; si no,
   se usan los valores por defecto (fondo oscuro, acento rojo). */

.lzr-galeria, .lzr-cotizador, .lzr-visor {
	--_fondo: var(--lzr-fondo, #18181b);
	--_texto: var(--lzr-texto, #edebe6);
	--_texto-2: var(--lzr-texto-2, #a9a7a2);
	--_texto-3: var(--lzr-texto-3, #86847f);
	--_linea: var(--lzr-linea, rgba(237, 235, 230, .14));
	--_acento: var(--lzr-acento, #ba0000);
	--_acento-2: var(--lzr-acento-2, #f80000);
	--_mono: var(--lzr-mono, ui-monospace, Consolas, monospace);
	--_sans: var(--lzr-sans, system-ui, sans-serif);
	--_chaflan: var(--lzr-chaflan, polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)));
	--_ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Galería ---------- */
.lzr-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.lzr-filtro { padding: .75em 1.1em; border: 1px solid var(--_linea); background: transparent; color: var(--_texto-2); font-family: var(--_mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.lzr-filtro:hover { color: var(--_texto); border-color: var(--_texto-3); }
.lzr-filtro[aria-pressed="true"] { background: var(--_texto); border-color: var(--_texto); color: #0a0a0b; }
.lzr-filtro sup { margin-left: .35em; font-size: .85em; color: var(--_acento-2); }
.lzr-filtro[aria-pressed="true"] sup { color: var(--_acento); }
.lzr-galeria__lista { columns: 4 220px; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
.lzr-g-item { break-inside: avoid; margin: 0 0 10px; }
.lzr-g-item[hidden] { display: none; }
.lzr-g-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--_fondo); overflow: hidden; cursor: zoom-in; color: var(--_texto); text-align: left; font: inherit; }
.lzr-g-btn img { display: block; width: 100%; height: auto; filter: grayscale(.6) contrast(1.06) brightness(.88); transition: transform .8s var(--_ease), filter .5s; }
.lzr-g-btn:hover img, .lzr-g-btn:focus-visible img { filter: none; transform: scale(1.045); }
.lzr-g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; background: linear-gradient(transparent, rgba(10, 10, 11, .88)); font-size: .86rem; line-height: 1.3; transform: translateY(101%); transition: transform .45s var(--_ease); }
.lzr-g-btn:hover .lzr-g-cap, .lzr-g-btn:focus-visible .lzr-g-cap { transform: none; }
.lzr-g-cod { display: block; margin-bottom: 3px; font-family: var(--_mono); font-size: .64rem; letter-spacing: .14em; color: var(--_acento-2); }
.lzr-galeria__mas { display: flex; justify-content: center; margin-top: 28px; }
.lzr-galeria__mas:has(.lzr-mas[hidden]) { display: none; }
.lzr-mas { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 52px; padding: .9em 1.5em; border: 0; background: rgba(237, 235, 230, .4); color: var(--_texto); font: 700 .92rem/1 var(--_sans); font-stretch: 88%; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: background .25s, color .25s; }
.lzr-mas::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fjm-fondo-btn, #0a0a0b); clip-path: polygon(0 0, calc(100% - 11.4px) 0, 100% 11.4px, 100% 100%, 11.4px 100%, 0 calc(100% - 11.4px)); transition: opacity .25s; }
.lzr-mas:hover { background: var(--_texto); color: #0a0a0b; }
.lzr-mas:hover::before { opacity: 0; }
.lzr-mas[hidden] { display: none; }
.lzr-vacio { opacity: .7; }

/* ---------- Visor ---------- */
.lzr-visor { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 5, 6, .94); color: var(--_texto); overflow: hidden; inset: 0; }
.lzr-visor::backdrop { background: rgba(5, 5, 6, .95); }
.lzr-visor__fig { height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 76px 40px; }
.lzr-visor__fig img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; }
.lzr-visor__fig figcaption { margin-top: 16px; font-family: var(--_mono); font-size: .78rem; letter-spacing: .06em; color: var(--_texto-2); text-align: center; }
.lzr-visor button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid var(--_linea); background: rgba(10, 10, 11, .6); color: var(--_texto); cursor: pointer; transition: background .25s, border-color .25s; }
.lzr-visor button:hover { background: var(--_acento); border-color: var(--_acento); }
.lzr-visor__cerrar { top: 14px; right: 14px; }
.lzr-visor__ant { left: 14px; top: 50%; transform: translateY(-50%); }
.lzr-visor__sig { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Cotizador ---------- */
.lzr-cotizador { position: relative; padding: clamp(24px, 3.4vw, 48px); background: var(--_fondo); color: var(--_texto); clip-path: var(--_chaflan); }
.lzr-cot__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.lzr-cot__campo { display: flex; flex-direction: column; margin-bottom: 22px; }
.lzr-cot__campo label { font-family: var(--_mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--_texto-2); }
.lzr-cot__campo label span { color: var(--_acento-2); }
.lzr-cot__campo input, .lzr-cot__campo select, .lzr-cot__campo textarea { width: 100%; padding: .8em 0; border: 0; border-bottom: 1px solid var(--_linea); border-radius: 0; background: transparent; color: var(--_texto); font: 400 1.05rem/1.4 var(--_sans); transition: border-color .25s; box-shadow: none; }
.lzr-cot__campo textarea { resize: vertical; min-height: 110px; }
.lzr-cot__campo select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F80000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 18px; }
.lzr-cot__campo select option { background: var(--_fondo); color: var(--_texto); }
.lzr-cot__campo input::placeholder, .lzr-cot__campo textarea::placeholder { color: var(--_texto-3); }
.lzr-cot__campo input:focus, .lzr-cot__campo select:focus, .lzr-cot__campo textarea:focus { outline: 0; border-bottom-color: var(--_acento-2); }
.lzr-cot__campo [aria-invalid="true"] { border-bottom-color: var(--_acento-2); }
.lzr-cot__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.lzr-cot__pie small { color: var(--_texto-3); font-size: .85rem; max-width: 34ch; }
.lzr-cot__enviar { display: inline-flex; align-items: center; gap: .65em; min-height: 52px; padding: .9em 1.5em; border: 0; background: var(--_acento); color: #fff; font: 700 .92rem/1 var(--_sans); font-stretch: 88%; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: background .25s; }
.lzr-cot__enviar:hover { background: var(--_acento-2); }
.lzr-creditos { margin: 18px 0 0; font-family: var(--_mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--_texto-3); opacity: .6; }
.lzr-creditos a { color: inherit; text-decoration: none; }

@media (max-width: 960px) { .lzr-galeria__lista { columns: 3; } }
@media (max-width: 640px) {
	.lzr-galeria__lista { columns: 2; column-gap: 6px; }
	.lzr-g-item { margin-bottom: 6px; }
	.lzr-g-cap { display: none; }
	.lzr-cot__fila { grid-template-columns: 1fr; }
	.lzr-visor__fig { padding: 64px 12px 84px; }
	.lzr-visor__ant, .lzr-visor__sig { top: auto; bottom: 16px; transform: none; }
	.lzr-visor__ant { left: calc(50% - 60px); }
	.lzr-visor__sig { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
	.lzr-g-btn img, .lzr-g-cap { transition: none; }
}