/* =========================================================
   CITSA - NUEVOS DESARROLLOS / GALERIA
   ========================================================= */
:root{
  --citsa-blue:#0b5ca8;
  --citsa-blue-dark:#073c73;
  --citsa-blue-2:#1681ce;
  --citsa-blue-soft:#eaf4ff;
  --citsa-text:#18324d;
  --citsa-muted:#697b8e;
  --citsa-border:#dce7f1;
  --citsa-bg:#f3f7fb;
  --citsa-white:#fff;
  --citsa-shadow:0 12px 34px rgba(12,48,84,.09);
}

.citsa-development-page{
  background:
    radial-gradient(circle at 8% 0%,rgba(22,129,206,.07),transparent 28%),
    linear-gradient(180deg,#f7fbff 0%,#ffffff 300px,#f3f7fb 100%);
  padding:0 0 70px;
}

.citsa-development-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:30px 18px 0;
}

.citsa-hero{
  position:relative;
  overflow:hidden;
  margin:0 0 25px;
  padding:43px 46px;
  border-radius:26px;
  color:#fff;
  background:linear-gradient(132deg,#062f59 0%,#0b5ca8 55%,#1885d0 100%);
  box-shadow:0 18px 48px rgba(5,57,108,.20);
}

.citsa-hero::before,
.citsa-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.citsa-hero::before{
  width:360px;
  height:360px;
  right:-130px;
  top:-180px;
  background:rgba(255,255,255,.075);
}

.citsa-hero::after{
  width:260px;
  height:260px;
  left:-120px;
  bottom:-170px;
  background:rgba(255,255,255,.055);
}

.citsa-hero-glow{
  position:absolute;
  right:12%;
  bottom:-70px;
  width:280px;
  height:140px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  filter:blur(18px);
}

.citsa-hero-content{position:relative;z-index:1;max-width:900px;}

.citsa-kicker,
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:6px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.citsa-kicker{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);
}

.citsa-hero h2{
  margin:0 0 10px;
  color:#fff;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:40px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.025em;
}

.citsa-hero p{
  max-width:820px;
  margin:0;
  color:rgba(255,255,255,.90);
  font-family:"Open Sans",Arial,sans-serif;
  font-size:15px;
  line-height:1.76;
}

.citsa-hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:25px;
}

.citsa-stat{
  min-width:120px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}

.citsa-stat strong{
  display:block;
  color:#fff;
  font-size:21px;
  line-height:1;
}

.citsa-stat span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.citsa-intro-card{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:30px;
  padding:23px 26px;
  background:#fff;
  border:1px solid var(--citsa-border);
  border-radius:18px;
  box-shadow:var(--citsa-shadow);
}

.citsa-intro-accent{
  flex:0 0 5px;
  min-height:73px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--citsa-blue),#77b9e8);
}

.citsa-intro-label{
  margin-bottom:7px;
  color:var(--citsa-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
}

.citsa-intro-card p{
  margin:0;
  color:var(--citsa-muted);
  font-family:"Open Sans",Arial,sans-serif;
  font-size:14px;
  line-height:1.8;
}

.citsa-feature-section,
.citsa-catalog-section{margin-bottom:32px;}

.citsa-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:28px 0 17px;
}

.section-eyebrow{
  margin-bottom:7px;
  padding:0;
  color:var(--citsa-blue);
  background:none;
}

.citsa-section-heading h3{
  margin:0 0 4px;
  color:var(--citsa-text);
  font-family:"Open Sans",Arial,sans-serif;
  font-size:27px;
  font-weight:800;
  line-height:1.15;
}

.citsa-section-heading p{
  margin:0;
  color:var(--citsa-muted);
  font-size:13px;
}

