@import url('https://fonts.googleapis.com/css2?family=Ledger&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
  --azul:#0077c8;
  --naranja:#f58220;
  --blanco:#ffffff;
  --gris:#f6f7f8;
  --texto:#1a1a1a;
}
*{
    box-sizing:border-box;

margin:0;
padding:0}
html{ 
    font-family:'Poppins',sans-serif;scroll-behavior:smooth}
body{
    text-decoration: none;
    background:var(--blanco);
    color:var(--texto);
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased
    
}
.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 1rem
    
}
.site-header{
    position:sticky;
    top:0;
    background:var(--blanco);
    z-index:60;
    box-shadow:0 1px 10px rgba(0, 0, 0, 0.027)
    
}
::-webkit-scrollbar{
  display: none;
  color: transparent;  
}
::-webkit-scrollbar-track{
  background-color: transparent;
  color: transparent;
  
}






.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-thumb{width:48px;height:40px;object-fit:cover;border-radius:6px;opacity:0.95}
.brand-text{font-weight:400;color:var(--azul);letter-spacing:0.4px}
.nav{display:flex;gap:1rem}
.nav a{text-decoration:none; color:var(--texto);font-weight:200;padding:0.5rem 0;transition:color .18s}
.nav a:hover{color:var(--azul)}
.menu-btn{
    display:none;
    background:none;
    border:none;
    font-size:1.3rem;
    cursor:pointer}

.hero{height:100vh;  display:flex; letter-spacing: 3px; align-items:center;justify-content:left;background-size:cover;background-position:center;
color:var(--blanco)}

.hero-inner h1{
    letter-spacing: 3px;
    color: #000;
}
.hero::after{content:"";position:absolute;inset:1;}
.hero-inner{ 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    background-color: #1a1a1a7c;
    width: 100%;
    height: 100%;
    padding: 2rem; 
    height: 90%;
    
}
.btn-primary{
    display: inline-block;
    text-decoration: none;
    color: white;
    border-radius: 4px;
    border: 3px solid #f58220;
    padding: 0.4rem;

    transition: all 0.3s ease;
}
.btn-primary:hover{
    background-color: #f58220;
}
.contenedor{
    width: 50%;
} 

.compromiso {
  padding: 40px 20px;
  background-color: #000000; 
}

.compromiso-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.compromiso-texto {
  flex: 1;
  min-width: 300px;
}

.compromiso-texto h2 {

  text-transform: uppercase;


   font-size: 1.9rem;
    margin-bottom: 2rem;
    font-weight: 200;
    
  letter-spacing: 4px;
  color: #ffffff;
}

.compromiso-texto p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ffffff;
}

.compromiso-imagen {
  flex: 1;
  min-width: 300px;
}

.compromiso-imagen img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

    



.hero h1{font-size:2.3rem;color:white;font-weight:300;letter-spacing: 3px; text-transform: uppercase; margin-bottom:0.6rem;letter-spacing:0.6px}
.hero p{font-weight:300;font-size:1.05rem;color:rgba(255,255,255,0.95);margin-bottom:1.2rem}



.nosotros {
  padding: 40px 20px;
  z-index: 9999;
  background-color: #ffffff; 
}

.nosotros-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.nosotros-texto {
  flex: 1;
  min-width: 300px;
}

.nosotros-texto h2 {
  font-size: 2.3rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-weight: 300;
  letter-spacing: 3px;
  color: #000000;
}

.nosotros-texto p {
  font-size: 1rem;
  line-height: 1.6;
  color: #000000;
}

.nosotros-imagen {
  flex: 1;
  min-width: 300px;
}

.nosotros-imagen img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



/* SECTIONS */
.section{padding:4.5rem 0 ; background-color: rgb(255, 255, 255);}
.section h2{color:var(--azul);font-weight:600;margin-bottom:1.5rem;font-size:1.6rem}

