/* ------------------------------ FICA | UJED · Neumorphism UI Claro/Oscuro con toggle Acento rojo: #c70b41 --------------------------------*/ /* Reset base y tipografías */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.45; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ------------------------------ Variables (Tema Claro) --------------------------------*/ :root { /* Colores base (light) */ --bg: #eaeef6; /* fondo general */ --surface: #f2f6ff; /* superficies/cards */ --text: #1c2230; /* texto principal */ --muted: #5f6b86; /* texto secundario */ --border: #d8deeb; --accent: #c70b41; /* rojo requerido */ --gold: #d7b46a; /* Sombras Neumorphism (light) */ --neu-up: -10px -10px 20px #ffffff, 10px 10px 24px rgba(163,177,198,0.55); --neu-down: inset 10px 10px 20px rgba(163,177,198,0.5), inset -10px -10px 20px rgba(255,255,255,0.7); /* Botones y estados */ --btn-text: #ffffff; --btn-bg: var(--accent); --btn-bg-hover: #a40a37; /* Gradientes sutiles */ --gloss: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05)); } /* ------------------------------ Variables (Tema Oscuro) Se activan con: --------------------------------*/ html[data-theme="dark"] { --bg: #0f141b; --surface: #141a23; --text: #e8edf6; --muted: #9aa6bd; --border: #1b2330; --accent: #c70b41; /* Sombras Neumorphism (dark) */ --neu-up: -10px -10px 20px rgba(34,44,59,0.7), 10px 10px 24px rgba(0,0,0,0.65); --neu-down: inset 10px 10px 20px rgba(0,0,0,0.55), inset -10px -10px 20px rgba(40,52,71,0.5); --btn-text: #ffffff; --btn-bg: var(--accent); --btn-bg-hover: #a40a37; } /* ------------------------------ Utilidades layout y tipografía --------------------------------*/ .container { width: min(1140px, 92vw); margin-inline: auto; } .inner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .wrap { display: grid; grid-template-columns: 1.25fr .9fr; gap: 1.2rem; align-items: start; } @media (max-width: 960px){ .wrap { grid-template-columns: 1fr; } } h1,h2,h3,.title { font-family: "Merriweather", Georgia, serif; color: var(--text); } h1 { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem); font-weight: 800; } h2 { font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.8rem); margin-bottom: .2rem; } h3 { font-size: 1.05rem; } .lead { font-size: 1.05rem; color: var(--muted); } .small { font-size: .92rem; color: var(--muted); } .meta { font-size: .85rem; color: var(--muted); } #inicio span[style]{ font-weight: 800; } /* mantiene el énfasis del hero */ /* ------------------------------ Componentes Neumorphism --------------------------------*/ .neu { background: var(--surface); border-radius: 18px; box-shadow: var(--neu-up); } .neu-inset { background: var(--surface); border-radius: 18px; box-shadow: var(--neu-down); } .card { background: var(--surface); border-radius: 22px; padding: 1rem; box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .card:hover { box-shadow: -12px -12px 24px rgba(255,255,255,.12), 12px 12px 28px rgba(0,0,0,.08), var(--neu-up); transition: box-shadow .2s ease; } .btn { display: inline-block; background: var(--btn-bg); color: var(--btn-text); padding: .7rem 1rem; border-radius: 14px; font-weight: 700; text-decoration: none; letter-spacing: .2px; box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); transition: transform .12s ease, box-shadow .2s ease, background .2s ease; } .btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); } .btn:active { box-shadow: var(--neu-down); transform: translateY(0); } .btn.ghost { background: transparent; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border)); } .btn.ghost:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); } /* Chips */ .chips { display:flex; flex-wrap: wrap; gap: .5rem; align-items:center; } .chip { display:inline-flex; align-items:center; gap:.4rem; padding: .45rem .7rem; border-radius: 999px; background: var(--surface); color: var(--muted); text-decoration:none; box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .chip:hover { color: var(--accent); } /* Grid helpers */ .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 960px){ .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } /* Topbar */ .topbar { background: var(--bg); padding: .4rem 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); } /* Header / Nav */ header { position: sticky; top: 0; z-index: 50; background: var(--bg); backdrop-filter: saturate(130%) blur(6px); border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } header .nav { display:flex; align-items:center; justify-content: space-between; padding: .8rem 0; gap: .8rem; } .brand { display:flex; align-items:center; gap:.65rem; text-decoration:none; color: var(--text); } .brand img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); } .brand h1 { font-size: 1.15rem; letter-spacing:.2px; } .menu { display:flex; gap: .8rem; align-items:center; flex-wrap: wrap;} .menu a { text-decoration:none; color: var(--muted); font-weight:600; font-size:.95rem; padding: .55rem .75rem; border-radius: 12px; background: var(--surface); box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .menu a:hover { color: var(--accent); } .hamburger { display: none; background: var(--surface); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); color: var(--text); padding: .6rem .8rem; border-radius: 12px; box-shadow: var(--neu-up); } @media (max-width: 1000px){ .menu { display: none; } .hamburger { display: inline-block; } #mobile { display: none; position: relative; background: var(--bg); border-top: 1px solid color-mix(in oklab, var(--border) 55%, transparent); padding: .6rem; } #mobile a { display:block; text-decoration:none; color: var(--muted); padding:.6rem; border-radius: 12px; background: var(--surface); box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); margin-bottom:.5rem; } #mobile a:hover { color: var(--accent); } } /* Hero */ .hero { padding: 2.2rem 0 1.6rem; } .hero .hero-card { padding: 1rem; border-radius: 20px; background: var(--surface); box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .hero .quick { display:flex; flex-direction:column; gap:.6rem; } .hero .quick a { display:flex; align-items:center; justify-content:space-between; gap: .6rem; text-decoration:none; color: var(--text); padding:.75rem .9rem; border-radius: 14px; background: var(--surface); box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .hero .quick a:hover { color: var(--accent); } /* Secciones */ section { padding: 1.4rem 0; } .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.8rem; margin-bottom:.8rem; } /* Programas */ .program { display:flex; gap:.8rem; align-items:flex-start; } .program .icon { flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center; font-weight:900; color:#fff; background: var(--accent); border-radius: 16px; box-shadow: var(--neu-up); } /* Posts / tarjetas con imagen */ .post { display:flex; gap:.8rem; overflow:hidden; } .post img { width: 120px; height: 90px; object-fit: cover; border-radius: 14px; box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .post .txt { display:flex; flex-direction:column; gap:.25rem; } /* Banda CTA */ .cta-band { background: var(--bg); } /* Footer */ footer { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); } .footgrid { display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1rem; } @media (max-width: 960px){ .footgrid { grid-template-columns: 1fr 1fr; } } /* ------------------------------------- Toggle de tema (CSS para bloque comentado) Marcup esperado:
--------------------------------------*/ .theme-switch { display:inline-flex; align-items:center; } .theme-switch input { position:absolute; opacity:0; pointer-events:none; } .switch { --w: 62px; --h: 34px; position: relative; width: var(--w); height: var(--h); border-radius: 999px; display:inline-flex; align-items:center; padding: 4px 8px; gap: 6px; cursor: pointer; user-select: none; background: var(--surface); box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .switch .icon { display:flex; align-items:center; justify-content:space-between; width:100%; font-size: 14px; } .switch .knob { position:absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 999px; background: var(--surface); box-shadow: var(--neu-up); transition: left .2s ease, box-shadow .2s ease; } #theme-toggle:checked + .switch .knob { left: calc(100% - 30px); } #theme-toggle:active + .switch .knob { box-shadow: var(--neu-down); } /* ------------------------------------- Accesibilidad y estados --------------------------------------*/ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 65%, white); outline-offset: 2px; border-radius: 10px; } /* ------------------------------------- Helpers de color-acento --------------------------------------*/ .text-accent { color: var(--accent) !important; } .bg-accent { background: var(--accent) !important; color: #fff !important; } /* ------------------------------------- Correcciones visuales menores --------------------------------------*/ .hero .quick a[style*="background-color"] { /* mantiene compatibilidad con el inline style del HTML original */ border-color: color-mix(in oklab, var(--border) 40%, transparent); } /* ========================================================== FOOTER · Neumorphism — Responsivo + colores sutiles ========================================================== */ footer { background: var(--bg); border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding: 2rem 0; transition: background .3s ease, color .3s ease; } footer h3 { color: var(--text); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; } footer p.small { color: var(--muted); line-height: 1.4; } footer .footgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1.4rem; } footer nav a { display: inline-block; color: var(--muted); text-decoration: none; padding: .15rem 0; transition: color .2s ease, transform .15s ease; font-weight: 500; } footer nav a:hover { color: var(--accent); transform: translateX(3px); } footer .chips a.chip { background: var(--surface); color: var(--muted); box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } footer .chips a.chip:hover { color: var(--accent); box-shadow: var(--neu-down); } /* ===== GALERÍA (Neumorphism + responsive) ===== */ .gallery-featured{ width: min(80vw, 1100px); margin: 0 auto 1rem; padding: .6rem; background: var(--surface); border-radius: 22px; box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .gallery-featured-portrait{ width: 30vw; height: auto; margin: 0 auto 1rem; padding: .6rem; background: var(--surface); border-radius: 22px; box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .gallery-featured-portrait img{ width: 100%; height: auto; display: block; border-radius: 16px; object-fit: cover; /* Puedes fijar proporción si lo deseas */ /* aspect-ratio: 16/9; */ box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .conferencias{ display: flex; flex-wrap: wrap; gap: 1rem; } .gallery-featured img{ width: 100%; height: auto; display: block; border-radius: 16px; object-fit: cover; /* Puedes fijar proporción si lo deseas */ /* aspect-ratio: 16/9; */ box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .gallery-featured figcaption{ margin-top:.4rem; text-align:center; color:var(--muted); } /* Cuadrícula de miniaturas (hasta 60) */ .gallery-thumbs{ display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; } @media (max-width: 1200px){ .gallery-thumbs{ grid-template-columns: repeat(5, 1fr); } } @media (max-width: 960px){ .gallery-thumbs{ grid-template-columns: repeat(4, 1fr); } } @media (max-width: 700px){ .gallery-thumbs{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px){ .gallery-thumbs{ grid-template-columns: repeat(2, 1fr); } } .thumb{ display:block; background: var(--surface); border-radius: 16px; padding: .35rem; box-shadow: var(--neu-up); border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); aspect-ratio: 1 / 1; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease; } .thumb:hover{ transform: translateY(-2px); box-shadow: -12px -12px 24px rgba(255,255,255,.12), 12px 12px 28px rgba(0,0,0,.08), var(--neu-up); } .thumb img{ width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } /* Lightbox (solo CSS con :target) */ .lightbox{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.85); padding: 2vw; z-index: 9999; } .lightbox:target{ display: flex; } .lightbox img{ max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); } /* Botón cerrar (regresa a #galeria) */ .lb-close{ position: absolute; top: 16px; right: 20px; display: inline-grid; place-items: center; width: 40px; height: 40px; font-size: 26px; line-height: 1; text-decoration: none; background: var(--surface); color: var(--text); border-radius: 12px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); box-shadow: var(--neu-up); } .lb-close:hover{ box-shadow: var(--neu-down); } /* Mejora accesible: quitar salto de scroll cuando se abre el lightbox */ .lightbox:target { overflow: hidden; } /* ---------- Media Queries ---------- */ /* Tablets medianas */ @media (max-width: 960px) { footer .footgrid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } footer h3 { font-size: 1rem; } } /* Móviles */ @media (max-width: 600px) { footer .footgrid { grid-template-columns: 1fr; text-align: left; } footer nav a { font-size: 0.95rem; } footer .chips { flex-direction: column; align-items: flex-start; } footer .chips a.chip { width: auto; font-size: 0.9rem; } } /* Pantallas pequeñas (teléfonos) */ @media (max-width: 400px) { footer { padding: 1.4rem 0; } footer .footgrid { gap: 1rem; } footer nav a { font-size: 0.9rem; } }