/* Páginas gemelas de gramorcolombia.org en otros idiomas (/de/, /it/, /fr/, /pt/).
   Copia, en corto, el aspecto de la portada en español (Brizy): barra amarilla,
   portada con la ilustración y el panel burdeos, secciones verde hondo y crema
   con foto de fondo, botones en píldora con degradado. */
@import url("fuentes.css");

:root {
  --verde-hondo: #051F14; --salvia: #58A37D; --oliva: #B4B955; --amarillo: #F5D040;
  --burdeos: #742336; --crema: #FAFBF4; --tinta: #1d1d1b; --tinta-2: #4a4a44;
  --letra: "Quicksand", system-ui, sans-serif; --mano: "Handlee", "Quicksand", cursive;
  --subidas: "https://gramorcolombia.org/wp-content/uploads/";
  --ancho: 1150px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--letra); font-weight: 500; font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--letra); font-weight: 700; margin: 0; line-height: 1.2; }
p { margin: 0; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: 24px; }
section[id], header[id] { scroll-margin-top: 80px; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

/* Botones como los de la portada: píldora, degradado y sombra */
.boton { display: inline-block; padding: 11px 26px; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
         text-decoration: none; color: #fff; max-width: 100%; overflow-wrap: anywhere; box-shadow: 0 3px 6px rgba(0,0,0,.35); transition: transform .15s ease, filter .15s ease; text-align: center; }
.boton:hover { transform: translateY(-1px); filter: brightness(1.06); }
.b-salvia { background: linear-gradient(90deg, #58A37D 0%, #3f7f5f 100%); }
.b-oliva  { background: linear-gradient(90deg, #a7ac4a 0%, #c9cc5e 100%); }
.b-hondo  { background: linear-gradient(90deg, #0d2b1d 0%, #58A37D 100%); }
.b-vino   { background: linear-gradient(90deg, #4a1222 0%, #a4485e 100%); }
.b-amarillo { background: var(--amarillo); color: var(--verde-hondo); }
.botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Aviso de versión abreviada */
.aviso { background: var(--verde-hondo); color: #fff; font-size: 0.85rem; text-align: center; padding: 7px 16px; }
.aviso a { color: var(--amarillo); font-weight: 700; }

/* Barra superior amarilla */
.menu { position: sticky; top: 0; z-index: 50; background: linear-gradient(90deg, rgba(245,208,64,.63) 0%, rgba(245,208,64,.97) 24%), #fff; }
.menu .contenedor { max-width: 1320px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.menu .logo img { width: 150px; height: auto; }
.menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.menu nav a { display: block; padding: 8px 9px; text-decoration: none; color: #3f7f5f; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.menu nav a:hover { color: var(--verde-hondo); }
.menu nav a.boton { color: #fff; padding: 10px 22px; margin-left: 8px; }
.idiomas { display: flex; gap: 0; margin-left: 10px; }
.idiomas a { padding: 6px 6px !important; font-size: 0.8rem !important; color: #5c5a2e !important; }
.idiomas a[aria-current="page"] { color: var(--verde-hondo) !important; text-decoration: underline; text-underline-offset: 4px; }
.menu-abrir { display: none; background: none; border: 2px solid #3f7f5f; color: #3f7f5f; border-radius: 8px; padding: 6px 12px; font: 700 0.9rem var(--letra); cursor: pointer; }
@media (max-width: 1179px) {
  .menu-abrir { display: block; }
  .menu nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fbe9a0; padding: 8px 16px 16px; max-height: calc(100vh - 76px); overflow-y: auto; box-shadow: 0 8px 16px rgba(0,0,0,.12); }
  .menu.abierto nav { display: block; }
  .menu nav ul { flex-direction: column; align-items: stretch; }
  .menu nav a { padding: 12px 10px; }
  .menu nav a.boton { margin: 8px 0 0; }
  .idiomas { margin: 10px 0 0; justify-content: center; }
}

/* Portada: ilustración a la izquierda, panel burdeos a la derecha */
.portada { background: var(--burdeos) url("https://gramorcolombia.org/wp-content/uploads/2024/02/4.png") left center / cover no-repeat; color: #fff; }
.portada .contenedor { max-width: 1320px; display: grid; grid-template-columns: 34% 1fr; min-height: 640px; }
.portada__texto { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 0 60px 40px; }
.portada__arte { display: none; }
.portada .frase { font-size: 1.05rem; max-width: 46ch; }
.portada h1 { margin: 34px 0 30px; font-size: 2.6rem; line-height: 1.25; }
.portada h1 .grande { display: block; color: var(--amarillo); font-size: 3.1rem; letter-spacing: .06em; font-weight: 500; }
.portada .bajada { font-size: 1.05rem; max-width: 52ch; }
.portada .bajada b { color: var(--amarillo); font-weight: 500; }
.portada .botones { justify-content: center; margin-top: 40px; }
@media (max-width: 900px) {
  .portada { background: var(--burdeos); }
  .portada .contenedor { grid-template-columns: 1fr; min-height: 0; padding-inline: 0; }
  .portada__arte { display: block; height: 300px; background: url("https://gramorcolombia.org/wp-content/uploads/2024/02/4.png") 0 30% / auto 560px no-repeat; }
  .portada__texto { grid-column: 1; padding: 40px 24px 50px; }
  .portada h1 { font-size: 2rem; } .portada h1 .grande { font-size: 2.2rem; }
}

/* Secciones con foto de fondo y velo */
.hondo, .clara { position: relative; background-size: cover; background-position: center; padding-block: clamp(60px, 9vw, 110px); }
.hondo { color: #fff; }
.hondo::before, .clara::before { content: ""; position: absolute; inset: 0; }
.hondo::before { background: rgba(5, 31, 20, .9); }
.clara::before { background: rgba(250, 251, 244, .94); }
.hondo > *, .clara > * { position: relative; }
.mano { font-family: var(--mano); font-size: 1.15rem; }
.titulo { font-size: clamp(1.8rem, 3.4vw, 2.3rem); font-weight: 500; }
.titulo em { font-style: normal; color: var(--amarillo); }
.amarillo { color: var(--amarillo); }

.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; }
.dos p + p { margin-top: 16px; }
.foto-sombra { box-shadow: 0 4px 10px rgba(0,0,0,.45); border-radius: 4px; }
.justo { text-align: justify; hyphens: auto; }

/* Cifras sobre fotos */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--burdeos); }
.cifra { position: relative; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 30px 18px; background-size: cover; background-position: center; }
.cifra::before { content: ""; position: absolute; inset: 0; background: rgba(116, 35, 54, .78); }
.cifra:nth-child(3)::before { background: rgba(5, 31, 20, .22); }
.cifra > * { position: relative; }
.cifra b { font-size: 2.7rem; font-weight: 500; color: var(--amarillo); text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.cifra strong { font-size: 1.45rem; font-weight: 500; line-height: 1.25; margin-top: 6px; }
.cifra span { font-size: 0.92rem; font-weight: 700; margin-top: 18px; max-width: 20ch; }
@media (max-width: 800px) { .cifras { grid-template-columns: 1fr 1fr; } .cifra { min-height: 260px; } .cifra b { font-size: 2.2rem; } .cifra strong { font-size: 1.15rem; } }

/* BioNautas */
.bionautas .titulo { color: #3f6b43; }
.bionautas .numero { font-size: 3rem; color: var(--salvia); font-weight: 500; margin-top: 24px; line-height: 1; }
.bionautas .bajo-numero { color: #3f6b43; font-size: 1.1rem; margin-top: 10px; }
.bionautas ul { margin: 22px 0 0; padding-left: 20px; color: var(--tinta-2); }
.bionautas li { margin-bottom: 8px; }

/* Programas: tarjetas oscuras, algunas con foto */
.programas-cabeza { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; margin-bottom: 40px; }
@media (max-width: 700px) { .programas-cabeza { grid-template-columns: 1fr; gap: 12px; } }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tarjetas { grid-template-columns: 1fr; } }
.tarjeta { position: relative; border-radius: 8px; overflow: hidden; min-height: 470px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;
           padding: 56px 26px 34px; background: rgba(5, 31, 20, .55) center / cover no-repeat; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.tarjeta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5,31,20,.15) 0%, rgba(0,0,0,.72) 100%); }
.tarjeta.sin-foto::before { background: linear-gradient(rgba(5,31,20,.9) 0%, rgba(0,0,0,.86) 100%); }
.tarjeta > * { position: relative; }
.tarjeta .circulo { width: 36px; height: 36px; border: 1.5px solid #fff; border-radius: 50%; margin: 0 auto 22px; }
.tarjeta h3 { font-size: 1.05rem; font-weight: 500; color: #e9eadf; line-height: 2.1; }
.tarjeta p { font-size: 0.93rem; }
.tarjeta .lema { color: var(--amarillo); margin-top: 16px; font-size: 0.93rem; }
.principio { text-align: center; max-width: 92ch; margin: 44px auto 0; }
.principio em { font-style: normal; color: var(--amarillo); }
.centro { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; margin-top: 34px; }

/* Monitor */
.monitor .titulo { color: var(--tinta); }
.monitor .sub { color: var(--salvia); margin-top: 18px; font-size: 1.05rem; }
.monitor .botones { flex-direction: column; align-items: flex-start; }
.monitor .botones .boton { min-width: 230px; }
.captura { margin-top: 26px; }
.nota { font-size: 0.85rem; color: var(--tinta-2); margin-top: 12px; }

/* Aliadas */
.aliadas h2 { font-size: 1.6rem; font-weight: 700; margin: 70px 0 34px; }
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 20px; align-items: center; justify-items: center; }
.logos img { max-height: 90px; width: auto; max-width: 140px; object-fit: contain; }
@media (max-width: 800px) { .logos { grid-template-columns: repeat(3, 1fr); } .logos img { max-height: 64px; max-width: 96px; } }

/* Oferta institucional: expertas */
.panel-expertas { background: rgba(5, 31, 20, .84); border-radius: 8px; padding: 34px 32px; }
.panel-expertas h3 { color: var(--amarillo); font-weight: 500; font-size: 1.3rem; }
.panel-expertas .espaciado { letter-spacing: .25em; font-size: 0.85rem; font-weight: 700; margin-top: 10px; text-transform: uppercase; }
.panel-expertas p { margin-top: 18px; text-align: justify; hyphens: auto; }
.panel-expertas .etiqueta { text-align: right; color: var(--oliva); font-size: 1.2rem; margin-top: 28px; }
.temas { margin: 18px 0 0; padding-left: 20px; }
.temas li { margin-bottom: 4px; }
.retratos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.retratos img { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,.45); }

/* Cooperación */
.cooperacion .titulo { color: #4f9b72; font-weight: 700; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.cooperacion .entrada { text-align: center; max-width: 70ch; margin: 22px auto 0; color: var(--tinta-2); }
.etiquetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; margin-top: 50px; }
@media (max-width: 900px) { .etiquetas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .etiquetas { grid-template-columns: 1fr; } }
.etiquetas h3 { color: var(--burdeos); font-weight: 500; font-size: 1.25rem; margin-bottom: 8px; }
.etiquetas p { color: var(--tinta-2); font-size: 0.95rem; }

/* Contacto */
.contacto .titulo { color: var(--amarillo); }
.contacto .pregunta { font-weight: 700; font-size: 1.1rem; max-width: 60ch; margin-top: 26px; }

/* Pie */
.pie { background: rgba(250, 251, 244, .96); padding-block: 50px 30px; color: var(--tinta); font-size: 0.93rem; }
.pie .columnas { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 800px) { .pie .columnas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pie .columnas { grid-template-columns: 1fr; } }
.pie h3 { font-size: 1rem; margin-bottom: 8px; color: #3f6b43; }
.pie img { width: 160px; }
.pie .creditos { margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(5,31,20,.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--tinta-2); }
.pie a { color: #3f6b43; }

@media (prefers-reduced-motion: reduce) { .boton { transition: none; } html { scroll-behavior: auto; } }

/* Pantallas muy estrechas (360 px): que nada se salga */
.dos > *, .tarjetas > *, .cifras > * { min-width: 0; }
@media (max-width: 420px) {
  .portada h1 .grande { font-size: 1.8rem; letter-spacing: .02em; }
  .cifra { padding: 24px 10px; }
  .cifra strong { font-size: 1rem; hyphens: auto; overflow-wrap: anywhere; }
  .cifra span { font-size: 0.84rem; }
}