.hero { width: 100vw; min-height: 100vh; display: grid; grid-template-columns: 63.8% 36.2%; }

.left { position: relative; background: #fff; overflow: hidden; }
.left::before {
    content: ""; position: absolute; left: -40px; top: -360px;
    width: 1680px; height: 1680px;
    background: url("../images/fondo-zodiaco.png") center/contain no-repeat;
    opacity: 0.13; z-index: 0;
}

.header-left {
    position: absolute; top: 32px; left: 10.7%; right: 4%; height: 45px;
    display: grid; grid-template-columns: 190px 1fr; align-items: center; z-index: 10;
}
.logo { display: flex; align-items: center; gap: 10px; font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: #3a2815; }
.logo-icon { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0%, #d7aa5b 40%, #8a5a22 100%); flex-shrink: 0; }
.menu { display: flex; justify-content: center; gap: 42px; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(138,99,49,0.18); border-radius: 10px; background: #ffffff; color: #5b4224; cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 999px; position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 999px; background: currentColor; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after  { top: 6px; }
.menu-login { display: none; width: 100%; min-height: 42px; border: none; border-radius: 10px; background: #8a6331; color: #ffffff; font-size: 13px; font-weight: 700; cursor: pointer; }
.menu a { text-decoration: none; color: #21180f; font-size: 14px; position: relative; padding-bottom: 6px; transition: color 0.18s ease; }
.menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #8a5a22; transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; }
.menu a:hover { color: #5f4525; }
.menu a:hover::after { transform: scaleX(1); }

.content { position: absolute; left: 10.7%; top: 178px; z-index: 15; }
.badge { display: inline-block; background: #e8ddc8; color: #3c2914; padding: 10px 28px; border-radius: 999px; font-size: 13px; margin-bottom: 28px; }
.hero h1 { font-size: clamp(32px, 4vw, 60px); line-height: 1.14; font-weight: 400; letter-spacing: -1.7px; margin-bottom: 34px; }
.info { display: flex; align-items: flex-start; gap: 82px; margin-bottom: 58px; }
.btn-main { background: #7b5628; color: #fff; border: none; padding: 16px 27px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; white-space: nowrap; }
.btn-main:hover { background: #f28c28; transform: translateY(-1px); }
.btn-main:active { transform: translateY(0); }
.info p { width: 365px; color: #555; font-size: 15px; line-height: 1.75; }
.cards { display: flex; gap: 34px; }
.card { display: block; width: 145px; background: #fffaf2; border: 1px solid #9c7f56; border-radius: 5px; overflow: hidden; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.card:hover { transform: translateY(-10px); box-shadow: 0 18px 30px rgba(92,58,21,0.16); border-color: #8a5a22; }
.card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.card span { display: block; padding: 11px 5px; font-size: 13px; color: #2d1d0d; }

.right { position: relative; background: #b99c70; border-bottom-left-radius: 92px; overflow: visible; }
.right::after { content: ""; position: absolute; right: -40px; bottom: -36px; width: 340px; height: 340px; background: url("../images/zodiaco-fondo-radial.png") center/contain no-repeat; opacity: 0.18; z-index: 1; }
.header-right { position: absolute; top: 30px; right: 10%; display: flex; align-items: center; gap: 22px; z-index: 20; }
.icon { width: 24px; height: 24px; color: #fff; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login { background: #f5efe3; border: none; color: #2c1c0c; padding: 14px 32px; border-radius: 7px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 0.18s ease, transform 0.18s ease; }
.login:hover { background: #ffffff; transform: translateY(-1px); }
.monje { position: absolute; width: 840px; left: -360px; top: 53%; transform: translateY(-50%); z-index: 8; filter: drop-shadow(0 28px 30px rgba(0,0,0,0.28)); animation: monjeFloat 4s ease-in-out infinite; }

.float { position: absolute; z-index: 15; background: #f2eadb; color: #3b2815; padding: 14px 24px; border-radius: 7px; font-size: 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.20); white-space: nowrap; animation: botonFloat 3.8s ease-in-out infinite; }
.f1 { top: 24%; left: -142px; }
.f2 { top: 43%; left: -196px; }
.f3 { top: 28%; right: 260px; }
.f4 { top: 45%; right: 180px; }
.f5 { top: 61%; right: 234px; }
.floats-row { position: static; }