﻿.nav-dropdown-menu {
  margin-top: 4px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
  opacity: 1 !important;
  visibility: visible !important;
}.nav-dropdown-menu {
  margin-top: 4px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
  opacity: 1 !important;
  visibility: visible !important;
}.nav-dropdown-menu{display:none!important;}.nav-dropdown:hover .nav-dropdown-menu{display:block!important;}body{opacity:1!important;}body { opacity: 1 !important; transition: none !important; }

body { opacity: 1 !important; transition: none !important; }

/* ── Surcos opacity override ── */
body { opacity: 1 !important; transition: none !important; }

/* ============================================================
   CORPORACIÓN SURCOS — styles.css v2
   ============================================================ */

/* ── Variables & Reset ─────────────────────────────────────── */
:root {
  --blue:   #1f60be;
  --blue-d: #0d3d85;
  --blue-l: #e8f1fd;
  --warm:   #f97316;
  --green:  #059669;
  --ink:    #0f1923;
  --ink-2:  #3d4f63;
  --ink-3:  #94a3b8;
  --bg:     #f7fafd;
  --white:  #ffffff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Crimson Pro', serif; }
.syne { font-family: 'Syne', sans-serif; }

/* ── Navegación ────────────────────────────────────────────── */
#main-nav { transition: all 0.4s ease; }
#main-nav.scrolled {
  background: rgba(15,25,35,0.97) !important;
  backdrop-filter: blur(16px);
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  box-shadow: 0 4px 40px rgba(0,0,0,.25);
}

/* Submenú Más */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 1rem;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  border: 1px solid #e4ecf4;
  opacity: 1;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .25s ease;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: .75rem;
  font-size: 12px;
  font-weight: 600;
  color: #3d4f63;
  text-decoration: none;
  transition: all .2s;
}
.nav-dropdown-menu a:hover {
  background: var(--blue-l);
  color: var(--blue);
}
.nav-dropdown-menu a i {
  width: 18px;
  text-align: center;
  color: var(--blue);
  font-size: 13px;
}

/* ── Hero Principal ────────────────────────────────────────── */
.hero-bg {
  background: linear-gradient(135deg, #0d1f35 0%, #1a3a6b 50%, #0d2a50 100%);
  position: relative;
  overflow: hidden;
}
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px; opacity: .5;
}
.hero-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.b1 { width:700px;height:700px;background:rgba(31,96,190,.25);top:-200px;right:-150px;z-index:1;animation:drift 14s ease-in-out infinite; }
.b2 { width:400px;height:400px;background:rgba(5,150,105,.12);bottom:-100px;left:50px;z-index:1;animation:drift 10s ease-in-out infinite reverse; }
.b3 { width:250px;height:250px;background:rgba(249,115,22,.08);top:40%;left:35%;z-index:1;animation:drift 8s ease-in-out infinite 2s; }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.05)} }

.hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #93c5fd; padding: 6px 16px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.hero-title { font-size: clamp(2.8rem,7vw,5.5rem); line-height: 1.05; color: #fff; font-style: italic; }
.hero-title .accent { color: #60a5fa; font-style: normal; font-family: 'Syne', sans-serif; }
.hero-stat-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px); border-radius: 20px; padding: 20px 24px; transition: all .3s ease;
}
.hero-stat-card:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.hero-img-frame {
  border-radius: 2.5rem; overflow: hidden;
  border: 3px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 80px rgba(0,0,0,.5); position: relative;
}
.hero-img-frame::after {
  content:''; position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(31,96,190,.15) 0%,transparent 60%);
  pointer-events:none;
}
.floating-badge {
  background: white; border-radius: 16px; padding: 12px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 12px;
  animation: floatBadge 4s ease-in-out infinite;
}
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── Hero Páginas Internas ─────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0d1f35 0%, #1a3a6b 55%, #0d2a50 100%);
  position: relative; overflow: hidden;
}
.page-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #93c5fd; padding: 5px 14px; border-radius: 100px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  backdrop-filter: blur(10px);
}

/* ── Etiquetas Sección ─────────────────────────────────────── */
.sec-label {
  display: inline-block; font-family: 'Syne', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color: var(--blue); padding: 5px 14px; background: var(--blue-l);
  border-radius: 100px; margin-bottom: 14px;
}
.sec-title { font-size: clamp(2rem,4.5vw,3.2rem); color: var(--ink); line-height: 1.15; }

