html,body{
display: flex;
flex-direction: column;
margin: 0;
line-height: 1.5;
background-color: #ffffff;
color: black;
scrollbar-width: thin;
scrollbar-color: #0E2340 #ffffff;
z-index: 0;
}
/* Barra para llamar */
.llamar
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
position:fixed;
background-color: #050E1B;
height: 4Vh;
z-index: 3;
}
.llamar b
{
color:#FFB9BC ;
}
.llamar a
{
color: white;
font-family: "Heebo", sans-serif;
text-decoration: none;
transition: 500ms;
}
.llamar a:hover
{
transition: 500ms;
color: rgb(119, 148, 175);
}
.numero
{
color: rgb(0, 0, 0);
font-family: "Heebo", sans-serif;
}
/* */
/* Navegación */
nav{
/* background-color: white; */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 10vh;
padding: 0px 10%;
box-sizing: border-box;
letter-spacing: 2px;
/* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); */
position: fixed;
top: 4vh;
z-index: 3;
transition: 500ms;
}
nav.scrolled
{
transition: 500ms;
background-color: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
nav.scrolled ul li a
{
color: #C11A22;
}
nav.scrolled .active
{
color: white;
}
#logo{
display: flex;
flex-direction: row;
padding: 0px 0;
}
#logo img{
margin-top: 3px;
}
#logo a{
text-decoration: none;
margin-top: 20px;
margin-left: 20px;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 13px;
display: flex;
}
ul li a {
font-family:"Gugi", sans-serif;
transition: 900ms;
display: block;
color: #ffffff;
padding: 8px 16px;
font-size: 18px;
text-decoration: none;
}
ul li a:hover {
transition: 900ms;
border-bottom: solid 2px #ffffff;
}
ul li a:active {
border-bottom: solid 2px #0E2340;
}
.active{
background-color:#C11A22;
color: white;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.658);
border-radius: 10px;
font-weight:300;
}
/* .active:hover{
background-color: #0E2340;
} */
/*iconos del nav cuando es pequeño*/
.btn-nav-phone{
border-radius: 10px;
padding: 1px 12px;
font-size: 3rem;
font-weight: bold;
text-decoration: none;
color: #C11A22;
}
.btn-nav-phone:hover{
cursor: pointer;
}
/**/
/*barra lateral de celular*/
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.3s;
padding-top: 15px;
text-align: center;
background-color: #ffffff;
}
.sidenav a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 22px;
color: #C11A22;
display: block;
transition: 500ms;
font-family:"Gugi", sans-serif;
}
.sidenav a:hover{
transition: 500ms;
background-color: #C11A22;
color: white;
}
.sidenav .closebtn{
text-align: right;
font-size: 50px;
margin-right: 30px;
color: #C11A22;
}
/* */
/**/
/* ===================================
PROJECT FACTS
=================================== */
.project-facts{
padding:120px 5%;
background:#F7F8FA;
}
.facts-heading{
max-width:850px;
margin:auto auto 70px;
text-align:center;
}
.facts-tag{
display:inline-block;
padding:10px 20px;
background:#050E1B;
color:#fff;
border-radius:30px;
letter-spacing:2px;
font-size:.85rem;
margin-bottom:20px;
}
.facts-heading h2{
color:#050E1B;
margin-bottom:20px;
}
.facts-heading p{
color:#666;
font-size:1.1rem;
line-height:1.8;
}
/* GRID */
.facts-grid{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:30px;
}
/* CARD */
.fact-card{
position:relative;
background:#fff;
padding:40px;
border-radius:30px;
overflow:hidden;
box-shadow:
0 15px 35px rgba(0,0,0,.06);
transition:.4s;
}
.fact-card:hover{
transform:translateY(-10px);
box-shadow:
0 25px 60px rgba(0,0,0,.12);
}
/* DECORATIVE NUMBER */
.fact-number{
position:absolute;
top:-10px;
right:20px;
font-size:5rem;
font-weight:900;
color:
rgba(193,26,34,.07);
line-height:1;
}
/* CONTENT */
.fact-card h3{
color:#050E1B;
margin-bottom:15px;
position:relative;
z-index:2;
}
.fact-card p{
color:#555;
line-height:1.7;
position:relative;
z-index:2;
}
.reveal-facts{
opacity:0;
transform:translateY(50px);
transition:1s;
}
.reveal-facts.activee{
opacity:1;
transform:none;
}
/* ===================================
PROJECT OVERVIEW
=================================== */
.project-overview{
padding:120px 5%;
background:#ffffff;
}
.overview-container{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:
1fr 1fr;
gap:80px;
align-items:center;
}
/* TAG */
.overview-tag{
display:inline-block;
padding:10px 20px;
border-radius:30px;
background:#050E1B;
color:white;
font-size:.85rem;
letter-spacing:2px;
margin-bottom:25px;
}
/* TITLE */
.overview-content h2{
color:#050E1B;
margin-bottom:30px;
line-height:1.1;
}
.overview-content h2 span{
color:#C11A22;
}
/* TEXT */
.overview-content p{
margin-bottom:25px;
color:#555;
line-height:1.9;
font-size:1.05rem;
}
/* IMAGE */
.overview-image{
position:relative;
}
.overview-image img{
width:100%;
display:block;
border-radius:30px;
box-shadow:
0 25px 60px rgba(0,0,0,.12);
transition:.6s;
}
.overview-image:hover img{
transform:scale(1.02);
}
/* DECORATIVE BORDER */
.overview-image::before{
content:"";
position:absolute;
top:-20px;
left:-20px;
width:100%;
height:100%;
border:2px solid rgba(193,26,34,.15);
border-radius:30px;
z-index:-1;
}
.reveal-overview{
opacity:0;
transform:translateY(60px);
transition:1s;
}
.reveal-overview.activee{
opacity:1;
transform:none;
}
/* ===================================
FEATURED GALLERY
=================================== */
.featured-gallery{
padding:120px 5%;
background:#F7F8FA;
}
/* HEADER */
.gallery-header{
max-width:900px;
margin:auto auto 70px;
text-align:center;
}
.gallery-tag{
display:inline-block;
padding:10px 20px;
background:#050E1B;
color:#fff;
border-radius:30px;
letter-spacing:2px;
font-size:.85rem;
margin-bottom:20px;
}
.gallery-header h2{
color:#050E1B;
margin-bottom:20px;
line-height:1.1;
}
.gallery-header h2 span{
color:#C11A22;
}
.gallery-header p{
color:#666;
line-height:1.8;
max-width:750px;
margin:auto;
}
/* FEATURE IMAGE */
.gallery-feature{
max-width:1400px;
margin:auto auto 40px;
overflow:hidden;
border-radius:35px;
box-shadow:
0 20px 60px rgba(0,0,0,.12);
}
.gallery-feature img{
width:100%;
display:block;
transition:1s;
}
.gallery-feature:hover img{
transform:scale(1.03);
}
/* GRID */
.gallery-grid{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:25px;
}
.gallery-item{
overflow:hidden;
border-radius:25px;
background:#fff;
box-shadow:
0 10px 30px rgba(0,0,0,.08);
cursor:pointer;
}
.gallery-item img{
width:100%;
height:320px;
object-fit:cover;
display:block;
transition:.8s;
}
.gallery-item:hover img{
transform:scale(1.08);
}
.gallery-lightbox{
position:fixed;
inset:0;
background:
rgba(5,14,27,.95);
display:flex;
justify-content:center;
align-items:center;
opacity:0;
visibility:hidden;
transition:.4s;
z-index:9999;
}
.gallery-lightbox.activee{
opacity:1;
visibility:visible;
}
.gallery-lightbox img{
max-width:90%;
max-height:85vh;
border-radius:20px;
}
.gallery-close{
position:absolute;
top:30px;
right:40px;
color:white;
font-size:2rem;
cursor:pointer;
}
.reveal-gallery{
opacity:0;
transform:translateY(60px);
transition:1s;
}
.reveal-gallery.activee{
opacity:1;
transform:none;
}
/* ===================================
INSTALLATION PROCESS
=================================== */
.installation-process{
position:relative;
padding:120px 5%;
background:
linear-gradient(
135deg,
#050E1B 0%,
#091729 50%,
#050E1B 100%
);
overflow:hidden;
}
/* ===================================
DECORATIVE BACKGROUND
=================================== */
.installation-process::before{
content:"";
position:absolute;
width:500px;
height:500px;
top:-200px;
right:-200px;
background:
radial-gradient(
rgba(193,26,34,.12),
transparent 70%
);
}
.installation-process::after{
content:"";
position:absolute;
width:450px;
height:450px;
bottom:-200px;
left:-200px;
background:
radial-gradient(
rgba(255,255,255,.04),
transparent 70%
);
}
/* ===================================
HEADER
=================================== */
.process-header{
position:relative;
z-index:2;
max-width:900px;
margin:auto auto 90px;
text-align:center;
}
.process-tag{
display:inline-block;
padding:12px 22px;
border-radius:50px;
background:
rgba(255,255,255,.08);
backdrop-filter:blur(10px);
border:
1px solid rgba(255,255,255,.12);
color:white;
font-size:.85rem;
letter-spacing:2px;
margin-bottom:20px;
}
.process-header h2{
color:white;
margin-bottom:20px;
}
.process-header h2 span{
color:#C11A22;
}
.process-header p{
color:#B8C0CC;
line-height:1.9;
max-width:750px;
margin:auto;
}
/* ===================================
TIMELINE
=================================== */
.process-timeline{
position:relative;
z-index:2;
max-width:1200px;
margin:auto;
display:flex;
flex-direction:column;
gap:30px;
}
/* ===================================
STEP
=================================== */
.process-step{
display:grid;
grid-template-columns:
120px 1fr;
gap:30px;
align-items:stretch;
}
/* ===================================
NUMBER
=================================== */
.process-marker{
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
.process-marker span{
font-size:4rem;
font-weight:900;
line-height:1;
color:
rgba(193,26,34,.22);
}
/* ===================================
CARD
=================================== */
.process-content{
position:relative;
background:
rgba(255,255,255,.05);
backdrop-filter:blur(12px);
border:
1px solid rgba(255,255,255,.08);
border-left:
4px solid #C11A22;
padding:35px 40px;
border-radius:24px;
transition:.4s;
overflow:hidden;
}
/* subtle highlight */
.process-content::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
120deg,
rgba(255,255,255,.03),
transparent
);
pointer-events:none;
}
.process-content:hover{
transform:translateY(-8px);
border-color:
rgba(255,255,255,.15);
box-shadow:
0 25px 50px rgba(0,0,0,.25);
}
/* ===================================
TEXT
=================================== */
.process-content h3{
color:white;
margin-bottom:15px;
}
.process-content p{
color:#B8C0CC;
line-height:1.9;
margin:0;
}
/* ===================================
REVEAL
=================================== */
.reveal-process{
opacity:0;
transform:translateY(60px);
transition:
opacity .9s ease,
transform .9s ease;
}
.reveal-process.activee{
opacity:1;
transform:none;
}
/* ===================================
BENEFITS
=================================== */
.project-benefits{
position:relative;
padding:120px 5%;
background:#050E1B;
overflow:hidden;
}
/* ===================================
BACKGROUND EFFECT
=================================== */
.project-benefits::before{
content:"";
position:absolute;
top:-200px;
left:-200px;
width:500px;
height:500px;
background:
radial-gradient(
rgba(193,26,34,.10),
transparent 70%
);
}
/* ===================================
LAYOUT
=================================== */
.benefits-container{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:
1fr 1fr;
gap:80px;
align-items:center;
position:relative;
z-index:2;
}
/* ===================================
TEXT
=================================== */
.benefits-tag{
display:inline-block;
padding:12px 22px;
border-radius:50px;
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.12);
color:white;
font-size:.85rem;
letter-spacing:2px;
margin-bottom:20px;
}
.benefits-content h2{
color:white;
margin-bottom:25px;
}
.benefits-content h2 span{
color:#C11A22;
}
.benefits-intro{
color:#B8C0CC;
line-height:1.9;
margin-bottom:40px;
}
/* ===================================
BENEFIT LIST
=================================== */
.benefits-list{
display:grid;
gap:18px;
}
.benefit-item{
display:flex;
align-items:center;
gap:25px;
padding:22px 25px;
border-radius:20px;
background:
rgba(255,255,255,.05);
border:
1px solid rgba(255,255,255,.08);
transition:.4s;
}
.benefit-item:hover{
transform:translateX(10px);
border-color:
rgba(193,26,34,.35);
background:
rgba(255,255,255,.07);
}
.benefit-item span{
font-size:1.8rem;
font-weight:900;
color:
rgba(193,26,34,.6);
min-width:50px;
}
.benefit-item h3{
color:white;
margin:0;
font-size:1.05rem;
}
/* ===================================
IMAGE
=================================== */
.benefits-image{
position:relative;
}
.benefits-image img{
width:100%;
display:block;
border-radius:30px;
box-shadow:
0 25px 60px rgba(0,0,0,.30);
transition:.8s;
}
.benefits-image:hover img{
transform:scale(1.03);
}
/* Decorative Frame */
.benefits-image::before{
content:"";
position:absolute;
top:-20px;
right:-20px;
width:100%;
height:100%;
border:
2px solid rgba(193,26,34,.20);
border-radius:30px;
z-index:-1;
}
.reveal-benefits{
opacity:0;
transform:translateY(60px);
transition:
opacity .9s ease,
transform .9s ease;
}
.reveal-benefits.activee{
opacity:1;
transform:none;
}
@media(max-width:1200px){
.facts-grid{
grid-template-columns:
repeat(2,1fr);
}
}
@media(max-width:992px){
.benefits-container{
grid-template-columns:1fr;
gap:60px;
}
.process-step{
grid-template-columns:
80px 1fr;
}
.process-marker span{
font-size:3rem;
}
.gallery-grid{
grid-template-columns:
repeat(2,1fr);
}
.overview-container{
grid-template-columns:1fr;
gap:50px;
}
}
@media(max-width:768px){
.project-benefits{
padding:80px 5%;
}
.benefit-item{
gap:15px;
padding:18px;
}
.benefit-item span{
font-size:1.5rem;
}
.installation-process{
padding:80px 5%;
}
.process-step{
grid-template-columns:1fr;
gap:15px;
}
.process-marker{
justify-content:flex-start;
}
.process-marker span{
font-size:2.5rem;
}
.process-content{
padding:25px;
}
.featured-gallery{
padding:80px 5%;
}
.gallery-grid{
grid-template-columns:1fr;
}
.gallery-item img{
height:280px;
}
.project-overview{
padding:80px 5%;
}
.facts-grid{
grid-template-columns:1fr;
}
.project-facts{
padding:80px 5%;
}
}