*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Figtree, "Figtree Placeholder", sans-serif;
}

body{
    background:#f5f7fa;
}

/* NAVBAR */
.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 80px;
    color:white;
    z-index:9999;
    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(6px);
    transition: all 0.3s ease;
}


.menu a{
    margin:0 15px;
    color:white;
    text-decoration:none;
}

.btn-nav{
    background:#0a58ff;
    border:none;
    padding:10px 18px;
    color:white;
    border-radius:6px;
    cursor: pointer;
}

.menu-toggle{
    display:none;
    font-size:28px;
}

.navbar .logo {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  height: 100%;
}
.navbar .logo img.Logo-PX {
  display: block;
  height: 48px;
  width: auto;
  object-fit: contain;
}
.navbar .logo a {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  align-self: center;
  margin-left: 14px;
  background: linear-gradient(#2DF3FD, #31BDAC);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

/* =====================================
   NAVBAR RESPONSIVE
=====================================*/
@media (max-width: 1024px){
  .navbar{
    padding: 20px 40px;
  }
}

@media (max-width: 768px){
  .navbar{
    padding: 18px 25px;
  }

  .menu{
    position: absolute;
    top: 100%;
    right: 0;
    background: #0b1c39;
    width: 240px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    border-radius: 0 0 0 12px;
  }

  .menu a{
    margin: 0;
    font-size: 16px;
  }

  .btn-nav{
    width: 100%;
    margin-top: 10px;
  }

  .menu.active{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .menu-toggle{
    display:block;
    cursor:pointer;
  }
}

/* ==============================           PAG PRINCIPAL          ============================== */
/* ============================== SECCIÓN 1 - HERO - PAG PRINCIPAL ============================== */
.hero{
    min-height:100vh;
    padding:80px 0 80px 0;
    background:url("Img/Fondo.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    position:relative;
}

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
}

.hero-container{
    position:relative;
    width:90%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:white;
    margin-top: 120px;
}

/* TEXTO */
.hero-text{
    max-width:620px;
    margin-left: 50px;
}

.hero-text h1{
    font-size:50px;
    margin-bottom:20px;
}
.hero-text p{
    font-size:20px;
    margin-bottom: 20px;
}

.phone{
    margin-top:35px;
    background:#0a58ff;
    padding:12px 20px;
    border-radius:30px;
    display:inline-block;
}

.contact-bar {
  display: flex;
  align-items: center;
  gap: 25px;
  font-family: Arial, Helvetica, sans-serif;
}

/* BOTÓN TELÉFONO */
.phone-box {
   display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: 40px;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);

  color: #fff;
  font-size: 20px;
  font-weight: 600;

  transition: all 0.3s ease;
  cursor: pointer;
}

/* HOVER */
.phone-box:hover {
  background: #ffffff;
  color: #000000;
}

/* ICONO */
.phone-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #2f7df6;

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

  transition: all 0.3s ease;
}

/* Imagen dentro del icono */
.phone-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Cambiar icono al hacer hover */
.phone-box:hover .phone-icon {
  background: #000;
}

/* TEXTO */
.phone-number {
  letter-spacing: 1px;
}

/* FORM */
.form-card{
    background:white;
    padding:30px;
    border-radius:12px;
    width:400px;
    color:black;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    margin-right: 50px;
}

.form-card h2{
    margin-bottom:15px;
}

.form-card input,
.form-card textarea{
    width:100%;
    margin:10px 0;
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
}

.form-card button{
    width:100%;
    background:#0a58ff;
    color:white;
    border:none;
    padding:14px;
    border-radius:6px;
    font-size:16px;
    cursor:pointer;
}

.msg{
    margin-top:10px;
    text-align:center;
    font-size:14px;
}

/* =====================================
   HERO EXCLUSIVE ANIMATION
===================================== */

.hero-reveal{
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.hero-reveal.active{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px){
  .hero-container{
    flex-direction: column;
    text-align: center;
    gap: 50px;
    align-items: center;
  }

  .hero-text{
    margin-left: 0;
    max-width: 100%;
  }

  .form-card{
  margin: 0 auto;
  }
}

@media (max-width: 768px){
  .hero{
    padding: 36px 0 60px 0;
  }
  .hero-text h1{
    font-size: 34px;
    line-height: 1.2;
  }
  .hero-text p{
    font-size: 16.5px;
  }

.phone-box{
    font-size: 16px;
    padding: 10px 18px;
    margin: 5px auto 0 auto; 
}

  .phone-icon{
    width: 36px;
    height: 36px;
  }

  .phone-icon img{
    width: 22px;
    height: 22px;
  }

  .form-card{
    width: 90%;
    padding: 25px;
  }
}

@media (max-width: 480px){
  .hero-text h1{
    font-size: 28px;
  }
  .hero-text p{
    font-size: 16px;
  }

  .phone-box{
    flex-direction: row;
    justify-content: center;
    font-size: 15px;
  }

  .form-card{
    width: 95%;
    margin: 0 auto; 
  }
}

@media (max-width: 768px){
  .hero-phone{
    justify-content: center; /* móvil */
  }

  .form-card{
    width: 90%;
    padding: 25px;
    margin: 0 auto; 
  }
}

/* =================================== SECCIÓN 2 - FRANJA AZUL =================================== */
/* FRANJA AZUL */
.solar-band{
    background:#2d5ec4;
    padding:90px 0;
    color:white;
}

.solar-container{
    width:85%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 60px;
}

.solar-left{
    max-width:520px;
}
.solar-left h2{
    font-size:34px;
    margin-bottom:10px;
}
.solar-left p{
    font-size:18px;
    opacity:0.9;
}

.solar-right{
    display:flex;
    gap:80px;
}

.solar-item{
    text-align:center;
    padding: 10px;
}

.solar-icon{
    font-size:42px;
    margin-bottom:10px;
}

.stars{
    color:#ffd84d;
    margin-bottom:6px;
}

.section-white{
    background:#fff;
    height:600px;
}

.reveal-item{
    opacity:0;
    transform:translateY(60px);
    transition:all 0.9s ease;
}
.reveal-item.show{
    opacity:1;
    transform:translateY(0);
}

@media (max-width: 1024px){
  .solar-container{
    flex-direction: column;
    text-align: center;
    gap: 50px;
  }

  .solar-left{
    max-width: 100%;
  }

  .solar-right{
    gap: 60px;
  }
}

@media (max-width: 768px){
  .solar-band{
    padding: 70px 0;
  }

  .solar-left h2{
    font-size: 26px;
    line-height: 1.3;
  }
  .solar-left p{
    font-size: 16px;
  }

  .solar-right{
    flex-direction: column;
    gap: 40px;
  }

  .solar-icon{
    font-size: 36px;
  }
}

@media (max-width: 480px){
  .solar-band{
    padding: 60px 0;
  }

  .solar-left h2{
    font-size: 22px;
  }
  .solar-left p{
    font-size: 15px;
  }

  .solar-icon{
    font-size: 32px;
  }
}

@media (max-width: 768px){
  .solar-item{
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
  }
}

/* =================================== SECCIÓN 3 - GET PROFESSIONAL SERVICES =================================== */
.services-section{
  background:#f5f5f5;
  padding:100px 0;
}

.services-container{
  width:1200px;
  max-width:90%;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

/* ===== IMÁGENES ===== */
.services-images{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.img-big{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:18px;
}

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

.img-row img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:18px;
}

/* ===== TEXTO ===== */
.services-content h2{
  font-size:48px;
  font-weight:700;
  margin-bottom:20px;
  color:#000;
}
.services-content p{
  font-size:17px;
  color:#555;
  line-height:1.6;
  margin-bottom:40px;
}

/* ===== FEATURES ===== */
.services-features{
  display:flex;
  gap:60px;
}

.feature-box{
  display:flex;
  align-items:center;
  gap:15px;
}

.feature-icon{
  width:60px;
  height:60px;
  background:#2f5bcc;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  font-size:26px;
}

.feature-box h3{
  margin:0;
  font-size:24px;
}

.feature-box span{
  color:#777;
  font-size:14px;
}

@media(max-width:900px){
  .services-container{
    grid-template-columns:1fr;
  }

  .services-content h2{
    font-size:34px;
  }

  .services-features{
    gap:30px;
  }

    .feature-box h3{
        font-size:20px;
        }
}

/* =================================== SECCIÓN 4 - SERVICIOS =================================== */
.services {
  background: #f5f6f8;
  padding-bottom: 120px;
}

/* FRANJA AZUL */
.services-hero {
  background: linear-gradient(180deg,#2d5fb8,#2953a4);
  color: white;
  text-align: center;
  padding: 120px 20px 140px;
  position: relative;
}

.services-hero h2 {
  font-size: 60px;
  margin-bottom: 20px;
}
.services-hero p {
  font-size: 20px;
  opacity: .9;
  max-width: 600px;
  margin: auto;
}

/* GRID */
.services-grid {
  width: 90%;
  max-width: 1200px;
  margin: -80px auto 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* TARJETAS */
.service-card {
  background: #e9edf3;
  padding: 25px 25px 35px;
  border-radius: 20px;
  transition: .3s;
  box-shadow: 0 8px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.service-card:hover {
  transform: translateY(-8px);
  background: white;
}

.service-card .icon {
  font-size: 32px;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.service-card p {
  font-size: 15px;
  opacity: .7;
}

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

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-hero h2 {
    font-size: 38px;
  }
}

/* IMAGEN EN TARJETA */
.service-img {
  width: 100%;
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s;
}

/* HOVER ZOOM */
.service-card:hover .service-img img {
  transform: scale(1.08);
}

/* =================================== SECCIÓN 5 - PROCESO DE TRABAJO =================================== */
.process {
  background:#f3f3f3;
  padding:120px 20px;
  text-align:center;
}

.process-header h2{
  font-size:56px;
  margin-bottom:20px;
}
.process-header p{
  max-width:720px;
  margin:auto;
  font-size:18px;
  color:#666;
  line-height:1.6;
}

/* STEPS */
.process-steps{
  margin-top:90px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* STEP */
.process-step{
  display:flex;
  align-items:flex-start;
  gap:25px;
  text-align:left;
  position:relative;
}

/* línea divisoria */
.process-step:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-30px;
  top:0;
  height:100%;
  width:1px;
  background:#ddd;
}

/* ICONO */
.step-icon{
  width:70px;
  height:70px;
  background: linear-gradient(130deg, #071e74f5, #4c65be);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.step-icon img{
  width:56px;
}
.process-step .step-icon img{
  transition: transform 0.4s ease;
}
.process-step:hover .step-icon img{
  transform: scale(1.1);
}

/* TEXTO */
.step-text h3{
  font-size:22px;
  margin-bottom:10px;
}
.step-text p{
  color:#666;
  margin-bottom:12px;
  line-height:1.6;
}

.step-text a{
  color:#2f5bcc;
  font-weight:600;
  text-decoration:none;
}
.step-text a:hover{
  text-decoration:underline;
}

@media(max-width:900px){
  .process-steps{
    grid-template-columns:1fr;
    gap:40px;
  }
  .process-step::after{
    display:none;
  }

  .process-header h2{
    font-size:36px;
  }
}

@media (max-width:1200px){

  .process{
    padding:100px 20px;
  }

  .process-header h2{
    font-size:48px;
  }

  .process-steps{
    gap:40px;
  }

}

@media (max-width:1024px){

  .process-header h2{
    font-size:42px;
  }

  .process-header p{
    font-size:17px;
  }

  .step-icon{
    width:60px;
    height:60px;
  }

  .step-icon img{
    width:46px;
  }

  .step-text h3{
    font-size:20px;
  }

}

@media (max-width:480px){
  .process{
    padding:70px 16px;
  }

  .process-header h2{
    font-size:28px;
  }
}

@media (max-width:768px){

  .process{
    padding:80px 20px;
  }

  .process-header h2{
    font-size:32px;
  }

  .process-header p{
    font-size:16px;
  }

  .process-steps{
    margin-top:60px;
    gap:35px;
    grid-template-columns:1fr;
  }

  .process-step{
    gap:18px; /* mantiene icono a la izquierda */
  }

  .step-icon{
    width:55px;
    height:55px;
  }

  .step-icon img{
    width:40px;
  }

  .step-text h3{
    font-size:18px;
  }

  .step-text p{
    font-size:15px;
  }

}

/* =================================== SECCIÓN 6 - MARCAS CON LAS QUE TRABAJAMOS =================================== */
.brands{
  width: 90%;
  max-width: 1300px;
  margin: 120px auto;
  padding: 100px 40px;
  border-radius: 40px;
  background: url("Img/58801.png") center/cover no-repeat;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.brands h2{
  font-size: 3.2rem;
  margin-bottom: 20px;
}
.brands p{
  max-width: 700px;
  margin: 0 auto 60px auto;
  font-size: 1.3rem;
  opacity: 0.9;
}

.brands-logos{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
}

.brands-logos img{
  height: 40px;
  opacity: 0.8;
  transition: all 0.4s ease;
  filter: brightness(0) invert(1);
}
.brands-logos img:hover{
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width:1024px){

  .brands{
    margin: 90px auto;
    padding: 80px 30px;
    border-radius: 30px;
  }

  .brands h2{
    font-size: 2.6rem;
  }

  .brands p{
    font-size: 1.1rem;
    margin-bottom: 45px;
  }

  .brands-logos{
    gap: 35px;
  }

  .brands-logos img{
    height: 34px;
  }

}

@media (max-width:768px){

  .brands{
    margin: 70px auto;
    padding: 60px 25px;
    border-radius: 25px;
  }

  .brands h2{
    font-size: 2.1rem;
    line-height: 1.2;
  }

  .brands p{
    font-size: 1rem;
    margin-bottom: 35px;
  }

  .brands-logos{
    gap: 25px;
  }

  .brands-logos img{
    height: 30px;
  }

}

@media (max-width:480px){

  .brands{
    margin: 60px auto;
    padding: 45px 20px;
    border-radius: 20px;
  }

  .brands h2{
    font-size: 1.7rem;
  }

  .brands p{
    font-size: 0.95rem;
    margin-bottom: 28px;
  }

  .brands-logos{
    gap: 18px;
  }

  .brands-logos img{
    height: 24px;
  }

}

/* ===================================== SECCIÓN 7 - FRANJA AZUL FINAL =====================================*/
.top-bar{
  background: #3a63b8;
  padding: 20px 0;
}

.top-bar-content{
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  text-align: center;
}
.top-bar-content img{
  height: 80px;
  width: auto;
}

.top-bar-content h3{
  color: white;
  margin: 0;
  font-weight: 600;
  font-size: 28px;
  height: 40px;
  opacity: 0.8;
  transition: all 0.4s ease;
  filter: brightness(0) invert(1);
}

/* =====================================
   ANIMACIÓN REVEAL
=====================================*/
.reveal-item{
    opacity:0;
    transform:translateY(60px);
    transition:all 0.9s ease;
}
.reveal-item.show{
    opacity:1;
    transform:translateY(0);
}

.top-bar-content h3:hover{
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 1024px){
  .top-bar-content{
    gap: 40px;
  }

  .top-bar-content h3{
    font-size: 24px;
  }

  .top-bar-content img{
    height: 65px;
  }
}

@media (max-width: 768px){
  .top-bar{
    padding: 30px 0;
  }

  .top-bar-content{
    flex-direction: column;
    gap: 20px;
  }

  .top-bar-content img{
    height: 55px;
  }

  .top-bar-content h3{
    font-size: 20px;
    line-height: 1.4;
  }
}

@media (max-width: 480px){
  .top-bar-content h3{
    font-size: 17px;
  }

  .top-bar-content img{
    height: 45px;
  }
}

/* =================================== SECCIÓN 8 - FOOTER =================================== */
.footer{
  background: #f3f4f6;
  padding: 75px 0;
}
.footer-container{
  width: 90%;
  max-width: 1200px;
  margin: auto;

  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: start;
}

/* LEFT */
.footer-logo{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}
.footer-logo img{
  height: 70px;
}

.footer-logo h3{
  font-size: 2.188rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  align-self: center;
  margin-left: 14px;
  background: linear-gradient(#037278, #31BDAC);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.footer-address .address-row{
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 15px;
}

.footer-address img{
  height: 55px;
}
.footer-address p{
  margin: 0;
  color: #4b5563;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.google-link{
  font-size: 1rem;
  color: #2563eb;
  text-decoration: underline;
}

.D-footer{
  font-size: 1.1rem;
  margin-bottom: 20px;
  margin-left: 70px;
}

/* RIGHT */
.footer-right h4{
  margin-top: 30px;
  margin-bottom: 20px;
  color: #4b5563;
  font-size: 1.3rem;
}
.D2-footer{
  font-size: 1.1rem;
  margin-bottom: 20px;
  text-align: left;
}

@media (max-width: 768px){
  .footer-right{
    text-align: center;
  }

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

.footer-links-horizontal{
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;

  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 1.05rem;
}

.footer-links-horizontal li{
  margin: 0;
}

.footer-links-horizontal a{
  text-decoration: none;
  color: #6b7280;
  font-weight: 500;
  transition: color 0.3s ease;
}
.footer-links-horizontal a:hover{
  color: #2563eb;
}

/* Social */
.wrapper {
  display: inline-flex;
  list-style: none;
  height: 120px;
  width: 100%;
  padding-top: 40px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}

.wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;

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

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

  transition: transform 0.25s ease, background 0.25s ease;
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #fff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}

.wrapper .whatsapp:hover,
.wrapper .whatsapp:hover .tooltip,
.wrapper .whatsapp:hover .tooltip::before {
  background: #25D366;
  color: #fff;
}

.wrapper .icon a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .icon a:visited {
  color: inherit;
}

.wrapper li {
  list-style: none;
}

.wrapper .icon {
  text-decoration: none;
  color: inherit;
}
.wrapper .icon svg {
  pointer-events: none;
}

.wrapper .facebook {
  color: #1877f2;
}
.wrapper .instagram {
  color: #e4405f;
}
.wrapper .whatsapp {
  color: #25D366;
}

@media (max-width: 768px){
  .footer-container{
    grid-template-columns: 1fr;
  }

  .footer-logo img{
    height: 50px;
  }

  .footer-logo h3{
    font-size: 1.6rem;
  }

  .footer-address img{
  height: 50px;
  }

}

@media (max-width:480px){

  .footer-logo img{
    height: 42px;
  }

  .footer-logo h3{
    font-size: 1.4rem;
  }

  .footer-address img{
  height: 42px;
  }

}


/* ======================================== NAVBAR - SECCIÓN ABOUT US  ======================================== */
/* === ABOUT HERO =====*/
.about-hero{
    height: 70vh;
    background: url("Img/About_Us.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.about-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.about-content{
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.about-content h1{
    font-size: 4rem;
    margin-bottom: 15px;
}

/* ===================================== SECCIÓN 1 - WHO WE ARE =====================================*/
.about-section{
    padding: 100px 0;
    background: #f8f9fc;
}
.about-container{
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-text{
    flex: 1;
}
.about-text h2{
    font-size: 36px;
    margin-bottom: 20px;
}
.about-text p{
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    padding: 10px;
}

.name-bold{
  font-weight: bold;
}

.about-image{
    flex: 1;
}
.about-image img{
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

@media (max-width: 992px){
    .about-container{
        flex-direction: column;
        text-align: center;
    }

    .about-content h1{
        font-size: 38px;
    }
}

@media (max-width: 480px){
    .about-content h1{
        font-size: 30px;
    }

    .about-text h2{
        font-size: 26px;
    }
}

/* Delay escalonado */
.delay-1{
    transition-delay: 0.2s;
}
.delay-2{
    transition-delay: 0.4s;
}
.delay-3{
    transition-delay: 0.6s;
}

/* ===================================== SECCIÓN 2 - QUALIFICATIONS =====================================*/
.qualifications-section{
    background: #f2f2f2;
    padding-bottom: 140px;
}

/* FRANJA */
.qualifications-band{
    position: relative;
    background: url("Img/58801.png") center/cover no-repeat;
    padding: 90px 20px;
    text-align: center;
    overflow: hidden;
}
.qualifications-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.qualifications-band-content{
    position: relative;
    max-width: 800px;
    margin: auto;
    color: white;
}
.qualifications-band h2{
    font-size: 44px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}
.qualifications-band p{
    font-size: 18px;
    opacity: 0.9;
}

/* CONTENEDOR CARDS */
.qualifications-cards{
    width: 90%;
    max-width: 1200px;
    margin: 120px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    position: relative;
}

/* ESTRUCTURA 3 - 1 - 3 */
.qualifications-cards{
    width: 90%;
    max-width: 1300px;
    margin: 120px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 90px;
}

/* COLUMNAS LATERALES */
.qualifications-column{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ---------- TARJETAS BASE -------- */
.qualification-card{
    background: white;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.07);
    transition: all 0.45s cubic-bezier(.25,.8,.25,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qualification-card::before{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.0) 30%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.0) 70%
    );
    transform: rotate(25deg) translateX(-100%);
    transition: all 0.7s ease;
}

/* IMÁGENES GENERALES */
.qualification-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* ---------- LATERALES -------- */
.qualification-card.side{
    width: 250px;
    height: 220px;
    opacity: 0.95;
}

.qualification-card.side img{
    object-fit: contain;
}

/* ---------- CENTRAL -------- */
.qualification-card.center{
    width: 390px;
    height: 480px;
    z-index: 2;
    box-shadow: 0 35px 90px rgba(0,0,0,0.12);
}

/* ---------- HOVER EFECTO -------- */
.qualification-card:hover{
    transform: translateY(-12px) scale(1.04);
    box-shadow: 0 45px 110px rgba(0,0,0,0.18);
}

.qualification-card:hover img{
    transform: scale(1.05);
}

.qualification-card:hover::before{
    transform: rotate(25deg) translateX(100%);
}

/* =====================================
   GLOBAL SCROLL ANIMATION SYSTEM
===================================== */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media (max-width:1200px){
  .qualifications-cards{
    gap:60px;
  }

  .qualification-card.side{
    width:220px;
    height:210px;
  }

  .qualification-card.center{
    width:340px;
    height:440px;
  }
}

@media (max-width:992px){
  .qualifications-band h2{
    font-size:36px;
  }

  .qualifications-band p{
    font-size:16px;
  }

  .qualifications-cards{
    gap:40px;
  }

  .qualification-card.side{
    width:180px;
    height:180px;
  }

  .qualification-card.center{
    width:260px;
    height:360px;
  }
}

@media (max-width:820px){
  .qualifications-cards{
    gap:30px;
  }

  .qualification-card.side{
    width:160px;
    height:160px;
  }

  .qualification-card.center{
    width:230px;
    height:330px;
  }
}

@media (max-width:768px){
  .qualifications-section{
    padding-bottom:80px;
  }

  .qualifications-band{
    padding:70px 20px;
  }

  .qualifications-band h2{
    font-size:28px;
  }

  .qualifications-band p{
    font-size:15px;
  }

  .qualifications-cards{
    flex-direction:column;
    gap:40px;
    margin-top:80px;
  }

  .qualifications-column{
    flex-direction:column;
    gap:25px;
    align-items:center;
  }

  .qualification-card.side{
    width:80%;
    max-width:320px;
    height:auto;
  }

  .qualification-card.center{
    width:85%;
    max-width:360px;
    height:auto;
  }

  .qualification-card img{
    height:auto;
  }
}
/* ===================================== SECCIÓN 3 - FAQ =====================================*/
.faq-section{
    padding: 120px 0;
    background: #f5f7fa;
}
.faq-header{
    text-align: center;
    margin-bottom: 70px;
}

.faq-badge{
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid #1d4ed8;
    color: #1d4ed8;
    font-size: 14px;
    margin-bottom: 20px;
}

.faq-header h2{
    font-size: 60px;
    font-weight: 600;
}
.faq-header h2 span{
    color: #1d4ed8;
}

.faq-container{
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-answer{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    margin-top: 10px;
}

.faq-item.active .faq-answer{
    max-height: 500px;
}

/* ============================= */
/* FAQ SCROLL REVEAL */
/* ============================= */
.faq-item{
    background: #ffffff;
    border-radius: 20px;
    margin-bottom: 25px;
    padding: 25px 30px;
    cursor: pointer;
    border: 1px solid #e5e7eb;

    opacity: 0;
    transform: translateY(40px);
    transition: 
        transform 0.6s cubic-bezier(.25,.8,.25,1),
        opacity 0.6s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

/* Cuando aparece en pantalla */
.faq-item.show{
    opacity: 1;
    transform: translateY(0);
}

.faq-item.active{
    background: #8ac0e6;
    background: linear-gradient(175deg,rgba(138, 192, 230, 1) 0%, rgba(168, 208, 237, 1) 35%, rgba(182, 215, 241, 1) 45%, rgba(237, 243, 255, 1) 100%);
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}

.faq-question{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question h3{
    font-size: 20px;
    font-weight: 500;
}

.faq-icon{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d4ed8;
    transition: all 0.35s ease;
}
.faq-icon svg{
    width: 18px;
    height: 18px;
    transition: transform 0.35s ease;
}

/* Cuando está activo */
.faq-item.active .faq-icon{
    background: #3d6cef;
    color: white;
}
.faq-item.active .faq-icon svg{
    transform: rotate(180deg);
}

.faq-answer{
    overflow: hidden;
    height: 0;
    transition: height 0.4s ease;
    margin-top: 10px;
}
.faq-answer p{
    margin: 0;
    color: #4b4b4b;
}

@media (max-width:1200px){
  .faq-header h2{
    font-size:48px;
  }

  .faq-container{
    width:90%;
  }
}

@media (max-width:992px){
  .faq-section{
    padding:100px 0;
  }

  .faq-header{
    margin-bottom:50px;
  }

  .faq-header h2{
    font-size:40px;
  }
  .faq-question h3{
    font-size:18px;
  }
}

@media (max-width:768px){
  .faq-section{
    padding:80px 0;
  }

  .faq-header h2{
    font-size:30px;
  }

  .faq-badge{
    font-size:13px;
    padding:5px 15px;
  }

  .faq-item{
    padding:20px 22px;
    border-radius:16px;
  }

  .faq-question h3{
    font-size:17px;
    line-height:1.4;
  }

  .faq-icon{
    width:32px;
    height:32px;
  }

  .faq-icon svg{
    width:16px;
    height:16px;
  }
}

@media (max-width:480px){
  .faq-section{
    padding:70px 0;
  }

  .faq-header h2{
    font-size:26px;
  }

  .faq-container{
    width:92%;
  }

  .faq-item{
    padding:18px;
  }
}

/* ===================================== SECCIÓN 4 - READY TO TRANSFORM =====================================*/
.cta-section{
    background: url("Img/58801.png") center center no-repeat;
    background-size: cover;
}

.cta-overlay{
    width: 100%;
    background: rgba(25, 63, 160, 0.85);
    display: flex;
    align-items: center;
    padding: 100px 0;
}

.cta-content{
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cta-content h2{
    color: white;
    font-size: 48px;
    font-weight: 600;
}

.cta-button{
    padding: 16px 35px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 14px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.cta-button:hover{
    background: white;
    color: #1d4ed8;
}

/* Estado inicial oculto */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.4s ease;
}

/* Cuando aparece */
.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* Pequeño retraso para el botón */
.delay {
    transition-delay: 0.1s;
}

@media (max-width:992px){
  .cta-content{
    width: 90%;
  }

  .cta-content h2{
    font-size: 38px;
  }
}

@media (max-width:768px){

  .cta-content{
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

  .cta-overlay{
    padding: 80px 20px;
  }

  .cta-content h2{
    font-size: 28px;
    line-height: 1.3;
  }
}

@media (max-width:480px){

  .cta-overlay{
    padding: 60px 20px;
  }

  .cta-content h2{
    font-size: 22px;
  }

  .cta-button{
    width: 100%;
    max-width: 280px;
  }
}

/* =================================== NAVBAR - SECCIÓN CONTACT =================================== */
/* === CONTACT HERO =====*/
.contact-hero{
    height: 70vh;
    background: url("Img/F-Contact.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.contact-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.contact-content{
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.contact-content h1{
    font-size: 4rem;
    margin-bottom: 15px;
}

/* =================== SECCIÓN 1 - FORMULARIO ====================== */
.contact-section{
  background:#f4f4f4;
  padding:120px 20px;
  text-align:center;
}

.contact-header{
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
}
.contact-header h2{
  font-size:48px;
  margin-bottom:15px;
}
.contact-header p{
  font-size:18px;
  color:#666;
}

/* FORM WRAPPER */
.contact-form-wrapper{
  max-width:700px;
  margin:auto;
  position:relative;
  border-radius:24px;
  overflow:hidden;
}

/* FORM */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:opacity .5s ease, transform .5s ease;
}

.form-row{
  display:flex;
  gap:20px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:18px;
  border:none;
  border-radius:14px;
  background:#e9edf3;
  font-size:16px;
  outline:none;
  transition:.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
  background:#dde3ec;
}

.send-btn{
  padding:18px;
  border:none;
  border-radius:14px;
  background:#2f5ec4;
  color:white;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}
.send-btn:hover{
  background:#244ca3;
}

/* SUCCESS STATE - CAMBIO A APROBADO */
.form-success{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:white;
  border-radius:24px;
  opacity:0;
  pointer-events:none;
  transform:translateY(20px) scale(.97);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: all .6s cubic-bezier(.25,.8,.25,1),
              box-shadow .6s ease;
}

.form-success.active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  box-shadow:
    0 35px 90px rgba(0,0,0,0.12),
    0 20px 40px rgba(47,94,196,0.08);
}

.success-circle{
  width:90px;
  height:90px;
  margin-bottom:25px;
}
.success-circle svg{
  width:100%;
  height:100%;
}

/* CÍRCULO ANIMADO */
.circle{
  fill:none;
  stroke:#2f5ec4;
  stroke-width:3;
  stroke-linecap:round;

  stroke-dasharray:151;
  stroke-dashoffset:151;

  transform:rotate(-90deg);
  transform-origin:center;

}

/* CHECK */
.check{
  fill:none;
  stroke:#2f5ec4;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;

  stroke-dasharray:48;
  stroke-dashoffset:48;

  opacity:0;
}

/* ANIMACIÓN SOLO CUANDO ESTÁ ACTIVO */
.form-success.active .circle{
  animation:drawCircle 1s cubic-bezier(.65,0,.35,1) forwards;
}

.form-success.active .check{
  animation:
    drawCheck .5s .9s ease forwards,
    fadeCheck .3s .9s ease forwards;
}

.form-success h3{
  color:#2f5ec4;
  font-weight:600;
}

@keyframes drawCircle{
  to{
    stroke-dashoffset:0;
  }
}

@keyframes drawCheck{
  to{
    stroke-dashoffset:0;
  }
}

@keyframes fadeCheck{
  to{
    opacity:1;
  }
}

/* NOTAS DEL FORMULARIO */
.form-notes{
  margin-top:25px;
  padding:15px 18px;
  background:#f4f6fa;
  border-radius:12px;
  font-size:13px;
  color:#475569;
  line-height:1.6;
}

.form-notes p{
  margin-bottom:8px;
}
.form-notes span{
  font-weight:600;
  color:#2f5ec4;
}

@media (max-width:768px){
  .contact-header h2{
    font-size: 42px;
  }
}

@media (max-width:480px){
  .contact-header h2{
    font-size: 36px;
  }
}

/* =================== SECCIÓN 2 - CONTACT OTHERS PLATFORMS ====================== */
.contact-platforms{
  margin-top:100px;
  text-align:center;
}
.contact-platforms h2{
  font-size:22px;
  letter-spacing:1px;
  margin-bottom:50px;
  color:#1e293b;
}

.platforms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  max-width:900px;
  margin:auto;
}

.platform-title-wrapper{
  width:100%;
  height:110px;
  background-image:url("Img/58801.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-bottom: 60px;
}

.platform-title-wrapper h2{
  margin:0; 
  color:white;
  font-size:22px;
  letter-spacing:1px;
  line-height:1; 
}

.platform-card{
  background:white;
  padding:35px 25px;
  border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,0.06);
  transition:.4s ease;
}
.platform-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(0,0,0,0.12);
}

.platform-card h4{
  margin-bottom:15px;
  color:#2f5ec4;
  font-weight:600;
}
.platform-card p{
  margin:6px 0;
  color:#475569;
  font-size:15px;
}
.platform-card p span{
  font-weight: bold;
  color: #083075;
}

.platform-icon{
  width:75px;
  height:75px;
  margin:0 auto 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#f1f4fb;
  transition:0.3s ease;
}
.platform-icon img{
  width:60px;
  height:60px;
  object-fit:contain;
}

.platform-card:hover .platform-icon{
  transform:scale(1.08);
}

/* =================== SECCIÓN 3 - LOADING + LINEA DIVISORA FOOTER ====================== */
/* Loading - Recurso del Final */ 
.loading-wave{
  width:300px;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin:0 auto;
}

.loading-bar {
  width: 20px;
  height: 10px;
  margin: 0 5px;
  background-color: #3498db;
  border-radius: 5px;
  animation: loading-wave-animation 1s ease-in-out infinite;
}

.loading-bar:nth-child(2) {
  animation-delay: 0.1s;
}
.loading-bar:nth-child(3) {
  animation-delay: 0.2s;
}
.loading-bar:nth-child(4) {
  animation-delay: 0.3s;
}

@keyframes loading-wave-animation {
  0% {
    height: 10px;
  }

  50% {
    height: 50px;
  }

  100% {
    height: 10px;
  }
}

/* Linea Divisora Footer */ 
.section-divider{
  width:100%;
  max-width:1200px;
  height:1px;
  margin:100px auto 0 auto;
  background:linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,0.15),
    transparent
  );
}

/* =================================== NAVBAR - SECCIÓN PROJECTS =================================== */
/* === SECCIÓN 1 - PROJECTS HERO =====*/
.projects-hero{
    height: 70vh;
    background: url("Img/F-Projects.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.projects-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.projects-content{
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.projects-content h1{
    font-size: 4rem;
    margin-bottom: 15px;
}

/* --------------------------- Sección 2 ------------------------------- */
/* === REEL CAROUSEL =====*/
.reel-carousel{
  position:relative;
  margin:60px auto 50px auto;
  max-width:900px;
  height:540px;
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.15);
  background:#000;
}

.reel-overlay h3{
  font-size: 50px;
}
.reel-overlay p{
  font-size: 20px;
}

.reel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
}
.reel-slide.active{
  opacity:1;
  z-index:1;
}

.reel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Gradient */
.reel-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%);
}

/* Overlay text */
.reel-overlay{
  position:absolute;
  bottom:40px;
  left:40px;
  color:white;
  z-index:2;
  max-width:500px;
}

/* Progress bars */
.reel-progress{
  position:absolute;
  top:20px;
  left:20px;
  right:80px;
  display:flex;
  gap:8px;
  z-index:3;
}

.reel-progress span{
  flex:1;
  height:4px;
  background:rgba(255,255,255,0.3);
  border-radius:4px;
  overflow:hidden;
  position:relative;
}

.reel-progress span div{
  height:100%;
  width:0%;
  background:white;
}

.reel-pause{
  position:absolute;
  top:15px;
  right:20px;
  z-index:4;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.5);
  color:white;
  cursor:pointer;
  font-size:14px;
}

/* Arrows */
.reel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.4);
  border:none;
  color:white;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  z-index:4;
}

.reel-btn.prev{ left:20px; }
.reel-btn.next{ right:20px; }

/* --------------------------- Sección 3 ------------------------------- */
/* SECTION MORE PROJECTS - FRANJA AZUL */
.more-projects-section{
    background: #f2f2f2;
    padding-bottom: 140px;
}

.more-projects-band{
    position: relative;
    background: url("Img/58801.png") center/cover no-repeat;
    padding: 62px 20px;
    text-align: center;
    overflow: hidden;
}

.more-projects-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.more-projects-band-content{
    position: relative;
    max-width: 800px;
    margin: auto;
    color: white;
}

.more-projects-band h2{
    font-size: 44px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}
.more-projects-band p{
    font-size: 18px;
    opacity: 0.9;
}

/* --------------------------- Sección 4 ------------------------------- */
/* SECTION MORE PROJECTS - TARJETAS DE ANTES Y DESPUÉS */
.projects-section{
  padding:100px 20px;
  max-width:1200px;
  margin:auto;
}

.projects-intro{
  text-align:center;
  margin-bottom:70px;
}
.projects-intro h2{
  font-size:2.5rem;
  margin-bottom:20px;
  color: #1d4ed8;
}
.projects-intro p{
  font-size: 1.25rem;
  max-width:600px;
  margin:auto;
  color:#6b7280;
  line-height:1.6;
}

.projects-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:50px;
  margin-top:30px;
}

/* Tablet */
@media (max-width: 992px){
  .projects-grid{
    grid-template-columns: 1fr;
  }
}

.project-card{
  background:white;
  border-radius:20px;
  overflow:visible;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  transition:0.4s ease;
}
.project-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

.project-images{
  display:flex;
}
.project-images div{
  position:relative;
  width:50%;
}

.project-images img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
}

.project-images span{
  position:absolute;
  top:12px;
  left:12px;
  background:#2f5ec4;
  color:white;
  font-size:0.8rem;
  padding:5px 12px;
  border-radius:20px;
}

.project-images div{
  position:relative;
  width:50%;
  transition:0.4s ease;
}

.project-images div img{
  transition:0.4s ease;
}

.project-images:hover div{
  opacity:0.6;
}

.project-images div:hover{
  opacity:1;
  transform: scale(1.15);
  z-index:5;
}

.project-info{
  padding:25px;
}
.project-info h3{
  margin-bottom:10px;
}
.project-info p{
  color:#6b7280;
  font-size:0.95rem;
  line-height:1.5;
}

.projects-cta{
  margin-top:100px;
  text-align:center;
}
.projects-cta h3{
  margin-bottom:25px;
  font-size:1.5rem;
}

.projects-btn{
  display:inline-block;
  padding:14px 40px;
  background:#2f5ec4;
  color:white;
  border-radius:10px;
  text-decoration:none;
  transition:0.3s ease;
}
.projects-btn:hover{
  background:#1f47a3;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.4s ease;
  z-index:9999;
}
.lightbox.active{
  opacity:1;
  visibility:visible;
}

.lightbox-img{
  max-width:90%;
  max-height:85vh;
  border-radius:20px;
  box-shadow:0 40px 80px rgba(0,0,0,0.5);
  transform:scale(0.8);
  transition:0.4s ease;
}
.lightbox.active .lightbox-img{
  transform:scale(1);
}

/* BOTÓN CERRAR */
.lightbox-close{
  position:absolute;
  top:30px;
  right:40px;
  font-size:40px;
  color:white;
  cursor:pointer;
  transition:0.3s;
}
.lightbox-close:hover{
  transform:scale(1.2);
}

/* ----- Sección 5 y 7 - Rail-less solar y On-Site Performance - Descripción + Galería ------ */
/* ------------- SECCIÓN MORE PROJECTS - SHOWCASE - VARIANTE 4 IMAGENES ------------------ */
.project-showcase{
  padding:120px 0;
  background:#f8fafc;
}
.showcase-container{
  max-width:1220px;
  margin:auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:60px;
  align-items:center;
}

/* LEFT SIDE */
.showcase-gallery{
  position:relative;
}

.showcase-main{
  position:relative;
  height:480px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,0.1);
}

.main-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s ease;
}
.main-image.active{
  opacity:1;
}

.showcase-thumbs{
  display:flex;
  gap:15px;
  margin-top:20px;
}

.thumb{
  width:100px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  opacity:0.6;
  transition:0.3s;
}

.thumb.active,
.thumb:hover{
  opacity:1;
  transform:scale(1.05);
}

/* Buttons */
.showcase-btn{
  position:absolute;
  top:45%;
  transform:translateY(-50%);
  background:white;
  border:none;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  z-index:2;
}

.showcase-btn.prev{ left:-20px; }
.showcase-btn.next{ right:-20px; }

/* RIGHT SIDE */
.showcase-content h2{
  font-size:2.5rem;
  margin-bottom:20px;
}
.showcase-content p{
  color:#555;
  line-height:1.6;
  margin-bottom:25px;
  font-size: 1.1rem;
}

.showcase-content ul{
  list-style:none;
  padding:0;
}
.showcase-content li{
  margin-bottom:10px;
  color:#444;
}

@media (max-width: 992px){
  .showcase-container{
    grid-template-columns: 1fr;
    gap:30px;
  }

  .showcase-content{
    order:1;
    text-align:center;
    max-width:700px;
    margin:auto;
  }

  .showcase-gallery{
    order:2;
  }

  .showcase-main{
    height:360px;
  }

  .showcase-thumbs{
    justify-content:center;
  }

  .showcase-btn.prev{
    left:15px;
  }
  .showcase-btn.next{
    right:15px;
  }
}

@media (max-width: 576px){
  .project-showcase{
    padding:80px 20px;
  }

  .showcase-content h2{
    font-size:1.6rem;
    line-height:1.3;
  }
  .showcase-content p{
    font-size:1rem;
  }

  .showcase-main{
    height:260px;
    border-radius:16px;
  }

  .thumb{
    width:65px;
    height:45px;
  }
}

/* ----- Sección 6 - Electrical Connections - Descripción + Galería ------ */
/* SHOWCASE - VARIANTE DE DOS IMAGENES */
.project-showcase.two-images .showcase-container{
  grid-template-columns: 1fr 1.1fr;
}

.project-showcase.two-images .showcase-main{
  height:500px;
}

/* En móvil mantiene texto arriba */
@media (max-width: 992px){
  .project-showcase.two-images .showcase-container{
    grid-template-columns:1fr;
  }

  .project-showcase.two-images .showcase-content{
    order:1;
    text-align:center;
  }

  .project-showcase.two-images .showcase-gallery{
    order:2;
  }

  .project-showcase.two-images .showcase-main{
    height:360px;
  }
}

@media (max-width:576px){
  .project-showcase.two-images .showcase-main{
    height:260px;
  }
}

/* ----- Sección 8 - Advance Solar - Descripción + Galería ------ */
/* ---- SHOWCASE - VARIANTE 5 IMAGENES ---- */
.project-showcase.advanced-troubleshooting .showcase-thumbs{
  display:flex;
  justify-content:left;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.project-showcase.advanced-troubleshooting .thumb{
  width:85px;
  height:60px;
  object-fit:cover;
}

/* ADVANCED TROUBLESHOOTING – RESPONSIVE */
@media (max-width:768px){
  .project-showcase.advanced-troubleshooting{
    padding:60px 20px;
  }

  .project-showcase.advanced-troubleshooting .showcase-main{
    height:260px;
  }

  .project-showcase.advanced-troubleshooting .showcase-thumbs{
    justify-content:center;
    gap:10px;
  }

  .project-showcase.advanced-troubleshooting .thumb{
    width:70px;
    height:50px;
  }
}

@media (min-width:992px){
  .project-showcase.advanced-troubleshooting .showcase-gallery{
    order:2;
  }

  .project-showcase.advanced-troubleshooting .showcase-content{
    order:1;
  }
}

/* ----- Sección 9 - Seguridad Trabajo - Descripción + Galería ------ */
.project-safety{
  padding:100px 20px;
  background:#f8f9fb;
}
.safety-container{
  max-width:1200px;
  margin:0 auto;
}

.safety-hero img{
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:12px;
}

.safety-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-top:25px;
}

.safety-grid img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:10px;
}

.safety-content{
  margin-top:60px;
  text-align:center;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.safety-content h2{
  font-size:38px;
  margin-bottom:15px;
}
.safety-content p{
  margin-bottom:18px;
  line-height:1.6;
  color: #60666e;
  font-size: 17.6px;
}

.safety-content ul{
  list-style:none;
  padding:0;
  margin:30px 0;
}
.safety-content ul li{
  margin-bottom:10px;
  font-weight:500;
  color: #60666e;
}

@media(max-width:992px){
  .safety-hero img{
    height:350px;
  }

  .safety-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .project-safety{
    padding:70px 20px;
  }

  .safety-hero img{
    height:250px;
  }

  .safety-grid{
    grid-template-columns:1fr;
  }

  .safety-content h2{
    font-size:26px;
  }
}

/* =========================================
   CUSTOM LIGHTBOX
========================================= */
.custom-lightbox2{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s ease;
  z-index:9999;
}

.custom-lightbox2.active{
  opacity:1;
  visibility:visible;
}

.lightbox2-image{
  max-width:90%;
  max-height:85%;
  border-radius:8px;
}

.lightbox2-close{
  position:absolute;
  top:25px;
  right:35px;
  font-size:40px;
  color:#fff;
  cursor:pointer;
}

.lightbox2-prev,
.lightbox2-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:10px 20px;
}

.lightbox2-prev{ left:30px; }
.lightbox2-next{ right:30px; }

.lightbox2-prev:hover,
.lightbox2-next:hover,
.lightbox2-close:hover{
  opacity:0.7;
}

.lightbox2-trigger{
  cursor:pointer;
  transition:0.3s ease;
}
.lightbox2-trigger:hover{
  transform:scale(1.03);
}

/* ----- Sección 10 - Electrical Connections - Descripción + Galería ------ */
.project-electrical{
  padding:100px 20px;
  background:#ffffff;
}
.electrical-container{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:center;
}

.electrical-gallery{
  display:flex;
  gap:15px;
}

.electrical-main img{
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:12px;
}

.electrical-thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:500px;
  overflow-y:auto;
}

.electrical-thumb{
  width:90px;
  height:70px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  opacity:0.6;
  transition:0.3s ease;
}

.electrical-thumb.active,
.electrical-thumb:hover{
  opacity:1;
  transform:scale(1.05);
}

.electrical-content h2{
  font-size:40px;
  margin-bottom:15px;
}
.electrical-content p{
  margin-bottom:18px;
  line-height:1.6;
}
.electrical-content ul{
  list-style:none;
  padding:0;
  margin:25px 0;
}
.electrical-content ul li{
  margin-bottom:10px;
  font-weight:500;
}

.electrical-main{
  position:relative;
  width:100%;
  min-width:0;
}

.electrical-prev,
.electrical-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.5);
  border:none;
  color:#fff;
  font-size:28px;
  padding:10px 15px;
  cursor:pointer;
  border-radius:6px;
  transition:0.3s ease;
}

.electrical-prev{ left:15px; }
.electrical-next{ right:15px; }

.electrical-prev:hover,
.electrical-next:hover{
  background:rgba(0,0,0,0.8);
}

.electrical-gallery{
  display:flex;
  gap:15px;
  min-width:0;
}

.electrical-container > *{
  min-width:0;
}

@media (max-width: 992px){
  .electrical-container{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .electrical-gallery{
    flex-direction: column;
    width: 100%;
  }

  .electrical-main{
    width: 100%;
  }
  .electrical-main img{
    width: 100%;
    height: 360px;
  }

  .electrical-thumbs{
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    width: 100%;
    gap: 10px;
  }
  .electrical-thumb{
    flex: 0 0 auto;
    width: 80px;
    height: 60px;
  }
}

@media (max-width: 768px){
  .project-electrical{
    padding: 70px 15px;
  }
  .electrical-main img{
    height: 260px;
  }

  .electrical-content{
    text-align: center;
  }
  .electrical-content h2{
    font-size: 24px;
    line-height: 1.2;
  }
}

@media (max-width: 480px){
  .electrical-main img{
    height: 220px;
  }

  .electrical-thumb{
    width: 65px;
    height: 50px;
  }

  .electrical-prev,
  .electrical-next{
    font-size: 18px;
    padding: 6px 10px;
  }
}

/* ----- Sección 11 - Battery Installation - Descripción + Galería ------ */
.project-battery{
  padding:100px 20px;
  background:#f9f9f9;
}

.battery-container{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:center;
}
.battery-container > *{
  min-width:0;
}

.battery-gallery{
  display:flex;
  gap:15px;
  min-width:0;
}

.battery-main{
  position:relative;
  width:100%;
}
.battery-main img{
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:12px;
}

.battery-prev,
.battery-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.5);
  border:none;
  color:#fff;
  font-size:28px;
  padding:10px 15px;
  cursor:pointer;
  border-radius:6px;
  transition:0.3s ease;
}

