/* brand.css — sistema de marca para la presentación de diseño del
   Centro del Reino de Paz y Justicia.
   DIRECCIÓN INSTITUCIONAL · EDITORIAL PLANO (rev. 3): lienzo BLANCO, el color de
   marca (verde + dorado) vive en el "chrome" — masthead, barra de secciones,
   footer y acentos de texto — NO inundando el cuerpo ni enmarcando cajas.
   Geometría de prensa: esquinas rectas, sin sombras, bloques separados por
   filetes finos y fotografía a sangre. El dorado es filete / subrayado / kicker,
   nunca un recuadro alrededor de las tarjetas.
   Referencia: Naciones Unidas · UNESCO · White House · BBC News.
   Display Kameron, cuerpo Poppins. */

:root {
  /* paleta de marca (fija) */
  --green-900:#022c1c; --green-800:#003421; --green-700:#0a3f2a; --green-600:#22523f;
  --gold:#cba16a;            /* dorado de marca — acento gráfico (filete, sello, botón) */
  --gold-700:#8f6a2e;        /* dorado oscurecido — legible como TEXTO sobre blanco (AA) */
  --gold-soft:rgba(203,161,106,.14);
  --cream:#ebe6d2;           /* texto/acento sobre verde */

  /* superficies e tinta — lienzo claro institucional */
  --canvas:#ffffff;          /* fondo de página */
  --surface:#f6f4ec;         /* banda alterna (crema muy clara) */
  --surface-2:#eceadd;       /* placeholder de imagen / divisores suaves */
  --ink:#16271f;             /* texto principal (verde casi negro) */
  --ink-soft:#4a5a52;        /* texto secundario */
  --line:#dcd8c8;            /* hairline sobre blanco */
  --line-strong:#003421;     /* filete institucional (encabeza bloques) */
  --chrome:#003421;          /* color del nav/menus/footer (el color "en los menús") */

  /* geometría de prensa: recta, sin sombra */
  --radius:0px;              /* bloques: esquinas rectas */
  --radius-btn:2px;          /* botones: apenas suavizados */

  /* alias legacy para compatibilidad con estilos inline previos */
  --cream-dim:var(--ink-soft);

  --font-display:"Kameron",Georgia,serif;
  --font-body:"Poppins",system-ui,sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font-body); line-height:1.65; }
.page { max-width:1040px; margin:0 auto; padding-block:0 4rem; padding-inline:20px; }
.wrap { max-width:1040px; margin:0 auto; padding-inline:20px; }

h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.14; color:var(--green-800); text-wrap:balance; margin:0 0 .6rem; }
h1 { font-size:clamp(2rem,6vw,3rem); } h2 { font-size:1.65rem; } h3 { font-size:1.2rem; }
p { margin:0 0 1rem; }
a { color:var(--green-700); text-decoration:none; }
a:hover { text-decoration:underline; }

/* kicker / versalita dorada: el dorado como TEXTO, no como borde */
.eyebrow { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-700); font-weight:600; margin:0 0 .7rem; }
.muted { color:var(--ink-soft); }
.gold { color:var(--gold-700); }

/* enlace de texto con flecha (reemplaza botones secundarios en contexto editorial) */
.linkmore { font-size:.86rem; font-weight:600; color:var(--green-700); display:inline-flex; align-items:center; gap:.4rem; }
.linkmore:hover { color:var(--gold-700); text-decoration:none; }
.linkmore::after { content:"→"; }

/* ---- secciones y bandas (segmentan sin inundar) ---- */
.section { padding-block:2.8rem; }
.surface { background:var(--surface); }
.band-green { background:var(--chrome); color:var(--cream); }
.band-green h1,.band-green h2,.band-green h3 { color:var(--cream); }
.band-green .eyebrow { color:var(--gold); }
.band-gold { background:var(--gold); color:var(--green-800); }
.band-gold h1,.band-gold h2,.band-gold h3 { color:var(--green-800); }

/* ---- tira utilitaria del deck (chrome de la presentación) ---- */
.deckstrip { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.55rem; font-size:.72rem; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.deckstrip a { color:var(--ink-soft); }
.deckstrip a:hover { color:var(--gold-700); }
.mock-flag { display:inline-block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-800); background:var(--gold); padding:.15rem .55rem; font-weight:600; }

/* ============ NAV institucional — el color vive aquí ============ */
/* masthead y barra de secciones a sangre (full-bleed) sobre verde profundo,
   con el contenido alineado a la columna de 1040px. */
.masthead,
.sectionbar {
  width:100vw; position:relative; left:50%; margin-left:-50vw;
  padding-inline:max(20px, calc(50vw - 520px));
}
.masthead { background:var(--chrome); display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.05rem; }
.masthead .brand { display:flex; align-items:center; gap:.9rem; text-decoration:none; }
.brand-seal { height:52px; width:auto; flex:none; }
.masthead .brand-name { border-left:2px solid var(--gold); padding-left:.85rem; font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1.2; color:var(--cream); }
.masthead .brand-name small { display:block; font-family:var(--font-body); font-weight:400; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }

