/* ============================================================
   DIGITALIZA2 — Demo municipal · Acabado «ROBLEDAL»
   Diario botánico al amanecer: cremas y verdes salvia, bordes
   finos, sereno y natural. Autocontenido: solo fuentes del
   sistema, CSS y JS propios. Sin recursos de terceros.
   Prefijo de clases: .r-
   ============================================================ */

:root{
  --paper:#fbfdf6;        /* fondo / canvas */
  --ink:#0a1d08;          /* texto */
  --loam:#4a3212;         /* primario / escudo / CTA */
  --forest:#203b14;       /* acento / hover CTA */
  --eyebrow:#203b14;      /* micro-etiquetas */
  --surface:#eff2e8;      /* superficie 1 */
  --surface2:#e0e5d5;     /* superficie 2 (tarjetas) */
  --border:#d3dcc6;       /* borde */
  --muted:#41502f;        /* texto apagado */
  --on-primary:#fbfdf6;   /* texto sobre primario */

  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  --r-btn:20px;
  --r-card:14px;
  --r-img:8px;
  --maxw:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.125rem;
  line-height:1.67;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- Accesibilidad: foco y skip link ---- */
:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:2px;
  border-radius:4px;
}
.r-skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--loam);color:var(--on-primary);
  padding:14px 20px;border-radius:0 0 var(--r-btn) 0;
  font-family:var(--mono);font-size:0.875rem;text-decoration:none;
}
.r-skip:focus{left:0}

/* ---- Layout helpers ---- */
.r-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.r-pad{padding-top:88px;padding-bottom:88px}
.r-center{text-align:center}

/* ---- Tipografía ---- */
h1,h2,h3{font-weight:400;letter-spacing:-0.02em;line-height:1.1;margin:0}
.r-h2big{font-size:clamp(1.875rem,4.4vw,2.9375rem);letter-spacing:-0.025em;margin-bottom:16px}
.r-eyebrow{
  font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--eyebrow);margin:0 0 14px;
}
.r-eyebrow.center{text-align:center}
.r-eyebrow.light{color:var(--paper);opacity:.92}
.r-mono{font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.02em}
.r-body{font-size:1.125rem;line-height:1.67;color:var(--ink)}
.r-body.light{color:var(--paper);opacity:.94}
.r-lema{margin:14px 0 0;font-size:1.125rem;color:var(--paper);opacity:.92}
.r-inline{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.r-inline:hover{color:var(--loam)}

/* ============================================================
   Switcher de acabados
   ============================================================ */
.r-switch{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.02em;
}
.r-switch-in{
  max-width:var(--maxw);margin:0 auto;padding:10px 24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
}
.r-switch-label{color:var(--muted)}
.r-switch a{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--border);border-radius:9999px;background:var(--paper);
}
.r-switch a:hover{border-color:var(--forest)}
.r-switch a[aria-current="true"]{
  background:var(--loam);color:var(--on-primary);border-color:var(--loam);
}

/* ============================================================
   Navegación
   ============================================================ */
.r-nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--border);transition:box-shadow .3s ease}
.r-nav.solid{box-shadow:rgba(99,143,61,0.12) 0 1px 0 0}
.r-nav-in{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.r-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.r-brand b{font-weight:700;letter-spacing:-0.01em;font-size:1rem}
.r-mark{width:30px;height:30px;flex:0 0 auto}
.r-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.r-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;
  text-decoration:none;color:var(--ink);font-size:0.875rem;font-weight:700;letter-spacing:0.01em;
  border-radius:var(--r-btn);
}
.r-links a:hover{background:var(--surface)}
.r-links a.r-on{color:var(--forest)}
.r-navcta{
  background:var(--loam);color:var(--on-primary)!important;
  border-radius:var(--r-btn);
}
.r-navcta:hover{background:var(--forest)!important}

/* ============================================================
   Botones
   ============================================================ */
.r-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 28px;
  font-family:var(--sans);font-size:0.875rem;font-weight:700;letter-spacing:0.02em;
  text-decoration:none;text-transform:uppercase;cursor:pointer;
  background:var(--loam);color:var(--on-primary);
  border:1px solid var(--loam);border-radius:var(--r-btn);
  box-shadow:rgba(99,143,61,0.10) 0 0 0 1px;
  transition:background .2s ease,border-color .2s ease;
}
.r-btn:hover{background:var(--forest);border-color:var(--forest)}
.r-btn.ghost{
  background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none;
}
.r-btn.ghost:hover{background:var(--surface);color:var(--forest);border-color:var(--forest)}
.r-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ============================================================
   Hero (home)
   ============================================================ */