.citsa-section-badge{
  padding:7px 10px;
  border:1px solid #cae1f2;
  border-radius:999px;
  background:#eef7fe;
  color:var(--citsa-blue-dark);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.desarrollos-tools{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.desarrollos-search{
  position:relative;
  flex:1 1 auto;
}

.desarrollos-search span{
  position:absolute;
  left:16px;
  top:50%;
  z-index:2;
  transform:translateY(-55%);
  color:#8799aa;
  font-size:23px;
  pointer-events:none;
}

.desarrollos-search input{
  width:100%;
  height:52px;
  box-sizing:border-box;
  padding:0 18px 0 47px;
  border:1px solid #ccd9e6;
  border-radius:14px;
  background:#fff;
  color:var(--citsa-text);
  font-family:"Open Sans",Arial,sans-serif;
  font-size:14px;
  outline:none;
  box-shadow:0 5px 18px rgba(10,45,78,.05);
  transition:.2s ease;
}

.desarrollos-search input:focus{
  border-color:#4b95d5;
  box-shadow:0 0 0 4px rgba(24,123,199,.10);
}

.desarrollos-counter{
  flex:0 0 auto;
  min-width:180px;
  padding:15px 15px;
  border-radius:14px;
  background:var(--citsa-blue-soft);
  color:var(--citsa-blue-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
}

.desarrollo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.desarrollo-grid-new{grid-template-columns:repeat(3,minmax(0,1fr));}

.desarrollo-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--citsa-border);
  border-radius:17px;
  box-shadow:0 7px 24px rgba(13,45,76,.065);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.desarrollo-card:hover{
  transform:translateY(-4px);
  border-color:#bdd5e8;
  box-shadow:0 15px 34px rgba(13,45,76,.12);
}

.desarrollo-thumb-button{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#eef3f7;
  cursor:pointer;
}

.desarrollo-thumb-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f7fafc,#edf2f7);
}

.desarrollo-thumb-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(4,31,56,.09) 100%);
}

.desarrollo-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}

.desarrollo-watermark{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:clamp(105px,26%,205px);
  height:auto;
  max-height:44%;
  object-fit:contain;
  transform:translate(-50%,-50%);
  opacity:.15;
  filter:grayscale(1) brightness(1.15);
  pointer-events:none;
  user-select:none;
}

