/* noalbulogas.org — identidad visual tomada del folleto «Pescandi Circular»
   (Agrolinera, agosto de 2026): azul marino #181860, verde #60c048, tarjetas
   pastel por fases, pregunta en píldora azul sobre respuesta en verde claro. */

:root {
  --marino:#181860; --marino-claro:#2b2b7a; --marino-tenue:#4a4a8f;
  --verde:#60c048; --verde-osc:#3f8f2e; --verde-suave:#eef7e9; --verde-borde:#a8d49a;
  --ocre:#e0c25c; --ocre-suave:#fbf4dc;
  --morado:#9b8fd0; --morado-suave:#ede9f8;
  --bg:#ffffff; --card:#ffffff; --texto:#22252b; --tenue:#5f6b76; --linea:#e3e7ea;
  --hecho-bg:#eef7e9; --hecho-fg:#2f6b23; --hecho-bd:#a8d49a;
  --estim-bg:#fbf4dc; --estim-fg:#8a6a10; --estim-bd:#e0c25c;
  --pend-bg:#ede9f8;  --pend-fg:#4f4585;  --pend-bd:#9b8fd0;
  --ctx-bg:#e9ecf7;   --ctx-fg:#2f3577;   --ctx-bd:#a9b2dd;
  --error-bg:#fdecec; --error-fg:#8c2320; --error-bd:#f0bcbb;
  --falso-bg:#fdecec; --falso-fg:#9b2420; --falso-bd:#e39c99;
  --engan-bg:#fdf3e0; --engan-fg:#8a5a10; --engan-bd:#e0c25c;
  --sinres-bg:#eef1f5; --sinres-fg:#41526b; --sinres-bd:#b4c0cf;
  --sombra:0 4px 18px rgba(24,24,96,.07);
  --radio:16px;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marino:#0f0f3d; --marino-claro:#20205c; --marino-tenue:#8f8fc4;
    --verde:#6fcf55; --verde-osc:#8bd97a; --verde-suave:#16261a; --verde-borde:#335c2c;
    --ocre-suave:#2e2716; --morado-suave:#221f33;
    --bg:#12141a; --card:#1a1d24; --texto:#e6eaec; --tenue:#9aa7b0; --linea:#2a2f36;
    --hecho-bg:#16261a; --hecho-fg:#8bd97a; --hecho-bd:#335c2c;
    --estim-bg:#2e2716; --estim-fg:#e0c25c; --estim-bd:#5c4c22;
    --pend-bg:#221f33;  --pend-fg:#b6a9e8;  --pend-bd:#494073;
    --ctx-bg:#1b1f3a;   --ctx-fg:#a9b2dd;   --ctx-bd:#3a4179;
    --error-bg:#3a1f1f; --error-fg:#f0a9a7; --error-bd:#6b3331;
    --falso-bg:#3a1f1f; --falso-fg:#f0a9a7; --falso-bd:#6b3331;
    --engan-bg:#33291a; --engan-fg:#e3b467; --engan-bd:#5f4a28;
    --sinres-bg:#212a33; --sinres-fg:#a7bcd4; --sinres-bd:#39485a;
    --sombra:0 4px 18px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box }
body {
  margin:0; background:var(--bg); color:var(--texto); line-height:1.65;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}
a { color:var(--verde-osc) }
@media (prefers-color-scheme:dark){ a{color:var(--verde)} }
:focus-visible { outline:3px solid var(--verde); outline-offset:2px; border-radius:4px }

.saltar { position:absolute; left:-9999px; background:var(--marino); color:#fff;
          padding:10px 16px; z-index:20 }
.saltar:focus { left:0; top:0 }

.envoltura { max-width:1000px; margin:auto; padding:8px 20px 64px }

