/*==================================================
URIARTE ACCOUNTING GROUP
Executive Website
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#081B3A;
color:#fff;
overflow-x:hidden;
line-height:1.7;
}

img{
display:block;
max-width:100%;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

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

:root{

--navy:#081B3A;
--navy-light:#10284f;
--gold:#D8A63A;
--white:#ffffff;
--gray:#B7C0CF;

--radius:18px;

--container:1320px;

}

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

.container{

width:min(95%,1320px);

margin:auto;

padding:0 24px;

}

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

section{

padding:110px 0;

position:relative;

}

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

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top right,
rgba(216,166,58,.10),
transparent 38%),

linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px),

linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px);

background-size:

100% 100%,
70px 70px,
70px 70px;

pointer-events:none;

z-index:-1;

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(8,27,58,.82);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

transition:.35s;

}

.header .container{

display:flex;

align-items:center;

justify-content:space-between;

height:84px;

}

.logo img{

height:42px;

}

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

.navbar ul{

display:flex;

gap:34px;

align-items:center;

}

.navbar a{

position:relative;

font-weight:600;

font-size:17px;

transition:.3s;

}

.navbar a:hover{

color:var(--gold);

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:100%;

height:2px;

background:var(--gold);

transform:scaleX(0);

transform-origin:left;

transition:.3s;

}

.navbar a:hover::after{

transform:scaleX(1);

}

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

.btn-header{

background:var(--gold);

color:#111;

padding:15px 32px;

border-radius:50px;

font-weight:700;

font-size:16px;

transition:.35s;

}

.btn-header:hover{

transform:translateY(-3px);

}

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

.menu-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

}

.menu-toggle span{

display:block;

width:28px;

height:3px;

background:#fff;

margin:6px 0;

}

/*==================================================
HERO
==================================================*/

.hero{

position:relative;

padding-top:155px;

padding-bottom:120px;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

right:-240px;

top:-80px;

width:900px;

height:900px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(216,166,58,.14),
transparent 70%);

filter:blur(28px);

pointer-events:none;

z-index:0;

}

.hero-content{

position:relative;

z-index:2;

display:grid;

grid-template-columns:53% 47%;

align-items:center;

gap:110px;

}

.hero-left{

max-width:620px;

padding-left:18px;

}

.eyebrow{

display:inline-block;

margin-bottom:26px;

font-size:15px;

font-weight:800;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--gold);

}

.hero h1{

font-family:"Manrope",sans-serif;

font-size:60px;

font-weight:800;

line-height:1.05;

letter-spacing:-2px;

margin-bottom:26px;

text-wrap:balance;

}

.hero h1 strong{

display:block;

}

.hero p{

font-size:20px;

line-height:1.85;

color:var(--gray);

max-width:560px;

margin-bottom:42px;

}

.hero-buttons{

display:flex;

gap:18px;

align-items:center;

flex-wrap:wrap;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

background:var(--gold);

color:#111;

font-weight:700;

border-radius:999px;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 18px 45px rgba(216,166,58,.30);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:999px;

border:1px solid rgba(255,255,255,.18);

transition:.35s;

}

.btn-secondary:hover{

border-color:var(--gold);

color:var(--gold);

transform:translateY(-4px);

}

.hero-right{

display:flex;

justify-content:flex-end;

align-items:center;

position:relative;

transform:translateY(-40px);

}

.hero-right img{

width:100%;

max-width:780px;

border-radius:24px;

box-shadow:
0 55px 120px rgba(0,0,0,.48);

transition:.45s;

}

.hero-right img:hover{

transform:scale(1.02);

}
/*==================================================
TÍTULOS GENERALES
==================================================*/

.section-header{

max-width:900px;

margin:0 auto 80px;

text-align:center;

}

.section-header h2{

font-family:"Manrope",sans-serif;

font-size:54px;

line-height:1.15;

margin-bottom:24px;

letter-spacing:-1px;

}

.section-header p{

font-size:22px;

line-height:1.8;

color:var(--gray);

max-width:760px;

margin:auto;

}

.gold{

color:var(--gold);

}

/*==================================================
PROJECT
OBJECTIVES
TIMELINE
BENEFITS
==================================================*/

.project,
.objectives,
.timeline,
.benefits{

background:transparent;

}

.project-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.project-card{

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

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:42px;

backdrop-filter:blur(14px);

transition:.35s;

position:relative;

overflow:hidden;

}

