/* ===== Variables de marca ===== */
:root{
  --rop-primary:   #0C67A8;   /* Azul principal (texto "ROP") */
  --rop-secondary: #6CC6EE;   /* Azul claro (forma del ojo) */
  --rop-dark:      #0A3558;   /* Azul muy oscuro para títulos */
  --rop-body:      #2B2B2B;   /* Texto base */
  --rop-muted:     #6C757D;   /* Texto secundario */
  --rop-radius:    1rem;      /* Radio consistente para tarjetas y botones */
}

/* ===== Reglas base ===== */
body{ color: var(--rop-body); }
.section-title{
  color: var(--rop-dark);
  font-weight: 800;
}
.btn-primary{
  --bs-btn-bg: var(--rop-primary);
  --bs-btn-border-color: var(--rop-primary);
  --bs-btn-hover-bg: #084B72;
  --bs-btn-hover-border-color: #084B72;
}
.btn-outline-primary{
  --bs-btn-color: var(--rop-primary);
  --bs-btn-border-color: var(--rop-primary);
  --bs-btn-hover-bg: var(--rop-primary);
  --bs-btn-hover-border-color: var(--rop-primary);
}
.card, .border{ border-radius: var(--rop-radius); }

/* ===== Hero ===== */
.hero{
  min-height: 84vh;
  background: radial-gradient(1200px 600px at 80% 20%, rgba(110,193,228,.18), transparent),
              linear-gradient(180deg, rgba(110,193,228,.06), rgba(255,255,255,0));
  padding-top: 6rem; /* espacio por navbar fija */
}
.hero .hero-mark{ max-width: 340px; }

/* ===== Timeline ===== */
.timeline{ position: relative; margin: 2rem 0; padding-left: 1.25rem; }
.timeline::before{
  content:""; position:absolute; left: .5rem; top:0; bottom:0; width:2px; background: #e9ecef;
}
.timeline-item{ position: relative; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.timeline-point{
  position:absolute; left:0; top:.25rem; width:.75rem; height:.75rem; border-radius:50%;
  background: var(--rop-secondary); outline: 4px solid #fff; box-shadow: 0 0 0 2px #e9ecef;
}

/* ===== Utilidades ===== */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{ left: 1rem; top: 1rem; width: auto; height: auto; z-index: 1050; }

.object-fit-cover{ object-fit: cover; }

.list-checked{
  list-style: none; padding-left: 0;
}
.list-checked li{
  padding-left: 1.75rem; position: relative; margin-bottom: .5rem;
}
.list-checked li::before{
  content:"✓"; position:absolute; left:0; top:0; color: var(--rop-primary); font-weight: 700;
}

/* ===== Navbar active link (Scrollspy) ===== */
.nav-link.active{ color: var(--rop-primary) !important; font-weight: 600; }
/* Imagen de Hitos: asegura buen recorte y proporción */
.hitos-figure .object-fit-cover{
  object-fit: cover;
}

/* Ajuste fino del timeline vs. imagen en pantallas grandes */
@media (min-width: 992px){
  #hitos .timeline{ margin-right: .5rem; }
}

/* ==== Programas: feature cards ==== */
.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; }
.feature-card:focus-within{ outline: 2px solid rgba(12,103,168,.35); outline-offset: 2px; }

/* 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);
}

/* Botón suave */
.btn-soft{
  --bs-btn-padding-y: .4rem;
  --bs-btn-padding-x: .9rem;
  --bs-btn-font-weight: 600;
  color: var(--rop-primary);
  background: rgba(12,103,168,.06);
  border: 1px solid rgba(12,103,168,.18);
  border-radius: .6rem;
  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);
}

/* Ripple */
.feature-card .ripple{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle, rgba(108,198,238,.4), rgba(108,198,238,0) 70%);
  transform: translate(-50%,-50%);
  animation: ripple .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple{
  from { opacity:.6; transform: translate(-50%,-50%) scale(.6); }
  to   { opacity:0;  transform: translate(-50%,-50%) scale(12); }
}
/* ===== Centros y Red ===== */
.centros-map-card{
  position: relative;
  border-radius: var(--rop-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(12,103,168,.12);
  box-shadow: 0 4px 18px rgba(11,32,48,.06);
}
.centros-map-img{
  display:block; width:100%; height: clamp(240px, 36vw, 420px);
  object-fit: cover;
  background: #e9ecef;
}
/* ligero velo superior para mejor lectura */
.centros-map-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 80% 20%, rgba(108,198,238,.14), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  pointer-events:none;
}
.centros-map-card figcaption{
  padding:.6rem .9rem;
  border-top: 1px solid rgba(12,103,168,.08);
}

/* Lista de centros */
.centros-list .list-group-item{
  border-color: #e9ecef;
  padding: .9rem 1rem;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  border-left: 3px solid transparent;
  border-radius: .75rem;
  margin-bottom: .5rem;
}
.centros-list .list-group-item:hover{
  background: rgba(12,103,168,.04);
  border-left-color: var(--rop-secondary);
  box-shadow: 0 6px 16px rgba(11,32,48,.06);
  transform: translateY(-1px);
}

/* Botón de Maps */
.btn-map{
  display: inline-flex; align-items: center;
  color: var(--rop-primary);
  background: rgba(12,103,168,.06);
  border: 1px solid rgba(12,103,168,.18);
  border-radius: .6rem;
}
.btn-map:hover{
  color: #fff;
  background: var(--rop-primary);
  border-color: var(--rop-primary);
}
/* ===== Para familias (gradiente) ===== */
.familias-section{
  /* Gradiente suave con colores de marca */
  background:
    radial-gradient(120% 120% at 90% -10%, rgba(108,198,238,.35), transparent 50%),
    radial-gradient(120% 100% at -10% 110%, rgba(12,103,168,.18), transparent 50%),
    linear-gradient(135deg, rgba(108,198,238,.18), rgba(12,103,168,.08));
  position: relative;
}

