:root { --ink:#102827; --teal:#087678; --teal-deep:#04595b; --cream:#f5eddf; --red:#ed342c; --yellow:#f9c816; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { min-width:320px; margin:0; color:var(--cream); background:var(--teal); font-family:"Lilita One",cursive; }
a { color:inherit; text-decoration:none; }
.link-page { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; padding:40px 24px 92px; background-image:linear-gradient(180deg,rgba(3,79,81,.45),rgba(4,89,91,.18) 45%,rgba(3,60,61,.49)),url("assets/fondo2.png"); background-position:center; background-size:cover; }
.link-page::before,.link-page::after { content:""; position:absolute; z-index:-1; width:min(52vw,720px); aspect-ratio:1; border:1px solid rgba(245,237,223,.12); border-radius:50%; }
.link-page::before { top:-31vw; left:-23vw; box-shadow:0 0 0 38px rgba(245,237,223,.035),0 0 0 76px rgba(245,237,223,.025); }
.link-page::after { right:-30vw; bottom:-37vw; box-shadow:0 0 0 38px rgba(245,237,223,.035),0 0 0 76px rgba(245,237,223,.025); }
.link-hub { width:min(100%,510px); text-align:center; }
.identity { margin-bottom:23px; }
.logo-frame { width:min(100%,400px); height:220px; margin:0 auto -2px; overflow:hidden; filter:drop-shadow(0 10px 8px rgba(4,46,47,.28)); }
.brand-logo { width:400px; max-width:none; height:auto; display:block; transform:translateY(-95px); }
.edition { margin:0; color:var(--yellow); text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:.17em; }
.link-list { display:grid; gap:12px; }
.link-card { min-height:98px; padding:13px 15px; display:grid; grid-template-columns:1fr 42px; align-items:center; gap:13px; border:2px solid rgba(255,255,255,.74); border-radius:13px; background:rgba(245,237,223,.94); color:var(--ink); box-shadow:0 5px 0 rgba(3,67,68,.35); text-align:left; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.ticket-link { min-height:128px; position:relative; grid-template-columns:1fr; gap:8px; }
.ticket-link .link-copy { justify-items:center; row-gap:8px; padding-inline:20px; text-align:center; }
.ticket-link .link-arrow { position:static; justify-self:center; width:auto; height:auto; padding:9px 17px; border:0; border-radius:999px; background:var(--red); color:white; font:15px/1 "Lilita One",cursive; letter-spacing:.035em; transform:none; }
.link-card:hover { background:var(--yellow); color:var(--ink); transform:translateY(-3px); box-shadow:0 8px 0 rgba(3,67,68,.38); }
.link-card:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.link-copy { min-width:0; display:grid; gap:4px; font-family:"Lilita One",cursive; }.link-copy small { color:var(--red); text-transform:uppercase; font-size:18px; font-weight:400; letter-spacing:.045em; }.link-copy strong { font-size:26px; font-weight:400; line-height:1.02; letter-spacing:.01em; }
.link-arrow { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(16,40,39,.28); border-radius:50%; font-size:18px; transition:background .18s ease,transform .18s ease; }.link-card:hover .link-arrow { background:var(--red); border-color:var(--red); color:white; transform:rotate(45deg); }.ticket-link:hover .link-arrow { transform:none; background:var(--ink); }
.instagram-link { position:relative; grid-template-columns:1fr; border-color:var(--yellow); background:var(--red); color:var(--cream); }.instagram-link:hover { background:var(--yellow); color:var(--ink); }.instagram-link .link-copy { justify-items:center; padding-inline:54px; text-align:center; }.instagram-link .link-copy small { color:rgba(255,255,255,.82); }.instagram-link:hover .link-copy small { color:var(--red); }.instagram-icon { position:absolute; left:15px; top:50%; width:42px; height:42px; display:grid; place-items:center; border:2px solid var(--cream); border-radius:12px; font-size:34px; line-height:1; transform:translateY(-50%); }.instagram-link:hover .instagram-icon { border-color:var(--ink); }.instagram-link .link-arrow { position:absolute; right:15px; top:50%; border-color:rgba(245,237,223,.48); transform:translateY(-50%); }.instagram-link:hover .link-arrow { background:var(--ink); border-color:var(--ink); transform:translateY(-50%) rotate(45deg); }
.corner { position:absolute; color:var(--yellow); font-size:26px; }.corner-tl { top:28px; left:30px; }.corner-tr { top:28px; right:30px; }
.sponsor-ribbon { position:absolute; bottom:0; left:0; width:100%; height:86px; display:flex; align-items:center; overflow:hidden; border-top:3px solid var(--yellow); background:rgba(4,57,58,.9); }.sponsor-track { display:flex; width:max-content; animation:sponsor-marquee 24s linear infinite; }.sponsor-set { display:flex; align-items:center; gap:48px; padding-right:48px; }.sponsor-set img { width:118px; height:44px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.22)); }.sponsor-set .passline-logo { filter:brightness(0) invert(1) drop-shadow(0 2px 2px rgba(0,0,0,.22)); }.sponsor-set .cocacola-logo { transform:scale(2.15); }.sponsor-set .parquearena-logo { transform:scale(1.9); }.sponsor-set .ranchera-logo { transform:scale(2.25); }.sponsor-set .arenapro-logo { transform:scale(1.75); }
@keyframes sponsor-marquee { to { transform:translateX(-50%); } }
@media (max-width:520px) { .link-page { padding:22px 18px 98px; background-position:58% center; }.logo-frame { width:360px; height:210px; margin-bottom:-3px; }.brand-logo { width:360px; transform:translateY(-82px); }.identity { margin-bottom:22px; }.link-card { min-height:92px; grid-template-columns:1fr 36px; gap:10px; padding:12px 11px; }.ticket-link { min-height:126px; grid-template-columns:1fr; gap:7px; }.ticket-link .link-copy { padding-inline:20px; }.ticket-link .link-arrow { padding:8px 14px; font-size:14px; }.instagram-link { grid-template-columns:1fr; }.instagram-link .link-copy { padding-inline:44px; }.instagram-link .instagram-icon { left:11px; width:40px; height:40px; font-size:30px; }.instagram-link .link-arrow { right:11px; }.link-copy { gap:3px; }.link-copy small { font-size:16px; letter-spacing:.025em; }.link-copy strong { font-size:23px; }.link-arrow { width:31px; height:31px; }.sponsor-ribbon { height:78px; }.sponsor-set { gap:30px; padding-right:30px; }.sponsor-set img { width:92px; height:38px; }.corner { display:none; } }
@media (prefers-reduced-motion:reduce) { .link-card,.link-arrow { transition:none; }.sponsor-track { animation:none; } }