/* SERVICIOS GRID */
.grid{display:grid;gap:1.25rem}
.servicios-grid{grid-template-columns:repeat(3,1fr)}
.servicio-card{background:var(--blanco);border-radius:2px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.06);display:flex;flex-direction:column;transition:transform .22s}
.servicio-card img{width:100%;height:220px;object-fit:cover}
.servicio-card h3{color:var(--texto);font-weight:600;padding:1rem 1rem 0.25rem}
.servicio-card p{padding:0 1rem 1.25rem;color:#6b6b6b;font-weight:300}




.nosotros h2{
    width: 100%;
    padding-bottom: 3rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 2rem;
    font-weight: 200;
}
.nosotros p{
    text-align: center;
    font-size: 1rem;
    
}
.nosotros strong{
    color: #0077c8;
    font-weight: 600;
}

.nosotros-grid{display:grid;grid-template-columns:repeat(3,4fr);gap:1rem;margin-top:1.5rem; ;}
.nosotros-item{  background:rgb(255, 255, 255);padding:0.5rem;border-radius:10px;text-align:left}
.nosotros-item h4{color:var(--naranja); text-align: center; font-weight:600;margin-bottom:0.4rem}
.nosotros-item p{font-weight:300;color:#000000}
.img-nosotros {
    width: 100%;
    height: auto;
    display:flex;
    padding-top: 4rem;
    justify-content: center;
    align-items: center;
  
}
.img-nosotros img{
  width: 200px;
  height: auto;
}
@media (max-width:900px){.nosotros-grid{grid-template-columns:1fr 1fr}}
@media (max-width:650px){.nosotros-grid{grid-template-columns:1fr}}













/*BLOCK*/
.grid-container{
  display: flex;
  justify-content: center;
  align-items: center;
background-color: #000;  padding: 20px;
}

.smooth-section{
  display: grid;
  grid-auto-columns: 200px;

  grid-auto-rows: 200px;
  gap: 1em;
  grid-template-areas:'box-1 box-1 box-2 box-3'
                     'box-1 box-1 box-4 box-5';
}

.block{
background-color: #0077c8;
}


@media (max-width:56em){
  .smooth-section{

    

     grid-template-areas:'box-1 box-1 box-2'
                         'box-1 box-1 box-3'
                         'box-4 box-5 box-5'
                         ;
    }
  }


  @media (max-width:42em){
  .smooth-section{



     grid-template-areas:'box-1 box-2 '
                         'box-3 box-2 '
                         'box-3 box-4 '
                         'box-5 box-4 '
                         ;
    }
  }





@keyframes appear{
  from{
    opacity: 0;
    scale: 0.5;
  }
  to{
    opacity: 1;
    scale: 1;
  }
}
.block{
  animation :appear 0.9s linear;
  animation-timeline: view();
  animation-range:entry 0 cover 40%;
}
  .block img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    max-width: 100%;
    vertical-align: middle;
    -o-object-fit: cover;
  }







/* CONTACTO  */

.contacto{
    background-color: white; 
    text-align: center;
}
.contacto h2{
    font-weight: 200;
    letter-spacing: 3px;
}
.form{max-width:760px;margin:1rem auto 0;display:flex;flex-direction:column;gap:0.9rem}
.form-row{display:flex;gap:0.9rem}
.form input[type="text"],.form input[type="email"],.form textarea{width:100%;padding:0.85rem;border-radius:2px;border:1px solid #000000;font-weight:300}
.form button{border:none;background:var(--azul);color:var(--blanco);padding:0.95rem;border-radius:10px;font-weight:600;cursor:pointer}
.form-status{margin-top:0.6rem;color:var(--azul);font-weight:500}

/* FOOTER */
.footer{ background:#242424;padding:1rem 0;color:#777777}
.footer-inner{text-decoration: none; color: white; display:flex;justify-content:space-between;align-items:center;gap:1rem}
.footer a{
    text-decoration: none;
    color: white;
    padding: 15px;
}

.asesoramiento {
  padding: 40px 20px;
  background-color: #000000; /* Fondo claro y profesional */
}

.asesoramiento-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.asesoramiento-texto h2{
    font-size: 1.9rem;
    margin-bottom: 2rem;
    font-weight: 200;
    letter-spacing: 3px;
    color: white;
}
.asesoramiento-texto {
  flex: 1;
  min-width: 300px;
}



.asesoramiento-texto p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ffffff;
}

.asesoramiento-imagen {
  flex: 1;
  min-width: 300px;
}

.asesoramiento-imagen img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* Ubicación — CSS Profesional */
.ubicacion {
  padding: 60px 20px;
  background: linear-gradient(135deg, #000000 0%, #000000 100%);
  position: relative;
  overflow: hidden;
}

.ubicacion::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(27, 99, 168, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ubicacion-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1300px;
  margin: 0 auto;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* Texto */
.ubicacion-texto h2 {
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 3px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  border-bottom: 3px solid #1b63a8;
  padding-bottom: 1rem;
  display: inline-block;
}

.ubicacion-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ubicacion-info {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.info-item {
  display: flex;
  gap: 1.2rem;
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid #1b63a8;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: rgba(27, 99, 168, 0.08);
  border-left-color: #2a7dc9;
  transform: translateX(8px);
}

.info-item i {
  font-size: 1.5rem;
  color: #1b63a8;
  min-width: 30px;
  text-align: center;
  margin-top: 4px;
}

.info-item h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.3rem 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-item p {
  font-size: 0.95rem;
  color: #b0b8c1;
  line-height: 1.6;
  margin: 0;
}

.info-item a {
  color: #1b63a8;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.info-item a:hover {
  color: #2a7dc9;
  text-decoration: underline;
}

/* Mapa */
.ubicacion-mapa {
  width: 100%;
  height: 400px;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.ubicacion-mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
  .ubicacion-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ubicacion-texto h2 {
    font-size: 2rem;
  }

  .ubicacion-mapa {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .ubicacion {
    padding: 40px 16px;
  }

  .ubicacion-texto h2 {
    font-size: 1.8rem;
  }

  .info-item {
    gap: 1rem;
    padding: 1rem;
  }

  .ubicacion-mapa {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .ubicacion-texto h2 {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }

  .info-item {
    flex-direction: column;
    gap: 0.5rem;
  }

  .info-item i {
    margin-top: 0;
  }

  .ubicacion-mapa {
    height: 250px;
  }
}







/* Responsive */
@media (max-width: 768px) {
  .asesoramiento-container {
    flex-direction: column;
    text-align: center;
  }

  .asesoramiento-imagen, 
  .asesoramiento-texto {
    min-width: 100%;
  }
  
  .compromiso-container h2{
      text-align: center;
  }
  
  .compromiso-container p{
      text-align: center;
  }
}



/* RESPONSIVE */
@media (max-width:900px){
  .servicios-grid{grid-template-columns:1fr 1fr}
  .galeria-grid{grid-template-columns:repeat(2,1fr)}
  .beneficios-grid{grid-template-columns:1fr 1fr}
  .hero{
    width: 100%;
    justify-content: center;
    
  }
  .hero-inner{
    max-width: 100%;
    text-align: center;
  }

  .contenedor{
    width: 100%;
  }

  .footer-inner {
    flex-direction: column;
    margin-bottom: 1rem;
  }
  .footer-inner a{
    padding: 10px;
  }

}

@media (max-width:650px){
  .nav{display:none}
  .menu-btn{display:block}
  .hero{height:62vh}
  .servicios-grid{grid-template-columns:1fr}
  .beneficios-grid{grid-template-columns:1fr}
  .galeria-grid{grid-template-columns:1fr}
  .form-row{flex-direction:column}
  .hero{
    height: 100vh;
    
  }
  .hero p{
    font-size: 0.9rem;
  }
}