*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter;
scroll-behavior:smooth;
}

body{
background:#f5f5f5;
color:#111;
}


/* NAVBAR */

.navbar{

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

padding:20px 40px;

background:white;
border-bottom:1px solid #eee;

position:sticky;
top:0;
z-index:100;

}

.logo-nav{
font-weight:700;
font-size:20px;
}


/* DROPDOWN MENU */

.dropdown{
position:relative;
display:inline-block;
margin:0 12px;
}

/* link principal */

.dropdown > a{
text-decoration:none;
color:#333;
font-weight:500;
padding:10px 0;
display:block;
}

/* contenedor del menu */

.dropdown-content{

opacity:0;
transform:translateY(10px);

pointer-events:none;

position:absolute;

top:100%;
left:0;

background:white;
padding:12px 0;

border-radius:10px;

min-width:200px;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

z-index:999;

transition:all .25s ease;

}

/* items del menu */

.dropdown-content a{

display:block;
padding:10px 18px;
color:#333;
text-decoration:none;
font-size:14px;

}

.dropdown-content a:hover{
background:#f5f5f5;
}

/* mostrar menu */

.dropdown:hover .dropdown-content{

opacity:1;
transform:translateY(0);

pointer-events:auto;

}

/* BOTONES */

.btn-outline{

border:1px solid black;
padding:8px 20px;
border-radius:20px;
background:none;

cursor:pointer;

text-decoration:none;
color:black;

display:inline-block;

}

.btn-outline:hover{

background:black;
color:white;
transition:.3s;

}

.btn-main{

display:inline-block;

margin-top:30px;

background:white;
color:black;

padding:14px 30px;

border-radius:30px;

font-weight:600;

text-decoration:none;

transition:0.3s;

}

.btn-main:hover{
transform:scale(1.05);
}


/* HERO */

.hero{

height:100vh;

background:black;
color:white;

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

padding:40px;

}

.hero-logo{
width:120px;
margin-bottom:30px;
}

.hero h1{

font-size:40px;
line-height:1.4;

}

.hero p{
margin-top:20px;
opacity:.8;
}


/* SECCIONES */

.vision,
.testimonials,
.projects{

padding:100px 80px;
text-align:center;

}

.subtitle{
color:#777;
margin-top:10px;
}

/* SECCION VISION */

.vision{

background:white;

padding:120px 80px;

text-align:center;

}

.vision h2{

font-size:36px;
margin-bottom:10px;

}

.vision .subtitle{
color:#777;
margin-bottom:60px;
}


/* contenedor */

.vision-list{

max-width:1100px;
margin:auto;

display:flex;
flex-direction:column;
gap:25px;

}


/* cards */

.vision-row{

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

background:#0f0f0f;

padding:35px 40px;

border-radius:16px;

transition:.3s;

color:white;

}

.vision-row:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(0,0,0,0.2);

}


/* texto */

.vision-text{

max-width:70%;
text-align:left;

}

.vision-text h3{

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

}

.vision-text p{

color:#cfcfcf;
line-height:1.6;

}


/* iconos */

.vision-icon{

width:70px;
height:70px;

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

border-radius:14px;

font-size:26px;

}


/* colores iconos */

.vision-icon.code{

background:rgba(0,255,200,0.1);
color:#00ffd0;

}

.vision-icon.chart{

background:rgba(255,0,200,0.1);
color:#ff00c8;

}

.vision-icon.heart{

background:rgba(255,100,100,0.1);
color:#ff6b6b;

}

.testimonials{

padding:120px 80px;
text-align:center;
background:#f7f7f7;

}

.testimonial-box{

margin:50px auto;

background:white;

padding:40px;

border-radius:14px;

max-width:600px;

box-shadow:0 20px 40px rgba(0,0,0,0.08);

}

.testimonial-box h3{

margin-bottom:10px;
font-size:22px;

}

.testimonial-box p{

color:#666;
margin-bottom:20px;

}

.rating{

margin-top:40px;

width:120px;
height:120px;

background:black;
color:white;

border-radius:50%;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

margin-left:auto;
margin-right:auto;

}


