/* ====== Tokens ====== */
:root{
  --primary:#113DC0;                 /* Azul institucional */
  --bg:#0b1838;                      /* Fallback */
  --text:#ffffff;                    /* Texto fuera de las tarjetas */
  --muted:#e6e6e6;
  --ring:rgba(255,255,255,0.4);

  /* Sombras azules */
  --shadow-blue-lg: 0 16px 40px rgba(17,61,192,0.28);
  --shadow-blue-md: 0 10px 24px rgba(17,61,192,0.24);
  --shadow-blue-sm: 0 6px 14px rgba(17,61,192,0.20);

  /* Variantes para tipografía azul en cards */
  --primary-ink: #113DC0;            /* texto principal en cards */
  --primary-ink-soft: rgba(17,61,192,0.85); /* párrafos en cards */
  --primary-border: rgba(17,61,192,0.22);   /* bordes en cards */
  --primary-outline: rgba(17,61,192,0.90);  /* botón outline */
  --primary-hover-bg: rgba(17,61,192,0.10); /* hover botón */
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);                  /* Texto global blanco */
  background: var(--bg);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ====== Fondo con imagen (overlay azul institucional) ====== */
.bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(17,61,192,0.55), rgba(17,61,192,0.55)),
    url("../assets/fondogrell.jpg") center/cover no-repeat;
  background-attachment: fixed;
  filter: saturate(1.02) contrast(1.02);
}

/* ====== Layout ====== */
.page{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(12px, 2vw, 24px);
}
.site-header{
  display:flex;
  flex-direction:column;             /* logo arriba, textos abajo */
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:clamp(12px, 1.6vw, 16px);
  margin-top: clamp(4px, 1.2vh, 12px);
}

/* Cuadrito blanco para el logo */
.logo-wrap{
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  background:#ffffff;                /* fondo cuadrado blanco */
  border-radius:18px;
  box-shadow: var(--shadow-blue-sm);
}
.logo{
  width:64px; height:auto;
  display:block;
}

.titles .brand{
  margin:0;
  font-size:clamp(22px, 3.2vw, 36px);
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;                        /* Encabezado fuera de cards: blanco */
}
.titles .subtitle{
  margin:2px 0 0;
  font-size:clamp(12px, 1.5vw, 14px);
  color:var(--muted);
}

.content{
  display:grid;
  place-items:center;
  padding:clamp(8px, 2vw, 16px);
}

.cards{
  width:min(980px, 100%);
  display:grid;
  gap:clamp(14px, 2.4vw, 24px);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width:720px){
  .cards{ grid-template-columns:1fr; }
}

/* ====== Animaciones (flotación minimal y sombra azul) ====== */
@keyframes floatMinimal{
  0%   { transform: translate3d(0, -4px, 0) rotate(0.05deg); }
  25%  { transform: translate3d(3px, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(0, 4px, 0) rotate(-0.05deg); }
  75%  { transform: translate3d(-3px, 0, 0) rotate(0deg); }
  100% { transform: translate3d(0, -4px, 0) rotate(0.05deg); }
}
@keyframes shadowPulseBlue{
  0%,100% { box-shadow: var(--shadow-blue-md); }
  50%     { box-shadow: var(--shadow-blue-lg); }
}

/* ====== Card (BLANCA con texto AZUL) ====== */
.card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(18px, 2.4vw, 26px);
  border-radius:22px;

  /* BLANCA y tipografía AZUL */
  background:#ffffff;
  color:var(--primary-ink);
  text-decoration:none;

  border:1px solid var(--primary-border);
  box-shadow: var(--shadow-blue-md);
  will-change: transform, box-shadow;

  /* Flotación sobria + pulso de sombra */
  animation:
    floatMinimal 12s ease-in-out infinite,
    shadowPulseBlue 7s ease-in-out infinite;
}
.card:nth-child(2){
  animation-delay: .6s, .3s;
  animation-duration: 13s, 8s;
}

/* Interacción ligera */
.card:hover{
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--shadow-blue-lg);
}
.card:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 3px rgba(17,61,192,0.12),
    0 0 0 7px rgba(17,61,192,0.35),
    var(--shadow-blue-lg);
}

/* Badge (año) estilo outline azul para que resalte sobre blanco */
.badge{
  position:absolute;
  top:14px; right:14px;
  background:rgba(17,61,192,0.06);
  color:var(--primary-ink);
  font-weight:800;
  font-size:clamp(12px, 1.5vw, 14px);
  padding:7px 12px;
  border-radius:999px;
  letter-spacing:.3px;
  border:1px solid var(--primary-border);
  box-shadow: 0 8px 18px rgba(17,61,192,.18);
}

/* Tipografía interna AZUL */
.card-body h2{
  margin:6px 0 8px;
  font-size:clamp(18px, 2.4vw, 22px);
  font-weight:800;
  letter-spacing:.2px;
  color:var(--primary-ink);
}
.card-body p{
  margin:0;
  color:var(--primary-ink-soft);
  font-size:clamp(13px, 1.8vw, 14px);
}

/* CTA: outline AZUL (texto y borde azules, fondo transparente) */
.enter{
  margin-top:auto;
  align-self:flex-start;
  font-weight:700;
  letter-spacing:.2px;
  font-size:clamp(13px, 1.8vw, 14px);
  padding:.68rem 1.1rem;
  border-radius:14px;
  background: transparent;
  color:var(--primary-ink);
  border:1.5px solid var(--primary-outline);
  box-shadow: 0 6px 16px rgba(17,61,192,.18);
  transition: transform .2s ease, filter .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.card:hover .enter{
  transform: translateY(-1px);
  background: var(--primary-hover-bg);
  box-shadow: 0 12px 28px rgba(17,61,192,.26);
}

/* Footer (blanco) */
.site-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-top:6px;
}
.site-footer small{
  color:#fff;
  font-size:12px;
  letter-spacing:.2px;
}

/* Sin scroll (con fallback si la pantalla es muy baja) */
html, body { overflow:hidden; }
@media (max-height: 560px){
  html, body { overflow:auto; }
}

/* Accesibilidad: motion reducido */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}