@font-face { font-family: 'Manrope'; src: url('/fuente/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fuente/fraunces.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
:root { --verde: #0f7a5e; --bosque: #0f3d31; --oro: #e9c46a; --papel: #f6f4ee; --tinta: #1b2622; --suave: #55625c; --linea: #ddd6c5; --curva: cubic-bezier(.2,.8,.2,1); --resorte: cubic-bezier(.34,1.56,.64,1); }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; color: var(--tinta); background: radial-gradient(900px 500px at 50% -10%, #1d6b56, var(--bosque) 60%); min-height: 100vh; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 10px; }
.t-fondo { padding: 28px 16px 40px; }
.tarjeta { width: min(420px, 100%); margin: 0 auto; background: var(--papel); border-radius: 30px; overflow: hidden; text-align: center; padding-bottom: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.js .tarjeta { animation: gira-in .9s var(--curva) both; transform-origin: 50% 0; }
@keyframes gira-in { from { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(30px); } }
.t-portada { position: relative; height: 150px; background: linear-gradient(135deg, var(--verde), var(--bosque)); overflow: hidden; }
.t-forma { position: absolute; border-radius: 50%; }
.f-a { width: 180px; height: 180px; right: -40px; top: -70px; background: rgba(233,196,106,.35); }
.f-b { width: 110px; height: 110px; left: -30px; bottom: -50px; border: 14px solid rgba(255,255,255,.12); }
.js .f-a { animation: flota 6s ease-in-out infinite alternate; } .js .f-b { animation: flota 7s ease-in-out infinite alternate-reverse; }
@keyframes flota { to { transform: translate(-14px, 12px); } }
.t-marca { position: absolute; left: 18px; top: 16px; color: #fff; font-weight: 800; font-size: .85rem; opacity: .9; }
.t-foto { width: 112px; height: 112px; margin: -56px auto 12px; position: relative; border-radius: 50%; border: 5px solid var(--papel); background: var(--oro); display: grid; place-items: center; font-family: 'Fraunces', serif; font-size: 2.2rem; color: var(--tinta); }
.js .t-foto { animation: aparece .7s var(--resorte) .35s both; }
@keyframes aparece { from { transform: scale(.4); opacity: 0; } }
.tarjeta h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.9rem; margin: 0; }
.t-cargo { margin: 2px 0 10px; color: var(--verde); font-weight: 800; }
.t-lema { color: var(--suave); margin: 0 26px 20px; }
.t-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 18px 12px; }
.t-acciones button, .t-guardar, .t-links button, .t-pie button { font: inherit; cursor: pointer; }
.t-acciones button { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border-radius: 18px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font-weight: 800; font-size: .88rem; transition: transform .2s var(--resorte), border-color .2s; }
.t-acciones button:hover { transform: translateY(-3px); border-color: var(--verde); }
.t-acciones svg, .t-guardar svg { width: 24px; height: 24px; fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-guardar { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 36px); margin: 0 18px; min-height: 56px; border: 0; border-radius: 999px; background: var(--verde); color: #fff; font-weight: 800; font-size: 1.02rem; transition: transform .2s var(--curva), box-shadow .2s; }
.t-guardar svg { stroke: #fff; }
.t-guardar:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px var(--verde); }
.t-guardar.hecho { background: var(--bosque); }
.t-links { list-style: none; padding: 0; margin: 18px 18px 0; display: grid; gap: 8px; }
.t-links button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font-weight: 700; text-align: left; transition: transform .2s var(--curva); }
.t-links button:hover { transform: translateX(4px); }
.t-links span { font-size: 1.2rem; }
.t-pie { display: flex; gap: 8px; margin: 16px 18px 0; }
.t-pie button { flex: 1; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); font-weight: 800; }
.t-qr { margin: 18px auto 0; }
.t-qr img { margin: 0 auto; border-radius: 16px; background: #fff; padding: 10px; }
.js .t-qr:not([hidden]) { animation: aparece .5s var(--resorte); }
.t-qr p { color: var(--suave); font-size: .9rem; }
.t-hecha { text-align: center; color: rgba(255,255,255,.8); font-size: .9rem; margin-top: 22px; }
.t-hecha a { color: var(--oro); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }