/*======================

LOS ROBLES
METAL + ALUMINIO

=======================*/

:root{

--bg:#ECEAE7;
--bg2:#DAD7D2;
--bg3:#C3BEB8;

--metal:#202020;
--metal2:#343434;

--steel:#767B80;
--steel2:#A2A8AE;

--accent:#8C6A4D;
--accent2:#B18A68;

--text:#171717;

--soft:#666A6E;

--white:#F7F7F5;

}

/*===================

RESET

====================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

overflow-x:hidden;

font-family:

system-ui,
sans-serif;

background:

linear-gradient(

180deg,

#ECEAE7,

#D8D5D0

);

color:

var(--text);

}

/*===================

NAV

====================*/

nav{

position:fixed;

top:20px;

left:50%;

transform:

translateX(-50%);

width:

min(
1600px,
95%
);

height:84px;

padding:

0 38px;

display:flex;

align-items:center;

justify-content:

space-between;

background:

linear-gradient(

135deg,

rgba(
34,
34,
34,
.84
),

rgba(
64,
64,
64,
.74
)

);

backdrop-filter:

blur(20px);

border:

1px solid

rgba(
255,
255,
255,
.08
);

border-radius:

999px;

box-shadow:

0 20px 60px

rgba(
0,
0,
0,
.18
);

z-index:999;

}

.logo img{

height:60px;

display:block;

}

/*===================

MENU TEST

====================*/

.menu{

display:flex;

align-items:center;

gap:40px;

}

.menu a{

position:relative;

display:inline-block;

text-decoration:none;

color:white;

font-size:14px;

letter-spacing:.08em;

text-transform:uppercase;

padding:

10px
0;

transition:

.25s;

}

/* LINEA ROJA TEST */

.menu a::after{

content:"";

position:absolute;

left:50%;

bottom:-14px;

transform:

translateX(-50%);

width:0;

height:4px;

background:

red;

transition:

width .28s ease;

z-index:9999;

}

.menu a:hover{

color:white;

}

.menu a:hover::after{

width:100%;

}

/*===================

HERO

====================*/

.hero{

height:100vh;

display:flex;

align-items:center;

padding:

0 8%;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(
14,
14,
14,
.96
) 0%,

rgba(
30,
30,
30,
.92
) 35%,

rgba(
60,
60,
60,
.82
) 70%,

rgba(
130,
130,
130,
.58
) 100%

),

url("img/hero.png");

background-size:cover;

background-position:center;

}

.hero::after{

content:"";

position:absolute;

left:-15%;

top:-15%;

width:1200px;

height:1200px;

background:

radial-gradient(

circle,

rgba(
180,
180,
180,
.10
),

transparent

);

}

.hero-content{

position:relative;

z-index:2;

max-width:760px;

}

.hero-content p{

font-size:13px;

letter-spacing:.45em;

color:

rgba(
255,
255,
255,
.72
);

margin-bottom:20px;

}

.hero h1{

font-size:

clamp(
4rem,
8vw,
7rem
);

line-height:.9;

font-weight:600;

color:white;

max-width:760px;

margin-bottom:44px;

}

.hero h1 span{

color:

var(--accent2);

}

.hero-sub{

font-size:20px;

line-height:1.8;

max-width:650px;

color:

rgba(
255,
255,
255,
.74
);

}

/*===================

BOTONES

====================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:42px;

height:74px;

padding:

0 42px;

border-radius:999px;

background:

linear-gradient(

135deg,

#666,

#8E9398

);

color:white;

text-decoration:none;

font-weight:600;

transition:.25s;

box-shadow:

0 20px 60px

rgba(
0,
0,
0,
.16
);

}

.btn:hover{

transform:

translateY(-3px);

}

/*===================

SECCIONES

====================*/

section{

padding:

140px 8%;

}

#trabajos{

background:

linear-gradient(

180deg,

#E2DFDB,

#D0CCC7

);

}

.catalogo{

background:

linear-gradient(

180deg,

#D7D4CF,

#C5C1BC

);

}

h1,
h2{

font-weight:600;

}

h2{

font-size:

clamp(
2.6rem,
5vw,
4rem
);

margin-bottom:60px;

color:#202020;

}

/*===================

GALERIA

====================*/

.galeria,
.catalogo-grid{

display:grid;

grid-template-columns:

repeat(
auto-fill,
minmax(
420px,
1fr
));

gap:20px;

}

