/* religion.css — estilo moderno (iglesia.com) Se carga solo cuando . Requiere base.css (global). */ /* ========================= Tokens por sección ========================= */ .seccion-religion{ /* palette */ --bg: radial-gradient(1200px 800px at 12% 10%, rgba(124,58,237,.18), transparent 60%), radial-gradient(1100px 780px at 92% 8%, rgba(37,99,235,.16), transparent 62%), radial-gradient(900px 820px at 50% 120%, rgba(16,185,129,.10), transparent 58%), linear-gradient(180deg, #fbfdff 0%, #f1f6ff 55%, #ecf2ff 100%); --text:#0b1220; --muted:rgba(11,18,32,.66); --card: rgba(255,255,255,.78); --card2: rgba(255,255,255,.62); --b: rgba(11,18,32,.10); --r: 22px; --r2: 28px; --shadow: 0 22px 55px rgba(8,12,22,.14); --shadow2: 0 14px 26px rgba(8,12,22,.12); --shadow3: 0 10px 18px rgba(8,12,22,.10); --accent:#2563eb; --accent2:#7c3aed; --ok:#10b981; --ring: 0 0 0 4px rgba(37,99,235,.18); } /* ========================= Layout & Header ========================= */ .seccion-religion body{ background: var(--bg); } /* base.css setzt .wrap, aber hier etwas „luftiger“ */ .seccion-religion .wrap{ max-width: 1120px; margin: 0 auto; padding: 18px; } @media (max-width: 860px){ .seccion-religion .wrap{ padding: 14px; } } /* Header: modern + sticky */ .seccion-religion .siteHeader{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.72); border-bottom: 1px solid rgba(11,18,32,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 26px rgba(8,12,22,.10); } .seccion-religion .siteBrand{ font-size: 16px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; } .seccion-religion .siteBrand::before{ content:""; width: 11px; height: 11px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 0 7px rgba(37,99,235,.10); } .seccion-religion .siteNav a{ background: rgba(255,255,255,.78); border-color: rgba(11,18,32,.10); box-shadow: 0 10px 18px rgba(8,12,22,.10); transition: transform .14s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease; } .seccion-religion .siteNav a:hover{ transform: translateY(-1px); box-shadow: 0 14px 24px rgba(8,12,22,.14); } .seccion-religion .siteNav a:focus-visible{ outline: none; box-shadow: 0 10px 18px rgba(8,12,22,.10), var(--ring); } .seccion-religion .siteNav a.activo{ background: linear-gradient(135deg, rgba(37,99,235,.92), rgba(124,58,237,.88)); color:#fff; border-color: transparent; } /* ========================= Hero / Cards / Sidebar ========================= */ .seccion-religion .hero{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: start; } /* Mobile: 1 col */ @media (max-width: 980px){ .seccion-religion .hero{ grid-template-columns: 1fr; } } .seccion-religion .card, .seccion-religion .menuCard{ background: var(--card); border: 1px solid rgba(11,18,32,.08); border-radius: var(--r2); padding: 16px; box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; } .seccion-religion .card::after, .seccion-religion .menuCard::after{ content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(920px 240px at 18% 0%, rgba(37,99,235,.12), transparent 60%), radial-gradient(920px 240px at 82% 0%, rgba(124,58,237,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%); opacity: .95; } .seccion-religion .card > *, .seccion-religion .menuCard > *{ position: relative; } .seccion-religion .menuCard{ background: var(--card2); } /* Sidebar sticky auf Desktop */ @media (min-width: 981px){ .seccion-religion .menuCard{ position: sticky; top: 82px; /* unter Header */ } } /* Tag/Badge im Header des Artikels */ .seccion-religion .tag{ display:inline-flex; align-items:center; gap:10px; font-size: 12px; font-weight: 900; letter-spacing: -.01em; color: rgba(11,18,32,.70); padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.70); border: 1px solid rgba(11,18,32,.10); box-shadow: var(--shadow3); width: fit-content; } .seccion-religion .tag span{ width:10px; height:10px; border-radius:999px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 0 7px rgba(37,99,235,.10); } .seccion-religion h1{ margin: 8px 0 10px; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.06; letter-spacing: -.045em; } .seccion-religion .lead{ margin: 0 0 10px; color: var(--muted); font-size: clamp(14px, 1.25vw, 17px); line-height: 1.65; } .seccion-religion .meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; } .seccion-religion .badge{ display:inline-flex; align-items:center; gap:8px; font-weight: 900; font-size: 12px; color: rgba(11,18,32,.70); background: rgba(255,255,255,.72); border: 1px solid rgba(11,18,32,.10); padding: 8px 10px; border-radius: 999px; box-shadow: var(--shadow3); } /* ========================= Article typography ========================= */ .seccion-religion article{ color: var(--text); font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.75; } .seccion-religion article p{ margin: 12px 0; } .seccion-religion article a{ color: inherit; text-decoration: none; border-bottom: 1px solid rgba(37,99,235,.38); } .seccion-religion article a:hover{ border-bottom-color: rgba(124,58,237,.55); } .seccion-religion article h2{ margin: 18px 0 8px; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.02em; } .seccion-religion article h3{ margin: 16px 0 8px; font-size: clamp(16px, 1.35vw, 20px); letter-spacing: -.01em; } .seccion-religion article ul, .seccion-religion article ol{ margin: 10px 0 14px 20px; color: var(--muted); } .seccion-religion blockquote{ margin: 14px 0; padding: 12px 14px; border-radius: 16px; background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.18); color: rgba(11,18,32,.76); box-shadow: var(--shadow3); } /* Kleine Callout-Box (wenn vorhanden) */ .seccion-religion .callout{ margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.22); box-shadow: var(--shadow3); color: rgba(11,18,32,.76); } /* „mini footer“ in Sidecard (wenn vorhanden) */ .seccion-religion .footer{ margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(11,18,32,.10); color: rgba(11,18,32,.62); font-size: 12px; } /* ========================= Menü (interne Links) ========================= */ .seccion-religion .menuTitle{ margin: 0 0 10px; font-size: 14px; letter-spacing: -.01em; } .seccion-religion .menuGrid{ display: flex; flex-wrap: wrap; gap: 8px; } .seccion-religion .chip{ display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.80); border: 1px solid rgba(11,18,32,.10); text-decoration: none; font-weight: 900; font-size: 12px; color: rgba(11,18,32,.78); box-shadow: var(--shadow3); transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; } .seccion-religion .chip:hover{ transform: translateY(-1px); box-shadow: 0 14px 24px rgba(8,12,22,.14); } .seccion-religion .chip.more{ background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.16)); } /* ========================= Compartir (override für _inc/compartir.php) ========================= */ .seccion-religion .shareWrap{ margin-top: 14px; padding: 14px; border-radius: 22px; border: 1px solid rgba(11,18,32,.10); background: rgba(255,255,255,.70); box-shadow: var(--shadow2); } .seccion-religion .shareTitle{ font-weight: 1000; letter-spacing: -.02em; margin: 0 0 10px; color: rgba(11,18,32,.78); } .seccion-religion .barraCompartir{ display:flex; flex-wrap:wrap; gap: 8px; } .seccion-religion .btnShare{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; min-height: 42px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(11,18,32,.10); background: rgba(255,255,255,.82); box-shadow: var(--shadow3); font-weight: 1000; text-decoration:none; color: rgba(11,18,32,.78); transition: transform .14s ease, box-shadow .18s ease; } .seccion-religion .btnShare:hover{ transform: translateY(-1px); box-shadow: 0 14px 24px rgba(8,12,22,.14); } .seccion-religion .btnShare:active{ transform: translateY(0) scale(.99); } .seccion-religion .btnShare:focus-visible{ outline:none; box-shadow: var(--shadow3), var(--ring); } .seccion-religion .btnShare.primary{ background: linear-gradient(135deg, rgba(37,99,235,.92), rgba(124,58,237,.88)); color:#fff; border-color: transparent; } /* ========================= Footer + Newsletter (nur Religion) ========================= */ .seccion-religion .siteFooter{ margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(11,18,32,.10); } .seccion-religion .nlFooter{ margin: 0 0 14px; } .seccion-religion .nlCard{ border-radius: 26px; border: 1px solid rgba(11,18,32,.10); background: rgba(255,255,255,.72); box-shadow: var(--shadow); padding: 16px; position: relative; overflow: hidden; } .seccion-religion .nlCard::after{ content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(900px 240px at 18% 0%, rgba(37,99,235,.16), transparent 60%), radial-gradient(900px 240px at 82% 0%, rgba(124,58,237,.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%); opacity: .95; } .seccion-religion .nlCard > *{ position: relative; } .seccion-religion .nlRow{ display:flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .seccion-religion .nlText{ flex: 1 1 320px; min-width: 240px; } .seccion-religion .nlTitle{ font-weight: 1100; letter-spacing: -.03em; font-size: 18px; margin: 0 0 4px; } .seccion-religion .nlDesc{ margin: 0; color: rgba(11,18,32,.66); line-height: 1.55; font-size: 13px; } .seccion-religion .nlForm{ display:flex; gap: 10px; flex: 1 1 360px; justify-content: flex-end; } .seccion-religion .nlForm input{ flex: 1 1 240px; min-width: 200px; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(11,18,32,.12); background: rgba(255,255,255,.90); box-shadow: inset 0 1px 0 rgba(255,255,255,.65); outline: none; } .seccion-religion .nlForm input:focus{ border-color: rgba(37,99,235,.40); box-shadow: var(--ring); } .seccion-religion .nlForm button{ padding: 12px 14px; border-radius: 16px; border: 0; cursor: pointer; font-weight: 1000; background: linear-gradient(135deg, rgba(37,99,235,.92), rgba(124,58,237,.88)); color:#fff; box-shadow: 0 14px 26px rgba(8,12,22,.14); transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; } .seccion-religion .nlForm button:hover{ transform: translateY(-1px); box-shadow: 0 18px 34px rgba(8,12,22,.18); } .seccion-religion .nlForm button:active{ transform: translateY(0) scale(.99); } .seccion-religion .nlNote{ margin-top: 10px; color: rgba(11,18,32,.60); font-size: 12px; } .seccion-religion .footerLine{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; color: rgba(11,18,32,.62); font-size: 12px; } .seccion-religion .footerHint{ font-weight: 900; color: rgba(11,18,32,.68); } /* a11y helper */ .seccion-religion .srOnly{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } /* Print */ @media print{ .siteHeader, .shareWrap, .nlFooter{ display:none !important; } body{ background:#fff !important; } .card,.menuCard{ box-shadow:none !important; background:#fff !important; } } /* Newsletter responsive: botón debajo (móvil) */ @media (max-width: 560px){ .seccion-religion .nlRow{ flex-direction: column; align-items: stretch; } .seccion-religion .nlForm{ flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; } .seccion-religion .nlForm input{ width: 100%; min-width: 0; } .seccion-religion .nlForm button{ align-self: flex-start; } }