/* switcher de idioma (sobre el verde del masthead) */
.langswitch { position:relative; }
.langswitch summary { list-style:none; cursor:pointer; font-size:.8rem; font-weight:600; letter-spacing:.06em; border:1px solid rgba(203,161,106,.55); color:var(--gold); padding:.45rem .8rem; background:transparent; }
.langswitch summary::-webkit-details-marker { display:none; }
.langswitch summary:hover,.langswitch[open] summary { background:var(--gold); color:var(--green-800); }
.langswitch ul { position:absolute; right:0; top:calc(100% + .4rem); margin:0; padding:.35rem; list-style:none; background:var(--green-900); border:1px solid rgba(203,161,106,.45); min-width:9rem; z-index:20; }
.langswitch li a { display:block; padding:.4rem .7rem; color:var(--cream); text-decoration:none; font-size:.82rem; }
.langswitch li a:hover { background:var(--gold-soft); color:var(--gold); text-decoration:none; }
.langswitch li a.now { color:var(--gold); font-weight:600; }

/* barra de secciones — verde un tono más claro, activo subrayado en dorado */
.sectionbar { display:flex; gap:.2rem; overflow-x:auto; background:var(--green-700); border-bottom:3px solid var(--gold); scrollbar-width:none; }
.sectionbar::-webkit-scrollbar { display:none; }
.sectionbar a { flex:none; padding:.8rem 1.05rem; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--cream); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-3px; opacity:.82; }
.sectionbar a:hover { color:#fff; opacity:1; text-decoration:none; }
.sectionbar a.on { color:var(--gold); border-bottom-color:var(--gold); opacity:1; }

/* ============ componentes ============ */
/* botones (planos, casi rectos; el dorado SÓLIDO es acento válido, no un borde) */
.btn-gold { display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; letter-spacing:.02em; padding:.64rem 1.2rem; border-radius:var(--radius-btn); background:var(--gold); color:var(--green-800); text-decoration:none; border:1px solid var(--gold); }
.btn-gold:hover { background:var(--gold-700); border-color:var(--gold-700); color:#fff; text-decoration:none; }
.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; padding:.64rem 1.2rem; border-radius:var(--radius-btn); border:1px solid var(--green-700); color:var(--green-700); text-decoration:none; background:transparent; }
.btn-ghost:hover { background:var(--green-800); border-color:var(--green-800); color:var(--cream); text-decoration:none; }

/* filetes y acentos — el dorado como línea, no como marco */
.rule-gold { border:0; border-top:2px solid var(--gold); margin:1.6rem 0; }
/* encabezado de sección: kicker + filete dorado corto bajo el título (patrón UNESCO) */
.title-accent { position:relative; padding-bottom:.6rem; }
.title-accent::after { content:""; position:absolute; left:0; bottom:0; width:2.4rem; height:2px; background:var(--gold); }

/* etiquetas — rectangulares, planas (sin píldora) */
.tag { font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .55rem; }
.tag.live { background:var(--green-800); color:var(--cream); }
.tag.wait { background:transparent; color:var(--gold-700); border:1px solid var(--line); }
.badge-gold { display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--green-800); color:var(--cream); padding:.22rem .55rem; }
.badge-line { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-700); }

/* bloques de contenido — planos, esquinas rectas, sin sombra.
   Encabezados por un filete fino superior (columna de prensa), no por recuadro. */
.card { border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; background:var(--canvas); }
.card.active { border-top:3px solid var(--green-800); }   /* activo = filete verde, no dorado */
.card.soon,.card.dev { background:var(--surface); border-color:var(--line); }

/* tarjetas de noticia/editorial (patrón de prensa, sin caja):
   foto + kicker + titular, separadas por un filete fino superior. */