.battery-prev{ left:15px; }
.battery-next{ right:15px; }

.battery-prev:hover,
.battery-next:hover{
  background:rgba(0,0,0,0.8);
}

.battery-thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:500px;
  overflow-y:auto;
}

.battery-thumb{
  width:90px;
  height:70px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  opacity:0.6;
  transition:0.3s ease;
}

.battery-thumb.active,
.battery-thumb:hover{
  opacity:1;
  transform:scale(1.05);
}

.battery-content h2{
  font-size:38px;
  margin-bottom:15px;
}
.battery-content p{
  margin-bottom:18px;
  line-height:1.6;
}

@media (max-width: 992px){
  .battery-container{
    grid-template-columns:1fr;
    gap:40px;
  }

  .battery-gallery{
    flex-direction:column;
  }

  .battery-main img{
    height:360px;
  }

  .battery-thumbs{
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    max-height:none;
  }
  .battery-thumb{
    flex:0 0 auto;
    width:80px;
    height:60px;
  }
}

@media (max-width:768px){
  .battery-main img{
    height:260px;
  }
  .battery-content{
    text-align:center;
  }
  .battery-content h2{
    font-size:26px;
  }
}

@media (max-width:480px){
  .battery-main img{
    height:220px;
  }
  .battery-thumb{
    width:65px;
    height:50px;
  }
}

