body {
margin: 0;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
background: #f5f5f5;
color: #111;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: white;
}

.logo {
height: 40px;
}

nav a {
margin-left: 20px;
text-decoration: none;
color: #111;
}

.hero {
height: 90vh;
display: flex;
align-items: center;
padding: 0 80px;
position: relative;
overflow: hidden;
}

.hero-slider{
position:absolute;
inset:0;
}

.hero-slide{
position:absolute;
inset:0;

background-size:cover;
background-position:center;
background-repeat:no-repeat;

opacity:0;
transition:opacity 2s ease;
}

.hero-slide.active{
opacity:1;
}

.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
z-index:1;
}

.hero-content {
position: relative;
z-index: 2;
color: #fff;
}

.btn-hero {
color: #fff;
text-decoration: none;
border: 1px solid #fff;
padding: 12px 24px;
display: inline-block;
transition: 0.3s;
}

.btn-hero:visited {
color: #fff;
}

.btn-hero:hover {
background: #fff;
color: #111;
}

h1, h2, h3 {
letter-spacing: 1px;
font-weight: 400;
}
.proyectos {
padding: 80px 40px;
background: #fff;
}

.proyectos h2 {
margin-bottom: 40px;
}

.grid-proyectos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.proyecto img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.proyecto a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.proyecto a:hover {
  transform: scale(1.04);
}

.proyecto a:active {
  transform: scale(0.95);
}


.proyecto h3 {
margin-top: 10px;
font-weight: 400;
}

.nosotros {
padding: 120px 80px;
display: flex;
gap: 80px;
align-items: center;
background: #f5f5f5;
}

/* Imagen del arquitecto */
.img-arquitecto {
width: 280px;
height: 350px;
object-fit: cover;
filter: grayscale(100%);
}

/* Nombre debajo */
.perfil-arquitecto h3 {
margin-top: 15px;
font-weight: 80px;
letter-spacing: 1px;
text-align: center;
}

/* Texto */
.nosotros-content {
max-width: 600px;
text-align: justify;
  transform: translateY(-53px); /* 👈 lo sube un poco */
}


.nosotros h2 {
font-size: 36px;
margin-bottom: 30px;
font-weight: 400;
letter-spacing: 1px;
text-justify: distribute-all-lines;

}

.nosotros p {
line-height: 1.2;
color: #444;
margin-bottom: 12px;
text-align: justify;
hyphens: auto;
}

.frase-arquitecto {
margin-top: 15px;
font-size: 14px;
color: #666;
font-style: italic;
text-align: center;
max-width: 500px;
}


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

.proyecto-detalle {
padding: 80px;
max-width: 900px;
margin: auto;
}

.proyecto-detalle h1 {
font-weight: 400;
margin-bottom: 10px;
}

.proyecto-detalle p {
color: #555;
margin-bottom: 40px;
line-height: 1.6;
}

.proyecto-detalle img {
width: 100%;
margin-bottom: 20px;
display: block;
}

.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}

.slide {
position: absolute;
top: 0;
left: 0;

width: 100%;
height: 100%;
object-fit: cover;

opacity: 0;
transition: opacity 0.8s ease;
}

.slide.active {
opacity: 1;
}


.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease;
}

.slide.active {
opacity: 1;
}

/* BOTONES */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.3);
color: white;
border: none;
font-size: 30px;
padding: 10px 15px;
cursor: pointer;
z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
background: rgba(0,0,0,0.6);
}

.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}

.slides-wrapper {
width: 100%;
height: 100%;
position: relative;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease;
}

.slide.active {
opacity: 1;
}

/* FLECHAS */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(0,0,0,0.3);
color: white;
border: none;
font-size: 28px;
padding: 10px 14px;
cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

/* DOTS */
.dots {
position: absolute;
bottom: 15px;
width: 100%;
display: flex;
justify-content: center;
gap: 8px;
z-index: 10;
}

.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
cursor: pointer;
}

.dot.active {
background: white;
}


.contacto h2 {
font-weight: 400;
margin-bottom: 20px;
}

.contacto-texto {
max-width: 600px;
color: #555;
line-height: 1.6;
margin-bottom: 60px;
}

.contacto-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}

/* INFO */
.contacto-info p {
margin-bottom: 15px;
color: #333;
}

/* FORM */
.contacto-form {
display: flex;
flex-direction: column;
gap: 15px;
}

.contacto-form input,
.contacto-form textarea {
padding: 12px;
border: 1px solid #ccc;
font-family: inherit;
}