/* ── Cards Valores / Líneas ───────────────────────────────── */
.value-card {
  position: relative; overflow: hidden; padding: 36px 30px;
  border-radius: 2rem; background: white; border: 1.5px solid #e8f1fd;
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.value-card::before {
  content:''; position:absolute;inset:0;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 100%);
  opacity:0; transition:opacity .4s ease;
}
.value-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(31,96,190,.2); }
.value-card:hover::before { opacity:1; }
.value-card > * { position:relative; z-index:1; }
.value-card:hover .vc-icon { background:rgba(255,255,255,.15); }
.value-card:hover .vc-title { color:white; }
.value-card:hover .vc-text  { color:rgba(255,255,255,.75); }
.value-card:hover .vc-number{ color:rgba(255,255,255,.08); }
.vc-number {
  position:absolute;bottom:-10px;right:10px;
  font-family:'Syne',sans-serif;font-size:80px;font-weight:800;
  color:rgba(31,96,190,.05);line-height:1;z-index:0;
  transition:color .4s;pointer-events:none;
}

/* ── Líneas de Trabajo ─────────────────────────────────────── */
.linea-card {
  border-radius: 1.75rem; padding: 32px;
  background: var(--bg); border: 1.5px solid #e4ecf4;
  transition: all .4s cubic-bezier(.16,1,.3,1);
  cursor: default; position: relative; overflow: hidden;
}
.linea-card::after {
  content:'';position:absolute;bottom:0;left:0;
  width:100%;height:3px;
  background:linear-gradient(90deg,var(--blue),#60a5fa);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.linea-card:hover { background:white;box-shadow:0 20px 50px rgba(31,96,190,.12);transform:translateY(-6px); }
.linea-card:hover::after { transform:scaleX(1); }

/* ── Hexágonos Población ───────────────────────────────────── */
.pop-hex {
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  width:100px;height:115px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;cursor:default;transition:all .3s ease;
}
.pop-hex:hover { transform:scale(1.1);filter:brightness(1.1); }

/* ── Carrusel Testimonios ──────────────────────────────────── */
.testi-track { display:flex;gap:24px;transition:transform .6s cubic-bezier(.16,1,.3,1); }
.testi-card {
  min-width:340px;max-width:340px;
  background:white;border-radius:2rem;
  padding:32px;border:1.5px solid #e4ecf4;
  box-shadow:0 8px 32px rgba(0,0,0,.05);flex-shrink:0;
}
.quote-mark {
  font-family:'Crimson Pro',serif;font-size:80px;line-height:.7;
  color:var(--blue);opacity:.15;float:left;margin-right:4px;
}
.star { color:#f59e0b;font-size:12px; }
.testi-nav {
  width:44px;height:44px;border-radius:50%;border:1.5px solid #e4ecf4;
  background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.testi-nav:hover { background:var(--blue);border-color:var(--blue);color:white; }
.testi-dot { width:8px;height:8px;border-radius:50%;background:#e4ecf4;cursor:pointer;transition:all .3s; }
.testi-dot.active { width:24px;background:var(--blue); }

/* ── Aliados ───────────────────────────────────────────────── */
.ally-logo {
  background:white;border:1.5px solid #e4ecf4;border-radius:1.5rem;
  padding:20px 24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  min-height:110px;transition:all .3s ease;cursor:default;
}
.ally-logo:hover { box-shadow:0 16px 40px rgba(31,96,190,.12);transform:translateY(-4px);border-color:var(--blue-l); }
.ally-logo img { max-height:50px;max-width:100%;object-fit:contain; }
.ally-name { font-size:9px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;text-align:center; }

/* ── Video ─────────────────────────────────────────────────── */
.video-wrap { border-radius:2rem;overflow:hidden;position:relative;box-shadow:0 40px 80px rgba(0,0,0,.25); }
.video-placeholder {
  background:linear-gradient(135deg,#0d1f35 0%,#1a3a6b 100%);aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;cursor:pointer;position:relative;overflow:hidden;
}
.play-btn {
  width:80px;height:80px;background:white;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s;cursor:pointer;
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.4)} 50%{box-shadow:0 0 0 24px rgba(255,255,255,.0)} }
.play-btn:hover { transform:scale(1.12); }
.video-frame { display:none;width:100%;aspect-ratio:16/9;border:none; }

/* ── CTA Strip ─────────────────────────────────────────────── */
.cta-strip { background:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 100%);position:relative;overflow:hidden; }
.cta-strip::before { content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); }

/* ── Donación Cards ────────────────────────────────────────── */
.don-card { background:white;border-radius:2rem;padding:32px;border:2px solid transparent;transition:all .3s ease;text-align:center; }
.don-card:hover { border-color:var(--blue);transform:translateY(-4px);box-shadow:0 20px 50px rgba(31,96,190,.12); }
.metodo-card { background:white;border-radius:2rem;border:1.5px solid #e4ecf4;padding:32px;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:pointer;position:relative;overflow:hidden; }
.metodo-card::after { content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .4s ease; }
.metodo-card:hover { box-shadow:0 24px 60px rgba(31,96,190,.12);transform:translateY(-5px); }
.metodo-card:hover::after { transform:scaleX(1); }
.metodo-card.nequi::after { background:linear-gradient(90deg,#7c3aed,#a78bfa); }
.metodo-card.daviplata::after { background:linear-gradient(90deg,#ea580c,#fb923c); }
.metodo-card.bancolombia::after { background:linear-gradient(90deg,#d97706,#fbbf24); }
.metodo-card.whatsapp::after { background:linear-gradient(90deg,#059669,#34d399); }
.copy-btn { background:var(--blue-l);color:var(--blue);border:none;border-radius:.75rem;padding:6px 14px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:5px; }
.copy-btn:hover { background:var(--blue);color:white; }
.copy-btn.copied { background:#d1fae5;color:#065f46; }

/* ── Galería ────────────────────────────────────────────────── */
.gal-item { position:relative;border-radius:1.25rem;overflow:hidden;aspect-ratio:1;cursor:pointer; }
.gal-item img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease; }
.gal-item:hover img { transform:scale(1.08); }
.gal-overlay {
  position:absolute;inset:0;background:rgba(13,31,53,.7);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s;
}
.gal-item:hover .gal-overlay { opacity:1; }

/* ── Proyectos ─────────────────────────────────────────────── */
.proy-card { background:white;border-radius:2rem;border:1.5px solid #e4ecf4;overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1); }
.proy-card:hover { box-shadow:0 24px 60px rgba(31,96,190,.12);transform:translateY(-6px); }
.proy-img { width:100%;height:200px;object-fit:cover; }

/* ── Formulario Contacto ───────────────────────────────────── */
.info-card { background:white;border-radius:1.5rem;border:1.5px solid #e4ecf4;padding:24px;display:flex;align-items:flex-start;gap:16px;transition:all .3s ease; }
.info-card:hover { border-color:#bfdbfe;box-shadow:0 8px 32px rgba(31,96,190,.08); }
.info-icon { width:48px;height:48px;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0; }
.form-group { margin-bottom:20px; }
.form-label { display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:#64748b;margin-bottom:8px; }
.form-input { width:100%;padding:14px 18px;border-radius:1rem;border:1.5px solid #e4ecf4;background:white;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s; }
.form-input:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,96,190,.1); }
.form-input::placeholder { color:#cbd5e1; }
textarea.form-input { resize:vertical;min-height:130px; }
select.form-input { cursor:pointer; }
#form-success { display:none; }

/* ── Colaboradores ─────────────────────────────────────────── */
.colab-card { background:white;border-radius:2rem;border:1.5px solid #e4ecf4;overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1); }
.colab-card:hover { box-shadow:0 24px 60px rgba(31,96,190,.12);transform:translateY(-6px); }
.colab-initials { width:100%;height:180px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:3rem;font-weight:800;color:var(--blue); }
.colab-foto { width:100%;height:180px;object-fit:cover; }
.area-badge { display:inline-block;padding:3px 12px;border-radius:100px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--blue-l);color:var(--blue); }

/* ── Testimonios página ────────────────────────────────────── */
.test-card { background:white;border-radius:2rem;border:1.5px solid #e4ecf4;padding:32px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative; }
.test-card:hover { box-shadow:0 24px 60px rgba(31,96,190,.1);transform:translateY(-5px); }
.test-card .big-quote { font-family:'Crimson Pro',serif;font-size:5rem;line-height:.8;color:var(--blue);opacity:.1;position:absolute;top:20px;left:24px;pointer-events:none; }
.poblacion-tag { display:inline-block;padding:3px 10px;border-radius:100px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--blue-l);color:var(--blue); }
.stars { color:#f59e0b;font-size:11px;letter-spacing:2px; }

/* ── Nosotros ──────────────────────────────────────────────── */
.identity-card { background:white;border-radius:2rem;border:1.5px solid #e4ecf4;padding:36px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden; }
.identity-card::after { content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue),#60a5fa);transform:scaleX(0);transform-origin:left;transition:transform .4s ease; }
.identity-card:hover { box-shadow:0 24px 60px rgba(31,96,190,.1);transform:translateY(-5px); }
.identity-card:hover::after { transform:scaleX(1); }
.timeline-item { display:flex;gap:20px; }
.tl-dot { flex-shrink:0;display:flex;flex-direction:column;align-items:center; }
.tl-circle { width:40px;height:40px;border-radius:50%;background:var(--blue);color:white;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:11px;font-weight:800;flex-shrink:0;box-shadow:0 4px 16px rgba(31,96,190,.3); }
.tl-line { flex:1;width:2px;background:#e4ecf4;margin:6px 0; }
.valor-pill { display:flex;align-items:center;gap:12px;padding:16px 20px;background:white;border-radius:1.25rem;border:1.5px solid #e4ecf4;transition:all .3s ease;cursor:default; }
.valor-pill:hover { border-color:var(--blue);box-shadow:0 8px 24px rgba(31,96,190,.1);transform:translateX(6px); }
.valor-pill i { color:var(--blue);flex-shrink:0;width:20px;text-align:center; }

/* ── Filtros ───────────────────────────────────────────────── */
.filter-btn { padding:8px 20px;border-radius:100px;border:1.5px solid #e4ecf4;background:white;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:#64748b;cursor:pointer;transition:all .2s; }
.filter-btn.active, .filter-btn:hover { background:var(--blue);border-color:var(--blue);color:white; }

/* ── Footer ────────────────────────────────────────────────── */
.footer-link { transition:all .2s; }
.footer-link:hover { color:white;transform:translateX(4px); }

/* ── Scroll Top ────────────────────────────────────────────── */
#scrollTop { position:fixed;bottom:28px;right:28px;z-index:99;width:48px;height:48px;border-radius:50%;background:var(--blue);color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(31,96,190,.4);opacity:0;transform:translateY(20px);transition:all .3s ease; }
#scrollTop.show { opacity:1;transform:translateY(0); }
#scrollTop:hover { background:var(--blue-d);transform:translateY(-3px) !important; }

/* ── Cookie ────────────────────────────────────────────────── */
#cookie-banner { backdrop-filter:blur(12px);transition:transform .4s ease,opacity .4s ease; }
#cookie-banner.hide { transform:translateY(120%);opacity:0;pointer-events:none; }

/* ── Suscripción ───────────────────────────────────────────── */
.sus-input { padding:14px 18px;border-radius:1rem 0 0 1rem;border:1.5px solid #e4ecf4;border-right:none;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;width:100%; }
.sus-btn { padding:14px 20px;background:var(--blue);color:white;border:none;border-radius:0 1rem 1rem 0;font-family:'DM Sans',sans-serif;font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap; }
.sus-btn:hover { background:var(--blue-d); }

/* ── Aliados Redes ─────────────────────────────────────────── */
.red-card { background:white;border-radius:2rem;border:1.5px solid #e4ecf4;overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1); }
.red-card:hover { box-shadow:0 24px 60px rgba(31,96,190,.12);transform:translateY(-6px); }
.red-img { width:100%;height:200px;object-fit:cover; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:768px) {
  .testi-card { min-width:280px;max-width:280px; }
  .pop-hex    { width:80px;height:92px; }
  .nav-dropdown-menu { position:fixed;top:auto;right:16px;left:16px; }
}







