/* ==========================================================================
   SEMCA — Semillas del Cambio · Tiquipaya, Cochabamba (Bolivia)
   Hoja de estilos única.

   Estructura editorial: columna de contenido + barra lateral derecha.
   Inspirada en la plantilla «Editorial» de HTML5 UP (html5up.net, CCA 3.0);
   reescrita sin dependencias —sin jQuery, sin Font Awesome, sin webfonts—
   para que el sitio funcione sin conexión y pese poco.

   Paleta tomada de los textiles andinos (aguayo). Un solo acento: rojo teja.
   ========================================================================== */

:root{
  /* Papel y tinta */
  --papel:      #F7F1E5;
  --papel-2:    #EFE6D3;
  --tinta:      #241C14;
  --tinta-2:    #5C5044;
  --tinta-3:    #8A7C6B;

  /* Un único acento */
  --acento:     #A63A2E;

  /* Reglas y bordes */
  --regla:      #D9CCB4;
  --regla-fina: #E6DCC8;

  /* Verde y ocre: solo para datos, con moderación */
  --verde:      #3F6B4F;
  --ocre:       #9A6B12;

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC","Source Han Serif SC","Noto Serif CJK SC",serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --ancho-texto: 40rem;
  --ancho-lateral: 19rem;
  --radio: 2px;
}

/* ---------- Tema oscuro ---------- */
[data-theme="dark"]{
  color-scheme: dark;
  --papel:      #191410;
  --papel-2:    #221B15;
  --tinta:      #F2E9DA;
  --tinta-2:    #B9A991;
  --tinta-3:    #8C7E6C;
  --acento:     #E0796A;
  --regla:      #3A3025;
  --regla-fina: #2C241B;
  --verde:      #86BD9B;
  --ocre:       #D8A94E;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.72;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin:0 0 .4em}

/* ---------- Accesibilidad ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:120;
  background:var(--tinta);color:var(--papel);
  padding:11px 18px;font-family:var(--sans);font-size:.9rem;font-weight:600;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ==========================================================================
   Estructura: contenido + barra lateral
   ========================================================================== */

.wrapper{display:flex;min-height:100vh;align-items:flex-start}

.main{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.main > .inner{
  width:100%;max-width:calc(var(--ancho-texto) + 8rem);
  padding:3.25rem 3rem 5rem;
}

.sidebar{
  flex:0 0 var(--ancho-lateral);
  position:sticky;top:0;
  max-height:100vh;overflow-y:auto;
  background:var(--papel-2);
  border-left:1px solid var(--regla);
  padding:3.25rem 2rem 3rem;
}

/* ---------- Cabecera ---------- */
.site-head{
  display:flex;align-items:baseline;gap:1.5rem;
  padding-bottom:1.1rem;margin-bottom:2.6rem;
  border-bottom:2px solid var(--tinta);
}
.brand{display:flex;align-items:baseline;gap:.6rem;margin-right:auto}
.brand b{
  font-family:var(--sans);font-size:1.28rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.brand span{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);
}
.controls{display:flex;align-items:center;gap:.35rem;font-family:var(--sans)}
.controls button{
  font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid transparent;border-radius:var(--radio);
  color:var(--tinta-3);cursor:pointer;padding:.3rem .5rem;
}
.controls button:hover{color:var(--tinta);border-color:var(--regla)}
.controls .lang button[aria-pressed="true"]{color:var(--papel);background:var(--tinta)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;padding:.3rem}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .ic-luna{display:none}
[data-theme="dark"] .theme-toggle .ic-sol{display:none}
[data-theme="dark"] .theme-toggle .ic-luna{display:block}

/* ==========================================================================
   Tipografía
   ========================================================================== */

h1,h2,h3,h4{font-weight:600;line-height:1.22;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:-.015em;margin-bottom:.5em}
h2{font-size:clamp(1.35rem,2.3vw,1.7rem);margin-top:0}
h3{font-size:1.1rem}
h4{
  font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);
}

.entradilla{
  font-size:1.2rem;line-height:1.6;color:var(--tinta-2);
  max-width:34rem;margin-bottom:1.6rem;
}
.dato{font-family:var(--sans);font-size:.86rem;color:var(--tinta-3)}
.fino{font-size:.9rem;color:var(--tinta-2)}

/* Capitular para el primer párrafo de un artículo */
.capitular::first-letter{
  float:left;font-size:3.4em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--acento);font-weight:600;
}

/* El sitio es solo en español: no hay conmutador de idioma ni reglas
   específicas para otras escrituras. */

/* ==========================================================================
   Secciones
   ========================================================================== */

section{margin-bottom:3.4rem}
section > h2{padding-bottom:.5rem;border-bottom:1px solid var(--regla)}
section > h2 + .entradilla{margin-top:1.2rem}