.galeria img,
/*===================

CATALOGO — MOSTRAR IMAGEN ENTERA

====================*/

.catalogo-grid img{

width:100%;

display:block;

aspect-ratio:

4/5;

object-fit:

cover;

object-position:

center;

background:

linear-gradient(

180deg,

rgba(255,248,240,.45),

rgba(220,205,190,.35)

);

border-radius:22px;

}

/*===================

ANIMACIONES

====================*/

@keyframes aparecer{

from{

opacity:0;

transform:

translateY(20px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

.hero-content{

animation:

aparecer

1s ease;

}


#contacto{

background:

linear-gradient(

180deg,

#B88F66,

#9F7856

);

}

h1,
h2{

font-weight:600;

}

h2{

font-size:

clamp(
2.4rem,
5vw,
4rem
);

margin-bottom:60px;

color:#2D2118;

}

/*===================

IMAGENES

====================*/

.galeria,
.catalogo-grid{

display:grid;

grid-template-columns:

repeat(
auto-fill,
minmax(
420px,
1fr
));

gap:20px;

}

.galeria img,
.catalogo-grid img{

width:100%;

display:block;

aspect-ratio:1;

object-fit:cover;

border-radius:20px;

box-shadow:

0 20px 60px

rgba(
50,
25,
10,
.10
);

content-visibility:auto;

contain-intrinsic-size:800px 800px;

}

/*===================

CONTACTO

====================*/

.contacto{

max-width:1100px;

margin:auto;

padding:60px;

background:

linear-gradient(

135deg,

var(--metal),

var(--metal2)

);

border-radius:30px;

display:flex;

justify-content:space-between;

align-items:center;

color:white;

}

.contacto p{

font-size:13px;

letter-spacing:.2em;

opacity:.6;

margin-bottom:12px;

}

.contacto h2{

color:white;

margin:0;

font-size:

clamp(
2rem,
4vw,
3rem
);

}

.wsp{

height:64px;

padding:0 36px;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(

135deg,

#25D366,

#17934A

);

color:white;

text-decoration:none;

border-radius:999px;

}

/*===================

FOOTER

====================*/

footer{

background:

linear-gradient(

180deg,

#241B15,

#17110D

);

padding:90px 8%;

display:flex;

justify-content:space-between;

align-items:center;

color:

rgba(
255,
255,
255,
.65
);

}

footer div:first-child{

font-size:28px;

color:white;

}

/*===================

RESPONSIVE

====================*/

@media(max-width:900px){

.menu{

display:none;

}

.hero h1{

font-size:4rem;

}

.contacto{

padding:40px;

flex-direction:column;

align-items:flex-start;

gap:25px;

}

.galeria,
.catalogo-grid{

grid-template-columns:1fr;

}

footer{

flex-direction:column;

gap:20px;

}

}

/*===================

CATALOGO INFO

====================*/

.catalogo .titulo{

text-align:center;

margin-bottom:70px;

}

.catalogo .titulo p{

font-size:13px;

letter-spacing:.35em;

color:var(--wood);

margin-bottom:18px;

}

.catalogo .titulo h1{

font-size:

clamp(
4rem,
7vw,
6rem
);

line-height:.9;

color:#2A1D14;

}

.catalogo-info{

max-width:900px;

margin:

0 auto 90px;

padding:

70px
60px;

background:

linear-gradient(

135deg,

rgba(
255,
245,
235,
.35
),

rgba(
255,
255,
255,
.18
)

);

backdrop-filter:

blur(18px);

border-radius:32px;

text-align:center;

border:

1px solid

rgba(
120,
90,
60,
.10
);

}

.catalogo-info p{

font-size:12px;

letter-spacing:.35em;

color:var(--wood);

margin-bottom:18px;

}

.catalogo-info h2{

font-size:

clamp(
2rem,
4vw,
3.2rem
);

line-height:1.1;

margin-bottom:28px;

color:#2A1D14;

}

.catalogo-info span{

display:block;

max-width:720px;

margin:auto;

font-size:18px;

line-height:1.9;

color:var(--soft);

}

/* móvil */

@media(max-width:900px){

.catalogo-info{

padding:40px 28px;

}

.catalogo-info span{

font-size:16px;

}

}



/*===================

FOOTER ELEGANTE

====================*/

footer{

background:

linear-gradient(

180deg,

#241B15,

#15100D

);

padding:

80px
8%;

display:flex;

justify-content:

space-between;

align-items:center;

}

.footer-logo{

font-size:32px;

font-weight:600;

letter-spacing:.04em;

color:white;

}

/* INSTAGRAM */

/* INSTAGRAM MAS ELEGANTE */

.footer-instagram{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

background:

rgba(
255,
255,
255,
.04
);

border-radius:16px;

transition:.25s;

box-shadow:

0 14px 34px

rgba(
0,
0,
0,
.18
);

}

.footer-instagram img{

width:18px;

height:18px;

object-fit:contain;

display:block;

filter:none;

opacity:1;

}

.footer-instagram:hover{

transform:

translateY(-2px);

background:

rgba(
255,
255,
255,
.07
);

}

.footer-instagram img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}



/* RESPONSIVE */

@media(max-width:900px){

footer{

flex-direction:column;

gap:26px;

}

.footer-logo{

font-size:26px;

}

.footer-instagram{

width:74px;

height:74px;

}

}



/*======================

ANIMACIONES PREMIUM

=======================*/

/* HERO aparece */

.hero-content{

animation:

heroFade

1.2s

cubic-bezier(
.2,
.8,
.2,
1
);

}

@keyframes heroFade{

from{

opacity:0;

transform:

translateY(50px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

/* Logo */

.logo{

animation:

logoAppear

1s

ease;

}

@keyframes logoAppear{

from{

opacity:0;

transform:

translateX(-20px);

}

to{

opacity:1;

transform:none;

}

}

/* Navbar flotante */

nav{

animation:

navDrop

.9s

ease;

}

@keyframes navDrop{

from{

opacity:0;

transform:

translate(
-50%,
-40px
);

}

to{

opacity:1;

transform:

translateX(-50%);

}

}

/* Links navbar */

.menu a{

position:relative;

transition:

.25s;

}

.menu a:hover{

color:

var(--wood);

}

.menu a::after{

content:"";

position:absolute;

left:50%;

bottom:-8px;

width:0;

height:2px;

background:

linear-gradient(

90deg,

var(--wood),

#d7a16d

);

transform:

translateX(-50%);

transition:

.35s;

}

.menu a:hover::after{

width:100%;

}

/* Botón hero */

.btn{

transition:

.3s;

box-shadow:

0 10px 30px

rgba(
140,
90,
50,
.20
);

}

/* BOTON HERO */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

height:74px;

padding:

0 44px;

border-radius:999px;

background:

linear-gradient(

135deg,

#5F656B,

#8F959B

);

color:white;

text-decoration:none;

font-weight:600;

transition:

transform .25s,
background .25s,
box-shadow .25s;

box-shadow:

0 20px 50px

rgba(
0,
0,
0,
.16
);

}

.btn:hover{

transform:

translateY(-3px);

background:

linear-gradient(

135deg,

#72787E,

#A7ADB2

);

box-shadow:

0 28px 70px

rgba(
110,
115,
120,
.20
);

}

/*===================

CONTACTO PREMIUM
METAL + ALUMINIO

====================*/

#contacto{

padding:

180px
8%
120px;

background:

linear-gradient(

180deg,

#BDB9B3,

#7A7671,

#181818

);

}

/* BLOQUE */

.contacto{

max-width:1400px;

margin:auto;

padding:

90px
100px;

display:flex;

justify-content:

space-between;

align-items:center;

gap:100px;

position:relative;

overflow:hidden;

background:

linear-gradient(

135deg,

rgba(
28,
28,
28,
.98
),

rgba(
48,
48,
48,
.92
)

);

border:

1px solid

rgba(
255,
255,
255,
.06
);

border-radius:42px;

box-shadow:

0 60px 150px

rgba(
0,
0,
0,
.22
);

}

/* BRILLO METAL */

.contacto::before{

content:"";

position:absolute;

right:-240px;

top:-260px;

width:760px;

height:760px;

background:

radial-gradient(

circle,

rgba(
180,
180,
180,
.08
),

transparent

);

}

/* LINEA METALICA */

.contacto::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(
255,
255,
255,
.18
),

transparent

);

}

