*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}

body{color:#222;line-height:1.5;background:#fff}

.container{max-width:1100px;margin:auto;padding:0 20px}

.hero{
  background:
    linear-gradient(rgba(15,31,45,0.70), rgba(15,31,45,0.70)),
    url("../../img/hero.jpg") center/cover no-repeat;
  color:#fff;
  padding:110px 0;
}

.hero h1{font-size:40px;margin-bottom:20px}
.hero p{font-size:20px;max-width:800px}
.hero .container{
  max-width:900px;
}


.section{padding:70px 0}
.section.alt{background:#f4f6f8}

h2{margin-bottom:20px;font-size:32px}
ul{margin-left:20px}
li{margin-bottom:8px}

.btn{
  display:inline-block;
  margin-top:25px;
  padding:14px 28px;
  background:#0077b6;
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn{
  display:inline-block;
  margin-top:25px;
  padding:14px 28px;
  background:var(--color-institucional);
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}



.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.card{
  background:#fff;
  border:1px solid #ddd;
  padding:20px;
  border-radius:4px;
}

.form{
  max-width:600px;
  margin-top:30px;
}

.form input,
.form textarea{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  border:1px solid #ccc;
  border-radius:3px;
}

.form textarea{min-height:120px}

footer{
  background:var(--color-institucional);
  color:#fff;
  text-align:center;
  padding:28px 0;
}


.whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  background:#25D366;
  color:#fff;
  padding:14px 18px;
  border-radius:50px;
  text-decoration:none;
  font-weight:bold;
}

/* animaciones */

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:all .8s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}

/* Logos clientes */

.clientes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
  margin-top:30px;
  align-items:center;
}

.cliente {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;

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

    height: 120px;
    padding: 18px;
}


.cliente img{
  max-width:140px;
  max-height:60px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.9;
  transform:scale(1.25);
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}

.cliente:hover img{
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.32);
}
/* Título sección clientes */
.section.confian h2{
  text-align:center;
}

.section.confian .clientes{
  margin-top:20px;
}
.section.confian .container h2{
    text-align:center !important;
}
/* Ajuste puntual logo Supervielle */
.cliente img[src*="supervielle"]{
  transform: scale(1.35);
}
.hero-logo{
  margin-bottom:14px;
}

.hero-logo img{
  width:110px;
  height:auto;
  display:block;

  background:rgba(255,255,255,0.75);
  padding:6px 10px;
  border-radius:4px;
}
:root{
  --color-institucional: #4653A2;
}
.section h2{
  color:var(--color-institucional);
}
/* Galería de obras */

/* Galería de obras */

.obra-galeria{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ahora el item real es el <a> */
.obra-galeria a{
  width: calc(50% - 6px);
  display:block;
}

/* la imagen ocupa el ancho del <a> */
.obra-galeria a img{
  width:100%;
  max-height:180px;
  height:auto;
  object-fit:contain;
  border-radius:6px;
  background:#f2f2f2;
  display:block;
  padding:6px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.obra-galeria a img:hover{
  transform:scale(1.02);
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}

/* Lightbox simple */

#lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  cursor:pointer;
}

#lightbox-overlay img{
  max-width:90vw;
  max-height:90vh;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}/* Lightbox overlay */

#lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

#lightbox-overlay img{
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
/* Lightbox */

#lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40px;
}

#lightbox-overlay img{
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}