.contacto-form textarea {
min-height: 120px;
resize: none;
}

.contacto-form button {
padding: 12px;
border: 1px solid #111;
background: transparent;
cursor: pointer;
transition: 0.3s;
}

.contacto-form button:hover {
background: #111;
color: #fff;
}

.anim-section {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;

}

.anim-section.visible {
opacity: 1;
transform: translateY(0);
}

.contacto{
padding:140px 80px;
background:#ffffff;
text-align:center;
}

.contacto-contenido{
max-width:700px;
margin:auto;
display:flex;
flex-direction: column;
align-items: center;
}

.contacto h2{
font-size:38px;
font-weight:400;
margin-bottom:25px;
}

.contacto-texto{
max-width: 55opx;
text-align: center;
color:#555;
line-height:1.8;
margin-bottom:45px;

}

.whatsapp-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:15px 36px;

border:1px solid #111;

background:#111;

color:#fff;

text-decoration:none;

font-size:15px;

letter-spacing:1px;

transition:.35s;
}

.whatsapp-btn:hover{

background:transparent;

color:#111;

}

.contacto-info{

margin-top:50px;

}

.contacto-info p{

margin:8px 0;

color:#666;

}

footer{
background:#e6e6e6;
color:#fff;
padding:70px 20px;
text-align:center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.footer-logo{
height:50px;
margin-bottom:25px;
}

footer p{
color:#d0d0d0;
margin:15px 0;
line-height:1.6;
}

footer small{
display:block;
margin-top:35px;
color:#8f8f8f;
letter-spacing:1px;
}

.footer-redes{
display:flex;
justify-content:center;
gap:30px;
margin-top:30px;
}

.footer-redes img{
width:24px;
height:24px;
opacity:.7;
transition:.3s;
}

.footer-redes img:hover{
opacity:1;
transform:translateY(-2px);
}

/* ========================= */
/* CÓMO TRABAJAMOS */
/* ========================= */

.proceso{
padding:60px 8% 120px;
background:#f5f5f5;
}

.proceso h2{
text-align:center;
font-size:38px;
font-weight:400;
margin-bottom:80px;
letter-spacing:1px;
}

.proceso-grid{

display:grid;

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

gap:50px;

}

.paso{

border-top:1px solid #d9d9d9;

padding-top:25px;

}

.paso span{

display:block;

font-size:52px;

color:#cfcfcf;

margin-bottom:20px;

font-weight:300;

}

.paso h3{

font-size:22px;

font-weight:400;

margin-bottom:15px;

}

.paso p{

color:#666;

line-height:1.8;

font-size:15px;

}

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

@media (max-width: 768px) {

/* HEADER */
header{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    width:100%;
    box-sizing:border-box;
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

nav a{
    margin:0;
}

/* HERO */
.hero {
padding: 40px 20px;
height: 70vh;
}

/* PROYECTOS */
.grid-proyectos {
grid-template-columns: 1fr;
}

.proyectos {
padding: 60px 20px;
}

/* NOSOTROS */
.nosotros {
flex-direction: column;
padding: 60px 20px;
gap: 30px;
}

.img-arquitecto {
width: 100%;
height: auto;
}

/* PROCESO */
.proceso-grid {
grid-template-columns: 1fr;
gap: 30px;
}

/* CONTACTO */
.contacto-grid {
grid-template-columns: 1fr;
}

.contacto {
padding: 80px 20px;
}

/* SLIDER */
.slider {
height: 300px;
}

}

body {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

body.fade-out {
  opacity: 0;
  transform: scale(1.02);
}

.volver{
max-width:1100px;
margin:40px auto 0;
padding:0 40px;
}

.btn-volver{
display:inline-block;
text-decoration:none;
color:#111;
font-size:15px;
letter-spacing:1px;
transition:.3s;
}

.btn-volver:hover{
opacity:.6;
}

/*==========================
        SERVICIOS
==========================*/

.servicios{

    padding:120px 8%;
    background:#fff;

}

.servicios-titulo{

    text-align:center;
    margin-bottom:120px;

}

.servicios-titulo h2{

    font-size:48px;
    margin-bottom:20px;

}

.servicios-titulo p{

    color:#777;
    max-width:650px;
    margin:auto;
    line-height:1.8;

}

.servicio{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:80px;

    margin-bottom:60px;

}

.servicio:last-child{
  margin-bottom: 001px;
  
}

.reverse{

    flex-direction:row-reverse;

}

.servicio-imagen{

    flex:1;

}

.servicio-imagen img{

    width:100%;
    max-width:550px;

    display:block;
    margin:auto;

    transition:.45s;

}

.servicio-imagen img:hover{

    transform:scale(1.04);

}

.servicio-info{

    flex:1;

}

.servicio-info h3{

    font-size:38px;
    margin-bottom:25px;

}

.servicio-info p{

    color:#666;
    line-height:1.8;

    margin-bottom:30px;

}

.servicio-info a{

    color:#000;
    text-decoration:none;

    border-bottom:1px solid #000;

    padding-bottom:5px;

    transition:.35s;

}

.servicio-info a:hover{

    letter-spacing:2px;

}

@media(max-width:900px){

.servicio,
.reverse{

    flex-direction:column;

}

.servicio-info{

    text-align:center;

}

.servicio-imagen img{

    max-width:90%;

}

.servicios-titulo h2{

    font-size:36px;

}

.servicio-info h3{

    font-size:30px;

}

}

/*====================================
        ANIMACIÓN SERVICIOS
====================================*/

.servicio.reveal .servicio-imagen{

    opacity:0;
    transform:translateX(-80px);

    transition:
        opacity 1s ease,
        transform 1s ease;

}

.servicio.reveal .servicio-info{

    opacity:0;
    transform:translateX(80px);

    transition:
        opacity 1s ease .2s,
        transform 1s ease .2s;

}

/* Cuando el servicio es reverse */

.servicio.reverse.reveal .servicio-imagen{

    transform:translateX(80px);

}

.servicio.reverse.reveal .servicio-info{

    transform:translateX(-80px);

}

/* Estado visible */

.servicio.reveal.active .servicio-imagen{

    opacity:1;
    transform:translateX(0);

}

.servicio.reveal.active .servicio-info{

    opacity:1;
    transform:translateX(0);

}

/*==================================
        FINANCIAMIENTO
===================================*/

.financiamiento{

    padding:120px 8%;
    background:#ffffff;

}

.financiamiento-header{

    text-align:center;
    margin-bottom:80px;

}

.financiamiento-header h2{

    font-size:48px;
    margin-bottom:20px;

}

.financiamiento-header p{

    max-width:650px;
    margin:auto;
    color:#666;
    line-height:1.8;

}

.financiamiento-grid{

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

}

.financiamiento-item{

    text-align:center;

    padding:0 45px;

}

.financiamiento-item:not(:last-child){

    border-right:1px solid #e5e5e5;

}

.icono{

    width:65px;
    height:65px;

    margin:0 auto 30px;

    color:#111;

}

.icono svg{

    width:100%;
    height:100%;

    transition:.35s ease;

}

.financiamiento-item:hover .icono svg{

    transform:translateY(-4px);

}

.financiamiento-item h3{

    font-size:24px;

    margin-bottom:18px;

    font-weight:500;

}

.financiamiento-item p{

    color:#666;

    line-height:1.8;

}

@media (max-width:900px){

    .financiamiento-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .financiamiento-item{

        border-right:none !important;

        padding:0;

    }

    .financiamiento-header h2{

        font-size:36px;

    }

}

.hero{
    position: relative;
}

.hero-stats{
    position: absolute;
    right: 60px;
    bottom: 40px;

    display: flex;
    gap: 50px;

    color: #fff;
    z-index: 10;
}

.stat{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat span{
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
}

.stat small{
    margin-top: 6px;
    font-size: .75rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .75;
}

/* ======== CELULAR ======== */

@media (max-width: 768px){

    /* Estadísticas */
    .hero-stats{
        left: 0;
        right: 0;
        bottom: 20px;

        display: flex;
        justify-content: space-evenly;
        align-items: right;

        gap: 10;
        padding: 0 20px;
    }

    .stat{
        align-items: center;
        text-align: center;
    }

    .stat span{
        font-size: 1.7rem;
    }

    .stat small{
        font-size: .50rem;
        letter-spacing: 1px;
        line-height: 1.3;
    }

}

.datos-proyecto {
    display: flex;
    gap: 70px;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #ddd;
}

.dato {
    display: flex;
    flex-direction: column;
}

.dato strong {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.dato span {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

@media (max-width: 768px) {

    .datos-proyecto {
        gap: 35px;
        flex-wrap: wrap;
    }

    .dato strong {
        font-size: 21px;
    }

}

.datos-proyecto {
    margin-bottom: 70px;
}