/* ===============================
   CASA REAL — UI
   Tipos: Ibarra Real Nova (titulares), Inter (resto)
   Nota: sin bordes redondeados ni sombras
================================== */

/* Tipografías */
@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* Variables */
:root{
  --azul:#0B2A5B;      /* azul noche header/hero */
  --azul2:#142F5C;     /* azul panel cita */
  --azul3:#113B7C;     /* azul enlaces */
  --gris:#EBEFF4;      /* gris separadores */
  --gris-clar:#F6F8FB;
  --tinta:#0B1220;     /* texto principal */
  --muted:#6B7280;     /* texto secundario */
  --container:1200px;

  --h1:clamp(2rem, 1.4rem + 2.2vw, 2.8rem);
  --h2:clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --lead:clamp(1rem, .95rem + .4vw, 1.12rem);
}

/* Reset mínimo */
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

/* Tipografía base */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color:var(--tinta);
  line-height:1.55;
  background:#fff;
}

/* Titulares y elementos editoriales en Ibarra */
h1,h2,h3,h4,.section-title,
.lead-card__title,.card__title,.speech__title,
.cr-brand__title,.cr-quote__text,.cr-quote__author{ 
  font-family: "Ibarra Real Nova", serif;
}

/* Utilidades */
.cr-container{max-width:var(--container); margin-inline:auto; padding-inline:24px}
.section{padding:2.5rem 0}
.section-title{font-size:var(--h2); margin:0 0 .75rem}
.badge{display:inline-block; font-size:.75rem; padding:.25rem .5rem; background:#E7EEF9; color:var(--azul3); font-weight:600}
.btn{display:inline-block; padding:.7rem 1.1rem; font-weight:600; border:1px solid var(--azul); color:#fff; background:var(--azul)}
.link-more{color:var(--azul3); font-weight:600}
hr{border:0; border-top:1px solid var(--gris)}

/* =================================
   HEADER (topbar) + HERO
=================================== */
.cr-topbar{background:var(--azul); color:#fff}
.cr-topbar__row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  min-height:92px;
  gap:12px;
}

.cr-topbar__left{color:#cddaf2}
.cr-topbar__title{font-size:26px; line-height:1}
.cr-topbar__sub{font-size:14px; margin-top:6px; opacity:.85}

.cr-topbar__brand{
  justify-self:center; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.cr-crest{display:block; width:44px; height:56px}
.cr-brand__title{font-size:24px; letter-spacing:.3px}
.cr-flag{display:flex; gap:6px; margin-top:2px}
.cr-flag__red{width:36px; height:6px; background:#c6403a}
.cr-flag__yellow{width:36px; height:6px; background:#f3cf3d}

.cr-topbar__right{justify-self:end; display:flex; align-items:center; gap:14px}
.cr-lang,.cr-search{background:none; border:0; cursor:pointer; color:#dfe8ff}
.cr-search svg{display:block}

/* HERO */
.cr-hero{background:#fff}
.cr-hero__grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  align-items:stretch;
}
.cr-hero__photo{margin:0}
.cr-hero__photo img{width:100%; height:100%; object-fit:cover; object-position:center left}

.cr-hero__quote{
  background:var(--azul2); color:#dfe8fb;
  padding:72px 64px; display:flex; flex-direction:column; justify-content:center;
}
.cr-quote__marks{font-size:42px; letter-spacing:4px; opacity:.35; margin-bottom:16px}
.cr-quote__text{font-size:22px; line-height:1.9; margin:0 0 28px}
.cr-quote__author{font-size:22px; margin:0 0 6px; color:#e9efff}
.cr-quote__place{margin:0; color:#b7c5e8; font-size:16px}

/* =================================
   DESTACADO
=================================== */
.lead{background:#fff}
.lead-card{display:grid; gap:1.25rem}
.lead-card__media img{width:100%; height:auto}
.lead-card__title{margin:.35rem 0}
.lead-card__meta{color:var(--muted); margin:.1rem 0 .5rem}
.lead-card__excerpt{color:#374151; margin:0 0 .9rem}

/* =================================
   ACTIVIDADES (cards)
=================================== */
.activities{background:#fff}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:.75rem}
.cards{display:grid; gap:1rem; grid-template-columns:1fr}
.card{border:1px solid var(--gris); background:#fff}
.card__img{aspect-ratio:3/2; object-fit:cover; width:100%}
.card__body{padding:1rem}
.card__title{margin:.4rem 0}
.card__text{color:#374151; margin:0 0 .6rem}
.card__link{color:var(--azul3); font-weight:600}

/* =================================
   FOTO GRANDE
=================================== */
.feature-photo{background:var(--gris-clar); padding:2rem 0}
.feature-photo__media{max-width:var(--container); margin:1rem auto 0}
.feature-photo__media img{width:100%; height:auto; object-fit:cover}

/* =================================
   ÚLTIMOS DISCURSOS
=================================== */
.speech-list{display:grid; gap:1rem}
.speech{border:1px solid var(--gris); background:#fff; padding:1rem}
.speech__head{display:flex; gap:.8rem; align-items:center}
.avatar{width:40px; height:40px; object-fit:cover}
.speech__title{margin:.1rem 0}
.speech__meta{margin:0; color:var(--muted); font-size:.9rem}
.speech__excerpt{margin:.6rem 0; color:#374151}
.speech__link{color:var(--azul3); font-weight:600}

/* =================================
   VIDEO CTA
=================================== */
.video-cta{background:#fff}
.video-cta__grid{display:grid; gap:1rem; align-items:center}
.video-cta__media{position:relative}
.video-cta__media img{width:100%; height:auto; object-fit:cover}
.play{position:absolute; inset:auto auto 1rem 1rem; background:#fff; color:#111; border:1px solid #ddd; padding:.55rem .8rem; cursor:pointer}

/* =================================
   ENLACES DE INTERÉS
=================================== */
.links{background:var(--gris-clar)}
.linkgrid{display:grid; gap:1rem; grid-template-columns:1fr}
.linktile{background:#fff; border:1px solid var(--gris); padding:1.1rem}
.linktile:hover{border-color:#cdd8ea}

/* =================================
   FOOTER
=================================== */
.site-footer{background:var(--azul); color:#cfe0ff; margin-top:2rem}
.footer__grid{display:grid; gap:1.4rem; padding:2rem 0}
.footer__title{margin:0 0 .5rem; font-size:1rem}
.foot-list{list-style:none; margin:0; padding:0; display:grid; gap:.35rem}
.foot-list a{color:#cfe0ff}
.foot-list a:hover{color:#fff}
.foot-legal{border-top:1px solid rgba(255,255,255,.2); padding:1rem 0; font-size:.9rem}

/* =================================
   RESPONSIVE
=================================== */
@media (max-width: 1100px){
  .cr-brand__title{font-size:20px}
}
@media (max-width: 960px){
  .cr-topbar__row{grid-template-columns: 1fr auto auto; row-gap:10px}
  .cr-topbar__brand{grid-column:1/-1}
  .cr-hero__grid{grid-template-columns:1fr}
  .cr-hero__quote{padding:40px 24px}
  .cr-quote__text{font-size:20px; line-height:1.7}
}
@media (min-width: 768px){
  .cards{grid-template-columns: repeat(3, 1fr)}
  .speech-list{grid-template-columns: repeat(3, 1fr)}
  .video-cta__grid{grid-template-columns: .9fr 1.1fr}
  .linkgrid{grid-template-columns: repeat(3, 1fr)}
  .footer__grid{grid-template-columns: repeat(4, 1fr)}
}