/* ===== Paleta ROP (ajustada al logo) ===== */
:root{
  --rop-primary: #0C67A8;
  --rop-secondary:#6CC6EE;
  --rop-dark: #0A3558;
  --rop-body: #2B2B2B;
  --rop-muted:#6c757d;
  --rop-radius: 1rem;
}

body{
  color: var(--rop-body);
}

/* Topbar */
.topbar{
  background: rgba(108,198,238,.10);
  border-bottom: 1px solid rgba(12,103,168,.08);
}

/* Navbar */
.navbar-shadow{
  box-shadow: 0 10px 30px rgba(11,32,48,.06);
}
.brand-text{ color: var(--rop-dark); }

.navbar .nav-link{
  color: rgba(10,53,88,.78);
  font-weight: 500;
}
.navbar .nav-link:hover{ color: var(--rop-primary); }
.navbar .nav-link.active{
  color:#fff;
  background: var(--rop-primary);
  border-radius: .65rem;
  padding: .4rem .8rem;
}

/* Hero */
.hero{
  background:
    radial-gradient(120% 100% at 90% 10%, rgba(108,198,238,.30), transparent 55%),
    radial-gradient(120% 100% at 10% 90%, rgba(12,103,168,.14), transparent 60%),
    linear-gradient(135deg, rgba(108,198,238,.12), rgba(12,103,168,.04));
  padding: 40px 0;
}
.hero-title{ color: var(--rop-dark); }

.hero-card{
  background: #fff;
  border: 1px solid rgba(12,103,168,.10);
  border-radius: var(--rop-radius);
  box-shadow: 0 10px 30px rgba(11,32,48,.08);
}

/* Métricas */
.hero-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.metric{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(12,103,168,.08);
  border-radius: .9rem;
  padding: .75rem .85rem;
}
.metric-num{
  font-weight: 800;
  color: var(--rop-dark);
}
.metric-label{
  font-size: .85rem;
  color: rgba(10,53,88,.65);
}

/* Títulos */
.section-title{
  font-weight: 800;
  color: var(--rop-dark);
}

/* Cards estilo “Programas” */
.feature-card{
  position: relative;
  border-radius: var(--rop-radius);
  background: #fff;
  border: 1px solid rgba(12,103,168,.12);
  box-shadow: 0 2px 8px rgba(11,32,48,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
  cursor: pointer;
}
.feature-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding:1px;
  background:
    linear-gradient(135deg, rgba(108,198,238,.9), rgba(12,103,168,.25) 40%, transparent 70%),
    conic-gradient(from 180deg at 50% 50%, rgba(12,103,168,.35), rgba(108,198,238,.45), rgba(12,103,168,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events:none; transition: opacity .35s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(11,32,48,.12);
  border-color: rgba(12,103,168,.25);
}
.feature-card:hover::before{ opacity: 1; }

/* Icono con halo */
.feature-icon{
  width: 44px; height: 44px; flex: 0 0 44px;
  display:grid; place-items:center;
  border-radius: 50%;
  font-size: 22px;
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(108,198,238,.35), transparent 60%),
    rgba(12,103,168,.06);
  box-shadow: inset 0 0 0 1px rgba(12,103,168,.15), 0 6px 18px rgba(12,53,88,.12);
}

/* Botones */
.btn-primary{
  --bs-btn-bg: var(--rop-primary);
  --bs-btn-border-color: var(--rop-primary);
  --bs-btn-hover-bg: #0a5a92;
  --bs-btn-hover-border-color: #0a5a92;
  --bs-btn-active-bg: #084a79;
  --bs-btn-active-border-color: #084a79;
}

.btn-soft{
  --bs-btn-padding-y: .55rem;
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-font-weight: 650;
  color: var(--rop-primary);
  background: rgba(12,103,168,.06);
  border: 1px solid rgba(12,103,168,.18);
  border-radius: .7rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-soft:hover{
  background: rgba(12,103,168,.12);
  border-color: rgba(12,103,168,.28);
  transform: translateY(-1px);
}

/* Fondos suaves tipo “noticias” */
.news-section{
  background:
    radial-gradient(120% 120% at 15% -10%, rgba(108,198,238,.30), transparent 55%),
    radial-gradient(100% 120% at 110% 110%, rgba(12,103,168,.18), transparent 55%),
    linear-gradient(135deg, rgba(108,198,238,.10), rgba(12,103,168,.05));
}

/* Mapa */
.map-card{
  background: #fff;
  border-radius: var(--rop-radius);
  border: 1px solid rgba(12,103,168,.10);
  box-shadow: 0 10px 30px rgba(11,32,48,.08);
  overflow: hidden;
}
.map-img{
  display:block;
  width:100%;
  height: clamp(240px, 34vw, 420px);
  object-fit: contain;
  background: #f3f6f9;
}
.map-caption{
  padding: .7rem .9rem;
  border-top: 1px solid rgba(12,103,168,.08);
}

/* CTA final */
.cta-section{
  background:
    radial-gradient(120% 100% at 80% 20%, rgba(108,198,238,.22), transparent 55%),
    linear-gradient(135deg, rgba(12,103,168,.06), rgba(108,198,238,.08));
}
.cta-card{
  background:#fff;
  border: 1px solid rgba(12,103,168,.10);
  border-radius: var(--rop-radius);
  box-shadow: 0 12px 34px rgba(11,32,48,.10);
}

/* Footer */
.footer-link{
  color: rgba(10,53,88,.78);
  text-decoration:none;
  border-bottom: 1px solid transparent;
}
.footer-link:hover{
  color: var(--rop-primary);
  border-bottom-color: rgba(12,103,168,.25);
}

/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--rv-translate, 20px), 0) scale(var(--rv-scale, 1));
  transition:
    opacity var(--rv-dur, .65s) cubic-bezier(.17,.67,.27,1.02),
    transform var(--rv-dur, .65s) cubic-bezier(.17,.67,.27,1.02);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
[data-reveal="up"]    { --rv-translate: 20px; }
[data-reveal="down"]  { --rv-translate: -20px; }
[data-reveal="fade"]  { --rv-translate: 0; }
[data-reveal="zoom"]  { --rv-scale: .98; }

/* Pills del portal */
.nav-pills .nav-link{
  border-radius: .8rem;
  border: 1px solid rgba(12,103,168,.14);
  color: rgba(10,53,88,.78);
  background: rgba(12,103,168,.04);
  font-weight: 650;
}
.nav-pills .nav-link.active{
  background: var(--rop-primary);
  border-color: var(--rop-primary);
  color: #fff;
}

.hero-img-container {
  position: relative;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* Overlay suave para que no compita con el diseño */
.hero-img-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.9) 85%
  );
}

/* Mobile fix */
@media (max-width: 992px) {
  .hero-card-overlay {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    margin-top: 1rem;
  }
}

/* ===== Galería institucional ===== */
.galeria-section{
  background:
    radial-gradient(120% 120% at 20% -10%, rgba(108,198,238,.20), transparent 55%),
    radial-gradient(100% 120% at 100% 110%, rgba(12,103,168,.10), transparent 55%),
    linear-gradient(135deg, rgba(108,198,238,.06), rgba(12,103,168,.03));
}

.gallery-card{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(12,103,168,.10);
  box-shadow: 0 8px 24px rgba(11,32,48,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11,32,48,.12);
}

.gallery-img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* responsive */
@media (max-width: 768px){
  .gallery-img{
    height: 180px;
  }
}