/* Lista editorial: etiqueta a la izquierda, texto a la derecha.
   Sustituye a las rejillas de tarjetas. */
.lista-editorial{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--regla-fina)}
.lista-editorial > li{
  display:grid;grid-template-columns:11rem 1fr;gap:1.8rem;
  padding:1.35rem 0;margin:0;border-bottom:1px solid var(--regla-fina);
}
.lista-editorial > li > .etiqueta{
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acento);
  padding-top:.28em;
}
.lista-editorial h3{margin:0 0 .35em;font-size:1.05rem}
.lista-editorial p{margin:0;font-size:.98rem;color:var(--tinta-2)}

/* Aviso / nota al margen */
.nota{
  border-left:3px solid var(--acento);
  padding:.2rem 0 .2rem 1.25rem;
  margin:1.8rem 0;
  font-size:1rem;color:var(--tinta-2);
}
.nota strong{color:var(--tinta)}

.cita{
  margin:2rem 0;padding:0 0 0 1.25rem;
  border-left:3px solid var(--regla);
  font-size:1.12rem;font-style:italic;color:var(--tinta-2);
}
.cita footer{font-family:var(--sans);font-size:.8rem;font-style:normal;color:var(--tinta-3);margin-top:.5rem}

/* ==========================================================================
   Tablas de datos
   ========================================================================== */

.tabla{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem}
.tabla th,.tabla td{text-align:left;padding:.72rem .9rem .72rem 0;border-bottom:1px solid var(--regla-fina);vertical-align:top}
.tabla th{
  width:12rem;font-family:var(--sans);font-size:.8rem;font-weight:600;
  color:var(--tinta-3);letter-spacing:.03em;
}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:1px solid var(--regla)}
.tabla b{font-weight:600}

/* Ficha de registro: banda de datos en columnas */
.ficha{
  display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;
  padding:1.4rem 0;margin:1.6rem 0;
  border-top:1px solid var(--regla);border-bottom:1px solid var(--regla);
}
.ficha div{font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.ficha b{display:block;font-family:var(--serif);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--tinta);margin-bottom:.15rem}
.ficha .vigente{color:var(--verde)}

/* ==========================================================================
   Imágenes y figuras
   ========================================================================== */

figure{margin:2rem 0}
figure img{width:100%;height:auto;border-radius:var(--radio);background:var(--papel-2)}
figcaption{font-family:var(--sans);font-size:.8rem;color:var(--tinta-3);margin-top:.6rem;line-height:1.5}

/* Imagen de apertura: ocupa el ancho de la columna con proporción fija.
   El recorte lo hace el navegador (object-fit), el archivo no se altera. */
figure.destacada{margin:0 0 2.6rem}
figure.destacada img{aspect-ratio:16/9;object-fit:cover}

/* ---------- Galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin:1.8rem 0 0}
.galeria figure{margin:0}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);background:var(--papel-2)}
.galeria figcaption{font-size:.76rem;margin-top:.45rem}
.galeria--tres{grid-template-columns:repeat(3,1fr)}

/* ---------- Preguntas frecuentes ---------- */
.faq{border-top:1px solid var(--regla-fina);margin-top:1.6rem}
.faq details{border-bottom:1px solid var(--regla-fina)}
.faq summary{
  cursor:pointer;padding:1.05rem 0;font-weight:600;font-size:1.02rem;
  list-style:none;display:flex;gap:.85rem;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--acento);font-weight:700;flex:none;width:.9rem}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--acento)}
.faq .respuesta{padding:0 0 1.3rem 1.75rem;color:var(--tinta-2);font-size:.97rem}
.faq .respuesta p:last-child,.faq .respuesta ul:last-child{margin-bottom:0}

/* Marcador de posición para fotos propias: no simula una imagen. */
.hueco{
  border:1px dashed var(--regla);border-radius:var(--radio);
  padding:2.2rem 1.5rem;text-align:center;
  font-family:var(--sans);font-size:.85rem;color:var(--tinta-3);
  background:var(--papel-2);
}
.hueco b{display:block;color:var(--tinta-2);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.35rem}

/* ==========================================================================
   Listado de actividades (sin rejilla de tarjetas)
   ========================================================================== */

.actividad{display:grid;grid-template-columns:6.5rem 1fr;gap:1.8rem;padding:1.5rem 0;border-bottom:1px solid var(--regla-fina)}
.actividad:first-of-type{border-top:1px solid var(--regla-fina)}
.actividad .fecha{
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);padding-top:.3em;
}
.actividad .fecha b{display:block;font-family:var(--serif);font-size:1.5rem;letter-spacing:0;color:var(--acento);line-height:1.1}
.actividad h3{margin:0 0 .3em;font-size:1.02rem}
.actividad p{margin:0;font-size:.97rem;color:var(--tinta-2)}