/* RATING */

.rating{

margin-top:40px;

width:90px;
height:90px;

background:black;
color:white;

border-radius:50%;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

margin-left:auto;
margin-right:auto;

}

/* CONTACTO ESTÉTICO */

.contact{

background:#0c0c0c;
padding:120px 80px;
color:white;

}

.contact-wrapper{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

align-items:center;

}

.contact-left h2{

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

}

.contact-left p{

color:#aaa;
margin-bottom:30px;
line-height:1.6;

}

.contact-benefits{

display:flex;
flex-direction:column;
gap:15px;

}

.benefit{

display:flex;
align-items:center;
gap:10px;

font-weight:500;

}

.benefit i{
color:#4ade80;
}


/* FORM */

.contact-form{

background:white;
padding:40px;

border-radius:12px;

display:flex;
flex-direction:column;
gap:15px;

box-shadow:0 20px 40px rgba(0,0,0,0.3);

}

.contact-form input,
.contact-form select,
.contact-form textarea{

padding:14px;
border-radius:8px;
border:1px solid #ddd;

font-size:14px;

}

.contact-form textarea{
height:120px;
}



/* FOOTER */

.footer{

background:#111;
color:white;
padding:60px 80px 30px;

}

.footer-container{

display:flex;
justify-content:space-between;

max-width:1200px;
margin:auto;

}

.footer-col{

display:flex;
flex-direction:column;
gap:10px;

}

.footer-col h4{
margin-bottom:10px;
}

.footer-col a{

color:#aaa;
text-decoration:none;
cursor:pointer;

}

.footer-col a:hover{
color:white;
}


.social-icons{

display:flex;
gap:15px;

}

.social-icons a{

width:40px;
height:40px;

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

border-radius:50%;

background:#222;

transition:.3s;

}

.social-icons a:hover{

background:white;
color:black;

}


.footer-bottom{

text-align:center;
margin-top:40px;
color:#777;

}

/* HERO MODERNO */

