/* web26_home.css — página principal (index.php) con el estilo web26. VISTA PREVIA: se activa con ?h26=1 (cookie "h26"), se apaga con ?h26=0.
   Es una "piel" sobre index_assets/index.css: no cambia el HTML ni los scripts (carrusel, buscador, ¿Sabías que?, etc.), solo la apariencia:
   radios más grandes, sombras suaves, tipografía Plus Jakarta Sans, títulos de bloque con acento, tarjetas con elevación al pasar el mouse. */
html.h26 .S {
  --r: 20px; --rr: 28px;
  --sh: 0 1px 2px rgba(7,56,27,.06), 0 8px 24px rgba(7,56,27,.08);
  --shh: 0 2px 4px rgba(7,56,27,.08), 0 22px 50px rgba(7,56,27,.2);
  font-family: 'Plus Jakarta Sans', 'Roboto', system-ui, sans-serif; background: #f3faf5;
}
html[data-theme="dark"].h26 .S { background: transparent; }
html.h26 .C { max-width: 1200px; padding: 20px 20px 0; }
html.h26 .S h1, html.h26 .S h2, html.h26 .S h3, html.h26 .S h4 { font-family: inherit; letter-spacing: -.02em; }

/* ---------- Hero ---------- */
html.h26 .hero { border-radius: 30px; box-shadow: var(--shh); }
html.h26 .hcb { background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.35); }
html.h26 .hd button { height: 8px; border-radius: 8px; }
html.h26 .hd button.on { width: 26px; }
html.h26 .hs-img-title { font-weight: 800; letter-spacing: -.01em; }

