:root { --d1:#c9b53f; --d2:#e0776f; --d3:#3f9bb3; --d4:#6aa86a; --bg:#f5f6fa; --fg:#1e293b; --mut:#5d6b7e; --pri:#2a5fa8; --card:#ffffff; --bd:#e2e6ef; --ok:#2f7d5b; --h1:#25437a; --h2:#2f69a6; --h3:#2c8088; --soft:#eaf0f8; --acc:#f7a340; --acc-fg:#1e293b; }
@media (prefers-color-scheme: dark) { :root { --d1:#ece46b; --d2:#f4908a; --d3:#6ad3ea; --d4:#b9f06b; --bg:#131a25; --fg:#e2e8f0; --mut:#9aa8bb; --pri:#8db7ee; --card:#1b2432; --bd:#2b3648; --ok:#6cc59a; --h1:#16284a; --h2:#1c4566; --h3:#21636b; --soft:#222e40; --acc:#f7a340; --acc-fg:#1e293b; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }
.hero { position:relative; color:#fff; padding:40px 0 34px; border-radius:0 0 34px 34px; overflow:hidden; background:radial-gradient(circle at 92% 0%, rgba(247,163,64,.13), transparent 34%), radial-gradient(circle at 88% 8%, rgba(255,255,255,.12), transparent 42%), radial-gradient(circle at 4% 100%, rgba(255,255,255,.10), transparent 38%), radial-gradient(circle at 52% -30%, rgba(255,255,255,.07), transparent 45%), linear-gradient(135deg,var(--h1) 0%,var(--h2) 55%,var(--h3) 100%); box-shadow:0 10px 30px rgba(20,40,70,.22); }
.hero h1 { margin:0 0 4px; font-size:clamp(1.6rem,4vw,2.4rem); }
.hero p { margin:0 0 20px; opacity:.9; }
.search { display:grid; grid-template-columns:1fr auto; gap:8px; }
.search input, .search select, .search button { font:inherit; padding:12px; border-radius:10px; border:1px solid transparent; background:var(--card); color:var(--fg); }
.search input:focus, .search select:focus { outline:2px solid #ffffff99; }
.search button { background:var(--acc); color:var(--acc-fg); font-weight:700; cursor:pointer; }
.search button:hover { filter:brightness(1.06); }
.search button:focus-visible { outline:3px solid #ffffffcc; outline-offset:2px; }
.filters { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
.filters select { flex:1 1 150px; }
.layout { display:grid; grid-template-columns:1fr 280px; gap:24px; padding-top:24px; padding-bottom:24px; }
.count { color:var(--mut); margin-top:0; }
.list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.card { background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:16px; transition:box-shadow .15s, transform .15s; }
.card:hover { box-shadow:0 6px 20px rgba(40,60,70,.10); transform:translateY(-1px); }
.card h2 { margin:6px 0 2px; font-size:1.15rem; }
.card p { margin:6px 0; }
.inst { color:var(--mut); font-size:.9rem; }
.conv { margin:0 0 6px; font-size:.8rem; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.03em; }
.conv.abierta, .conv.anunciada { color:var(--ok); }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-size:.75rem; padding:2px 9px; border-radius:99px; background:var(--soft); border:1px solid var(--bd); }
.tag.online { color:var(--pri); } .tag.ok { color:var(--ok); }
.btn { display:inline-block; margin-top:6px; color:var(--pri); font-weight:600; text-decoration:none; }
.btn:hover { text-decoration:underline; }
.donate { position:sticky; top:16px; align-self:start; background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:16px; text-align:center; }
.donate h3 { margin-top:0; }
.donate img, .qr svg { max-width:100%; height:auto; border-radius:8px; background:#fff; padding:8px; }
.qr svg { width:100%; }
.alias { font-size:.9rem; }
.pager { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.pager a { color:var(--pri); }
.foot { color:var(--mut); font-size:.85rem; padding-bottom:32px; }
@media (max-width:760px) { .layout { grid-template-columns:1fr; } .donate { position:static; order:-1; } }

.btn-donar{display:inline-block;padding:.55rem 1.1rem;border-radius:8px;background:var(--acc);color:var(--acc-fg);font-weight:600;text-decoration:none}
.btn-donar:hover{opacity:.9}
.foot p{margin:.25rem 0} .foot a{color:inherit;text-decoration:underline}

/* Donaciones: botón chico flotante que abre una tarjeta cerrable */
.layout { display:block; }
.donate { position:fixed; top:auto; right:16px; bottom:16px; z-index:20; width:min(300px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.donate[hidden], .donate-fab[hidden] { display:none; }
.donate-close { position:absolute; top:6px; right:8px; border:0; background:none; color:var(--mut); font-size:1.5rem; line-height:1; cursor:pointer; }
.donate-fab { position:fixed; right:16px; bottom:16px; z-index:20; border:0; border-radius:999px; padding:10px 16px; background:var(--h2); color:#fff; font:inherit; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.25); cursor:pointer; }
.foot { margin-top:32px; padding:24px 0 32px; border-top:1px solid var(--bd); text-align:center; }
.foot .lema { font-size:1.05rem; font-weight:600; color:var(--fg); }
@media (max-width:760px) { .donate { position:fixed; order:0; } }

/* Sponsors */
.compartir { margin:0 0 12px; }
.share { display:inline-block; margin:0 4px; padding:5px 12px; border-radius:999px; border:1px solid var(--bd); background:var(--card); color:var(--fg); font:inherit; font-size:.85rem; text-decoration:none; cursor:pointer; }
.share.wa { border-color:#25d366; } .share.fb { border-color:#1877f2; }
.share:hover { background:var(--bg); }

@media (prefers-reduced-motion: reduce) { .card { transition:none; } .card:hover { transform:none; } }

/* Filtros con buscador */
.combo { position:relative; flex:1 1 170px; }
.combo .combo-in { width:100%; }
.combo-list { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); max-height:260px; overflow:auto; margin:0; padding:4px; list-style:none; background:var(--card); color:var(--fg); border:1px solid var(--bd); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.22); }
.combo-list[hidden] { display:none; }
.combo-list li { padding:8px 10px; border-radius:8px; cursor:pointer; font-size:.92rem; }
.combo-list li:hover, .combo-list li.activo { background:var(--soft); }
.combo-list li.vacio { color:var(--mut); cursor:default; }
.combo select { display:none; }

/* Formulario de sugerencias */
.sugerir { margin-top:32px; }
.sugerir details { background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:14px 18px; }
.sugerir summary { cursor:pointer; font-weight:600; color:var(--pri); }
.sugerir-form .grid, .sugerir-pagina .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:12px 0; }
.campo { display:flex; flex-direction:column; gap:4px; }
.campo.ancho { grid-column:1/-1; }
.campo label { font-size:.85rem; font-weight:600; }
.campo input, .campo select, .campo textarea { font:inherit; padding:10px; border-radius:8px; border:1px solid var(--bd); background:var(--bg); color:var(--fg); }
.campo small, .nota { color:var(--mut); font-size:.8rem; }
.err { color:#b4443c; font-size:.85rem; }
.campo.trampa { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn-enviar { padding:10px 20px; border:0; border-radius:8px; background:var(--acc); color:var(--acc-fg); font:inherit; font-weight:600; cursor:pointer; }
.btn-enviar:hover { opacity:.92; }
.gracias { background:var(--soft); border-radius:8px; padding:10px 14px; color:var(--ok); font-weight:600; }
.sugerir-pagina { padding-top:24px; padding-bottom:40px; max-width:760px; }
.volver { color:#fff; }
@media (max-width:640px) { .sugerir-form .grid, .sugerir-pagina .grid { grid-template-columns:1fr; } }

.combo::after { content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--mut); }
.combo .combo-in { padding-right:30px; }
.combo .combo-in::placeholder { color:var(--fg); opacity:.9; }

/* Botones de compartir */
.compartir { margin:0 0 18px; }
.compartir-t { font-weight:600; color:var(--fg); margin:0 0 10px; }
.share-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.share { display:inline-flex; align-items:center; gap:8px; margin:0; padding:9px 16px; border:0; border-radius:999px; color:#fff; font:inherit; font-size:.9rem; font-weight:600; text-decoration:none; cursor:pointer; transition:transform .12s, filter .12s; }
.share svg { width:20px; height:20px; flex:none; }
.share:hover { transform:translateY(-2px); filter:brightness(1.08); }
.share:focus-visible { outline:3px solid var(--pri); outline-offset:2px; }
.share.wa { background:#2a9d62; }
.share.fb { background:#3b66b0; }
.share.ig { background:linear-gradient(45deg,#c46a2b,#c43b6d 55%,#7a4bb5); }
.share.cp { background:var(--soft); color:var(--fg); border:1px solid var(--bd); }
.foot a.share { text-decoration:none; color:#fff; }
.share-aviso { margin:10px 0 0; color:var(--ok); font-weight:600; }
@media (prefers-reduced-motion: reduce) { .share { transition:none; } .share:hover { transform:none; } }

/* Franja del banner arriba del encabezado: se ven las letras completas */
.hero-custom::before { content:""; display:block; height:clamp(120px, 15vw, 190px); margin-bottom:22px;
  background:var(--hero-img) center 50% / cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent); mask-image:linear-gradient(to bottom, #000 78%, transparent); }

/* Encabezado sin imagen (opción del admin) */
.hero-custom { padding-top:0; background:linear-gradient(135deg,var(--h1),var(--h2)); }
.hero-plain { background:linear-gradient(135deg,var(--h1),var(--h2)); }


/* Animaciones laterales: adorno lento, solo en pantallas anchas (donde el margen está vacío).
   Solo transform: no provoca reflow. Se desactiva con "reducir movimiento". */
.deco { display:none; position:fixed; top:0; bottom:0; width:calc((100vw - 1080px) / 2 - 16px); z-index:0; pointer-events:none; overflow:hidden; }
.deco-l { left:0; } .deco-r { right:0; }
.deco .d { position:absolute; top:var(--top); left:var(--x); width:clamp(44px, 3.6vw, 64px); height:clamp(44px, 3.6vw, 64px); fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:.5; will-change:transform; animation:flotar var(--dur) ease-in-out var(--del) infinite alternate; }
.deco .d.s { width:clamp(24px, 2vw, 34px); height:clamp(24px, 2vw, 34px); animation-name:girar; }
.deco .c1 { color:var(--d1); } .deco .c2 { color:var(--d2); } .deco .c3 { color:var(--d3); } .deco .c4 { color:var(--d4); }
@keyframes flotar { from { transform:translate3d(0,-10px,0) rotate(var(--r0)); } to { transform:translate3d(0,14px,0) rotate(var(--r1)); } }
@keyframes girar { from { transform:translate3d(0,-6px,0) rotate(var(--r0)) scale(.9); } to { transform:translate3d(0,8px,0) rotate(var(--r1)) scale(1.1); } }
@media (min-width:1300px) { .deco { display:block; } }
@media (prefers-reduced-motion: reduce) { .deco .d { animation:none; } }

/* Etiquetas "Gratis · Sin registrarte" */
.promesas { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.promesas li { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 9px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); color:#fff; font-size:.88rem; font-weight:600; backdrop-filter:blur(2px); }
.promesas svg { width:16px; height:16px; flex:none; color:#b9f0c8; }

.hero h1 { text-shadow:0 2px 14px rgba(10,30,40,.25); }

.hero-top { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:6px; }
.hero-text { flex:1 1 auto; min-width:0; }
.hero-art { flex:0 1 420px; width:min(40%, 420px); height:auto; margin:-8px 0 -4px; }
@media (max-width:860px) { .hero-art { display:none; } }

/* Sponsors: tarjetas atractivas */
.sponsors { margin-top:36px; }
.sp-band { padding:22px; border-radius:26px; border:1px solid var(--bd);
  background:radial-gradient(circle at 0% 0%, var(--soft), transparent 55%), radial-gradient(circle at 100% 100%, var(--soft), transparent 55%), var(--card); }
.sp-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px; }
.sp-card { opacity:0; animation:sp-in .5s ease-out calc(var(--i, 0) * 90ms) forwards; }
@keyframes sp-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.sp-link { display:flex; flex-direction:column; height:100%; border-radius:18px; overflow:hidden; background:var(--bg); border:1px solid var(--bd); color:var(--fg); text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.sp-link:hover, a.sp-link:focus-visible { transform:translateY(-5px); box-shadow:0 14px 30px rgba(30,60,75,.18); border-color:var(--pri); }
a.sp-link:focus-visible { outline:3px solid var(--pri); outline-offset:2px; }
.sp-img { position:relative; display:block; aspect-ratio:16 / 7; overflow:hidden; background:var(--soft); }
.sp-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
a.sp-link:hover .sp-img img { transform:scale(1.06); }
.sp-badge { position:absolute; top:10px; left:10px; padding:3px 11px; border-radius:999px; background:rgba(20,35,45,.62); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(3px); }
.sp-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; }
.sp-name { font-weight:700; font-size:.98rem; }
.sp-go { width:20px; height:20px; flex:none; color:var(--pri); transition:transform .2s ease; }
a.sp-link:hover .sp-go { transform:translate(3px,-3px); }
.sp-vacio .sp-link { align-items:center; justify-content:center; gap:4px; text-align:center; padding:26px 16px; min-height:170px; background:transparent; border:2px dashed var(--bd); color:var(--mut); }
.sp-vacio .sp-link:hover { color:var(--pri); background:var(--soft); }
.sp-plus { width:38px; height:38px; color:var(--pri); }
.sp-vt { font-weight:700; color:var(--fg); }
.sp-vacio small { font-size:.82rem; }
@media (prefers-reduced-motion: reduce) { .sp-card { animation:none; opacity:1; } .sp-link, .sp-img img, .sp-go { transition:none; } a.sp-link:hover, a.sp-link:hover .sp-img img, a.sp-link:hover .sp-go { transform:none; } }

/* Contador de visitantes ("llamador") */
.pulso { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 16px; }
.pz { display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border-radius:999px; background:rgba(10,25,35,.32); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:.82rem; }
.pz[hidden] { display:none; }
.pz b { font-variant-numeric:tabular-nums; }
.pz-on { border-color:rgba(130,235,170,.55); }
.punto { width:9px; height:9px; border-radius:50%; background:#6fe39a; position:relative; flex:none; }
.punto::after { content:""; position:absolute; inset:0; border-radius:50%; background:#6fe39a; animation:latir 1.8s ease-out infinite; }
@keyframes latir { from { transform:scale(1); opacity:.7; } to { transform:scale(2.8); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .punto::after { animation:none; } }

.foot .priv { font-size:.78rem; opacity:.8; }

/* Insignia de la universidad (sigla con color propio) */
.inst-row { display:flex; align-items:center; gap:10px; }
.insig { display:inline-grid; place-items:center; flex:none; min-width:38px; height:28px; padding:0 8px; border-radius:9px; background:var(--ic, #334155); color:#fff; font-weight:800; font-size:.72rem; letter-spacing:.03em; line-height:1; box-shadow:0 1px 3px rgba(20,30,50,.25); }

/* Formato de cursado: online / ambas / presencial */
.fmt { display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 9px; border-radius:999px; color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.01em; }
.fmt svg { width:16px; height:16px; flex:none; }
.fmt-online { background:#1d63c4; }
.fmt-presencial { background:#bd4a12; }
.fmt-ambas { background:linear-gradient(90deg,#6d3fd0,#1d63c4); }
.card.borde-online { border-left:5px solid #3b82f6; }
.card.borde-presencial { border-left:5px solid #f08a4b; }
.card.borde-ambas { border-left:5px solid #8b5cf6; }
.inst.pres { color:var(--fg); font-weight:600; }