.hero-new{

background:linear-gradient(120deg,#0a0a0a,#1c1c1c);

color:white;

padding:120px 80px;

position:relative;

overflow:hidden;

}

.hero-container{

max-width:1200px;
margin:auto;

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

gap:60px;

}

.hero-left{

max-width:550px;

}

.hero-left h1{

font-size:60px;
line-height:1.1;
margin-bottom:20px;

}

.hero-left span{

color:#00e0b8;

}

.hero-left p{

color:#cfcfcf;
margin-bottom:30px;
line-height:1.6;

}


/* BOTONES */

.hero-buttons{

display:flex;
gap:15px;

}

.btn-primary{

background:#00e0b8;

padding:14px 26px;

border-radius:30px;

color:black;
font-weight:600;

text-decoration:none;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(0,224,184,.4);

}

.btn-secondary{

border:1px solid white;

padding:14px 26px;

border-radius:30px;

color:white;
text-decoration:none;

transition:.3s;

}

.btn-secondary:hover{

background:white;
color:black;

}


/* IMAGEN */

.hero-right img{

width:680px;

border-radius:20px;

box-shadow:0 20px 60px rgba(0,0,0,0.5);

}


/* SCROLL */

.scroll-down{

text-align:center;

margin-top:60px;

font-size:14px;

opacity:.6;

}

/* SECCION PROCESO */

.process{

padding:120px 80px;
background:white;
text-align:center;

}

.process h2{

font-size:36px;
margin-bottom:10px;

}

.process .subtitle{

color:#777;
margin-bottom:80px;

}


/* contenedor */

.process-container{

max-width:1000px;
margin:auto;

display:flex;
flex-direction:column;
gap:50px;

position:relative;

}

/* linea vertical */

.process-container::before{

content:"";

position:absolute;

left:40px;

top:0;

bottom:0;

width:2px;

background:#e5e5e5;

}

/* paso */

.step{

display:flex;
align-items:flex-start;
gap:30px;

}

/* numero */

.step-number{

min-width:80px;
height:80px;

background:black;
color:white;

border-radius:50%;

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

font-size:22px;
font-weight:bold;

position:relative;

z-index:2;

}

/* contenido */

.step-content{

background:#f7f7f7;

padding:25px 30px;

border-radius:10px;

text-align:left;

flex:1;

transition:.3s;

}

.step-content:hover{

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(0,0,0,0.1);

}

.step-content h3{

margin-bottom:8px;

}

.step-content p{

color:#666;

}
/* ========================= */
/* TABLET */
/* ========================= */

@media (max-width: 1024px){

.hero-container{
flex-direction:column;
text-align:center;
}

.hero-right img{
width:320px;
margin-top:30px;
}

.contact-wrapper{
grid-template-columns:1fr;
}

.footer-container{
flex-direction:column;
gap:30px;
text-align:center;
}

}


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

@media (max-width: 768px){

.navbar{
padding:15px 20px;
}

nav{
display:none;
}

.hero h1{
font-size:28px;
}

.hero-logo{
width:90px;
}

.hero-new{
padding:80px 20px;
}

.hero-left h1{
font-size:36px;
}

.hero-left p{
font-size:14px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-right img{
width:260px;
}

.vision{
padding:80px 20px;
}

.vision-row{
flex-direction:column;
text-align:center;
gap:20px;
}

.vision-text{
max-width:100%;
text-align:center;
}

.process{
padding:80px 20px;
}

.process-container::before{
left:30px;
}

.step-number{
min-width:60px;
height:60px;
font-size:18px;
}

.step-content{
padding:20px;
}

.contact{
padding:80px 20px;
}

.contact-left h2{
font-size:28px;
}

.footer{
padding:50px 20px;
}

}


/* ========================= */
/* CELULAR PEQUEÑO */
/* ========================= */

@media (max-width: 480px){

.hero h1{
font-size:24px;
}

.hero-left h1{
font-size:30px;
}

.hero-right img{
width:220px;
}

.btn-main,
.btn-primary,
.btn-secondary{
padding:12px 20px;
font-size:14px;
}

}
/* BOTON HAMBURGUESA */

.menu-toggle{
display:none;
font-size:22px;
cursor:pointer;
}


/* MENU NORMAL DESKTOP */

#nav-menu{
display:flex;
gap:20px;
}


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

@media (max-width:768px){

.menu-toggle{
display:block;
}

#nav-menu{
display:none;
flex-direction:column;
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
padding:20px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

#nav-menu.active{
display:flex;
}

.dropdown{
margin:10px 0;
}

}

/* ================= */
/* ARREGLO MENU CELULAR */
/* ================= */

@media (max-width:768px){

/* menu principal */

#nav-menu{
display:none;
flex-direction:column;
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
padding:20px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
z-index:999;
}

#nav-menu.active{
display:flex;
}


/* dropdowns */

.dropdown{
width:100%;
}

.dropdown a{
display:block;
padding:10px 0;
}


/* submenus */

.dropdown-content{
position:static;
display:none;
box-shadow:none;
padding-left:15px;
background:none;
}

.dropdown-content a{
padding:6px 0;
}


/* cuando se toca */

.dropdown.active .dropdown-content{
display:block;
}

}

/* =========================================
   REDISEÑO SECCIÓN NOSOTROS (BENTO GRID)
   ========================================= */

/* Contenedor Principal */
.nosotros-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 40px;
}

/* Estilo General de las Tarjetas */
.grid-item {
    background: #ffffff;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
}