.r-hero{position:relative;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--border)}
.r-hero-media{position:absolute;inset:0;will-change:transform}
.r-hero-media img{width:100%;height:120%;object-fit:cover;opacity:.5}
.r-hero-vig{position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,253,246,.55),rgba(251,253,246,.8))}
.r-hero-center{
  position:relative;z-index:2;max-width:880px;margin:0 auto;
  padding:120px 24px 96px;text-align:center;
}
.r-hero-center .r-mark{width:56px;height:56px;margin:0 auto 24px}
.r-word{font-size:clamp(2.5rem,8vw,4.5rem);letter-spacing:-0.03em;line-height:1.0}
.r-manifesto{
  font-family:var(--mono);font-size:0.875rem;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--muted);margin:24px 0 0;
}
.r-hero .r-cta{justify-content:center;margin-top:36px}
.r-scroll{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--forest);text-decoration:none;font-size:1.625rem;line-height:1;
}

/* ---- Banner (subpáginas) ---- */
.r-banner{position:relative;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--border)}
.r-banner::before{
  content:"";position:absolute;inset:0;
  background:var(--bg) center/cover no-repeat;opacity:.42;
}
.r-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,253,246,.45),rgba(251,253,246,.82))}
.r-banner-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:96px 24px 72px}
.r-banner h1{font-size:clamp(2.125rem,6vw,3.625rem);letter-spacing:-0.03em}

/* ============================================================
   Statement
   ============================================================ */
.r-statement{max-width:820px;margin:0 auto;padding:96px 24px;text-align:center}
.r-statement h2{font-size:clamp(1.75rem,4vw,2.75rem);letter-spacing:-0.025em;line-height:1.12}
.r-statement .r-body{margin:24px auto 0;max-width:680px}

/* ============================================================
   Preview grid (home — secciones)
   ============================================================ */
.r-previewgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.r-preview{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;transition:border-color .2s ease,transform .3s ease;
}
.r-preview:hover{border-color:var(--forest)}
.r-preview-img{display:block;aspect-ratio:16/10;overflow:hidden}
.r-preview-img img{width:100%;height:100%;object-fit:cover}
.r-preview-body{padding:24px}
.r-preview-body h3{font-size:1.375rem;margin-bottom:8px}
.r-preview-body p{margin:0 0 14px;color:var(--muted);font-size:1rem}
.r-go{font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.02em;color:var(--forest)}

/* ============================================================
   Band (franja con imagen)
   ============================================================ */
.r-band{position:relative;overflow:hidden;margin:0;background:var(--forest)}
.r-band::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover no-repeat;opacity:.4}
.r-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,29,8,.78),rgba(10,29,8,.5))}
.r-band-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:80px 24px}
.r-band h2{color:var(--paper);font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:14px}
.r-band .r-inline{color:#d7e8b5}

/* ---- Parallax / llamada ---- */
.r-parallax{position:relative;overflow:hidden;background:var(--loam)}
.r-parallax::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover no-repeat;opacity:.3;background-attachment:fixed}
.r-parallax::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,59,20,.78),rgba(74,50,18,.78))}
.r-parallax-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:96px 24px;text-align:center}
.r-parallax h2{color:var(--paper);font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:16px}
.r-parallax .r-cta{justify-content:center}

/* ============================================================
   Noticias / actualidad
   ============================================================ */
.r-newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.r-news{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;transition:border-color .2s ease;
}
.r-news:hover{border-color:var(--forest)}
.r-news-img{display:block;aspect-ratio:16/10;overflow:hidden}
.r-news-img img{width:100%;height:100%;object-fit:cover}
.r-news-body{padding:20px;display:flex;flex-direction:column;gap:10px}
.r-news-body strong{font-weight:400;font-size:1.125rem;letter-spacing:-0.02em;line-height:1.3}
.r-news-body time{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.02em;color:var(--muted)}
.r-tag{
  align-self:flex-start;font-family:var(--mono);font-size:0.75rem;letter-spacing:0.02em;
  background:#d7e8b5;color:var(--ink);padding:4px 12px;border-radius:9999px;
}

/* ============================================================
   Tablón de anuncios (texto, sin imagen)
   ============================================================ */
.r-anngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.r-ann{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:22px 22px 20px;
}
.r-ann strong{font-weight:400;font-size:1.1875rem;letter-spacing:-0.02em;line-height:1.3}
.r-ann p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.r-ann-meta{margin-top:auto;font-family:var(--mono);font-size:0.75rem;letter-spacing:0.02em;color:var(--muted);padding-top:6px}
.r-blockhead{margin:0 0 20px}
.r-blockhead+.r-anngrid{margin-bottom:48px}
.r-notice{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:28px 32px;
}
.r-notice p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.r-notice .r-eyebrow{margin-bottom:10px}

/* ============================================================
   Galería (turismo)
   ============================================================ */
.r-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.r-photo{margin:0;border-radius:var(--r-img);overflow:hidden;background:var(--surface2);border:1px solid var(--border)}
.r-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.r-photo figcaption{padding:16px 18px;font-size:1rem;color:var(--ink)}
.r-k{display:block;font-family:var(--mono);font-size:0.75rem;letter-spacing:0.02em;color:var(--eyebrow);margin-bottom:4px;text-transform:uppercase}