/* ==========================================================================
   Enlaces de acción: texto subrayado, sin píldoras de color
   ========================================================================== */

.enlace{
  display:inline-block;
  border-bottom:1.5px solid var(--acento);
  padding-bottom:1px;font-weight:600;color:var(--acento);
}
.enlace:hover{background:var(--acento);color:var(--papel);border-bottom-color:var(--acento)}
button.enlace{background:none;border:0;border-bottom:1.5px solid var(--acento);border-radius:0;cursor:pointer;font:inherit;font-weight:600;color:var(--acento);padding:0 0 1px}
.acciones{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.8rem}

/* ==========================================================================
   Formulario
   ========================================================================== */

.campo{margin-bottom:1.1rem}
.campo label{
  display:block;font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.35rem;
}
.campo input,.campo select,.campo textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--tinta);
  background:transparent;border:0;border-bottom:1px solid var(--regla);
  border-radius:0;padding:.5rem 0;
}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A7C6B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .2rem center;padding-right:1.6rem}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--acento);border-bottom-width:2px}
.aviso{display:none;margin-top:1rem;font-size:.92rem;color:var(--verde)}
.aviso.visible{display:block}

/* ==========================================================================
   Barra lateral
   ========================================================================== */

.sidebar h4{margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid var(--regla)}
.sidebar nav ul{list-style:none;margin:0 0 2.4rem;padding:0}
.sidebar nav li{margin:0;border-bottom:1px solid var(--regla-fina)}
.sidebar nav a{
  display:block;padding:.62rem 0;
  font-family:var(--sans);font-size:.92rem;color:var(--tinta-2);
}
.sidebar nav a:hover{color:var(--acento)}
.sidebar nav a[aria-current="page"]{color:var(--tinta);font-weight:600}
.sidebar nav a[aria-current="page"]::before{content:"— ";color:var(--acento)}
.bloque{margin-bottom:2.2rem}
.bloque dl{margin:0;font-family:var(--sans);font-size:.88rem}
.bloque dt{color:var(--tinta-3);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.15rem}
.bloque dd{margin:0 0 .9rem;color:var(--tinta)}
.bloque a{border-bottom:1px solid var(--regla)}
.bloque a:hover{border-bottom-color:var(--acento);color:var(--acento)}

/* ==========================================================================
   Pie
   ========================================================================== */

.site-foot{
  margin-top:4rem;padding-top:1.4rem;border-top:1px solid var(--regla);
  font-family:var(--sans);font-size:.82rem;color:var(--tinta-3);
}
.site-foot p{margin:0 0 .4em}
.site-foot a{border-bottom:1px solid var(--regla)}
.site-foot a:hover{color:var(--acento);border-bottom-color:var(--acento)}

/* ==========================================================================
   Mapa
   ========================================================================== */

.mapa{border:1px solid var(--regla);border-radius:var(--radio);overflow:hidden;margin:1.6rem 0}
.mapa iframe{width:100%;height:320px;border:0}

/* ==========================================================================
   Página 404
   ========================================================================== */

.error-codigo{
  font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acento);margin-bottom:.6rem;
}

/* ==========================================================================
   Adaptación a pantallas pequeñas
   ========================================================================== */

@media (max-width:1000px){
  .wrapper{display:block}
  .sidebar{
    position:static;max-height:none;width:auto;
    border-left:0;border-top:1px solid var(--regla);
    padding:2.4rem 2rem;
  }
  .main > .inner{padding:2.2rem 1.6rem 3rem}
  .sidebar nav ul{columns:2;column-gap:2rem}
  .sidebar nav li{break-inside:avoid}
}

@media (max-width:720px){
  body{font-size:1rem}
  .sidebar nav ul{columns:1}
  .lista-editorial > li{grid-template-columns:1fr;gap:.4rem}
  .lista-editorial > li > .etiqueta{padding-top:0}
  .actividad{grid-template-columns:1fr;gap:.5rem}
  .actividad .fecha{display:flex;align-items:baseline;gap:.45rem;padding-top:0}
  .actividad .fecha b{font-size:1.1rem}
  .tabla th,.tabla td{display:block;width:auto}
  .tabla th{border-bottom:0;padding-bottom:.1rem}
  .tabla td{padding-top:.1rem;padding-bottom:.8rem}
  .brand span{display:none}
}

/* ---------- Impresión ---------- */
@media print{
  .sidebar,.controls,.skip,.mapa,.acciones{display:none !important}
  .wrapper{display:block}
  .main > .inner{max-width:none;padding:0}
  body{background:#fff;color:#000;font-size:11pt}
  section{page-break-inside:avoid;margin-bottom:1.6rem}
  .hueco{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}