.desarrollo-new-badge{
  position:absolute;
  left:10px;
  top:10px;
  z-index:6;
  padding:6px 8px;
  border-radius:999px;
  background:#0b5ca8;
  color:#fff;
  box-shadow:0 7px 16px rgba(7,60,115,.22);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.thumb-view-label{
  position:absolute;
  right:10px;
  bottom:9px;
  z-index:6;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(6,35,61,.74);
  color:#fff;
  backdrop-filter:blur(6px);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
}

.thumb-view-label b{font-size:12px;}

.desarrollo-card-body{padding:15px 16px 16px;}

.desarrollo-title{
  display:block;
  margin:0 0 12px;
  color:var(--citsa-text);
  font-family:"Open Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.48;
  text-transform:uppercase;
}

.desarrollo-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.desarrollo-meta{
  min-width:0;
  color:#7b8da0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.desarrollo-footer-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.desarrollo-open-label{
  color:var(--citsa-blue);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.desarrollo-pdf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:39px;
  padding:6px 8px;
  border:1px solid #efc3c3;
  border-radius:8px;
  background:#fff7f7;
  color:#b42323;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
}

.desarrollo-pdf:hover{background:#ffefef;text-decoration:none;}

.desarrollo-no-image[hidden]{display:none !important;}

.desarrollo-no-image{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:20px;
  background:
    radial-gradient(circle at 20% 20%,rgba(11,92,168,.15),transparent 34%),
    linear-gradient(135deg,#eef5fb,#dbe9f5);
  color:#3b5f7f;
  text-align:center;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1.5;
}

.desarrollo-empty{
  grid-column:1/-1;
  padding:38px 20px;
  border:1px dashed #ccd9e5;
  border-radius:16px;
  background:#fff;
  color:#68798b;
  text-align:center;
}

.load-more-wrap{display:flex;justify-content:center;padding-top:24px;}

.load-more-button{
  padding:12px 18px;
  border:1px solid #b9d3e8;
  border-radius:12px;
  background:#fff;
  color:var(--citsa-blue-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  cursor:pointer;
  box-shadow:0 5px 17px rgba(10,45,78,.05);
  transition:.18s ease;
}

.load-more-button:hover{background:#f2f8fd;border-color:#8ebbdc;transform:translateY(-1px);}

/* Visor */
.citsa-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
  background:rgba(3,16,29,.86);
  backdrop-filter:blur(8px);
}

.citsa-lightbox.is-open{display:flex;}

.citsa-lightbox-dialog{
  position:relative;
  width:min(1160px,97vw);
  max-height:96vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:#0b1723;
  box-shadow:0 30px 80px rgba(0,0,0,.47);
}

.citsa-lightbox-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:13px 17px;
  background:linear-gradient(180deg,#132536,#0c1925);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.citsa-lightbox-title{
  min-width:0;
  color:#fff;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
}

.citsa-lightbox-meta{
  margin-top:3px;
  color:#8ba2b8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
}

.citsa-lightbox-close{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.citsa-lightbox-close:hover{background:rgba(255,255,255,.17);}

.citsa-lightbox-body{
  position:relative;
  min-height:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 70px 16px;
  background:#07131f;
}

.citsa-lightbox-image-wrap{
  position:relative;
  width:min(960px,100%);
  height:min(67vh,720px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.citsa-lightbox-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:6px;
  background:#fff;
}

.citsa-lightbox-image-wrap .desarrollo-watermark{width:180px;opacity:.13;}

.citsa-lightbox-nav{
  position:absolute;
  top:50%;
  width:48px;
  height:48px;
  margin-top:-24px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(4px);
}

.citsa-lightbox-nav:hover{background:rgba(255,255,255,.16);}
.citsa-lightbox-prev{left:13px;}
.citsa-lightbox-next{right:13px;}

.citsa-lightbox-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 17px 11px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#0d1a26;
}

.lightbox-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:#edf5fb;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
}

.lightbox-action:hover{text-decoration:none;background:rgba(255,255,255,.11);color:#fff;}
.lightbox-pdf{border-color:rgba(240,158,158,.4);color:#ffd9d9;}
.lightbox-whatsapp-share{border-color:rgba(109,217,145,.33);color:#d9ffe5;}
.whatsapp-icon{width:18px;height:18px;display:inline-block;flex:0 0 18px;}

.citsa-lightbox-bottom{
  padding:7px 17px 12px;
  color:#91a5b8;
  background:#0d1a26;
  font-size:11px;
  text-align:center;
}

body.citsa-modal-open{overflow:hidden;}

@media (max-width:1050px){
  .desarrollo-grid,
  .desarrollo-grid-new{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:767px){
  .citsa-development-page{padding-bottom:38px;}
  .citsa-development-wrap{padding:14px 10px 0;}
  .citsa-hero{padding:28px 22px;border-radius:18px;}
  .citsa-hero h2{font-size:30px;}
  .citsa-hero p{font-size:14px;line-height:1.65;}
  .citsa-hero-stats{gap:7px;margin-top:20px;}
  .citsa-stat{min-width:0;flex:1 1 90px;padding:10px 9px;}
  .citsa-stat strong{font-size:18px;}
  .citsa-stat span{font-size:9px;}
  .citsa-intro-card{gap:12px;padding:18px 16px;border-radius:15px;}
  .citsa-intro-accent{min-height:90px;}
  .citsa-intro-card p{font-size:13px;line-height:1.7;}
  .citsa-section-heading{display:block;margin-top:24px;}
  .citsa-section-heading h3{font-size:22px;}
  .citsa-section-badge{display:inline-flex;margin-top:10px;}
  .desarrollos-tools{display:block;margin-bottom:14px;}
  .desarrollos-counter{margin-top:9px;min-width:0;padding:10px 12px;}
  .desarrollo-grid,
  .desarrollo-grid-new{grid-template-columns:1fr;gap:13px;}
  .desarrollo-thumb-frame{aspect-ratio:16/10;}
  .desarrollo-card-body{padding:13px 14px 14px;}
  .desarrollo-title{font-size:12px;}
  .desarrollo-open-label{font-size:9px;}
  .citsa-lightbox{padding:7px;}
  .citsa-lightbox-dialog{width:100%;max-height:98vh;border-radius:15px;}
  .citsa-lightbox-body{padding:10px 42px 12px;}
  .citsa-lightbox-image-wrap{height:63vh;}
  .citsa-lightbox-nav{width:36px;height:36px;margin-top:-18px;font-size:23px;}
  .citsa-lightbox-prev{left:4px;}
  .citsa-lightbox-next{right:4px;}
  .citsa-lightbox-title{font-size:12px;}
  .citsa-lightbox-actions{padding:9px 11px;}
  .lightbox-action{flex:1 1 calc(50% - 8px);min-height:33px;padding:7px 8px;font-size:9px;}
}