/* TEXTO */

.contacto-texto{

position:relative;

z-index:2;

max-width:700px;

}

.contacto-texto p{

font-size:12px;

letter-spacing:.38em;

text-transform:uppercase;

color:

rgba(
255,
255,
255,
.42
);

margin-bottom:18px;

}

.contacto-texto h2{

font-size:

clamp(
2.8rem,
5vw,
4.5rem
);

line-height:.95;

margin-bottom:26px;

color:white;

max-width:700px;

}

.contacto-texto span{

display:block;

max-width:620px;

font-size:18px;

line-height:1.9;

color:

rgba(
255,
255,
255,
.68
);

}

/* BOTON */

.wsp{

position:relative;

z-index:2;

height:78px;

padding:

0
38px;

display:flex;

align-items:center;

justify-content:center;

gap:14px;

background:

linear-gradient(

135deg,

#25D366,

#1DB458

);

border-radius:999px;

text-decoration:none;

box-shadow:

0 25px 70px

rgba(
37,
211,
102,
.22
);

transition:

transform .25s,
box-shadow .25s;

}

.wsp:hover{

transform:

translateY(-4px);

box-shadow:

0 35px 90px

rgba(
37,
211,
102,
.30
);

}

.wsp img{

width:28px;

height:28px;

object-fit:contain;

display:block;

}