.project-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:var(--gold);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.project-card:hover{

transform:translateY(-10px);

border-color:rgba(216,166,58,.35);

box-shadow:

0 25px 60px rgba(0,0,0,.28);

}

.project-card:hover::before{

transform:scaleX(1);

}

.project-card h3{

font-family:"Manrope",sans-serif;

font-size:28px;

margin-bottom:18px;

}

.project-card p{

font-size:18px;

line-height:1.8;

color:var(--gray);

}

/*==================================================
PHASES
==================================================*/

.phase{

padding:140px 0;

}

.phase:nth-child(even){

background:rgba(255,255,255,.025);

}

.phase .hero-content{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

/* alterna automáticamente la posición */

.phase:nth-child(even) .hero-content .hero-left{

order:2;

}

.phase:nth-child(even) .hero-content .hero-right{

order:1;

}

.phase h2{

font-family:"Manrope",sans-serif;

font-size:50px;

line-height:1.15;

margin-bottom:28px;

}

.phase p{

font-size:20px;

line-height:1.85;

color:var(--gray);

margin-bottom:36px;

}

.phase ul{

display:flex;

flex-direction:column;

gap:18px;

}

.phase li{

position:relative;

padding-left:32px;

font-size:18px;

line-height:1.7;

}

.phase li::before{

content:"";

position:absolute;

left:0;

top:10px;

width:10px;

height:10px;

border-radius:50%;

background:var(--gold);

}

.phase img{

width:100%;

border-radius:22px;

cursor:zoom-in;

box-shadow:

0 30px 80px rgba(0,0,0,.45);

transition:

transform .35s ease,

box-shadow .35s ease;

}

.phase img:hover{

transform:scale(1.03);

box-shadow:

0 40px 95px rgba(0,0,0,.55);

}
/*==================================================
CTA
==================================================*/

.cta{

text-align:center;

padding:150px 0;

background:
linear-gradient(
180deg,
transparent,
rgba(216,166,58,.08)
);

}

.cta .section-header{

max-width:900px;

margin:auto;

}

.cta p{

margin:30px auto 45px;

max-width:760px;

}

/*==================================================
FOOTER
==================================================*/

footer{

padding:70px 0;

background:#06142d;

text-align:center;

border-top:1px solid rgba(255,255,255,.06);

position:relative;

}

.footer-logo{

height:58px;

margin:0 auto 25px;

}

footer p{

color:#9fa9bc;

font-size:16px;

margin:10px 0;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#07152f;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#f2bf52;

}

/*==================================================
HEADER AL HACER SCROLL
==================================================*/

.header.scrolled{

background:rgba(7,20,45,.96);

backdrop-filter:blur(22px);

box-shadow:0 12px 35px rgba(0,0,0,.30);

}

.header.scrolled .container{

height:74px;

}

.header.scrolled .logo img{

height:38px;

}

/*==================================================
ANIMACIONES
==================================================*/

.project-card,
.phase img,
.btn-primary,
.btn-secondary,
.btn-header,
.hero-right img{

transition:all .35s ease;

}

.project-card:hover{

transform:translateY(-10px);

}

.phase img:hover{

transform:scale(1.03);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary:hover{

transform:translateY(-4px);

}

.btn-header:hover{

transform:translateY(-4px);

}

/*==================================================
SEPARADORES
==================================================*/

section::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:180px;

height:1px;

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

}

footer::after{

display:none;

}

/*==================================================
SELECCIÓN DE TEXTO
==================================================*/

::selection{

background:var(--gold);

color:#111;

}

/*==================================================
FOCUS
==================================================*/

a:focus,
button:focus{

outline:2px solid var(--gold);

outline-offset:4px;

}

/*==================================================
PRELOADER
==================================================*/

#preloader{

position:fixed;

inset:0;

background:#081B3A;

display:none;

z-index:99999;

}

/*==================================================
CURSOR
==================================================*/

.cursor{

display:none;

}

/*==================================================
ZOOM DE IMÁGENES
==================================================*/

.hero-right img,
.phase img{

cursor:zoom-in;

}

.lightbox{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.94);

backdrop-filter:blur(10px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

padding:40px;

}

.lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox img{

max-width:92%;

max-height:92vh;

border-radius:18px;

box-shadow:

0 40px 100px rgba(0,0,0,.70);

cursor:zoom-out;

animation:zoomOpen .35s ease;

}

@keyframes zoomOpen{

from{

opacity:0;

transform:scale(.88);

}

to{

opacity:1;

transform:scale(1);

}

}

/*==================================================
FIN
==================================================*/