:root{--qrc-primary:#24d853;--qrc-secondary:#054358;--muted:#656b6c;--profile-muted:#52d9ab}
*{box-sizing:border-box}
body{margin:0;background:var(--qrc-secondary);color:#070708;font-family:Arial,Helvetica,sans-serif;font-weight:400}
.page{max-width:490px;margin:auto;padding:0 20px 70px}
.profile{position:relative;margin:15px 0 20px;border-radius:18px;padding-bottom:15px}
.cover{height:426px;border-radius:18px 18px 0 0;overflow:hidden;background:url("portada.png") top center/cover no-repeat;position:relative}
.cover>svg{position:absolute;bottom:-1px;left:0;width:100%;height:auto}
.brand{position:absolute;left:-5px;top:327px;border-radius:50%;object-fit:contain;background:white}
.profile-info{margin-top:30px;padding:0 15px}
h1{font-size:32px;line-height:34px;font-weight:700;margin:0 0 12px;color:white;text-shadow:2px 2px 3px #0005}
.tagline{font-size:14px;line-height:20px;color:var(--profile-muted);margin:0}
.phones{display:flex;gap:8px;margin-top:18px}
.phone{width:56px;text-align:center}
.phone a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:auto;border-radius:50%;background:var(--qrc-primary);color:white;box-shadow:0 7px 29px #64646f33}
.phone svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.phone p{font-size:13px;line-height:18px;color:#fff;margin:7px 0 0}
.card{background:white;border-radius:10px;box-shadow:0 7px 29px #64646f33;margin:20px 0}
.text-card{text-align:center;padding:20px}
h2{font-weight:400;font-size:28px;line-height:1.2;margin:0 0 8px}
.text-card p{font-size:20px;line-height:23px;color:var(--muted);margin:0;overflow-wrap:break-word}
.action{display:flex;align-items:center;gap:15px;padding:20px;color:inherit;text-decoration:none;font-size:20px;line-height:24px;min-height:92px}
.action img{object-fit:contain;flex-shrink:0;border-radius:50%}
/* La imagen de WhatsApp es rectangular: rellena el círculo sin franjas. */
.action img[src="whatsapp.png"]{width:52px;height:52px;object-fit:cover}
.action>span:not(.arrow){flex:1}
.arrow{width:14px;height:14px;border-top:1px solid var(--qrc-primary);border-right:1px solid var(--qrc-primary);transform:rotate(45deg);margin-right:5px;flex-shrink:0}
a:focus-visible{outline:3px solid var(--profile-muted);outline-offset:5px}
a:hover{filter:brightness(.97)}
@media(max-width:767px){.profile{margin:0 -20px 20px;border-radius:0}.page{width:100%}}

@media(max-width:767px){.cover{border-radius:0}.brand{left:15px}}