.wsp span{

font-size:14px;

font-weight:600;

letter-spacing:.12em;

text-transform:uppercase;

color:white;

}

/* RESPONSIVE */

@media(max-width:900px){

#contacto{

padding:

120px
8%
90px;

}

.contacto{

padding:

52px
34px;

flex-direction:column;

align-items:flex-start;

gap:38px;

}

.contacto-texto h2{

font-size:3rem;

}

.contacto-texto span{

font-size:16px;

line-height:1.8;

}

.wsp{

width:100%;

height:74px;

justify-content:center;

}

}

/*===================

BOTON WHATSAPP

====================*/

.wsp{

position:relative;

z-index:2;

height:78px;

padding:

0
36px;

display:flex;

align-items:center;

justify-content:center;

gap:14px;

background:

linear-gradient(

135deg,

#25D366,

#1EB858

);

border-radius:999px;

text-decoration:none;

box-shadow:

0 25px 70px

rgba(
37,
211,
102,
.26
);

transition:

transform .25s,
box-shadow .25s;

}

.wsp:hover{

transform:

translateY(-4px);

box-shadow:

0 35px 90px

rgba(
37,
211,
102,
.34
);

}

.wsp img{

width:30px;

height:30px;

object-fit:contain;

display:block;

}

.wsp span{

color:white;

font-size:14px;

font-weight:600;

letter-spacing:.14em;

text-transform:uppercase;

}

/*===================

RESPONSIVE

====================*/

@media(max-width:900px){

#contacto{

padding:

120px
8%
90px;

}

.contacto{

padding:

50px
36px;

flex-direction:column;

align-items:flex-start;

gap:36px;

}

.contacto-texto h2{

font-size:3rem;

}

.contacto-texto span{

font-size:16px;

}

.wsp{

width:100%;

justify-content:center;

}

}

/* Títulos */

h1,
h2{

animation:

titleReveal

1s;

}