/* ============================================================
   Sabores grid
   ============================================================ */
.r-sabgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.r-sab{margin:0;position:relative;border-radius:var(--r-img);overflow:hidden;border:1px solid var(--border)}
.r-sab img{width:100%;aspect-ratio:1/1;object-fit:cover}
.r-sab figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 12px;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.04em;color:var(--paper);
  background:linear-gradient(180deg,rgba(10,29,8,0),rgba(10,29,8,.78));
}

/* ============================================================
   Eventos (agenda)
   ============================================================ */
.r-eventgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.r-event{
  display:grid;grid-template-columns:140px 1fr;text-decoration:none;color:var(--ink);
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;transition:border-color .2s ease;
}
.r-event:hover{border-color:var(--forest)}
.r-event-img{overflow:hidden}
.r-event-img img{width:100%;height:100%;object-fit:cover;min-height:120px}
.r-event-body{padding:20px;display:flex;flex-direction:column;gap:8px}
.r-date{font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.03em;color:var(--forest)}
.r-event-body strong{font-weight:400;font-size:1.1875rem;letter-spacing:-0.02em;line-height:1.3}
.r-place{font-size:0.875rem;color:var(--muted)}

/* ============================================================
   Sede — tarjetas administrativas
   ============================================================ */
.r-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.r-card{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:28px;transition:border-color .2s ease;
}
.r-card:hover{border-color:var(--forest)}
.r-num{display:block;font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.04em;color:var(--eyebrow);margin-bottom:12px}
.r-card h3{font-size:1.1875rem;margin-bottom:8px}
.r-card p{margin:0;color:var(--muted);font-size:1rem}

/* ============================================================
   Contacto / avisos — dos columnas
   ============================================================ */
.r-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.r-cf{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.r-cf label{display:flex;flex-direction:column;gap:6px;font-size:0.875rem;font-weight:700;letter-spacing:0.01em}
.r-cf input,.r-cf textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;min-height:44px;
}
.r-cf textarea{min-height:120px;resize:vertical}
.r-cf input:focus,.r-cf textarea:focus{border-color:var(--forest)}
.r-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.r-cf-st{margin:6px 0 0;font-size:0.9375rem;min-height:1.4em}
.r-cf-st.ok{color:var(--forest)}
.r-cf-st.err{color:#7a2412}
.r-cf button{align-self:flex-start}

.r-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:32px}
.r-info h3{font-size:1.25rem;margin-bottom:20px}
.r-info-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:16px}
.r-info-list li{display:flex;flex-direction:column;gap:2px;font-size:1rem}
.r-info-list span{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.02em;color:var(--eyebrow);text-transform:uppercase}
.r-info-list a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}

/* ---- Avisos: categorías ---- */
.r-cats{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.r-cat-h{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--eyebrow);padding:18px 24px;border-bottom:1px solid var(--border)}
.r-cat{padding:16px 24px;font-size:1.0625rem;border-bottom:1px solid var(--border)}
.r-cat:last-child{border-bottom:none}

/* ============================================================
   Footer
   ============================================================ */
.r-footer{background:var(--surface);border-top:1px solid var(--border);padding:56px 0 40px;margin-top:24px}
.r-foot-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--border)}
.r-foot-top b{font-weight:700;font-size:1rem}
.r-foot-top .r-mono{margin-left:auto;color:var(--muted)}
.r-foot-cols{display:flex;flex-wrap:wrap;gap:10px 24px;padding:28px 0}
.r-foot-cols a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-size:0.9375rem}
.r-foot-cols a:hover{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.r-copy{color:var(--muted);margin:0;line-height:1.6}

/* ============================================================
   Reveal — movimiento MUY sutil (sereno)
   ============================================================ */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .r-previewgrid,.r-eventgrid{grid-template-columns:1fr}
  .r-newsgrid,.r-gallery,.r-admin-grid,.r-anngrid{grid-template-columns:repeat(2,1fr)}
  .r-sabgrid{grid-template-columns:repeat(3,1fr)}
  .r-two{grid-template-columns:1fr;gap:32px}
}
@media(max-width:560px){
  body{font-size:1.0625rem}
  .r-newsgrid,.r-gallery,.r-admin-grid,.r-sabgrid,.r-anngrid{grid-template-columns:1fr 1fr}
  .r-event{grid-template-columns:1fr}
  .r-pad{padding-top:60px;padding-bottom:60px}
  .r-links{gap:0}
  .r-links a{padding:8px 10px;font-size:0.8125rem}
}

/* ============================================================
   Reduced motion — anula animaciones
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .r-hero-media{transform:none!important}
  .r-parallax::before{background-attachment:scroll}
  .r-nav,.r-btn,.r-preview,.r-news,.r-card,.r-event{transition:none!important}
}