:root{
    --ink:#0e2a52;--navy:#123a73;--paper:#ffffff;--paper-deep:#eef3fa;
    --accent:#c8102e;--accent-deep:#9c0c23;--blue:#1d4e9c;--muted:#5c6b82;
    --line:rgba(14,42,82,.14);
    --display:"Fraunces",Georgia,serif;--body:"Newsreader",Georgia,serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

  /* ---------- top bar (compacto, reutilizado) ---------- */
  .flagstrip{height:4px;background:linear-gradient(90deg,var(--accent) 0 38%,#fff 38% 62%,var(--blue) 62% 100%)}
  header.topbar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
  .brand{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
  .brand .full{color:var(--muted);font-weight:400;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
  nav.main ul{display:flex;gap:4px;list-style:none;align-items:center}
  
  nav.main a:hover{color:var(--accent)}
  nav.main li.active a{color:var(--accent)}
  @media(max-width:1080px){nav.main{display:none}}

  /* ---------- breadcrumb + hero ---------- */
  .pagehead{padding:70px 0 56px;border-bottom:1px solid var(--line);background:radial-gradient(120% 90% at 88% -20%,rgba(29,78,156,.08),transparent 55%)}
  .crumb{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
  .crumb a{color:var(--muted);text-decoration:none}
  .crumb a:hover{color:var(--accent)}
  .kicker{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:14px}
  .kicker::before{content:"";width:42px;height:3px;background:linear-gradient(90deg,var(--accent) 0 50%,var(--blue) 50% 100%)}
  .pagehead h1{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1;letter-spacing:-.025em}

  /* ---------- year selector ---------- */
  .yearbar{display:flex;align-items:center;gap:18px;padding:34px 0 10px;flex-wrap:wrap}
  .yearbar .label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .years{display:flex;gap:8px;flex-wrap:wrap}
  .year-btn{font-family:var(--display);font-size:1rem;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 18px;border-radius:30px;cursor:pointer;transition:.2s}
  .year-btn:hover{border-color:var(--blue);color:var(--blue)}
  .year-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}

  /* ---------- months grid ---------- */
  .months{padding:30px 0 90px}
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  @media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.grid{grid-template-columns:1fr}}

  .month{
    position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
    background:#fff;min-height:200px;transition:transform .3s,box-shadow .3s,border-color .3s;
    perspective:1000px;
  }
  .month:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(14,42,82,.4);border-color:transparent}

  /* front face */
  .m-front{padding:26px 24px;display:flex;flex-direction:column;height:100%;min-height:200px;transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
  .m-num{font-family:var(--display);font-size:.85rem;color:var(--muted);letter-spacing:.05em}
  .m-name{font-family:var(--display);font-weight:600;font-size:1.7rem;letter-spacing:-.01em;margin-top:4px;line-height:1}
  .m-meta{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--blue);letter-spacing:.04em;text-transform:uppercase}
  .m-meta .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
  .m-hint{margin-top:14px;font-size:.78rem;color:var(--muted);font-style:italic;opacity:0;transition:opacity .3s}
  .month:hover .m-hint{opacity:1}

  /* overlay that slides up on click (depth reveal) */
  .m-overlay{
    position:absolute;inset:0;background:var(--ink);color:#fff;padding:24px 24px 22px;
    display:flex;flex-direction:column;
    transform:translateY(100%);opacity:0;visibility:hidden;
    transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s,visibility .45s;
  }
  .month.open .m-overlay{transform:translateY(0);opacity:1;visibility:visible}
  .month.open .m-front{opacity:0;transform:scale(.96)}
  .m-overlay .ov-top{display:flex;justify-content:space-between;align-items:flex-start}
  .m-overlay h3{font-family:var(--display);font-weight:500;font-size:1.4rem;line-height:1.05}
  .m-overlay .ov-num{font-family:var(--display);font-size:.8rem;color:rgba(255,255,255,.5)}
  .ov-close{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;transition:.2s;flex-shrink:0}
  .ov-close:hover{background:var(--accent);border-color:var(--accent)}
  .ov-actions{margin-top:auto;display:flex;flex-direction:column;gap:9px}
  .ov-btn{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:.82rem;letter-spacing:.04em;padding:11px 14px;border-radius:7px;transition:.2s}
  .ov-html{background:#fff;color:var(--ink);font-weight:500}
  .ov-html:hover{background:var(--paper-deep)}
  .ov-pdf{border:1px solid rgba(255,255,255,.28);color:#fff}
  .ov-pdf:hover{border-color:var(--accent);background:rgba(200,16,46,.18)}
  .ov-btn .ic{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-left:auto}
  .ov-pdfrow{display:flex;gap:9px}
  .ov-pdfrow .ov-pdf{flex:1;justify-content:center;gap:7px}

  /* "próximamente" months */
  .month.soon{background:repeating-linear-gradient(45deg,#fff,#fff 12px,var(--paper-deep) 12px,var(--paper-deep) 24px);pointer-events:none}
  .month.soon .m-front{opacity:.55}
  .month.soon .m-meta{color:var(--muted)}
  .month.soon .m-meta .dot{background:var(--muted)}

  /* legend */
  .legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;font-size:.85rem;color:var(--muted)}
  .legend span{display:flex;align-items:center;gap:8px}
  .legend .sw{width:14px;height:14px;border-radius:4px}

  footer{background:var(--paper-deep);border-top:1px solid var(--line);padding:46px 0}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
  footer .brand{font-size:1.1rem}
  .motto{font-family:var(--display);font-style:italic;color:var(--accent);font-size:1rem}
  footer small{color:var(--muted);font-size:.8rem}

/* ---------- informe anual ---------- */
.annual-report {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 28px;
}
.annual-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -.01em;
}
.annual-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.annual-actions .ov-btn {
  padding: 10px 18px;
}

/* ---------- fixes overlay ---------- */
.ov-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
}
.ov-pdf:hover { color: #fff !important; }
.ov-html:hover { color: var(--ink) !important; }

/* ---------- botones overlay en fila ---------- */
.ov-actions {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 9px;
}
.ov-actions .ov-btn {
  flex: 1;
  justify-content: center;
}