@keyframes titleReveal{

from{

opacity:0;

transform:

translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

/* Scroll elegante */

html{

scroll-behavior:smooth;

}

/* Hero respira */

.hero::after{

animation:

warmLight

8s

ease-in-out

infinite;

}

@keyframes warmLight{

0%{

transform:

translateX(0);

opacity:.18;

}

50%{

transform:

translateX(40px);

opacity:.26;

}

100%{

transform:

translateX(0);

opacity:.18;

}

}

/*===================

FOOTER PREMIUM

====================*/

footer{

position:relative;

overflow:hidden;

padding:

95px
8%;

display:flex;

justify-content:

space-between;

align-items:flex-end;

gap:50px;

background:

linear-gradient(

180deg,

#1C1C1C,

#111

);

}

/* brillo metal */

footer::after{

content:"";

position:absolute;

left:-250px;

bottom:-350px;

width:900px;

height:900px;

background:

radial-gradient(

circle,

rgba(
180,
180,
180,
.05
),

transparent

);

}

.footer-left{

position:relative;

z-index:2;

}

.footer-logo{

font-size:34px;

font-weight:600;

color:white;

margin-bottom:14px;

}

.footer-copy{

font-size:14px;

letter-spacing:.16em;

text-transform:uppercase;

color:

rgba(
255,
255,
255,
.55
);

margin-bottom:18px;

}

.footer-nota{

max-width:560px;

font-size:14px;

line-height:1.9;

color:

rgba(
255,
255,
255,
.40
);

margin-bottom:30px;

}

.footer-copyright{

font-size:13px;

color:

rgba(
255,
255,
255,
.28
);

}

/* INSTAGRAM */

.footer-instagram{

position:relative;

z-index:2;

width:66px;

height:66px;

display:flex;

align-items:center;

justify-content:center;

background:

rgba(
255,
255,
255,
.05
);

border-radius:18px;

transition:.25s;

box-shadow:

0 16px 40px

rgba(
0,
0,
0,
.18
);

}

.footer-instagram:hover{

transform:

translateY(-3px);

background:

rgba(
255,
255,
255,
.08
);

}

.footer-instagram img{

width:24px;

height:24px;

object-fit:contain;

display:block;

filter:none;

opacity:1;

}

/* MOVIL */

@media(max-width:900px){

footer{

flex-direction:column;

align-items:flex-start;

gap:36px;

}

.footer-logo{

font-size:28px;

}

.footer-instagram{

width:60px;

height:60px;

}

}


/*===================

NAV MOBILE

====================*/

@media(max-width:900px){

nav{

height:72px;

padding:

0 20px;

top:14px;

}

.logo img{

height:46px;

}

.menu{

display:flex;

gap:18px;

flex-wrap:nowrap;

}

.menu a{

font-size:11px;

letter-spacing:.05em;

}

}

/*===================

HERO CELULAR
FOCO A LA DERECHA

====================*/

@media(max-width:900px){

.hero::before{

background-position:

75% center;

background-size:

cover;

}

}


/*===================

ARREGLO CATALOGO MOVIL

====================*/

/* nunca permitir scroll lateral */

html,
body{

max-width:100%;

overflow-x:hidden;

}

/* sección */

.catalogo{

overflow:hidden;

}

/* grilla */

.catalogo-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
160px,
1fr
));

gap:14px;

width:100%;

}

/* imágenes */

.catalogo-grid img{

width:100%;

height:auto;

display:block;

object-fit:contain;

aspect-ratio:auto;

max-width:100%;

padding:0;

border-radius:18px;

}

/* CELULAR */

@media(max-width:900px){

.catalogo{

padding:

130px
5%
90px;

}

.catalogo-grid{

grid-template-columns:

1fr
1fr;

gap:10px;

}

.catalogo-grid img{

border-radius:14px;

}

}

/* CELULAR MUY CHICO */

@media(max-width:500px){

.catalogo-grid{

grid-template-columns:

1fr;

}

}

/*===================

CATALOGO FINAL

====================*/

.catalogo-grid{

display:grid;

grid-template-columns:

repeat(
auto-fill,
minmax(
320px,
1fr
));

gap:20px;

align-items:start;

}

/* TARJETA */

.catalogo-grid img{

width:100%;

display:block;

aspect-ratio:

4/5;

object-fit:

cover;

object-position:

center;

border-radius:20px;

background:

#D9CCBF;

box-shadow:

0 16px 45px

rgba(
0,
0,
0,
.08
);

/* rendimiento */

content-visibility:auto;

contain-intrinsic-size:

800px 1000px;

}

/* TABLET */

@media(max-width:900px){

.catalogo-grid{

grid-template-columns:

repeat(
2,
1fr
);

gap:12px;

}

.catalogo-grid img{

aspect-ratio:

1/1;

border-radius:16px;

}

}

/* CELULAR */

@media(max-width:600px){

.catalogo{

padding:

120px
6%
90px;

}

.catalogo-grid{

grid-template-columns:

repeat(
2,
1fr
);

gap:10px;

}

.catalogo-grid img{

aspect-ratio:

1/1;

border-radius:14px;

}

}

@media(max-width:700px){

.catalogo-grid{

grid-template-columns:

1fr 1fr;

gap:10px;

}

.catalogo-grid img{

aspect-ratio:

1/1;

border-radius:16px;

}

}

/*===================

COMPATIBILIDAD NAVEGADOR CELULAR

====================*/

@media(max-width:700px){

.catalogo-grid{

grid-template-columns:

1fr 1fr;

gap:10px;

}

/* tarjeta fija */

.catalogo-grid img{

width:100%;

height:180px;

display:block;

object-fit:cover;

border-radius:16px;

padding:0;

}

}