/* Hero da home (views/html/partials/hero.html). Prefixo hx-. */
.hx {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 32px;
    width: 100%; box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 56px 24px 72px; min-height: calc(100dvh - 96px);
    font-family: 'Quicksand', sans-serif; color: #fff;
}
.hx-copy { width: 100%; max-width: 540px; }
/* computador: "O presente / que guarda / a história de vocês" (o trecho rosa sempre inteiro na última linha) */
@media (min-width: 961px) { .hx-title em { display: block; white-space: nowrap; } }
.hx-title { margin: 0; max-width: 9.8em; font-size: clamp(34px, 3.7vw, 46px); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; color: #fff; }
.hx-title em { font-style: normal; color: #ff2d9b; }
.hx-sub { margin: 22px 0 0; max-width: 470px; color: #a3a3a3; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.hx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.hx-btn {
    display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(180deg, #ff2d9b, #e0177f); color: #fff; font: 700 16px 'Quicksand', sans-serif;
    box-shadow: 0 16px 32px -16px rgba(255, 45, 155, .9); transition: transform .15s, filter .2s;
}
.hx-btn:hover { filter: brightness(1.06); }
.hx-btn:active { transform: scale(.98); }
.hx-btn svg { transition: transform .2s; }
.hx-btn:hover svg { transform: translateX(3px); }
.hx-link { color: #e6e6e6; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); padding-bottom: 2px; }
.hx-link:hover { color: #fff; border-color: #ff2d9b; }
.hx-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.hx-checks li { position: relative; padding-left: 20px; color: #8f8f8f; font-size: 13.5px; font-weight: 500; }
.hx-checks li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 5px; border-left: 2px solid #ff2d9b; border-bottom: 2px solid #ff2d9b; transform: rotate(-45deg); }

/* entrada */
.hx-copy > * { opacity: 0; transform: translateY(16px); animation: hx-in .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.hx-copy > :nth-child(2) { animation-delay: .1s; }
.hx-copy > :nth-child(3) { animation-delay: .2s; }

@keyframes hx-in { to { opacity: 1; transform: none; } }

/* ─── composição dos três presentes ─── */
.hx-visual { --s: 1; position: relative; height: calc(600px * var(--s)); }
.hx-heart { position: absolute; left: 50%; top: 50%; width: calc(780px * var(--s)); height: calc(728px * var(--s)); margin: calc(-372px * var(--s)) 0 0 calc(-390px * var(--s)); pointer-events: none; overflow: visible; opacity: 0; animation: hx-fade 1.6s .3s ease forwards; }
.hx-heart-line { fill: none; stroke: url(#hxHeartG); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: hx-draw 9s ease-in-out infinite; }
.hx-heart-echo { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.hx-spark-glow { opacity: .55; }
/* desenha o traço, segura, e apaga pelo outro lado */
@keyframes hx-draw { 0% { stroke-dashoffset: 1000; } 45% { stroke-dashoffset: 0; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1000; } }
@keyframes hx-fade { to { opacity: 1; } }

.hx-item { position: absolute; opacity: 0; animation: hx-pop .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.hx-phone { padding: calc(7px * var(--s)); border-radius: calc(34px * var(--s)); background: #0a0a0a; box-shadow: 0 0 0 1.5px #2e2e2e, 0 40px 70px -24px rgba(0, 0, 0, .95); }
.hx-phone img { display: block; width: 100%; height: auto; border-radius: calc(27px * var(--s)); }
.hx-item--page { left: 50%; top: 50%; width: calc(248px * var(--s)); margin: calc(-258px * var(--s)) 0 0 calc(-110px * var(--s)); z-index: 3; animation-delay: .35s; }
.hx-item--wrapped { left: 50%; top: 50%; width: calc(198px * var(--s)); margin: calc(-222px * var(--s)) 0 0 calc(-262px * var(--s)); z-index: 2; animation-delay: .5s; --r: -9deg; }
.hx-item--book { left: 50%; top: 50%; width: calc(310px * var(--s)); margin: calc(70px * var(--s)) 0 0 calc(-40px * var(--s)); z-index: 4; animation-delay: .65s; --r: 5deg; }
.hx-item--book img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 3px 0 -1px #e9dcc8, 0 6px 0 -2px #cdbfa8, 0 30px 50px -18px rgba(0, 0, 0, .95); }
.hx-item > * { animation: hx-float 7s ease-in-out infinite; }
.hx-item--wrapped > * { animation-duration: 8.5s; animation-delay: -2s; }
.hx-item--book > * { animation-duration: 9.5s; animation-delay: -4s; }
@keyframes hx-pop { from { opacity: 0; transform: translateY(40px) rotate(var(--r, 0deg)) scale(.96); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
@keyframes hx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 960px) {
    .hx { overflow-x: clip; }
    .hx { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding-top: 36px; text-align: center; }
    .hx-copy { max-width: 560px; margin: 0 auto; }
    .hx-title { max-width: none; }
    .hx-sub { margin-left: auto; margin-right: auto; }
    .hx-acts, .hx-checks { justify-content: center; }
    .hx-visual { --s: .86; margin-top: 8px; }
}
@media (max-width: 520px) {
    .hx { padding: 28px 18px 24px; }
    .hx-title { font-size: 30px; }
    .hx-sub { font-size: 15.5px; margin-top: 16px; }
    .hx-acts { margin-top: 26px; gap: 14px; flex-direction: column; }
    .hx-btn { width: 100%; justify-content: center; }
    .hx-checks { gap: 6px 14px; margin-top: 20px; }
    .hx-checks li { font-size: 12.5px; }
    .hx-visual { --s: .64; margin-top: 4px; }
}
@media (max-width: 380px) {
    .hx-visual { --s: .56; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-copy > *, .hx-item, .hx-heart { animation: none; opacity: 1; transform: none; }
    .hx-item > *, .hx-heart-line { animation: none; }
    .hx-heart-line { stroke-dashoffset: 0; }
    .hx-spark, .hx-spark-glow { display: none; }
    .hx-item--wrapped { transform: rotate(-9deg); }
    .hx-item--book { transform: rotate(5deg); }
}