/* ---------- Banda de afiliación ---------- */
html.h26 .cta-afi {
  max-width: none; padding: 18px 26px; border-radius: 26px; border: 0; box-shadow: var(--shh);
  background: radial-gradient(500px 200px at 95% -30%, rgba(74,222,128,.35), transparent 60%), linear-gradient(135deg, #04210f, #0a5a2b 60%, #0e7a3a);
}
html.h26 .cta-afi-txt strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
html.h26 .cta-b { border: 0; padding: 12px 22px; font-weight: 800; box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); }
html.h26 .cta-b-pri { background: linear-gradient(135deg, #fff, #dcfce7); color: #07381b; }
html.h26 .cta-b-sec { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); color: #fff; box-shadow: none; }

/* ---------- Atajos ---------- */
html.h26 .jump { max-width: 1000px; gap: 10px; }
html.h26 .jump a { padding: 9px 18px; border: 1px solid #dcebe1; font-weight: 700; box-shadow: var(--sh); }
html.h26 .jump a:hover { transform: translateY(-2px); }

/* ---------- Buscador ---------- */
html.h26 .srch-bar { border: 1px solid #dcebe1; box-shadow: var(--shh); }
html.h26 .srch-drop { border-radius: 22px; }

/* ---------- Bloques y títulos ---------- */
html.h26 .blk { margin-bottom: 56px; }
html.h26 .blk.alt { background: linear-gradient(180deg, #e9f8ee 0%, #f6fcf8 220px); border: 1px solid #d6ecdd; border-radius: 34px; padding: 30px 28px 6px; box-shadow: var(--sh); }
html.h26 .blk-hd { display: block; position: relative; margin-bottom: 26px; padding: 0 0 16px; border-bottom: 0; }
html.h26 .blk-hd::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #22b35a, #86efac); }
html.h26 .blk-t { font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif; font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; color: #07381b; }
html.h26 .blk-s { margin-top: 6px; font-size: 1rem; color: #4b5f53; }
html[data-theme="dark"].h26 .blk-t { color: #bbf7d0; }
html[data-theme="dark"].h26 .blk.alt { background: linear-gradient(180deg, #0f2517, #0a1a10 220px); border-color: #1c3a28; }

html.h26 .ST { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: #0f2a1a; margin-bottom: 16px; }
html.h26 .ST i { width: 38px; height: 38px; flex-basis: 38px; border-radius: 13px; font-size: .95rem; background: linear-gradient(135deg, #22b35a, #0a5a2b); box-shadow: 0 10px 20px -8px rgba(14,122,58,.7); }
html.h26 .ST::after { background: linear-gradient(90deg, #86efac, transparent); opacity: .6; }
html[data-theme="dark"].h26 .ST { color: #e6f4ea; }
html.h26 .sec-all, html.h26 .ev-all { padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: #dcfce7; color: #0a5a2b; transition: background .2s, transform .2s; }
html.h26 .sec-all:hover { background: #bbf7d0; transform: translateX(2px); }
html.h26 .ev-all { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- Tarjetas ---------- */
html.h26 .hc-card, html.h26 .elec-card, html.h26 .act-item, html.h26 .rec, html.h26 .srv {
  border-radius: 22px; border: 1px solid #e3efe7; box-shadow: var(--sh);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
html.h26 .hc-card:hover, html.h26 .elec-card:hover, html.h26 .act-item:hover, html.h26 .rec:hover, html.h26 .srv:hover { transform: translateY(-6px); box-shadow: var(--shh); border-color: #86efac; }
html.h26 .hc-img { border-radius: 18px; }
html.h26 .hc-badge { padding: 3px 11px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
html.h26 .hc-date { border-radius: 12px; background: linear-gradient(135deg, #0e7a3a, #07381b); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
html.h26 .hc-body h4 { font-size: .95rem; font-weight: 800; }
html.h26 .hc-body p { font-size: .82rem; line-height: 1.5; }
html.h26 .hc-lnk { padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; background: #ecfdf3; color: #0a5a2b; transition: background .2s; }
html.h26 .hc-lnk:hover { background: #bbf7d0; }
html.h26 .sf-link { padding: 11px 24px; font-weight: 800; box-shadow: 0 12px 24px -10px rgba(14,122,58,.8); background: linear-gradient(135deg, #0e7a3a, #0a5a2b); }
html.h26 .sf-link.out { box-shadow: none; }
html.h26 .fp { font-weight: 700; border-width: 1px; }

/* ---------- Eventos ---------- */
html.h26 .ev-box { border-radius: 30px; padding: 24px 22px; background: radial-gradient(600px 240px at 92% -30%, rgba(74,222,128,.4), transparent 60%), linear-gradient(135deg, #04210f, #0a5a2b 60%, #0e7a3a); box-shadow: var(--shh); }
html.h26 .ev-card { border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
html.h26 .ev-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.18); }
html.h26 .ev-f { border-radius: 14px; }

/* ---------- ¿Sabías que? ---------- */
html.h26 .sab { max-width: none; padding: 22px 26px; border-radius: 28px; border: 1px solid #fde68a; background: linear-gradient(135deg, #fffbeb, #fef3c7); }
html.h26 .sab-t { font-weight: 800; letter-spacing: -.02em; }
html.h26 .sab-b { border-radius: 999px; font-weight: 800; }

/* ---------- Recreación / servicios ---------- */
html.h26 .rec { border-radius: 24px; }
html.h26 .rec-b h4 { font-weight: 800; }
html.h26 .srv { padding: 18px 12px; }

/* ---------- Pie de sección ---------- */
html.h26 .turrec-wrap { border-radius: 28px; }
html.h26 .nov-nuevo { font-weight: 800; }

@media (max-width: 640px) {
  html.h26 .C { padding: 12px 12px 0; }
  html.h26 .blk.alt { padding: 20px 14px 4px; border-radius: 26px; }
  html.h26 .hero { border-radius: 22px; }
  html.h26 .cta-afi { padding: 16px 18px; border-radius: 22px; }
  html.h26 .ev-box { border-radius: 24px; padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) { html.h26 .hc-card, html.h26 .rec, html.h26 .elec-card, html.h26 .act-item, html.h26 .srv { transition: none; } html.h26 .hc-card:hover, html.h26 .rec:hover, html.h26 .elec-card:hover, html.h26 .act-item:hover, html.h26 .srv:hover { transform: none; } }

/* ---------- Contraste: texto claro sobre fondos verdes / oscuros (ajuste 2026-10-22) ---------- */
/* Banda de eventos (fondo verde oscuro): título y botón en blanco */
html.h26 .ev-box .ST, html.h26 .ev-hdr .ST { color: #fff; }
html.h26 .ev-box .ST::after { background: linear-gradient(90deg, rgba(255,255,255,.45), transparent); }
html.h26 .ev-box .ST i { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
html.h26 .ev-box .ev-all { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); }
html.h26 .ev-box .ev-all:hover { background: rgba(255,255,255,.3); }
html.h26 .ev-box .ev-n, html.h26 .ev-box .ev-cat { color: #fff; }
/* Tarjetas con fondo oscuro o foto (noticias destacadas y últimas, turismo, actividades, recreación): enlaces en píldora de vidrio con letra blanca */
html.h26 .noticias .hss:first-of-type .hc-lnk, html.h26 .noticias .hss.ult .hc-lnk, html.h26 #turismoHot .hc-lnk, html.h26 .rec-b .hc-lnk, html.h26 .act-item .hc-lnk {
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px);
}
html.h26 .noticias .hss:first-of-type .hc-lnk:hover, html.h26 .noticias .hss.ult .hc-lnk:hover, html.h26 #turismoHot .hc-lnk:hover, html.h26 .rec-b .hc-lnk:hover, html.h26 .act-item .hc-lnk:hover { background: rgba(255,255,255,.32); color: #fff; }
/* Botones verdes llenos: siempre texto blanco */
html.h26 .sf-link:not(.out), html.h26 .sf-link:not(.out):hover, html.h26 .cta-b-sec, html.h26 .sab-b-pri { color: #fff; }
html.h26 .sf-link.out { background: #fff; color: #0a5a2b; border: 1.5px solid #86efac; }
html[data-theme="dark"].h26 .sf-link.out { background: transparent; color: #86efac; border-color: #1c5a36; }
/* Píldoras verde claro (Ver todas, enlaces de tarjetas claras): letra verde oscura, nunca verde sobre verde */
html.h26 .sec-all { color: #064e2b; }
html[data-theme="dark"].h26 .sec-all { background: #14301f; color: #bbf7d0; }
html[data-theme="dark"].h26 .hc-lnk { background: #14301f; color: #bbf7d0; }

/* Botones verdes llenos que quedaban con letra gris/verde por la regla ".S a" del CSS base */
html.h26 .S .spl-btn, html.h26 .S .spl-btn:hover, html.h26 .S .spl-btn i { color: #fff; }
html.h26 .S .spl-btn { background: linear-gradient(135deg, #0e7a3a, #0a5a2b); border: 1px solid rgba(255,255,255,.25); }
html.h26 .S .hs-btn, html.h26 .S .hs-btn:hover { color: #07381b; }
/* Insignias naranja/ámbar: letra oscura (la blanca no se lee) */
html.h26 .hc-badge.dest, html.h26 #turismoHot .hc-badge[style*="f59e0b"] { color: #3a1d00 !important; }
html.h26 .hc-badge.com-pct { background: #ea580c; color: #fff; }
/* Insignias naranja: fondo más oscuro para que la letra blanca llegue a contraste AA */
html.h26 .hc-badge.com-pct, html.h26 .hc-badge[style*="239, 108, 0"], html.h26 .hc-badge[style*="ef6c00" i] { background: #b8420a !important; color: #fff !important; }
html.h26 .hc-badge[style*="239"] { background: #b8420a !important; }
html.h26 .hc-badge[style*="245, 158, 11"], html.h26 .hc-badge[style*="#f59e0b" i] { color: #3a1d00 !important; }
html.h26 .hc-badge[style*="231, 76, 60"], html.h26 .hc-badge[style*="#e74c3c" i] { background: #c0392b !important; }

/* Atajos a secciones a todo el ancho (ver index.css) */
html.h26 .jump { max-width: none; }
html.h26 .jump a { padding: 12px 8px 10px; }
@media (max-width: 899px) { html.h26 .jump a { padding: 10px 6px 8px; } }

/* ---------- Detalles dorados (80 años) ----------
   Mismos tonos del banner includes/aniv80.php: #f7e08a claro · #e9c95a · #d4af37 medio · #c9a227 oscuro.
   Van al final para ganarle a las reglas de arriba (misma especificidad). Acentos, no color de fondo. */
/* Hero: aro dorado fino */
html.h26 .hero { box-shadow: var(--shh), 0 0 0 2px rgba(212,175,55,.55); }
/* Banda de afiliación: borde dorado y botón principal dorado (como el botón del banner de los 80 años) */
html.h26 .cta-afi { border: 1px solid rgba(247,224,138,.6); box-shadow: var(--shh), inset 0 1px 0 rgba(247,224,138,.25); }
html.h26 .cta-b-pri { background: linear-gradient(135deg, #f7e08a, #d4a017); color: #07381b; box-shadow: 0 10px 22px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.35); }
html.h26 .cta-b-sec { border-color: rgba(247,224,138,.55); }
/* Atajos y buscador */
html.h26 .jump a { border-color: rgba(212,175,55,.5); }
html.h26 .jump a:hover { border-color: #d4af37; box-shadow: var(--sh), 0 0 0 1px rgba(212,175,55,.4); }
html.h26 .srch-bar { border-color: rgba(212,175,55,.55); }
/* Títulos: raya del bloque dorada, ícono con aro y línea del título en dorado */
html.h26 .blk-hd::after { background: linear-gradient(90deg, #c9a227, #f7e08a); }
html.h26 .ST i { box-shadow: 0 10px 20px -8px rgba(14,122,58,.7), 0 0 0 2px rgba(247,224,138,.85); }
html.h26 .ST::after { background: linear-gradient(90deg, #e9c95a, transparent); opacity: .75; }
html.h26 .ev-box .ST::after { background: linear-gradient(90deg, rgba(247,224,138,.7), transparent); }
html.h26 .ev-box .ST i { box-shadow: 0 0 0 2px rgba(247,224,138,.7); }
/* Bloques destacados, tarjetas y píldoras "Ver todas" */
html.h26 .blk.alt { border-color: rgba(212,175,55,.4); }
html.h26 .hc-card, html.h26 .elec-card, html.h26 .act-item, html.h26 .rec, html.h26 .srv { border-color: rgba(212,175,55,.32); }
html.h26 .hc-card:hover, html.h26 .elec-card:hover, html.h26 .act-item:hover, html.h26 .rec:hover, html.h26 .srv:hover { border-color: #e9c95a; }
html.h26 .sec-all { border: 1px solid rgba(212,175,55,.5); }
/* Banda de eventos (verde oscuro): borde y tarjetas con tinte dorado */
html.h26 .ev-box { border: 1px solid rgba(247,224,138,.45); }
html.h26 .ev-card { border-color: rgba(247,224,138,.3); }
html[data-theme="dark"].h26 .blk-hd::after { background: linear-gradient(90deg, #d4af37, #f7e08a); }
/* El botón principal gana a ".cta-b.cta-b-pri:link/:visited" de index.css (fondo blanco fijo) */
html.h26 .cta-b.cta-b-pri, html.h26 .cta-b.cta-b-pri:link, html.h26 .cta-b.cta-b-pri:visited { background: linear-gradient(135deg, #f7e08a, #d4a017) !important; color: #07381b !important; }
/* Ayudas Sociales: el rediseño vive en index.css (#ayudasSlider); acá solo se mantiene el radio grande de la piel web26 */
html.h26 #ayudasSlider { border-radius: 28px; }