.news-card { display:flex; flex-direction:column; overflow:hidden; border:0; border-top:2px solid var(--line-strong); border-radius:0; padding:1rem 0 0; background:transparent; }
.news-card .thumb { margin:0 0 .9rem; aspect-ratio:16/9; object-fit:cover; width:100%; max-width:none; background:var(--surface-2); display:block; }
.news-card h3 { margin:.35rem 0 .3rem; font-size:1.04rem; font-family:var(--font-display); font-weight:600; line-height:1.3; color:var(--green-800); }
.news-card .kicker { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-700); font-weight:700; }
.news-card .meta { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
.news-card .date { font-size:.74rem; color:var(--ink-soft); }
.news-card .body { margin:0; font-size:.9rem; color:var(--ink-soft); flex:1; }
.news-card .readmore { font-size:.84rem; font-weight:600; color:var(--green-700); text-decoration:none; margin-top:.9rem; display:inline-block; }
.news-card .readmore:hover { color:var(--gold-700); text-decoration:none; }
.news-card.featured { display:grid; grid-template-columns:1.25fr 1fr; gap:1.6rem; align-items:center; border-top-width:3px; padding-top:1.3rem; }
.news-card.featured .thumb { margin:0; width:100%; aspect-ratio:16/10; }
.news-card.featured h3 { font-size:clamp(1.35rem,4vw,1.8rem); }
@media(max-width:760px){ .news-card.featured{ grid-template-columns:1fr; } .news-card.featured .thumb{ aspect-ratio:16/9; } }

/* toggle grilla / lista + filas compactas */
.view-toggle { display:inline-flex; border:1px solid var(--green-700); border-radius:var(--radius-btn); overflow:hidden; }
.view-toggle button { font-family:var(--font-body); font-size:.8rem; font-weight:600; padding:.5rem .95rem; background:transparent; border:0; color:var(--green-700); cursor:pointer; }
.view-toggle button.on { background:var(--green-800); color:var(--cream); }
.listing.list { display:flex; flex-direction:column; gap:0; }
.listing.list .news-card { flex-direction:row; gap:1rem; align-items:center; padding:1rem 0; border-top:1px solid var(--line); }
.listing.list .news-card:first-child { border-top:2px solid var(--line-strong); }
.listing.list .news-card .thumb { margin:0; width:120px; min-width:120px; aspect-ratio:16/10; }
.listing.list .news-card h3 { font-size:.95rem; margin:0 0 .25rem; }
.listing.list .news-card .body,.listing.list .news-card .readmore { display:none; }
.listing.list .news-card.featured { display:flex; }
@media(max-width:560px){ .listing.list .news-card .thumb{ width:88px; min-width:88px; } }

/* ============ banda de liderazgo (el Dr. con trato digno, sin tarjeta) ============ */
.leader { display:grid; grid-template-columns:.8fr 1.2fr; align-items:stretch; }
@media(max-width:760px){ .leader{ grid-template-columns:1fr; } }
.leader .portrait { background:var(--surface-2); min-height:20rem; overflow:hidden; display:block; }
.leader .portrait img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.leader .bio { padding:2.4rem 1.5rem; display:flex; flex-direction:column; justify-content:center; }
@media(min-width:1000px){ .leader .bio{ padding:2.8rem 3rem; } }
.leader .bio .name { font-family:var(--font-display); font-size:clamp(1.5rem,3.5vw,2.1rem); font-weight:600; color:var(--green-800); margin:.4rem 0 .2rem; }
.leader .bio .role { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700); font-weight:700; }
.leader .bio blockquote { margin:1.2rem 0 1.4rem; font-family:var(--font-display); font-size:1.12rem; line-height:1.55; color:var(--ink); border-left:2px solid var(--gold); padding-left:1.1rem; }

/* ============ footer (chrome — verde, cierra la página) ============ */
.site-footer { background:var(--green-600); color:var(--cream); padding-block:3rem 1.5rem; position:relative; overflow:hidden; }
.site-footer .footer-doc { position:absolute; right:0; bottom:0; width:19rem; display:none; }
@media(min-width:1000px){ .site-footer .footer-doc{ display:block; } }
.site-footer h2 { color:var(--cream); font-size:clamp(1.5rem,4vw,2.6rem); text-align:center; margin:0 0 .5rem; }
.site-footer .eyebrow { text-align:center; color:var(--gold); }
.site-footer a { color:var(--gold); }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; max-width:56rem; margin:2rem auto 0; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid p { font-size:.98rem; }
.footer-form { display:flex; flex-direction:column; gap:.6rem; }
.footer-form input,.footer-form textarea { background:#fff; color:#16271f; border:0; border-radius:var(--radius-btn); padding:.6rem .9rem; font-family:var(--font-body); font-size:.92rem; width:100%; }
.footer-form input::placeholder,.footer-form textarea::placeholder { color:#6b7a72; }
.footer-form textarea { resize:vertical; min-height:7rem; }
.footer-form button { align-self:flex-start; cursor:pointer; font-family:var(--font-body); }
.socials { display:flex; gap:.4rem; list-style:none; margin:1rem 0 0; padding:0; flex-wrap:wrap; }
.socials a { display:inline-block; padding:.4rem .7rem; border-right:1px solid rgba(235,230,210,.25); color:var(--cream); text-decoration:none; font-size:.8rem; font-weight:600; }
.socials li:last-child a { border-right:0; }
.socials a:hover { color:var(--gold); }
.footer-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }
.footer-foot p { font-size:.82rem; color:#fff; margin:0; }
.footer-foot img { width:6rem; }