/* Tarjeta digital ABS — Diseño adaptable para teléfonos y computadores */
:root { color-scheme: dark; --verde:#017039; --amarillo:#ffdc00; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; background:#09130f; color:#fff; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.tarjeta { position:relative; isolation:isolate; margin:0 auto; min-height:100vh; width:100%; max-width:530px; overflow:hidden; background:#09130f; box-shadow:0 0 90px rgba(0,0,0,.7); }
.fotos { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.foto { position:absolute; left:0; right:0; background-size:cover; background-repeat:no-repeat; filter:saturate(.93) contrast(1.07); }
.foto-1 { top:0; height:38%; background-image:url("assets/maquina-1.webp"); background-position:47% center; }
.foto-2 { top:34%; height:35%; background-image:url("assets/maquina-2.webp"); background-position:52% center; }
.foto-3 { top:67%; height:33%; background-image:url("assets/maquina-3.webp"); background-position:48% 50%; }
.fotos-velo { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,24,13,.22) 0%,rgba(0,11,5,.79) 24%,rgba(0,15,8,.79) 52%,rgba(0,6,4,.76) 79%,rgba(0,16,8,.58) 100%); }
.marco { position:absolute; z-index:-1; left:0; right:0; height:112px; pointer-events:none; }
.marco-arriba { top:-20px; background:linear-gradient(135deg,#006a35 0 13%,#ffe000 13% 20%,transparent 20%); opacity:.9; }
.marco-abajo { bottom:0; background:linear-gradient(315deg,#006a35 0 14%,#ffe000 14% 22%,transparent 22%); opacity:.95; }
.contenido { padding:76px clamp(18px,5vw,36px) 28px; }
.identidad { text-align:center; }
.logo { display:block; height:auto; width:min(100%,398px); max-height:226px; object-fit:contain; margin:0 auto 5px; filter:drop-shadow(0 3px 8px rgba(255,232,0,.26)); }
h1 { font-weight:850; font-size:clamp(27px,7vw,38px); letter-spacing:.01em; line-height:1.02; margin:14px 0 0; text-shadow:0 3px 10px #000; }
h1 span { display:block; font-size:.59em; line-height:1.55; letter-spacing:.08em; }
.lema { font-family:Georgia,"Times New Roman",serif; font-style:italic; color:#ffe000; font-size:clamp(27px,7vw,40px); line-height:1.2; margin:10px -5px 12px; text-shadow:0 3px 10px rgba(0,0,0,.85); }
.rayas-colombia { display:flex; width:115px; height:6px; margin:auto; border-radius:2px; overflow:hidden; }
.rayas-colombia span:nth-child(1) { flex:2; background:#ffdf00; }
.rayas-colombia span:nth-child(2) { flex:1; background:#095bd4; }
.rayas-colombia span:nth-child(3) { flex:1; background:#ed1837; }
.origen { margin:15px 0 28px; font-size:clamp(11px,2.65vw,14px); font-weight:600; letter-spacing:.23em; text-shadow:0 2px 6px #000; }
.enlaces { display:flex; flex-direction:column; gap:13px; }
.enlace { display:flex; align-items:center; gap:16px; min-height:88px; padding:14px 17px 14px 22px; border-radius:24px; color:#fff; text-decoration:none; border:2px solid rgba(255,255,255,.45); box-shadow:0 11px 24px rgba(0,0,0,.36),inset 0 1px 8px rgba(255,255,255,.11); transition:transform .16s ease,filter .16s ease; }
.enlace:hover { transform:translateY(-2px); filter:brightness(1.12); }
.enlace:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.enlace svg { flex:0 0 52px; width:52px; height:52px; }
.enlace-texto { min-width:0; flex:1; text-align:left; }
.enlace-texto strong { display:block; font-size:clamp(18px,4.5vw,25px); font-weight:750; line-height:1.2; }
.enlace-texto small { display:block; font-size:clamp(11px,2.8vw,14px); font-weight:400; line-height:1.3; margin-top:5px; }
.flecha { font-size:44px; font-weight:300; line-height:1; margin-left:4px; margin-top:-7px; }
.whatsapp { background:linear-gradient(125deg,#16ce63,#006c37); border-color:#5fed94; }
.web { color:#111; background:linear-gradient(110deg,#fff200,#ffcb05); border-color:#ffe85b; }
.instagram { background:linear-gradient(110deg,#ff9b24,#f32466 38%,#ae11b2 68%,#593be6); border-color:#f789e2; }
.facebook { background:linear-gradient(120deg,#0878fb,#0343b3); border-color:#5bb1ff; }
.tiktok { background:linear-gradient(115deg,#121212,#202529 55%,#111); border-color:#49e9e0; box-shadow:0 11px 24px rgba(0,0,0,.36),inset 2px 0 0 #ff275f,inset -2px 0 0 #45f5ed; }
.correo { background:linear-gradient(120deg,#333b39,#121615); border-color:#9caca8; }
.pie { text-align:center; margin:30px 0 0; padding:15px 0 18px; font-size:12px; text-shadow:0 2px 7px #000; }
.pie p { margin:5px 0; }
.aviso { position:fixed; bottom:22px; left:50%; z-index:20; transform:translateX(-50%); width:min(92vw,440px); padding:12px 18px; background:#fff7ce; color:#1b241b; font-size:14px; text-align:center; border-radius:12px; box-shadow:0 6px 28px #0008; }
@media(min-width:550px) { body { padding:24px 0; } .tarjeta { min-height:850px; border-radius:30px; } }
@media(max-width:370px) { .contenido { padding-left:15px; padding-right:15px; } .enlace { gap:12px; padding:10px 12px; min-height:80px; border-radius:21px; } .enlace svg { flex-basis:44px; width:44px; height:44px; } .flecha { font-size:36px; } }
@media(prefers-reduced-motion:reduce) { .enlace { transition:none; } html { scroll-behavior:auto; } }