.grid-item h3 {
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* 1. Card Hero (Quiénes Somos) */
.card-hero {
    grid-column: span 2;
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.card-hero .card-content {
    max-width: 60%;
}

.card-hero h1 {
    font-size: 38px;
    margin-bottom: 15px;
}

.card-hero .card-image img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* 2. Card Por qué Sorae (Beneficios) */
.card-why {
    grid-row: span 2;
    background: #fafafa;
}

.features-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.feature{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.feature i{
font-size:20px;
color:#00e0b8;
background:rgba(0,224,184,0.12);
padding:10px;
border-radius:10px;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
}

.feature h4{
font-size:16px;
font-weight:600;
margin:0;
}

.feature p{
font-size:14px;
color:#666;
line-height:1.5;
margin:0;
}

/* 3. Card Trayectoria (Timeline) */
.card-timeline {
    grid-column: span 1;
}

.timeline-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    position: relative;
}

.time-step { text-align: center; z-index: 2; }
.time-step span { 
    display: block; 
    font-weight: 800; 
    color: #111;
    font-size: 14px;
}

.time-line {
    height: 2px;
    background: #e0e0e0;
    flex-grow: 1;
    margin: 0 10px;
}

/* 4. Card Visión y Misión */
.card-vision {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.vision-box h3, .mision-box h3 { font-size: 18px; margin-bottom: 8px; }
.vision-box p, .mision-box p { font-size: 14px; color: #555; }

/* 5. Card Tecnologías */
.card-tech {
    text-align: center;
}

.tech-icons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.tech {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tech i { font-size: 28px; color: #333; }
.tech span { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #888; }

/* 6. Card Equipo */
.card-team {
    grid-column: span 1;
    grid-row: span 1;
    padding: 0; /* Para que la imagen luzca más */
    overflow: hidden;
}

.card-team h3 { padding: 30px 30px 10px; }

.card-team img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.team-footer {
    padding: 20px 30px;
    background: #111;
    color: white;
}

.team-footer p { font-size: 13px; opacity: 0.8; }

/* =========================================
   RESPONSIVIDAD (ADAPTACIÓN A MÓVILES)
   ========================================= */

@media (max-width: 1024px) {
    .nosotros-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nosotros-grid-container {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    
    .card-hero, .card-why, .card-timeline, .card-vision, .card-tech, .card-team {
        grid-column: span 1;
        flex-direction: column;
        text-align: center;
    }
    
    .card-hero .card-content { max-width: 100%; }
    .card-hero .card-image img { margin-top: 20px; margin-left: 0; }
    
    .feature { text-align: left; }
}
.logo-nav a{
text-decoration:none;
color:black;
font-weight:700;
font-size:20px;
}

/* =========================================
   RESPONSIVE MEJORADO PARA NOSOTROS
   ========================================= */

@media (max-width:768px){

/* grid principal */

.nosotros-grid-container{
grid-template-columns:1fr;
padding:20px;
margin:40px auto;
}


/* hero quienes somos */

.card-hero{
flex-direction:column;
text-align:center;
gap:20px;
}

.card-hero .card-content{
max-width:100%;
}

.card-hero h1{
font-size:30px;
}

.card-hero .card-image img{
width:140px;
height:140px;
margin:auto;
}


/* por que sorae */

.features-grid{
display:grid;
grid-template-columns:1fr;
gap:20px;
}

.feature{
align-items:flex-start;
}


/* timeline */

.timeline-wrapper{
flex-direction:column;
gap:10px;
align-items:center;
}

.time-line{
width:2px;
height:20px;
margin:0;
}


/* vision y mision */

.card-vision{
text-align:center;
}


/* tecnologias */

.tech-icons{
flex-wrap:wrap;
gap:20px;
justify-content:center;
}


/* equipo */

.card-team img{
height:180px;
}

.team-footer{
text-align:center;
}

}

/* =========================
   FIX ICONOS FOOTER CELULAR
   ========================= */

@media (max-width:768px){

.footer-col.social{
align-items:center;
text-align:center;
}

.social-icons{
justify-content:center;
}

}

/* =================================
   ANIMACIONES SUAVES DE SCROLL
================================= */

section{
opacity:0;
transform:translateY(40px);
animation:fadeUp 0.8s ease forwards;
}

section:nth-child(2){animation-delay:.1s;}
section:nth-child(3){animation-delay:.2s;}
section:nth-child(4){animation-delay:.3s;}
section:nth-child(5){animation-delay:.4s;}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}
/* OPTIMIZACION DE ANIMACIONES */

.grid-item,
.vision-row,
.step-content,
.btn-primary,
.btn-secondary,
.btn-main{

will-change:transform;
backface-visibility:hidden;
transform:translateZ(0);

}