/* ============================================================ NUEVA VIDA IRAPUATO — estilos renovados 2026 Temas: claro / oscuro vía [data-theme] en ============================================================ */ :root{ --rojo:#DB3A34; --rojo-hover:#C02B26; --bg:#F7F6F3; --surface:#FFFFFF; --surface-2:#EFEDE8; --ink:#191B1F; --muted:#5C616B; --line:rgba(25,27,31,.12); --header-bg:rgba(16,17,20,.92); --shadow:0 10px 30px rgba(25,27,31,.08); --radius:14px; color-scheme: light; } [data-theme="dark"]{ --rojo:#F2554E; --rojo-hover:#FF6B64; --bg:#0F1114; --surface:#171A1F; --surface-2:#1F232A; --ink:#EDEEF0; --muted:#9AA0AB; --line:rgba(237,238,240,.14); --header-bg:rgba(10,11,13,.92); --shadow:0 10px 30px rgba(0,0,0,.4); color-scheme: dark; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Instrument Sans',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; font-size:17px; transition:background .3s ease,color .3s ease; } img{max-width:100%;display:block} a{color:var(--rojo);text-decoration:none} h1,h2,h3,.display{ font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-.01em; line-height:1.15; text-transform:uppercase; } .eyebrow{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--rojo); margin-bottom:.7rem; } /* Escritura: los versículos siempre en serif itálica con regla roja */ blockquote, .verso{ font-family:'Lora',Georgia,serif; font-style:italic; font-size:1.12em; line-height:1.7; border-left:3px solid var(--rojo); padding:.4rem 0 .4rem 1.2rem; margin:1.4rem 0; color:var(--ink); } blockquote cite, .verso .ref{ display:block; margin-top:.5rem; font-family:'Archivo',sans-serif; font-style:normal; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rojo); } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:100; color:#fff; isolation:isolate; } /* El blur vive en un ::before (no en .site-header) a propósito: si el blur se queda en .site-header, ese elemento se vuelve "contenedor" del menú móvil (position:fixed) y lo encierra en los 76px del header en vez de ocupar toda la pantalla. Ver .nav más abajo. */ .site-header::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .header-inner{ max-width:1200px; margin:0 auto; padding:0 20px; height:76px; display:flex; align-items:center; gap:1rem; } .brand img{width:150px;height:auto} .nav{margin-left:auto; display:flex; align-items:center; gap:.2rem} .nav a{ color:#fff; font-family:'Archivo',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; padding:.6rem .8rem; border-radius:8px; transition:color .2s; } .nav a:hover{color:var(--rojo)} .nav a.btn-tema{ background:var(--rojo); color:#fff; border-radius:50vh; padding:.65rem 1.3rem; margin-left:.5rem; transition:background .2s; } .nav a.btn-tema:hover{background:var(--rojo-hover);color:#fff} .theme-toggle{ background:none; border:1.5px solid rgba(255,255,255,.35); color:#fff; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1rem; margin-left:.6rem; transition:border-color .2s; display:grid; place-items:center; } .theme-toggle:hover{border-color:#fff} .menu-btn{ display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center; flex:none; } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:72vh; display:flex; align-items:center; color:#fff; margin-top:-76px; padding-top:76px; background-size:cover; background-position:center; } .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,11,13,.55), rgba(10,11,13,.75)); } .hero-inner{position:relative; max-width:1200px; margin:0 auto; padding:5rem 20px; width:100%} .hero h1{font-size:clamp(2rem,5.5vw,3.6rem); max-width:17ch; font-weight:900} .hero p{max-width:52ch; margin-top:1.2rem; font-size:1.1rem; color:rgba(255,255,255,.85)} .hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem} .btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Archivo',sans-serif; font-weight:800; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; padding:.95rem 1.8rem; border-radius:50vh; cursor:pointer; border:2px solid transparent; transition:.2s; } .btn-rojo{background:var(--rojo); color:#fff} .btn-rojo:hover{background:var(--rojo-hover); color:#fff} .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff} .btn-ghost:hover{border-color:#fff} .btn-outline{border-color:var(--rojo); color:var(--rojo)} .btn-outline:hover{background:var(--rojo); color:#fff} /* ---------- Secciones ---------- */ .section{max-width:1200px; margin:0 auto; padding:4.5rem 20px} .section-tight{max-width:820px} .section h2{font-size:clamp(1.5rem,3.2vw,2.2rem); margin-bottom:1.2rem} .section p+p{margin-top:1rem} .lead{font-size:1.15rem; color:var(--muted)} .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem} .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow); } .card h3{font-size:1.05rem; margin-bottom:.7rem} .card .foto{border-radius:10px; margin-bottom:1.2rem; aspect-ratio:16/10; object-fit:cover; width:100%} .card .banco{ margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line); font-size:.9rem; color:var(--muted); } .franja{ background:var(--surface-2); border-block:1px solid var(--line); } .franja-rojo{background:var(--rojo); color:#fff} .franja-rojo h2,.franja-rojo .eyebrow{color:#fff} .franja-rojo .btn-outline{border-color:#fff;color:#fff} .franja-rojo .btn-outline:hover{background:#fff;color:var(--rojo)} /* ---------- Footer ---------- */ .site-footer{background:#101114; color:#C9CCD2; margin-top:3rem} .footer-inner{ max-width:1200px; margin:0 auto; padding:3.5rem 20px 2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; } .site-footer h3{color:#fff; font-size:.95rem; margin-bottom:1rem} .site-footer a{color:#C9CCD2} .site-footer a:hover{color:#fff} .footer-social{display:flex; gap:1rem; margin-top:1rem; font-size:1.5rem} .footer-social a:hover{color:var(--rojo)} .footer-credit{ border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:1.3rem; font-size:.85rem; color:#8A8F99; } /* ---------- Página TEMA DE CÉLULA (lector) ---------- */ .tema-toolbar{ position:sticky; top:76px; z-index:90; background:var(--surface); border-bottom:1px solid var(--line); } .tema-toolbar-inner{ max-width:820px; margin:0 auto; padding:.6rem 20px; display:flex; align-items:center; gap:.6rem; } .tema-toolbar .spacer{flex:1} .tool-btn{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:9px; min-width:42px; height:38px; padding:0 .8rem; font-family:'Archivo',sans-serif; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-size:.9rem; transition:.2s; } .tool-btn:hover{border-color:var(--rojo); color:var(--rojo)} .tool-btn.pdf{background:var(--rojo); color:#fff; border-color:var(--rojo); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase} .tool-btn.pdf:hover{background:var(--rojo-hover)} .tema-body{ max-width:820px; margin:0 auto; padding:3rem 20px 5rem; font-size:var(--tema-fs,1.06rem); } .tema-body h1{font-size:2em; margin-bottom:.4em; line-height:1.1} .tema-body h2{font-size:1.3em; margin:1.8em 0 .6em; color:var(--rojo)} .tema-body h3{font-size:1.08em; margin:1.5em 0 .5em} .tema-body p{margin:.9em 0} .tema-body ul,.tema-body ol{margin:.9em 0 .9em 1.4em} .tema-body li{margin:.45em 0} .tema-body hr{border:none; border-top:1px solid var(--line); margin:2em 0} .tema-body strong{color:var(--rojo)} .tema-fecha{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; } .tema-cargando{text-align:center; padding:4rem 0; color:var(--muted)} /* ---------- Responsive ---------- */ @media (max-width:860px){ .grid-2,.grid-3,.footer-inner{grid-template-columns:1fr} .menu-btn{display:flex} .nav{ position:fixed; inset:0; background:var(--header-bg); flex-direction:column; justify-content:center; gap:1.2rem; transform:translateX(100%); transition:transform .3s ease; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .nav.open{transform:translateX(0)} .nav a{font-size:1.05rem} .nav .close-btn{ position:absolute; top:16px; right:16px; background:none; border:none; color:#fff; font-size:1.7rem; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; } .hero{min-height:64vh} .tema-toolbar{top:76px} } @media (min-width:861px){ .nav .close-btn{display:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important; animation:none!important} html{scroll-behavior:auto} } :focus-visible{outline:2.5px solid var(--rojo); outline-offset:2px}