/* ============================================================
   OBRAS
   ============================================================ */
.section-obras{ background: var(--blue-100); }
.section-obras .section-inner{ padding-top: var(--space-md); padding-bottom: var(--space-md); }
.section-obras .section-title{ margin-bottom: var(--space-sm); }

.obras-hook{
  font-size: var(--fs-lead);
  color: var(--navy-900);
  font-weight:600;
  max-width: 640px;
  margin-bottom: var(--space-md);
}

.obras-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: var(--space-sm);
}
/* Por defecto se muestra una sola fila (3 ítems); el resto queda
   detrás del botón "Ver más" para que la sección no supere 100vh. */
.obras-grid > *:nth-child(n+4){ display:none; }
.obras-grid.is-expanded > *:nth-child(n+4){ display:flex; }
.obras-item{
  position:relative;
  aspect-ratio: 4/3;
  border:none;
  padding:0;
  overflow:hidden;
  background: var(--blue-100);
}
.obras-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform var(--dur-med) var(--ease);
}
.obras-item:hover img{ transform: scale(1.05); }
.obras-item span{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 12px 16px;
  background: linear-gradient(0deg, rgba(3,4,94,0.85) 0%, rgba(3,4,94,0) 100%);
  color: var(--white);
  font-size: 0.85rem;
  font-weight:600;
  text-align:left;
}
.obras-item--text{
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--navy-900);
  cursor:default;
}
.obras-item--text[href]{
  cursor:pointer;
  transition: background var(--dur-fast) var(--ease);
}
.obras-item--text[href]:hover{ background: var(--blue-700); }
.obras-item--text span{
  position:static;
  background:none;
  text-align:center;
  padding: var(--space-md);
  font-size: 1rem;
}

.lightbox[hidden]{ display:none; }
.lightbox{
  position:fixed;
  inset:0;
  z-index: 200;
  background:
    linear-gradient(rgba(3,4,94,0.92), rgba(3,4,94,0.92)),
    url('../img/fondo-logo.webp');
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--space-lg);
}
.lightbox figure{ max-width: 90vw; max-height: 85vh; margin:0; text-align:center; }
.lightbox img{ max-width:100%; max-height:80vh; object-fit:contain; }
.lightbox figcaption{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: var(--space-sm);
  color: var(--blue-100);
  margin-top: var(--space-sm);
  font-size: 0.9rem;
}
.lightbox-counter{ color: var(--blue-300); }
.lightbox-close{
  position:absolute;
  top: var(--space-md);
  right: var(--space-md);
  background:none;
  border: 1px solid var(--blue-300);
  color: var(--white);
  width: 40px; height:40px;
  font-size: 1.1rem;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background: rgba(202,240,248,0.12);
  border: 1px solid var(--blue-300);
  width: 48px; height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-nav img{ height:22px; width:22px; max-height:none; filter: invert(1); }
.lightbox-prev{ left: var(--space-md); }
.lightbox-next{ right: var(--space-md); }
@media (max-width: 600px){
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-prev{ left: var(--space-sm); }
  .lightbox-next{ right: var(--space-sm); }
}

.project-picker[hidden]{ display:none; }
.project-picker{
  position:fixed;
  inset:0;
  z-index: 200;
  background:
    linear-gradient(rgba(3,4,94,0.92), rgba(3,4,94,0.92)),
    url('../img/fondo-logo.webp');
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--space-lg);
}
.project-picker-inner{ max-width: 720px; width:100%; text-align:center; }
.project-picker-inner h3{
  color: var(--white);
  font-size: 1.3rem;
  font-weight:700;
  margin-bottom: var(--space-md);
}
.project-picker-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.project-picker-item{
  position:relative;
  aspect-ratio: 4/3;
  border:none;
  padding:0;
  overflow:hidden;
  background: var(--blue-100);
}
.project-picker-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform var(--dur-med) var(--ease);
}
.project-picker-item:hover img{ transform: scale(1.05); }
.project-picker-item span{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 12px 16px;
  background: linear-gradient(0deg, rgba(3,4,94,0.85) 0%, rgba(3,4,94,0) 100%);
  color: var(--white);
  font-size: 0.85rem;
  font-weight:600;
  text-align:left;
}
@media (max-width: 600px){
  .project-picker-grid{ grid-template-columns: 1fr; }
}

.clientes .tab-subtitle{ margin-top: var(--space-sm); }

.clientes-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: var(--space-lg);
}
.clientes-strip img{
  height: 40px;
  width:auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--dur-fast) var(--ease);
}
.clientes-strip img:hover{ filter: none; }

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

.obras-show-more{
  display:block;
  width:100%;
  margin-bottom: var(--space-sm);
  background:none;
  border: 1px solid var(--blue-500);
  color: var(--blue-700);
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition: background var(--dur-fast) var(--ease);
}
.obras-show-more:hover{ background: var(--blue-100); }

/* ============================================================
   CLUB DEL COLOCADOR
   ============================================================ */
.section-club{ background: var(--navy-900); }
.section-title--light{ color: var(--white); }

.club-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom: var(--space-lg);
  padding-right: 260px;
}
.club-header .eyebrow{ margin-bottom: var(--space-xs); }
.club-header .section-title{ margin-bottom: 0; }
.club-logo{
  position:absolute;
  top: -35px;
  right: 100px;
  height: 150px;
  width: auto;
}

.club-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-lg);
  align-items:start;
}
.club-benefits{ display:flex; flex-direction:column; gap: 14px; }
.club-benefits li{
  position:relative;
  padding-left: 26px;
  color: var(--blue-100);
  font-size: 1rem;
}
.club-benefits li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:10px; height:10px;
  border: 2px solid var(--blue-500);
}

.club-target{
  border-left: 1px solid rgba(202,240,248,0.25);
  padding-left: var(--space-lg);
}
.club-target h3{
  font-size: 1.15rem;
  font-weight:700;
  color: var(--white);
  margin-bottom: var(--space-sm);
}
.club-target p{
  color: var(--blue-200);
  margin-bottom: var(--space-md);
}

@media (max-width: 760px){
  .club-header{ flex-direction:column; align-items:flex-start; gap: var(--space-sm); padding-right:0; padding-top: 100px; }
  .club-logo{ position:absolute; top:0; right:0; height: 90px; }
  .club-grid{ grid-template-columns: 1fr; }
  .club-target{ border-left:none; padding-left:0; border-top: 1px solid rgba(202,240,248,0.25); padding-top: var(--space-md); }
}

/* --- Página dedicada: Club del Colocador --- */
.section-club--alt{ background: var(--white); }
.club-lead{
  max-width: 640px;
  color: var(--blue-100);
  font-size: var(--fs-lead);
  margin-bottom: var(--space-md);
}
.club-benefits--light li{ color: rgba(10,17,40,0.78); }

.club-steps{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
}
.club-step{
  display:flex;
  gap: var(--space-sm);
  align-items:flex-start;
}
.club-step-num{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight:600;
  color: var(--blue-400);
  flex-shrink:0;
}
.club-step h3{
  font-size: 1.05rem;
  font-weight:700;
  color: var(--white);
  margin-bottom: 4px;
}
.club-step p{ color: var(--blue-200); font-size: 0.9rem; }

@media (max-width: 760px){
  .club-steps{ grid-template-columns: 1fr; }
}