/* ---------- Sección 12 - Battery Benefits - Contenido Informativo ------------ */
.battery-benefits{
  padding:110px 20px;
  background:#ffffff;
}
.battery-benefits-container{
  max-width:1200px;
  margin:0 auto;
}

.section-tag{
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#1f6feb;
  font-weight:600;
}

.battery-benefits-header h2{
  font-size:40px;
  margin:15px 0 10px;
}
.section-line{
  width:60px;
  height:4px;
  background:linear-gradient(90deg,#1f6feb,#00c896);
  border-radius:4px;
  margin:15px 0 25px;
}
.battery-benefits-header p{
  font-size:18px;
  line-height:1.6;
  color:#555;
  max-width:1050px;
}

/* Grid */
.battery-benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin:70px 0;
}

/* Cards */
.benefit-card{
  padding:35px 30px;
  border-radius:16px;
  background: #ffffff;
  background: linear-gradient(79deg, rgba(255, 255, 255, 1) 0%, rgba(216, 227, 242, 1) 45%, rgba(196, 223, 242, 1) 59%, rgba(170, 194, 242, 1) 100%);
  transition:all 0.35s ease;
  position:relative;
  overflow:hidden;
}

.benefit-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg,#1f6feb,#00c896);
  transition:0.3s ease;
}

.benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.benefit-icon{
  font-size:28px;
  margin-bottom:18px;
}
.benefit-card h3{
  font-size:20px;
  margin-bottom:12px;
}
.benefit-card p{
  font-size:16px;
  line-height:1.6;
  color:#555;
}

.battery-benefits-footer{
  max-width:1200px;
}
.battery-benefits-footer p{
  font-size:18px;
  font-weight:500;
  line-height:1.6;
  color:#515151;
}

@media (max-width:992px){
  .battery-benefits-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:768px){
  .battery-benefits{
    padding:80px 20px;
  }
  .battery-benefits-grid{
    grid-template-columns:1fr;
  }
  .battery-benefits-header h2{
    font-size:28px;
  }
}

@media (max-width:768px){
  .battery-benefits-footer p{
    font-size:16px;
    text-align: center;
  }
}

/* ----- Sección 13 - Reel Final - Variante sutil del primer reel ------ */
.reel-variant{
  max-width:1000px;
  height:500px;
  box-shadow:0 30px 60px rgba(0,0,0,0.12);
  margin-top: 30px;
  margin-bottom: 30px;
}

.reel-variant .single-title{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  width:80%;
  max-width:700px;
}
.reel-variant .single-title h3{
  font-size:25px;
  font-weight:500;
  line-height:1.4;
  background:rgba(0,0,0,0.45);
  padding:12px 24px;
  border-radius:12px;
  display:inline-block;
}

.reel-variant .reel-slide::after{
  background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
}

/* TABLET */
@media (max-width: 992px){
  .reel-variant{
    height:420px;
  }
  .reel-variant .single-title h3{
    font-size:22px;
    padding:10px 20px;
  }
}

/* MÓVIL */
@media (max-width: 576px){
  .reel-variant{
    height:340px;
  }
  .reel-variant .single-title{
    bottom:25px;
    width:90%;
  }
  .reel-variant .single-title h3{
    font-size:18px;
    padding:8px 16px;
    line-height:1.3;
  }

}