/* ========================= JUICY YOUTH THEME (Pastel-Neón) Compatible con tu HTML/JS actual ========================= */ :root{ /* Fondo y superficies (claras y vibrantes) */ --bg: #fdfcff; /* base clara */ --bg-t1:#f7f4ff; /* bruma lila */ --bg-t2:#f0fbff; /* bruma celeste */ --paper:#ffffff; /* tarjetas/nav glass */ --paper-2:#fcfeff; /* alt cards */ --glass:rgba(255,255,255,.78); /* Texto */ --ink:#0f172a; /* navy gris azulado */ --muted:#64748b; /* gris azulado suave */ /* Marca y acentos (juvenil) */ --brand:#2563eb; /* azul “app” */ --brand-2:#1d4ed8; /* azul profundo */ --accent:#22c55e; /* verde menta brillante */ --accent-2:#a855f7; /* violeta neón suave */ --hot:#f43f5e; /* coral/rosa punch */ /* Bordes y sombras */ --line:#e6e9f5; --line-strong:#d8def0; --shadow-xs:0 8px 20px rgba(29,78,216,.08); --shadow-sm:0 14px 34px rgba(29,78,216,.10); --shadow-md:0 20px 60px rgba(29,78,216,.14); /* Layout */ --radius:16px; --radius-lg:24px; --pill:999px; --max:1200px; /* Navbar */ --nav-h:64px; /* Motion */ --easing:cubic-bezier(.2,.7,.2,1); --speed-1:.18s; --speed-2:.26s; } /* Modo oscuro suave (opcional por preferencia del sistema) */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b1220; --bg-t1:#0f1730; --bg-t2:#0b1a2a; --paper:#0f1626; --paper-2:#0d1322; --glass:rgba(16,22,38,.66); --ink:#e6ecff; --muted:#a8b3ce; --line:#17233a; --line-strong:#1f2e4a; --shadow-xs:0 8px 20px rgba(0,0,0,.25); --shadow-sm:0 16px 38px rgba(0,0,0,.35); --shadow-md:0 22px 64px rgba(0,0,0,.45); } } /* Forzar oscuro: */ html[data-theme="dark"]{ --bg:#0b1220; --bg-t1:#0f1730; --bg-t2:#0b1a2a; --paper:#0f1626; --paper-2:#0d1322; --glass:rgba(16,22,38,.66); --ink:#e6ecff; --muted:#a8b3ce; --line:#17233a; --line-strong:#1f2e4a; --shadow-xs:0 8px 20px rgba(0,0,0,.25); --shadow-sm:0 16px 38px rgba(0,0,0,.35); --shadow-md:0 22px 64px rgba(0,0,0,.45); } /* Accesibilidad motion */ @media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} } /* ========================= Reset + Base ========================= */ *,*::before,*::after{ box-sizing:border-box } html,body{ height:100% } html{ scroll-behavior:smooth } body{ margin:0; color:var(--ink); background: radial-gradient(1200px 700px at 90% -10%, var(--bg-t1), transparent 60%), radial-gradient(1100px 760px at -10% 0%, var(--bg-t2), transparent 60%), var(--bg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; line-height:1.65; padding-top: var(--nav-h); } ::selection{ background: color-mix(in srgb, var(--accent) 35%, #fff); color:#0b0b0b } h1,h2,h3{ font-family:'Playfair Display', serif; line-height:1.15; margin:0 0 .55rem; letter-spacing:.2px; } h1{ font-size:clamp(2.2rem, 2.6vw + 1rem, 3.4rem) } h2{ font-size:clamp(1.6rem, 1.6vw + .8rem, 2.4rem) } h3{ font-size:1.2rem } p{ margin:.5rem 0 1rem; color:var(--muted) } a{ color:inherit; text-decoration:none } img{ max-width:100%; display:block } /* Compensación por header fijo */ .section, .hero{ scroll-margin-top: calc(var(--nav-h) + 12px) } /* Contenedor */ .container{ max-width:var(--max); margin-inline:auto; padding:0 1rem } /* ========================= NAV (glass neon underline + hide on scroll) ========================= */ .nav{ position:fixed; inset:0 0 auto 0; z-index:40; backdrop-filter:saturate(160%) blur(10px); background: linear-gradient(180deg, var(--glass), color-mix(in srgb, var(--glass) 80%, transparent)); border-bottom:1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.06); transform: translateY(0); transition: transform var(--speed-2) var(--easing), background var(--speed-2) var(--easing); } .nav.nav--hidden{ transform: translateY(calc(-1 * var(--nav-h))) } .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0 } .brand{ display:flex; align-items:center; gap:.7rem } .brand-logo{ width:44px; height:44px; border-radius:14px; object-fit:contain; box-shadow: 0 10px 24px rgba(37,99,235,.18); } .brand h3{ letter-spacing:.2px; background: linear-gradient(90deg, var(--brand), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .nav-links{ display:flex; gap:.2rem } .nav-links a{ position:relative; padding:.6rem .9rem; border-radius:12px; color:var(--ink); transition: color var(--speed-1) var(--easing), background var(--speed-1) var(--easing), transform var(--speed-1) var(--easing); } .nav-links a::after{ content:""; position:absolute; left:.9rem; right:.9rem; bottom:.28rem; height:2px; border-radius:2px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--hot)); transform: scaleX(0); transform-origin:left; transition: transform var(--speed-1) var(--easing); } .nav-links a:hover{ transform: translateY(-1px) } .nav-links a:hover::after{ transform: scaleX(1) } .nav-links a.active{ background: color-mix(in srgb, var(--paper) 80%, var(--bg-t1)); box-shadow: var(--shadow-xs); } .menu-btn{ display:none; background:transparent; border:1px solid var(--line); padding:.55rem .7rem; border-radius:12px; transition: border-color var(--speed-1) var(--easing), background var(--speed-1) var(--easing); } .menu-btn:hover{ background:var(--paper); border-color:var(--line-strong) } /* ========================= Botones (pastel-neón) ========================= */ .btn{ display:inline-flex; align-items:center; gap:.55rem; border:none; cursor:pointer; font-weight:800; letter-spacing:.2px; padding:.9rem 1.1rem; border-radius:14px; text-decoration:none; transition: transform var(--speed-1) var(--easing), box-shadow var(--speed-1) var(--easing), filter var(--speed-1) var(--easing), background var(--speed-1) var(--easing); will-change: transform; } .btn:hover{ transform: translateY(-1px) } .btn:active{ transform: translateY(0) } .btn-primary{ background: linear-gradient(135deg, var(--brand), var(--accent-2)); color:#fff; box-shadow: 0 10px 28px color-mix(in srgb, var(--brand) 30%, transparent); } .btn-primary:hover{ filter: brightness(1.05); box-shadow: 0 16px 36px color-mix(in srgb, var(--brand) 38%, transparent); } .btn-ghost{ background: linear-gradient(0deg, var(--paper), var(--paper)) padding-box, linear-gradient(120deg, var(--paper), color-mix(in srgb, var(--brand) 10%, var(--paper))) border-box; border:1px solid transparent; color:var(--ink); } .btn-ghost:hover{ background: linear-gradient(0deg, var(--paper), var(--paper)) padding-box, linear-gradient(120deg, var(--paper), color-mix(in srgb, var(--brand) 22%, var(--paper))) border-box; } /* Badge */ .badge{ display:inline-flex; align-items:center; gap:.45rem; padding:.38rem .7rem; border-radius:var(--pill); font-weight:700; font-size:.78rem; background: color-mix(in srgb, var(--paper) 88%, var(--bg-t1)); color:var(--brand-2); border:1px solid var(--line); box-shadow: var(--shadow-xs); } /* ========================= HERO (gradiente juvenil con luz) ========================= */ .hero{ position:relative; padding:5rem 0 3rem; background: radial-gradient(1200px 820px at 110% -10%, color-mix(in srgb, var(--brand) 7%, var(--bg)) 10%, transparent 60%), radial-gradient(1100px 880px at -10% 0%, color-mix(in srgb, var(--accent-2) 12%, var(--bg)) 10%, transparent 60%); } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center } .hero p{ font-size:1.06rem } .hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.25rem } .hero-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-md); } .hero-media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.004) } .hero-overlay{ position:absolute; inset:auto 0 0; padding:1rem; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper) 86%, transparent)); } .hero-overlay .muted{ color: color-mix(in srgb, var(--ink) 72%, #4b4b4b) } /* ========================= Secciones + Cards (vivas) ========================= */ .section{ padding:3.4rem 0 } .section.alt{ background: color-mix(in srgb, var(--paper) 70%, var(--bg)) } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem } .section-head p{ max-width:760px } .grid{ display:grid; gap:1.1rem } .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) } .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) } .card{ position:relative; background: linear-gradient(180deg, var(--paper), var(--paper-2)); border:1px solid var(--line); padding:1rem; border-radius:var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--speed-2) var(--easing), box-shadow var(--speed-2) var(--easing), border-color var(--speed-2) var(--easing), background var(--speed-2) var(--easing); overflow: clip; } .card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background: radial-gradient(260px 40px at 20% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), radial-gradient(220px 36px at 80% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%); opacity:.25; filter: blur(12px); } .card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-strong); background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, var(--accent) 3%), var(--paper-2)); } .card h3{ margin-top:.3rem; background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent } /* Eventos */ .event-card .event-cover{ height:160px; border-radius:14px; overflow:hidden; border:1px solid var(--line) } .event-meta{ display:flex; gap:.8rem; flex-wrap:wrap; font-size:.88rem; color:var(--muted) } /* Horarios */ .schedule{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem } .slot{ padding:1rem; border-radius:14px; background: color-mix(in srgb, var(--paper) 80%, var(--bg-t2)); border:1px dashed var(--line) } /* Sermones */ .video{ aspect-ratio:16/9; width:100%; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-sm) } /* ========================= Formularios ========================= */ form{ display:grid; gap:.9rem } .field{ display:grid; gap:.35rem } .input{ background:var(--paper); border:1px solid var(--line); color:var(--ink); padding:.95rem 1rem; border-radius:12px; outline:none; transition: border-color var(--speed-1) var(--easing), box-shadow var(--speed-1) var(--easing), background var(--speed-1) var(--easing); } .input:focus{ border-color: color-mix(in srgb, var(--brand) 50%, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--paper) 86%, var(--bg-t1)); } /* ========================= Footer ========================= */ footer{ padding:2.4rem 0; border-top:1px solid var(--line); background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--paper) 82%, var(--bg))); } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.2rem } .list{ list-style:none; padding:0; margin:0 } .list li{ margin:.35rem 0 } /* Links subrayado animado (footer/listas) */ .list a{ position:relative; padding-bottom:2px; transition: color var(--speed-1) var(--easing); } .list a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, var(--brand), var(--accent), var(--hot)); transform: scaleX(0); transform-origin:left; transition: transform var(--speed-1) var(--easing); } .list a:hover::after{ transform: scaleX(1) } /* ========================= Utilidades ========================= */ .muted{ color:var(--muted) } .divider{ height:1px; background:var(--line); margin:1.2rem 0 } .to-top{ position:fixed; right:1rem; bottom:1rem; display:none; box-shadow: var(--shadow-sm) } /* Reveal scroll */ [data-reveal]{ opacity:0; transform:translateY(14px); transition: opacity .55s var(--easing), transform .55s var(--easing) } [data-reveal].visible{ opacity:1; transform:none } /* ========================= Responsive ========================= */ @media (max-width: 960px){ :root{ --nav-h: 72px } .nav-links{ display:none } .menu-btn{ display:inline-flex } .hero-grid{ grid-template-columns:1fr; gap:1.25rem } .grid-2{ grid-template-columns:1fr } .grid-3{ grid-template-columns:1fr } .grid-4{ grid-template-columns:1fr 1fr } .footer-grid{ grid-template-columns:1fr } } /* Foco accesible */ a, button, .input, .menu-btn, .btn{ outline:none } a:focus-visible, button:focus-visible, .menu-btn:focus-visible, .btn:focus-visible, .input:focus-visible{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 30%, transparent); border-radius:12px; }