/* ------------------------------------------------------- cabecera marino */
.cabecera { background:var(--marino); position:sticky; top:0; z-index:10 }
.cabecera .fila {
  max-width:1000px; margin:auto; padding:11px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.marca { display:flex; align-items:center; text-decoration:none; padding:4px 0 }
.marca span { color:#fff; font-weight:800; letter-spacing:.01em; font-size:1.1rem }
.marca:hover span { color:var(--verde) }
.cabecera nav { display:flex; gap:20px; flex-wrap:wrap }
.cabecera nav a { color:#c9cbe8; text-decoration:none; font-weight:600; font-size:.93rem }
.cabecera nav a:hover { color:var(--verde) }

/* ------------------------------------------------------------------ hero */
.portada { position:relative; background:var(--marino) }
.portada__foto { display:block; width:100%; height:clamp(220px,34vw,380px);
                 object-fit:cover; opacity:.85 }
.portada__panel {
  max-width:1000px; margin:auto; padding:0 20px;
  position:relative; margin-top:clamp(-90px,-9vw,-60px); padding-bottom:26px;
}
.portada__caja {
  background:var(--marino); color:#fff; border-radius:var(--radio);
  padding:26px 30px; box-shadow:0 10px 30px rgba(24,24,96,.22);
  border-left:8px solid var(--verde);
}
.kicker { font-weight:800; color:var(--verde); letter-spacing:.06em; margin:0;
          text-transform:uppercase; font-size:.9rem }
.portada__caja h1 { font-family:var(--serif); font-size:clamp(1.9rem,4.4vw,3rem);
                    line-height:1.12; margin:.2em 0 .25em; color:#fff }
.portada__caja p { color:#d3d5ec; margin:0; max-width:64ch }

/* ---------------------------------------------------------------- bloques */
h2 { font-family:var(--serif); margin-top:52px; font-size:clamp(1.5rem,3vw,2rem);
     color:var(--marino); scroll-margin-top:74px; letter-spacing:.01em }
@media (prefers-color-scheme:dark){ h2{color:#c9cbe8} }
h2 .barra { display:block; width:56px; height:4px; background:var(--verde);
            border-radius:2px; margin-top:8px }
h3 { font-size:1.05rem }

.panel { background:var(--card); border:1px solid var(--linea); border-radius:var(--radio);
         padding:24px 26px; margin:16px 0; box-shadow:var(--sombra) }
.panel.estrecho { max-width:460px }

.reglas { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:11px;
          grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }
.reglas li { background:var(--verde-suave); border:1px solid var(--verde-borde);
             padding:13px 16px; border-radius:12px; font-weight:650 }

.destacado { border-left:5px solid var(--verde); padding:13px 19px;
             background:var(--verde-suave); border-radius:0 12px 12px 0; margin:19px 0 }

/* ------------------------------------------------------- cifras y escala */
.cifras { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
          margin:18px 0 0 }
.cifra { text-align:center; padding:20px 16px; background:var(--verde-suave);
         border:1px solid var(--verde-borde); border-radius:14px }
.cifra b { display:block; font-family:var(--serif); font-size:1.85rem; color:var(--marino);
           line-height:1.1 }
@media (prefers-color-scheme:dark){ .cifra b{color:var(--verde)} }
.cifra span { display:block; margin-top:7px; font-size:.92rem; color:var(--tenue) }

.escala { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px }
.escala li { display:grid; grid-template-columns:minmax(120px,auto) 1fr auto; gap:12px;
             align-items:center }
.escala .nombre { font-weight:700; font-size:.95rem }
.escala .barra-dato { display:block; width:100%; height:19px; border-radius:10px }
.escala .pista   { fill:var(--linea) }
.escala .relleno { fill:var(--marino-tenue) }
.escala .propia .relleno { fill:var(--verde) }
.escala .valor { font-variant-numeric:tabular-nums; font-size:.9rem; color:var(--tenue);
                 white-space:nowrap }

/* ----------------------------------------------------------------- fases */
.fases { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
         margin-top:16px; padding:0; list-style:none }
.fase { border-radius:14px; padding:20px; border:2px solid }
.fase--verde  { background:var(--verde-suave); border-color:var(--verde-borde) }
.fase--ocre   { background:var(--ocre-suave);  border-color:var(--ocre) }
.fase--morado { background:var(--morado-suave); border-color:var(--morado) }
.fase__num { font-family:var(--serif); font-weight:700; color:var(--marino);
             letter-spacing:.06em; text-transform:uppercase; font-size:.87rem }
@media (prefers-color-scheme:dark){ .fase__num{color:#c9cbe8} }
.fase h3 { margin:.25em 0 .1em; font-size:1.2rem }
.fase__lema { font-weight:700; margin:.2em 0 .5em; font-size:.95rem }
.fase p { margin:0; font-size:.94rem }

/* --------------------------------------------------------------- bulos */
.veredicto { display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.04em;
             text-transform:uppercase; padding:3px 12px; border-radius:999px;
             border:1.5px solid; white-space:nowrap }
.veredicto--falso    { background:var(--falso-bg); color:var(--falso-fg); border-color:var(--falso-bd) }
.veredicto--enganoso { background:var(--engan-bg); color:var(--engan-fg); border-color:var(--engan-bd) }
.veredicto--sin-respaldo { background:var(--sinres-bg); color:var(--sinres-fg); border-color:var(--sinres-bd) }

.bulos { list-style:none; padding:0; margin:0; display:grid; gap:22px }
.bulo { scroll-margin-top:80px }
.bulo__cabecera { display:flex; gap:11px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
.bulo__cabecera h3 { margin:0; font-size:1.06rem; font-weight:700;
                     background:var(--marino); color:#fff; border-radius:999px;
                     padding:9px 20px }
.bulo__cuerpo { border:1.5px solid; border-radius:14px; padding:17px 21px }
.bulo--falso .bulo__cuerpo    { background:var(--falso-bg); border-color:var(--falso-bd) }
.bulo--enganoso .bulo__cuerpo { background:var(--engan-bg); border-color:var(--engan-bd) }
.bulo--sin-respaldo .bulo__cuerpo { background:var(--sinres-bg); border-color:var(--sinres-bd) }
.sin-fuente { margin:0 0 6px !important; font-size:.86rem; font-style:italic;
              color:var(--tenue) }
.bulo__cuerpo p { margin:.4em 0 }
.bulo__rotulo { margin:16px 0 4px !important; font-size:.72rem; font-weight:800;
                letter-spacing:.09em; text-transform:uppercase; color:var(--tenue) }
.bulo .cita { background:var(--card) }

.indice--bulos { margin-bottom:26px }
.indice--bulos li:hover { background:var(--falso-bg) }

/* -------------------------------------------------------------- índice */
.indice { list-style:none; counter-reset:idx; padding:0; margin:18px 0 0;
          display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) }
.indice li { counter-increment:idx; display:flex; align-items:baseline; gap:10px;
             padding:9px 12px; border-radius:9px; flex-wrap:wrap }
.indice li:hover { background:var(--verde-suave) }
.indice li::before { content:counter(idx) "."; color:var(--tenue); font-weight:700;
                     font-variant-numeric:tabular-nums; min-width:1.6em; flex:none }
.indice a { flex:1 1 15ch; text-decoration:none; font-weight:600; color:var(--texto) }
.indice a:hover { color:var(--verde-osc); text-decoration:underline }
@media (prefers-color-scheme:dark){ .indice a:hover{color:var(--verde)} }
.indice .etiqueta { flex:none; font-size:.68rem; padding:2px 8px }

/* ------------------------------------------------------------- etiquetas */
.etiqueta { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.02em;
            padding:3px 11px; border-radius:999px; border:1px solid; white-space:nowrap }
.etiqueta--hecho      { background:var(--hecho-bg); color:var(--hecho-fg); border-color:var(--hecho-bd) }
.etiqueta--estimacion { background:var(--estim-bg); color:var(--estim-fg); border-color:var(--estim-bd) }
.etiqueta--pendiente  { background:var(--pend-bg);  color:var(--pend-fg);  border-color:var(--pend-bd) }
.etiqueta--contexto   { background:var(--ctx-bg);   color:var(--ctx-fg);   border-color:var(--ctx-bd) }

.leyenda dl { margin:15px 0 0; display:grid; gap:11px }
.leyenda dl > div { display:grid; grid-template-columns:minmax(155px,auto) 1fr; gap:14px;
                    align-items:start }
.leyenda dt { margin:0 } .leyenda dd { margin:0; color:var(--tenue); font-size:.94rem }

/* --------------------------------------------- FAQ estilo folleto */
.faq { list-style:none; padding:0; margin:0; display:grid; gap:22px }
.faq__item { scroll-margin-top:80px }
.faq__cabecera { display:flex; gap:11px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
.faq__pregunta {
  background:var(--marino); color:#fff; border-radius:999px; padding:9px 20px;
  font-weight:700; font-size:1rem; margin:0; display:inline-block;
}
.faq__cuerpo { background:var(--verde-suave); border:1.5px solid var(--verde-borde);
               border-radius:14px; padding:17px 21px }
.faq__cuerpo p { margin:.4em 0 }
.faq__cuerpo p:first-child { margin-top:0 } .faq__cuerpo p:last-child { margin-bottom:0 }
.cita { margin:0 0 16px; padding:14px 18px; background:var(--card);
        border:1px solid var(--linea); border-left:5px solid var(--marino-tenue);
        border-radius:0 12px 12px 0 }
.cita__rotulo { margin:0 0 6px !important; font-size:.72rem; font-weight:800;
                letter-spacing:.09em; text-transform:uppercase; color:var(--tenue) }
.cita blockquote { margin:0; font-style:italic; font-size:1.02rem; line-height:1.55 }
.cita blockquote::before { content:"\00AB" } .cita blockquote::after { content:"\00BB" }
.cita figcaption { margin-top:8px; font-size:.86rem; color:var(--tenue) }

.fuentes { font-size:.92rem; background:var(--card); border:1px solid var(--linea);
           padding:11px 15px; border-radius:11px; margin-top:13px !important }
.enlace-permanente { font-size:.84rem; margin-top:9px !important }
.enlace-permanente a { color:var(--tenue); text-decoration:none }
.enlace-permanente a:hover { color:var(--verde-osc); text-decoration:underline }

.dos-columnas { display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)) }
.lista-si { list-style:"✓  " } .lista-no { list-style:"◻  " }
.documentos { padding-left:1.1em } .documentos li { margin:.4em 0 }
.normas { padding-left:1.2em } .normas li { margin:.5em 0 }

/* -------------------------------------------------------------------foro */
.foro-intro { border-left:6px solid var(--verde) }
.formulario { display:grid; gap:16px; max-width:640px }
.formulario--compacto { margin-top:12px }
.campo { display:grid; gap:5px }
.campo label { font-weight:650 }
.campo small { color:var(--tenue); font-size:.87rem; line-height:1.45 }
.campo input, .campo textarea {
  font:inherit; color:var(--texto); background:var(--bg);
  border:1.5px solid var(--linea); border-radius:11px; padding:10px 13px; width:100%;
}
.campo input:focus, .campo textarea:focus { border-color:var(--verde) }
.campo textarea { resize:vertical; min-height:110px }
.req { color:#b3261e } @media (prefers-color-scheme:dark){ .req{color:#f2a5a1} }
.trampa { position:absolute; left:-9999px; height:0; overflow:hidden }

.boton { font:inherit; font-weight:700; cursor:pointer; border:2px solid var(--marino);
         background:var(--marino); color:#fff; padding:11px 22px; border-radius:11px;
         justify-self:start }
.boton:hover { background:var(--marino-claro); border-color:var(--marino-claro) }
.boton--secundario { background:transparent; color:var(--marino) }
.boton--secundario:hover { background:var(--linea); color:var(--marino) }
@media (prefers-color-scheme:dark){
  .boton{background:var(--verde);border-color:var(--verde);color:#0e1a16}
  .boton:hover{background:var(--verde-osc);border-color:var(--verde-osc)}
  .boton--secundario{background:transparent;color:var(--verde)}
}

.hilos, .respuestas { list-style:none; padding:0; margin:0 }
.hilos > li { border-top:1px solid var(--linea); padding:20px 0 }
.hilos > li:first-child { border-top:0 }
.respuestas { margin:14px 0 0; padding-left:18px; border-left:3px solid var(--verde-borde) }
.respuestas > li { padding:12px 0 }
.mensaje__meta { margin:0 0 6px; font-size:.9rem; color:var(--tenue); display:flex;
                 gap:10px; align-items:center; flex-wrap:wrap }
.mensaje__meta strong { color:var(--texto) }
.mensaje__cuerpo { white-space:pre-wrap; overflow-wrap:anywhere }
.mensaje--equipo > .mensaje__cuerpo { background:var(--verde-suave);
    border:1px solid var(--verde-borde); padding:13px 16px; border-radius:12px }
.insignia { background:var(--verde); color:#0e2a10; font-size:.72rem; font-weight:700;
            padding:2px 10px; border-radius:999px }
.responder { margin-top:12px }
.responder summary { cursor:pointer; color:var(--verde-osc); font-weight:650; font-size:.93rem }
@media (prefers-color-scheme:dark){ .responder summary{color:var(--verde)} }

/* -------------------------------------------------------------- moderación */
.pendiente { border-left:5px solid var(--ocre) }
.acciones { display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; align-items:center }
.rechazo { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.rechazo input[type=text] { font:inherit; padding:9px 13px; border:1.5px solid var(--linea);
    border-radius:11px; background:var(--bg); color:var(--texto); min-width:240px; flex:1 }
.respuesta-admin { margin:12px 0 0 18px; padding-left:14px; border-left:3px solid var(--linea) }
.fila--separada { display:flex; justify-content:space-between; align-items:center;
                  gap:16px; flex-wrap:wrap; margin-top:24px }

/* -------------------------------------------------------------------- pie */
.pie { background:var(--marino); color:#c0c3e0; margin-top:52px; padding:34px 0 26px;
       font-size:.93rem }
.pie .envoltura { padding-bottom:6px }
.pie strong { color:#fff }
.pie a { color:var(--verde) }
.pie nav { display:flex; gap:17px; flex-wrap:wrap; margin:14px 0 }
.pie__contacto { border-top:1px solid rgba(255,255,255,.14); margin-top:16px;
                 padding-top:14px; display:flex; gap:18px; flex-wrap:wrap }

.avisos { margin-top:18px }
.aviso { padding:13px 18px; border-radius:12px; border:1.5px solid; margin:8px 0 }
.aviso--ok    { background:var(--hecho-bg); color:var(--hecho-fg); border-color:var(--hecho-bd) }
.aviso--error { background:var(--error-bg); color:var(--error-fg); border-color:var(--error-bd) }

.tenue { color:var(--tenue); font-size:.92rem }
mark { background:var(--estim-bg); color:var(--estim-fg); padding:1px 6px; border-radius:5px }

@media (max-width:620px){
  .leyenda dl > div { grid-template-columns:1fr; gap:4px }
  .panel { padding:19px 17px }
  .escala li { grid-template-columns:1fr; gap:5px }
  .escala .valor { justify-self:start }
  .portada__caja { padding:21px 20px; border-left-width:6px }
}