/* Texto sobre gradiente con buen contraste */
.text-dark-rop{ color: #0A3558; }          /* similar a --rop-dark */
.text-dark-rop-70{ color: rgba(10,53,88,.72); }

/* Tarjeta de consejo con look acorde */
.familias-tip{
  background: rgba(108,198,238,.18);
  border: 1px solid rgba(12,103,168,.25);
  border-radius: var(--rop-radius);
  box-shadow: 0 6px 18px rgba(11,32,48,.06);
}

/* Botón suave (ya lo usamos en Programas) — por si no estaba aún */
.btn-soft{
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-weight: 600;
  color: var(--rop-primary);
  background: rgba(12,103,168,.06);
  border: 1px solid rgba(12,103,168,.18);
  border-radius: .6rem;
  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);
}

/* Asegurar que .btn-primary use el color de marca */
.btn-primary{
  --bs-btn-bg: var(--rop-primary);
  --bs-btn-border-color: var(--rop-primary);
  --bs-btn-hover-bg: #0a5a92;          /* un poco más oscuro del primary */
  --bs-btn-hover-border-color: #0a5a92;
  --bs-btn-active-bg: #084a79;
  --bs-btn-active-border-color: #084a79;
}
/* ===== Noticias: fondo gradiente (alineado a 'Para familias') ===== */
.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,.12), rgba(12,103,168,.06));
}
/* ===== Patrocinios y alianzas ===== */
.sponsors-section{
  background:
    radial-gradient(110% 120% at 5% -10%, rgba(108,198,238,.28), transparent 55%),
    radial-gradient(120% 100% at 100% 110%, rgba(12,103,168,.14), transparent 55%),
    linear-gradient(135deg, rgba(108,198,238,.10), rgba(12,103,168,.05));
}

/* Enlaces del media kit */
.kit-link{
  display: inline-flex; align-items: center;
  padding: .4rem .5rem;
  border: 1px dashed rgba(12,103,168,.18);
  border-radius: .6rem;
  text-decoration: none;
  color: var(--rop-primary);
  background: rgba(12,103,168,.04);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.kit-link:hover{
  background: rgba(12,103,168,.10);
  border-color: rgba(12,103,168,.28);
  transform: translateY(-1px);
}
/* ===== Contacto (fondo blanco) ===== */
.contact-card,
.contact-info-card{
  background: #fff;
  border: 1px solid rgba(12,103,168,.10);
  border-radius: var(--rop-radius);
  box-shadow: 0 6px 22px rgba(11,32,48,.06);
}

/* Inputs con foco de marca */
.contact-card .form-control,
.contact-card .form-select,
.contact-card textarea{
  border-radius: .6rem;
  border-color: #e5edf2;
}
.contact-card .form-control:focus,
.contact-card .form-select:focus,
.contact-card textarea:focus{
  border-color: rgba(12,103,168,.35);
  box-shadow: 0 0 0 .2rem rgba(108,198,238,.25);
}

/* Botón suave consistente */
.btn-soft{
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-weight: 600;
  color: var(--rop-primary);
  background: rgba(12,103,168,.06);
  border: 1px solid rgba(12,103,168,.18);
  border-radius: .6rem;
  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);
}

/* Asegurar primary con la paleta */
.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;
}
/* ===== Footer profesional ===== */
.site-footer { color: #0B2030; }
.footer-title{
  font-size:.85rem; text-transform:uppercase; letter-spacing:.04em;
  color: rgba(10,53,88,.75); margin-bottom:.6rem;
}
.footer-link{
  color: #0B2030; text-decoration:none;
  border-bottom: 1px solid transparent;
}
.footer-link:hover{
  color: var(--rop-primary);
  border-bottom-color: rgba(12,103,168,.25);
}
.footer-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  color: var(--rop-primary);
  background: rgba(12,103,168,.06);
  border: 1px solid rgba(12,103,168,.18);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.footer-social:hover{
  background: var(--rop-primary);
  color:#fff; border-color: var(--rop-primary);
  transform: translateY(-1px);
}
section { padding-block: 64px; }           /* 56–72px OK */
.section-title { margin-bottom: 16px; }
.section-title + p { margin-bottom: 24px; }
/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--rv-translate, 20px), 0) scale(var(--rv-scale, 1));
  filter: blur(var(--rv-blur, 0));
  transition:
    opacity var(--rv-dur, .65s) var(--rv-ease, cubic-bezier(.17,.67,.27,1.02)),
    transform var(--rv-dur, .65s) var(--rv-ease, cubic-bezier(.17,.67,.27,1.02)),
    filter var(--rv-dur, .65s) var(--rv-ease, cubic-bezier(.17,.67,.27,1.02));
  will-change: opacity, transform, filter;
}
.reveal.in { opacity: 1; transform: none; filter: none; }

/* Variantes por dirección */
[data-reveal="up"]    { --rv-translate: 20px; }
[data-reveal="down"]  { --rv-translate: -20px; }
[data-reveal="left"]  { --rv-translate: 0; transform: translate3d(-24px,0,0); }
[data-reveal="right"] { --rv-translate: 0; transform: translate3d(24px,0,0); }
[data-reveal="zoom"]  { --rv-scale: .96; }
[data-reveal="fade"]  { --rv-translate: 0; }

/* Suaves con tu paleta (opcional) */
.reveal { --rv-dur:.65s; }